Javascript 로딩 분석

不言원래의: 2018-07-11 10:36:511248검색

이 글은 주로 참고할만한 가치가 있는 자바스크립트 로딩 분석을 소개합니다. 이제 필요한 친구들이 참고할 수 있도록 하겠습니다.

1. loading

(1) 동기 로딩

웹 페이지에서 브라우저가 js 파일을 로드하는 방식은 fde7079e9b76cc0616f20e0244c13586 아래와 같이

//内嵌脚本
<script type="text/javacript">    
// code here!
</script>
//加载外部脚本
<script type="text/javascript src="path/demo.js"></script>

3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그만 추가하면 브라우저가 읽고 실행할 수 있지만 읽을 때는 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그를 따릅니다. 나타나는 순서대로 Javascript 파일을 읽고 즉시 실행합니다. 따라서 여러 파일이 서로 의존하는 경우 종속성이 가장 작은 파일이 맨 앞에 배치되고 종속성이 가장 큰 파일이 맨 앞에 배치되어야 합니다. 그렇지 않으면 코드가 오류를 보고할 것입니다. 부트스트랩을 사용할 때 모든 사람이 이에 대해 깊이 이해하고 있다고 생각합니다. 반면, 브라우저는 동기 모드에서 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그를 로드합니다. 즉, 페이지는 후속 코드를 실행하기 전에 JavaScript 파일이 로드될 때까지 기다립니다. 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그가 많으면 브라우저가 동시에 읽을 수 없습니다. 따라서 하나씩 읽어야 하므로 읽는 시간이 크게 늘어나고 페이지 응답이 느려지며 사용자 경험이 저하됩니다. 체하는. 차단 모드라고도 알려진 동기 모드는 브라우저의 후속 처리를 방지하고 후속 구문 분석을 중지합니다. 현재 로드가 완료된 경우에만 다음 단계를 수행할 수 있으므로 기본적으로 동기 실행이 안전합니다. 하지만 js에서 문서 내용 출력, DOM 수정, 리디렉션 등의 동작이 있으면 차단이 발생합니다. 따라서 일반적으로 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그를 6c04bd5ca3fcae76e30b72ad730ca86d 끝에 배치하여 페이지 차단을 줄이는 것이 좋습니다.

(2) 비동기 로딩

이 문제를 해결하기 위해 ES5에서는 DOM 방식을 사용하는데, 동적으로 로딩됩니다. JavaScript 스크립트 파일.

function loadScript(url) {    
var script = document.createElement("script");
    script.type="text/javascript";
    script.src=url;
    document.body.appendChild(script);
}

이 메소드는 새로운 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그를 생성하고 해당 src 속성을 설정하여 비동기적으로 javacript 파일을 읽습니다.

이로 인해 페이지가 차단되지는 않지만 다른 문제가 발생합니다. 다른 스크립트 파일이 이에 의존하는 경우 이 스크립트가 로드될 것이라는 보장이 없습니다.

또 다른 로딩 방법은 defer 및 async 속성을 사용하여 스크립트를 비동기적으로 로드하는 것입니다. 렌더링 엔진이 이 명령줄을 발견하면 외부 스크립트 다운로드를 시작하지만 다운로드 및 실행될 때까지 기다리지 않고 다음 명령을 직접 실행합니다. defer와 async의 차이점은 다음과 같습니다. defer는 전체 페이지가 메모리에서 정상적으로 렌더링될 때까지 실행되지 않습니다(DOM 구조가 완전히 생성되고 다른 스크립트가 비동기로 실행되면 다운로드가 완료됨). 렌더링 엔진이 렌더링을 중단합니다. 나중에 이 스크립트를 실행하고 렌더링을 계속하세요. 즉, defer는 렌더링 후에 실행되고, async는 다운로드 후에 실행됩니다. 또한 defer 스크립트가 여러 개인 경우 페이지에 나타나는 순서대로 로드되지만 비동기 스크립트가 여러 개 있으면 로드 순서를 보장할 수 없습니다.

IE9 이하 버전에서는 지연 구현에 꽤 나쁜 버그가 있어 실행 순서가 보장되지 않습니다.

9a9097c5776e07f54236d5cd1dc435ae2cacc6d41bbb37262a98f745aa00fbf0
27893951ee31aa4ab68c289425ee4a992cacc6d41bbb37262a98f745aa00fbf0

연기와 비동기를 선택하는 방법. 사용된 스크립트가 모듈이고 다른 스크립트 파일에 의존하지 않는 경우 async를 사용하고, 스크립트가 다른 스크립트에 의존하거나 다른 스크립트에 의존하는 경우 스크립트 파일이 작고 비동기 스크립트에 의존하는 경우 defer를 사용합니다. , 내부 Embed 스크립트를 사용하면 이 파일이 모든 비동기 스크립트 앞에 배치됩니다.

또 다른 방법은 onload 이벤트를 비동기적으로 로드하는 것입니다.

(function(){
    if(window.attachEvent) {
        window.attachEvent("load", asyncLoad);
    } else if(window.addEventListener) {
        window.addEventListener("load", asyncLoad);
    } else {        window.onload = asyncLoad;    }  
    var asyncLoad = function() {
        var script = document.createElement("script");
        script.type="text/javascript";
        script.async = true;
        script.src = (&#39;https:&#39;==document.location.protocol ? &#39;https://ssl&#39; :  &#39;http:www&#39;) + &#39;.baidu.com/demo.js&#39;;
        var s = document.getElementsByTagName(&#39;script&#39;)[0];
        s.parentNode.insertBefore(script, s);
    };
)();

이 방법은 스크립트 삽입 방법을 함수에 넣은 후, 윈도우의 onload 메서드에서 실행하는 방법으로 onload 이벤트의 트리거링을 차단하는 문제를 해결합니다. .

Javascript의 동적 특성으로 인해 비동기 로딩 방법이 많이 있습니다: XHR 주입, XHR 평가, Script In Iframe, document.write("