자바스크립트 파일 로딩 최적화_javascript 기술 배우기

js 엔진 부분에서는 렌더링 엔진이 스크립트 태그를 구문 분석할 때 스크립트가 외부 리소스를 로드하는 경우 다운로드될 때까지 기다려야 한다는 것을 배울 수 있습니다. 처형되다. 따라서 여기에서 우리는 이에 대해 많은 최적화 작업을 수행할 수 있습니다.

BODY 하단에 배치

렌더링 엔진이 DOM 트리를 최대한 빨리 렌더링하기 위해서는 페이지가 흰색 화면에서 최대한 빨리 벗어날 수 있도록 스크립트를 본문 하단에 배치해야 합니다. 하지만 IOS Safari, Android에서는 브라우저와 IOS 웹뷰의 본문 끝에 js 스크립트를 넣어도 결과는 동일하므로 여기서 최적화를 위한 추가 작업이 필요합니다. js 파일 로딩.

로드 연기

이것은 HTML4에 정의된 스크립트 속성으로, 렌더링 엔진이 스크립트를 발견했을 때 스크립트가 외부 리소스를 참조하는 경우 일시적으로 일시 중지되고 로드됨을 나타내는 데 사용됩니다. 렌더링 엔진은 계속해서 다음 HTML 문서를 구문 분석합니다. 구문 분석이 완료되면 스크립트 내의 스크립트가 실행됩니다.

<script src="outside.js" defer></script>

그의 지원은 <=IE9
입니다. 또한 실행 순서는 다음과 같이 엄격하게 종속됩니다.

<script src="outside1.js" defer></script>
<script src="outside2.js" defer></script>

페이지가 구문 분석되면 외부1 및 외부2 파일이 순서대로 실행되기 시작합니다.
IE9 이하에서 defer를 사용하면 두 개가 순차적으로 실행되지 않는 경우가 발생할 수 있습니다. 이를 처리하려면 해킹이 필요합니다. 즉, 둘 사이에 빈 스크립트 태그

를 추가해야 합니다.

<script src="outside1.js" defer></script>
<script></script> //hack
<script src="outside2.js" defer></script>

ASYNC 로딩

async는 H5에서 새로 정의된 스크립트 속성입니다. 또 다른 js 로딩 모드입니다.

• 렌더링 엔진은 스크립트(비동기 사용)를 발견하면 파일을 구문 분석합니다
• 계속해서 나머지 파일을 구문 분석하고 스크립트의 외부 리소스를 병렬로 로드합니다.
• 스크립트가 로드되면 브라우저는 문서 구문 분석을 중지하고 JS 엔진에 권한을 부여한 후 로드된 스크립트를 지정합니다.
• 실행 후 브라우저 구문 분석 스크립트가 복원됩니다.

비동기는 로딩 차단 문제도 해결할 수 있음을 알 수 있습니다. 그러나 async는 비동기적으로 실행되므로 파일 실행 순서가 일치하지 않습니다. 즉,

<script src="outside1.js" async></script>
<script src="outside2.js" async></script>

이때, 먼저 로딩을 마친 사람이 먼저 실행됩니다. 따라서 일반적으로 종속 파일은 async를 사용하지 않고 defer를 사용하는 것이 좋습니다.
defer의 호환성은 상대적으로 좋지 않아 IE9+이지만 일반적으로 모바일 단말에서 사용되기 때문에 이런 문제는 존재하지 않습니다.

스크립트 비동기

스크립트 비동기는 일부 비동기 로딩 라이브러리(예: require)에서 사용되는 기본 로딩 원칙입니다. 코드를 직접 입력하세요.

function asyncAdd(src){
  var script = document.createElement('script');
  script.src = src;
  document.head.appendChild(script);
}
//加载js文件
asyncAdd("test.js");

이때 차단 현상 없이 파일을 비동기적으로 로딩할 수 있습니다.
하지만 이렇게 로드된 js 파일은 순서가 맞지 않아 종속 파일을 정상적으로 로드할 수 없습니다.
이때 위 기능의 최적화가 필요합니다.

var asyncAdd = (function(){
  var head = document.head,
    script;
  return function(src){
    script = document.createElement('script');
    script.src= src;
    script.async=false;
    document.head.appendChild(script);
  }
})();
//加载文件
asyncAdd("first.js");
asyncAdd("second.js");
//或者简便一点
["first.js","second.js"].forEach((src)=>{async(src);});

그러나 스크립트를 사용하여 한 단계로 로드하는 경우 로드를 시작하기 전에 CSS 파일이 로드될 때까지 기다려야 하므로 브라우저의 동시 로드 이점을 충분히 활용할 수 없습니다. 비동기 로드 또는 지연을 위해 정적 텍스트를 사용하면 이 문제가 발생하지 않습니다.

스크립트를 사용하여 비동기식으로 로드하는 경우 로드하기 전에 CSS가 로드될 때까지만 기다릴 수 있습니다
정적 비동기 로딩을 사용하면 CSS와 js가 동시에 로드됩니다

이 세 가지 중 하나를 선택하는 방법은 주로 리더가 우리에게 어떤 목표를 제시하는지 , IE8, 9, 휴대폰, 데스크톱 브라우저와 호환되는지 또는 둘 또는 두 가지의 조합과 호환되는지에 따라 다릅니다. .
하지만 특정 스킬을 단독으로 사용하는 경우에는 팁에 주의해서 사용해야 합니다.

1. js 파일은 본문 끝에 위치해야 합니다
2. 비동기를 사용하는 경우 이전 버전과의 호환성을 위해 끝에 defer를 추가하세요

<script src="test.js" async defer></script> //如果两者都支持，async会默认覆盖掉defer
//如果只支持一个，则执行对应的即可

일반적으로 우리가 사용하는 로드는 강한 종속성으로 인해 로드를 연기합니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.