자바스크립트 로딩 및 실행 성능 향상_자바스크립트 스킬

Js의 차단성
브라우저에서 Javascript의 성능 문제는 가장 중요한 사용성 문제일 수 있습니다
Js의 차단성 브라우저는 UI 프로세스를 처리하기 위해 단일 프로세스를 사용하며, Js 실행
임베디드든 외부든 페이지가 수정될 수 있으므로 즉시 다운로드하여 실행하세요

페이지 수명주기의 개념
다운로드 시간 및 실행 시간
헤드에 스크립트와 링크 본문이 로드되기 전까지는 아무 것도 출력되지 않으므로 빈 페이지가 표시됩니다

코드 복사 코드는 다음과 같습니다.

스크립트 구성

지연 최소화 목표 time
문제
여러 스크립트 파일을 참조하고 여러 스크립트 태그를 삽입하면각 http 요청은 성능 오버헤드를 가져옵니다링크 바로 다음 스크립트는 오류가 발생하여 CSS가 로드될 때까지 기다립니다. 가장 정확한 묘사를 얻기 위해
결론: 스크립트 태그 수 줄이기
여러 js 파일을 하나로 병합, 패키징 도구
Yahoo의 병합 프로세서


비차단 스크립트

js는 http 요청 처리, 인터페이스 업데이트 등 브라우저의 특정 프로세스를 차단하는 경향이 있습니다. 이는 가장 중요한 성능 문제입니다. 따라서 js 파일의 크기를 줄이고 http 요청 수를 제한해야 합니다
하지만 풍부한 기능과 코드 양 사이에 모순이 있어 단일 파일로 병합하면 브라우저가 오랫동안 잠기게 됩니다. , 따라서 자바스크립트 파일을 점진적으로 로드해야 합니다
핵심 사항: 페이지가 로드된 후 자바스크립트 파일을 로드합니다
1. 스크립트 로드 지연

defer 속성
다운로드할 js 파일이 dom 작업을 수행하지 않는 경우 defer 이 속성은 파일을 병렬로 다운로드할 수 있도록 하여 즉시 실행되지 않지만 onload 이벤트 후에 실행되는 데 적합합니다. 모든 스크립트 태그
2. 동적 로딩 스크립트
함수


코드 복사

코드 function loadScript(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 {
script.onload = function(){
callback();
}


여기서 브라우저 호환성에 주의하세요.
이와 같이 로드해야 할 파일이 여러 개 있으면




코드 복사

코드는 다음과 같습니다.

loadScript('file1.js', function(){ loadScript ('file2.js',function(){ }) })

3.XHR 스크립트 삽입

코드 복사
코드는 다음과 같습니다.

var xhr = new XMLHttpRequest() xhr.open('get ','file1.js',true); xhr.onreadystatechange= function(){ 　if(xhr.readyState == 4) { 　if(xhr.status >= 200 && xhr. status var oScript = document.createElement('script')

oScript.text = xhr.responseText

Document.body.appendChild( oScript);
}
}
}


304는 캐시에서 텍스트를 가져올 때 ajax를 사용함을 나타냅니다. 콘텐츠를 텍스트에 넣기


장점

우수한 호환성, 비동기식, 단점: 도메인 확장이 불가능하고 CDN에서 콘텐츠를 검색할 수 없음