JavaScript 로딩 및 실행 속도를 높이는 방법
- 黄舟원래의
- 2016-12-20 15:40:111056검색
JS에는 매우 조용한 차단 기능이 있습니다. 즉, 브라우저가 JS 코드를 실행할 때 코드가 내장되어 있는지 외부에 있는지에 관계없이 동시에 다른 작업을 수행할 수 없습니다.
브라우저가 외부 JS 파일을 소개하는 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그를 발견하면 해당 파일을 다운로드하고 구문 분석하고 실행하는 모든 작업을 중지합니다. 이 과정에서 페이지 렌더링과 사용자 상호 작용이 완전히 차단됩니다. 페이지 로딩 중 일시 중지나 빈 페이지 표시를 방지하려면 JS 스크립트를 가능한 한 페이지 하단에 배치해야 합니다.
<html> <head> <title>无标题文档</title> <link rel="stylesheet" type="text/<a href="http://www.php1.cn/category/72.html">css</a>" href="http://www.php1.cn/"> </head> <body> <p>页面的内容。。。</p> <!-- 推荐的位置，页面底部： --> <script type="text/javascript" src="file1.js"></script> <script type="text/javascript" src="file2.js"></script> <script type="text/javascript" src="file3.js"></script> </body> </html>
위의 차단 상황에서는 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그의 발생 횟수를 최대한 줄여야 합니다. 페이지의 외부 링크 스크립트 수를 줄여야 합니다.
여러 JS 파일을 수동으로 병합하거나 Yahoo! 콤보 핸들러와 같은 실시간 온라인 서비스를 사용하여 이를 수행할 수 있습니다. 예를 들어 아래의 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그는 실제로 3개의 JS 파일을 로드합니다.
<html> <head> <title>无标题文档</title> <link rel="stylesheet" type="text/<a href="http://www.php1.cn/category/72.html">css</a>" href="http://www.php1.cn/"> </head> <body> <p>页面的内容。。。</p> <!-- 推荐的位置，页面底部： --> <script type="text/javascript" src="http://yui.yahooapis.com/combo?file1.js&file2.js&file3.js"></script> </body> </html>
차단 상황을 방지하기 위해 JS 스크립트 병렬 다운로드를 위한 몇 가지 솔루션이 있습니다.
1. 지연된 스크립트
HTML4는 이 코드의 실행을 지연시킬 수 있는 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그에 대한 지연 속성을 정의합니다. 그러나 이 속성은 IE4+ 및 Firefox 3.5에서만 지원됩니다. +. defer 속성을 선언하는 3f1c4e4b6b16bbbd69b2ee476dc4f83a는 DOM 로딩이 완료되고 window.onload 이벤트가 트리거되기 전에 구문 분석되고 실행됩니다.
<script type="text/javascript" src="file1.js" defer></script>
2. 이것이 가장 일반적인 해결책은 DOM을 통해 3f1c4e4b6b16bbbd69b2ee476dc4f83a 요소를 동적으로 생성하여 문서에 삽입하는 것입니다. 요소가 페이지에 추가되면 파일이 다운로드되기 시작하므로 다운로드가 언제 시작되더라도 파일의 다운로드 및 실행 프로세스는 다른 페이지를 차단하지 않습니다.
단, 이렇게 로드된 코드는 즉시 실행되므로 각 파일의 역할과 합리적인 실행 순서를 명확히 이해해야 하며, 이때 추적 및 확인이 필요합니다. 예, IE가 아닌 브라우저는 3f1c4e4b6b16bbbd69b2ee476dc4f83a 요소가 수신될 때 로드 이벤트를 트리거하는 반면 IE는 ReadyStatechange 이벤트를 트리거하고 ReadyState 속성을 통해 이를 판단합니다. 다음은 JS 스크립트를 동적으로 로드하는 기능과 호환되는 함수입니다.
이 함수를 load_script.js 파일에 저장한 후 여러 스크립트를 로드하려는 경우 이 함수를 사용하여 다른 스크립트를 로드할 수 있습니다. 올바른 로딩 순서를 보장하기 위해 앞서 언급한 대로 load_script() 실행을 연결하여 최종적으로 페이지 하단에 배치할 수 있습니다. 이것이 완벽한 솔루션입니다.function load_script(url, callback) {
var script = document.createElement('script');
script.type = 'text/javascript';
if (script.readyState) { //IE
script.onreadystatechange = function() {
if (script.readyState == 'loaded' || script.readyState == 'complete') {
script.onreadystatechange = null;
callback();
}
}
} else { //others
script.onload = function() {
callback();
}
}
script.src = url;
document.getElementsByTagName('head')[0].appendChild(script);
} 3. XMLHttpRequest 스크립트 삽입 <script type="text/javascript" src="load_script.js"></script>
<script type="text/javascript">
load_script('file1.js', function() {
load_script('file2.js', function() {
load_script('file3.js', function() {
//全部载入后的操作...
} );
} );
} );
</script>은 AJAX를 통한 로딩을 의미합니다. 그러나 이 방법은 크로스 도메인 로딩을 달성할 수 없으며 대규모 웹사이트에는 적합하지 않습니다.
물론 위에서 우리가 수행한 작업은 훌륭한 사람들에 의해 완료되었으며 일부 우수한 JS 라이브러리는 우리가 사용할 수 있도록 작성되었으며 모두 JS 스크립트의 차단 문제를 해결하고 병렬성을 달성할 수 있습니다. 다운로드(예: YUI3, LazyLoad, LABjs 등)
위 내용은 자바스크립트 로딩 및 실행 속도를 높이는 방법입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!