고성능 JavaScript 템플릿 엔진_javascript 기술의 구현 원리에 대한 자세한 설명

웹이 발전하면서 프론트엔드 애플리케이션이 점점 더 복잡해지고, 백엔드 기반의 자바스크립트(Node.js)도 등장하기 시작하면서 자바스크립트에 대한 기대가 더욱 커졌습니다. , 그리고 동시에 자바스크립트 MVC 아이디어도 인기를 끌기 시작했습니다. 데이터와 인터페이스의 분리에서 가장 중요한 부분으로 자바스크립트 템플릿 엔진은 개발자들로부터 점점 더 많은 관심을 받고 있으며, 지난 1년 동안 오픈 소스 커뮤니티에서 활발하게 사용되었습니다. 웨이보, 텐센트QQ존, 텐센트웨이보 등 대형 웹사이트에서 볼 수 있다.

이 기사에서는 가장 간단한 예제 코드를 사용하여 차세대 자바스크립트 템플릿 엔진 artTemplate의 기능 구현 원리를 포함하여 기존 자바스크립트 템플릿 엔진의 원리를 설명합니다.

artTemplate 소개

artTemplate은 차세대 자바스크립트 템플릿 엔진으로, 사전 컴파일을 사용하여 성능의 질적 도약을 달성하고 자바스크립트 엔진의 특성을 최대한 활용하여 프런트엔드와 백엔드 모두에서 매우 뛰어난 성능을 달성합니다. . 크롬에서의 렌더링 효율 테스트에서는 잘 알려진 엔진인 Mustache와 micro tmpl에 비해 각각 25배, 32배나 높았습니다.

성능상의 이점 외에도 디버깅 기능도 언급할 가치가 있습니다. 템플릿 디버거는 렌더링 오류를 일으킨 템플릿 문을 정확하게 찾을 수 있어 템플릿 작성 과정에서 디버깅할 수 없는 고통을 해결하고, 개발을 더욱 효율적으로 만들고, 단일 템플릿 오류로 인한 전체 애플리케이션 충돌을 방지합니다.

artTemplate 이 모든 것이 1.7kb(gzip)에 담겨 있습니다!

자바스크립트 템플릿 엔진의 기본원리

각 엔진마다 템플릿 구문, 구문 분석, 변수 할당, 문자열 접합 등 구현 방법이 다르지만 핵심 렌더링 원칙은 여전히 ​​자바스크립트 문자열의 동적 실행입니다.

자바스크립트 문자열의 동적 실행과 관련하여 이 문서에서는 템플릿 코드를 예로 사용합니다.

""가 closeTag(논리문 닫는 태그)인 매우 간단한 템플릿 작성 방법입니다. openTag 뒤에 "="가 오면 변수의 내용이 출력됩니다.

HTML 문과 변수 출력 문이 직접 출력되며 구문 분석된 문자열은 유사합니다.

구문 분석이 완료되면 일반적으로 렌더링 방법이 반환됩니다.

렌더링 테스트:

위의 render 메소드에서 템플릿 변수 할당은 with 문을 사용하고, string splicing은 array push 메소드를 사용하여 IE6, 7에서 성능을 향상시켰습니다. jQuery 작성자인 john이 개발한 마이크로 템플릿 엔진 tmpl이 대표적인 예입니다. 이 방법은 http://ejohn.org/blog/javascript-micro-templating/

을 참조하세요.

원리 구현을 보면 기존 자바스크립트 템플릿 엔진에서 해결해야 할 두 가지 문제가 있음을 알 수 있습니다.

1. 성능: 템플릿 엔진은 렌더링 시 Function 생성자를 사용합니다. eval, setTimeout, setInterval과 같은 함수는 텍스트를 사용하여 JavaScript 구문 분석 엔진에 액세스하는 방법을 제공하지만 이러한 방식으로 JavaScript를 실행하는 성능은 떨어집니다. 매우 낮습니다.

2. 디버깅: 동적 실행 문자열이므로 오류가 발생하면 디버거가 오류 소스를 캡처할 수 없으므로 템플릿 BUG 디버깅이 매우 고통스럽습니다. 내결함성이 없는 엔진에서는 로컬 템플릿으로 인해 데이터 이상으로 인해 전체 애플리케이션이 중단될 수도 있습니다. 템플릿 수가 늘어나면 유지 관리 비용도 급격히 늘어납니다.

artTemplate의 효율성 비결

1. 사전 편집

위의 템플릿 엔진 구현 원칙에서 템플릿 변수에 값을 할당해야 하기 때문에 각 렌더링에는 변수 할당을 완료하기 위해 자바스크립트 문자열의 동적 컴파일이 필요합니다. 그러나 artTemplate의 컴파일 및 할당 프로세스는 렌더링 전에 완료됩니다. 이 방법을 "사전 컴파일"이라고 합니다. artTemplate 템플릿 컴파일러는 몇 가지 간단한 규칙에 따라 모든 템플릿 변수를 추출하고 렌더링 함수의 헤드에 선언합니다. 이 함수는

과 유사합니다.

자동으로 생성되는 이 함수는 마치 손으로 작성한 자바스크립트 함수와 같습니다. 동일한 실행 횟수로 CPU 사용량과 메모리 사용량이 모두 크게 줄어들고 성능은 한계에 가까워집니다.

artTemplate의 많은 기능은 샌드박스 사양 및 사용자 정의 구문과 같은 사전 컴파일된 구현을 기반으로 한다는 점을 언급할 가치가 있습니다.

2. 더 빠른 문자열 추가 방법

많은 사람들은 문자열을 연결하는 배열 푸시 방법이 =보다 빠르다고 잘못 생각합니다. 이는 IE6-8 브라우저에서만 가능하다는 점을 알아야 합니다. 실제 측정에 따르면 최신 브라우저에서 =를 사용하는 것이 배열 푸시 방법보다 빠르며, v8 엔진에서는 =를 사용하는 것이 배열 접합보다 4.7배 빠릅니다. 따라서 artTemplate은 자바스크립트 엔진의 특성에 따라 두 가지 다른 문자열 접합 방법을 사용합니다.

artTemplate 디버그 모드 원리

프런트 엔드 템플릿 엔진은 백엔드 템플릿 엔진과 달리 동적으로 구문 분석되므로 디버거가 오류 줄 번호를 찾을 수 없으며 artTemplate은 템플릿 디버거가 템플릿을 정확하게 찾을 수 있도록 영리한 방법을 사용합니다. 다음과 같이 렌더링 오류를 일으킨 명령문:

artTemplate은 두 가지 유형의 오류 캡처를 지원합니다. 하나는 렌더링 오류(Render Error)와 컴파일 오류(Syntax Error)입니다.

1. 렌더링 오류

렌더링 오류는 일반적으로 템플릿 데이터 오류나 변수 오류로 인해 발생합니다. 렌더링 중 오류가 발생한 경우에만 디버그 모드로 들어가 일반적인 템플릿 실행 효율성에 영향을 주지 않고 템플릿을 다시 컴파일합니다. 템플릿 컴파일러는 템플릿 개행 문자에 따라 줄 번호를 기록하며 컴파일된 함수는 비슷합니다.

실행 중 오류가 발생하면 예외 템플릿에 해당하는 라인 번호가 즉시 발생합니다. 그러면 템플릿 디버거는 라인 번호를 기반으로 템플릿에 해당하는 명령문을 확인하고 이를 콘솔에 출력합니다.

2. 컴파일 오류

컴파일 오류는 일반적으로 정규화되지 않은 중첩, 알 수 없는 구문 등과 같은 템플릿 구문 오류입니다. artTemplate은 완전한 어휘 분석을 수행하지 않기 때문에 오류 소스의 위치를 ​​확인할 수 없으며 개발자가 판단할 수 있도록 오류 메시지의 원본 텍스트와 소스 코드만 출력할 수 있습니다.