모든 사람들은 JavaScript가 풀 스택 개발 언어이며 JS는 브라우저, 휴대폰 및 서버 측에서 볼 수 있다는 것을 알고 있습니다. 이 기사는 기본 JS 및 구현 원리에 대한 이해를 향상시키기 위해 효율적인 JavaScript 모범 사례를 공유합니다.
데이터 저장
컴퓨터 징계에는 데이터 저장 위치를 변경하여 최적의 읽기 및 쓰기 성능을 달성하는 전형적인 문제가 있습니다. JavaScript에서 데이터 스토리지의 위치는 코드 성능에 큰 영향을 줄 수 있습니다. {}로 객체를 만들 수 있다면 새 개체를 사용하지 마십시오. []로 배열을 만들 수 있다면 새 배열을 사용하지 마십시오. JS에서 리터럴의 액세스 속도는 물체의 액세스 속도보다 높습니다. 변수가 스코프 체인에 더 깊을수록 액세스에 필요한 관행이 더 길어집니다. 이러한 변수의 경우 로컬 변수를 캐시를 통해 저장하여 스코프 체인에 대한 액세스 수를 줄일 수 있으며 점 표기법 (Object.Name)과 연산자 (Object [Name]) 사이에는 큰 차이가 없습니다. Safari만이 차이가 있으며 포인트는 항상 더 빠릅니다.
주기
JS에는 몇 가지 공통 루프가 있습니다.
for (var i = 0; i <10; i ++) {// do do do do the something} for (var prop in object) {// for loop object} [1,2] .foreach (function (value, index, array) {// function-based loop})의심 할 여지없이, 첫 번째 방법은 성능 소비가 가장 낮고 가장 빠른 속도로 기본입니다. 두 번째로 인한 방법은 반복마다 더 많은 오버 헤드 (로컬 변수)를 생성하며 속도는 첫 번째 유형의 1/7에 불과합니다. 세 번째 방법은 분명히보다 편리한 루프 방법을 제공하지만 속도는 일반 루프의 1/8에 불과합니다. 따라서 프로젝트 상황에 따라 적절한 루프 방법을 선택할 수 있습니다.
이벤트 대표단
페이지의 각 태그에 이벤트를 추가한다고 상상해보십시오. 각 태그에 onclick을 추가합니까? 이 상황은 페이지에 동일한 이벤트 처리에 결합 해야하는 많은 요소가있을 때 성능에 영향을 줄 수 있습니다. 각 바인딩 이벤트는 페이지 또는 실행 중에 부담을 증가시킵니다. 풍부한 프론트 엔드 애플리케이션의 경우 너무 많은 바인딩이 무거운 상호 작용을 가진 페이지에서 너무 많은 메모리를 차지합니다. 간단하고 우아한 방법은 이벤트 대표입니다. 이벤트 기반 워크 플로입니다. 레이어별로 캡처, 대상에 도달하고 레이어별로 버블 업 레이어. 이벤트에 대한 버블 메커니즘이 있으므로 이벤트를 외부 층에 바인딩하여 모든 어린이 요소에서 시작하는 이벤트를 처리 할 수 있습니다.
document.getElementById ( 'content'). onclick = function (e) {e = e || Window.event; var target = e.target || e.srcelement; // 태그가 아닌 경우 (Target.Nodenmae! === 'a') {return} // Console.log (Target.href)의 링크 주소를 인쇄하면 종료합니다.다시 칠하고 재 배열
브라우저가 HTML, CSS 및 JS를 다운로드 한 후 DOM 트리와 렌더링 트리의 두 나무가 생성됩니다. DOM의 너비 및 높이 또는 색상, 위치와 같은 DOM의 기하학적 특성이 변하면 브라우저는 요소의 기하학적 특성을 다시 계산하고 렌더링 트리를 재구성해야합니다. 이 과정을 다시 그리기 및 재 배열이라고합니다.
Bodystyle = Document.body.style; bodystyle.color = 빨간색; bodystyle.height = 1000px; Bodystyke.width = 100%;
위의 방법에서 세 가지 속성을 수정함으로써 브라우저는 세 번 다시 페인트합니다. 경우에 따라이 재 교수를 줄이면 브라우저의 렌더링 성능이 향상 될 수 있습니다. 권장 방법은 다음과 같습니다. 하나의 작업 만 수행하고 세 단계 만 완료됩니다.
Bodystyle = Document.body.style; bodystyle.csstext '색상 : 빨간색; 높이 : 1000px; 너비 : 100%';
자바 스크립트 로딩
IE8, Firefox3.5 및 Chrome2는 모두 JavaScript 파일의 필요한 다운로드를 허용합니다. 따라서 <cript>는 다른 태그 다운로드를 차단하지 않습니다. 불행히도 JS 다운로드 프로세스는 여전히 이미지와 같은 다른 리소스의 다운로드를 차단합니다. 최신 브라우저는 병렬 다운로드를 허용하여 성능을 향상 시키지만 스크립트 차단은 여전히 문제입니다. 따라서 전체 페이지의 렌더링에 미치는 영향을 최소화하고 사용자가 빈 공간을 보지 못하게하기 위해 <bod> 태그 하단에 모든 <cript> 태그를 배치하는 것이 좋습니다.
고성능 JS 파일 배포
다중 <cript> 태그가 페이지 렌더링 속도에 영향을 미친다는 것을 이미 알고 있기 때문에 "페이지 렌더링에 필요한 HTTP를 줄이는 것이 웹 사이트 속도 향상의 전형적인 규칙이라는 것을 이해하기가 어렵지 않습니다. 따라서 제품 환경에서 모든 JS 파일을 병합하면 요청 수가 줄어들어 페이지 렌더링 속도 가속화됩니다. JS 파일을 병합하는 것 외에도 JS 파일을 압축 할 수도 있습니다. 압축은 실행과 관련이없는 파일의 일부를 제거하는 것을 말합니다. 제거 된 컨텐츠에는 공백 문자와 댓글이 포함됩니다. 수정 프로세스는 일반적으로 파일 크기를 반으로 줄일 수 있습니다. 다음과 같은 로컬 변수의 길이를 줄이는 압축 도구도 있습니다.
var myname = "foo" + "bar"; // 압축 후, 그것은 var a = "foobar"가됩니다.
캐시 JS 파일
캐싱 HTTP 구성 요소는 웹 사이트 반품 방문의 사용자 경험을 크게 향상시킬 수 있습니다. 웹 서버는 "HTTP 응답 헤더 만료"를 사용하여 클라이언트에게 리소스가 얼마나 오래 캐시되어야하는지 알려줍니다. 물론 캐시에는 고유 한 결함도 있습니다. 응용 프로그램이 업그레이드되면 사용자가 최신 정적 컨텐츠를 다운로드해야합니다. 이 문제는 정적 리소스의 파일 이름을 변경하여 해결할 수 있습니다. 제품 환경에서 브라우저 참조 JSApplication-2015151123201212.js가 표시 될 수 있습니다. 이는 새 JS 파일을 타임 스탬프에 저장하여 캐시가 업데이트되지 않은 문제를 해결하기위한 것입니다.
요약
물론 효율적인 JS는 개선 될 수있는 이러한 것들에 관한 것이 아닙니다. 성능 손실을 줄이면 JavaScript를 사용하여보다 효율적으로 개발할 수 있습니다.