Node.js 성능 최적화 JavaScript 페이지를 더 빠르게 로드하는 방법
- 高洛峰원래의
- 2017-02-04 13:16:50915검색
코드는 최대한 간결해야 합니다
모든 일을 JavaScript에 의존하지 마세요. 반복적인 스크립트를 작성하지 마세요. JavaScript를 단지 미화를 위한 캔디 도구로 생각하십시오. 웹사이트에 JavaScript 코드를 많이 추가하지 마세요. 필요한 경우에만 사용하십시오. 사용자 경험을 실제로 향상시킬 수 있는 경우에만 사용하십시오.
DOM 액세스 최소화
JavaScript를 사용하여 DOM 요소에 액세스하는 것은 쉽고 코드 읽기도 쉽지만 속도가 느립니다. 다음은 몇 가지 핵심 사항입니다. 웹 페이지 레이아웃을 수정하기 위해 JavaScript 사용을 제한하고 액세스된 요소에 대한 참조를 캐시합니다. 때로는 사이트가 광범위한 DOM 수정에 의존하는 경우 마크업을 제한하는 것을 고려해야 합니다. 이것이 HTML5로 전환하고 이전 XHTML과 HTML4를 포기하는 좋은 이유입니다. Firebug 플러그인 콘솔에 document.getElementsByTagName('*').length를 입력하여 DOM 요소 수를 확인할 수 있습니다.
압축 코드
압축된 JavaScript 페이지를 제공하기 위한 가장 효과적인 방법은 먼저 JavaScript 압축 도구를 사용하여 코드를 압축하는 것입니다. 이 압축 도구는 결과 코드를 압축할 수 있습니다. 그런 다음 gzip 압축을 사용하여 제공됩니다.
네, main.js를 압축하지 않았습니다. 하지만 압축되지 않은 jQuery 플러그인이 있는지 확인하고 압축하는 것을 잊지 마세요. 아래에는 압축에 대한 몇 가지 옵션이 나열되어 있습니다.
◆ YUI 압축 도구(jQuery 개발팀에서 사용), 초보자 가이드
(http://www.slideshare.net/nzakas/extreme-JavaScript-compression-with-yui - 압축기), 두 번째 가이드(http://vilimpoc.org/research/js-speedup/) 및 공식 웹사이트(http://developer.yahoo.com/yui/compressor/)를 참조하세요.
◆ 딘 에드워즈 패커(http://dean.edwards.name/packer/)
◆ JSMin(http://crockford.com/JavaScript/jsmin)
GZip 압축: 그 뒤에 있는 아이디어는 브라우저와 서버 간에 데이터를 전송하는 데 걸리는 시간을 줄이는 것입니다. 시간을 단축하면 Accept-Encoding: gzip,deflate라는 제목의 파일이 생성됩니다. 그러나 이 압축 방법에는 몇 가지 단점이 있습니다. 이는 서버측과 클라이언트측 모두(압축 및 압축 해제를 위해)의 프로세서 리소스와 디스크 공간을 차지합니다.
eval()을 피하세요: 때때로 eval()을 사용하면 시간 측면에서 어느 정도 효율성을 얻을 수 있지만 이를 사용하는 것은 확실히 잘못된 접근 방식입니다. eval()을 사용하면 코드가 지저분해 보이고 대부분의 압축 도구에서 압축을 피할 수 있습니다.
JavaScript 로딩 속도를 높이는 도구: Lab.js
JavaScript 로딩 속도를 높이는 훌륭한 도구가 많이 있습니다. 언급할 가치가 있는 도구 중 하나는 Lab.js입니다.
LAB.js(Loading and Blocking JavaScript)를 사용하면 JavaScript 파일을 병렬로 로드하여 전체 로딩 프로세스 속도를 높일 수 있습니다. 또한 로드해야 하는 스크립트에 대해 특정 순서를 설정할 수 있으므로 종속성의 무결성이 보장됩니다. 또한 개발자는 웹 사이트에서 속도가 2배 향상되었다고 주장합니다.
적절한 CDN 사용
이제 많은 웹페이지가 CDN(콘텐츠 전송 네트워크)을 사용합니다. 누구나 사용할 수 있으므로 캐싱 메커니즘이 향상됩니다. 또한 대역폭도 절약됩니다. 쉽게 핑하거나 Firebug를 사용하여 해당 서버를 디버깅하여 데이터 속도를 높일 수 있는 위치를 파악할 수 있습니다. CDN을 선택할 때 웹사이트 방문자의 위치를 고려하세요. 가능하면 공개 저장소를 사용하는 것을 잊지 마세요.
jQuery용 여러 CDN 솔루션:
◆ http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js——Google Ajax, 참조 더 많은 라이브러리에 대한 정보를 보려면 http://code.google.com/apis/libraries/devguide.html#Libraries를 참조하세요.
◆ http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js——Microsoft의 CDN
•http://code.jquery com. /jquery-1.4.2.min.js - Edgecast(mt).
페이지 끝 부분에 JavaScript 로드
인터넷 연결 속도가 느려서 페이지를 떠나지 않은 사용자에게 초점을 맞추는 경우 매우 좋은 방법입니다. 사용 편의성과 사용자가 먼저이고 JavaScript가 마지막입니다. 이는 고통스러울 수 있지만 일부 사용자가 JavaScript를 비활성화한다는 사실에 대비해야 합니다. 로드해야 하는 헤더에 일부 JavaScript를 넣을 수 있지만 비동기적으로 로드되는 경우에만 가능합니다.
추적 코드를 비동기식으로 로드
이는 매우 중요합니다. 우리 대부분은 통계를 얻기 위해 Google Analytics를 사용합니다. 이것은 좋다. 이제 추적 코드를 어디에 입력했는지 살펴보세요. 헤더에 있습니까? 아니면 document.write를 사용하고 있습니까? 그렇다면 Google Analytics를 사용하여 코드를 비동기적으로 추적하지 않는다면 책임은 전적으로 귀하 자신에게 있습니다.
Google Analytics 비동기 추적 코드는 다음과 같습니다. 우리는 document.write를 사용하는 대신 DOM을 사용한다는 점을 인정해야 하며, 이는 사용자에게 더 적합할 수 있습니다. 웹페이지가 로드되기 전에 이러한 이벤트 중 일부를 감지할 수 있으며 이는 매우 중요합니다. 이제 이 상황을 생각해 보세요. 페이지가 로드되지도 않았고 모든 사용자가 페이지를 닫았습니다. 누락된 페이지 조회수
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXX-XX']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/JavaScript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();에 대한 해결책을 찾았습니다. Google Analytics를 사용하지 않으시나요? 문제가 되지 않습니다. 오늘날 대부분의 분석 제공업체에서는 비동기 추적 사용을 허용합니다.
Ajax 최적화
Ajax 요청은 웹사이트 성능에 상당한 영향을 미칩니다. 아래에서는 Ajax 최적화에 대한 몇 가지 핵심 사항을 소개합니다.
Ajax 캐시
먼저 코드를 살펴보세요. Ajax는 캐시 가능합니까? 예, 데이터에 의존하지만 대부분의 Ajax 요청은 캐시 가능해야 합니다. jQuery에서는 스크립트 및 jsonp 데이터 유형을 제외하고 요청이 기본적으로 캐시됩니다.
Ajax 요청에 GET 사용
POST 유형 요청은 두 개의 TCP 패킷을 보내야 합니다(먼저 헤더를 보낸 다음 데이터를 보냅니다). GET 유형 요청은 하나의 패킷만 보내면 됩니다(이는 보유한 쿠키 수에 따라 달라질 수 있음). 따라서 URL 길이가 2K 미만이고 일부 데이터를 요청하려는 경우 GET을 사용할 수도 있습니다.
ySlow 사용
성능 측면에서 ySlow는 간단하면서도 매우 효과적입니다. 웹 사이트에 점수를 매겨 수정이 필요한 영역과 집중해야 할 영역을 표시합니다.
또 다른 요령: JavaScript를 PNG 파일로 패키징합니다.
상상해 보세요. JS와 CSS를 이미지 끝에 추가한 다음 CSS를 사용하여 HTTP 요청을 통해 이미지를 자릅니다. 신청서에 필요한 모든 정보.
최근에 이 방법을 찾았어요. 기본적으로 JavaScript/css 데이터를 PNG 파일로 압축합니다. 그런 다음 압축을 풀고 캔버스 API의 getImageData()를 사용하면 됩니다. 게다가 매우 효율적입니다. 데이터를 축소하지 않고도 약 35% 더 압축할 수 있습니다. 그리고 이는 무손실 압축입니다. 더 큰 스크립트의 경우 이미지가 캔버스를 가리키고 픽셀을 읽는 동안 "약간의" 로딩 시간이 있다는 것을 느낄 것입니다.
더 많은 js 성능 최적화를 위해 JavaScript 페이지를 더 빠르게 로드하는 방법에 대한 관련 기사가 있는 PHP 중국어 웹사이트에 주목하세요!