여기 JS 코드 최적화는 약간의 트릭이되어있어, 외부 JS 파일의 도입은 동적 페이지 로딩 속도를 개선하기 위해로드
-
[기본 최적화]
필요한 모든 <스크립트> 태그는 이것이 우리가 모든 것을 알고, 혼잡 문제가 발생하지 않고 페이지 전에 완료 페이지 렌더링 스크립트 실행을 보장하기 위해, 전에 </ BODY>에 배치됩니다.
-
병용 JS 코드, 이용 가능한 적게 스크립트 태그 등]
가장 일반적인 방법은 페이지 만 가져 오려면 <script> </ script> 태그를 한 번 사용 그래서, 파일에 JS 코드입니다
-
[JS]에는 플러그 무부하
스크립트 태그는 비동기 속성을 증가시킴으로써 달성 또는 연기 속성 수
<스크립트 SRC = "file.js" 연기 > </ script>
참고 :
비동기 와 연기의 차이가 비동기 부하가 자동으로 완료 후 스크립트를 실행 연기 완성 로딩 페이지를 기다릴 필요도 코드를 실행합니다 완성 된로드를 가지고
-
[동적 부하에 스크립트를 생성 - 추천]
함수 loadJS (URL 콜백) {
VAR 스크립트 = document.createElement ( '스크립트'),
FN = 콜백 || 함수(){};
script.type = '텍스트 / 자바 스크립트';
// IE
경우 (script.readyState) {
script.onreadystatechange = 함수 () {
(script.readyState ==는 '로드'|| script.readyState == '완료') 경우 {
script.onreadystatechange = NULL;
FN ();
}
};
}그밖에{
// 다른 브라우저
script.onload = 함수 () {
FN ();
};
}
script.src = URL;
document.getElementsByTagName ( "헤드") [0] .appendChild (스크립트);
}
// 사용
loadJS ( 'file.js'함수 () {
경고 (1);
});
-
구글 영업 실적 브라우저, 스크립트는 머리에 동적으로 생성된다
-
라이브러리 패키지는 개별적으로 실행할 수 있습니다 제안합니다.
원칙의 실현, 많은 좋은 JS 라이브러리 등, 사용할 수있다 LazyLoad.js 부하 JS 동기화되는 네트워크에서 볼 수있는 브라우저를 열고, 배열의 도입을 지원,
-
[XHR로드]
아약스로드를 사용하는 방법
코드 :
var에 XHR 새로운 XMLHttpRequest의 =;
xhr.open ( 'file.js'사실 '수');
xhr.onreadystatechange = 함수 () {
경우 (xhr.readyState == 4) {
경우 (xhr.status> = 200 && xhr.status <300 || xhr.status == 304) {
var script = document.createElement('script');
script.type = 'text/javascript';
script.text = xhr.responseText;
document.body.appendChild(script);
}
}
};
xhr.send(null);
-
【总结】
最好的方式还是使用动态创建script的方式加载，当动态创建script，浏览器会分配一个线程去下载src指向的资源，多个script也是同步下载的