자바스크립트 파일 로딩을 위해 코드를 최적화하는 방법에 대한 자세한 설명

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

BODY 하단에 배치하세요

렌더링 엔진이 DOM 트리를 최대한 빨리 렌더링할 수 있도록 페이지가 DOM 트리를 가져올 수 있도록 바디 하단에 스크립트를 배치해야 합니다. 그러면 DOMContentLoaded 이벤트가 일찍 발생합니다. 그러나 IOS Safari, Android 브라우저 및 IOS webview에서는 js 스크립트를 본문 끝에 넣어도 결과는 여전히 입니다. 동일하므로 js 파일 로딩을 최적화하려면 추가 작업이 필요합니다.

DEFER loading

이는 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 loading

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

• 렌더링 엔진이 파일을 구문 분석합니다(비동기 사용). 스크립트가 로드된 후 브라우저는 문서 구문 분석을 중지하고 JS 엔진에 권한을 부여한 후 로드된 스크립트를 지정합니다.

• 실행 후 브라우저 구문 분석 스크립트를 다시 시작합니다

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

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

• 이때 먼저 로딩을 마친 사람이 먼저 실행됩니다. 따라서 일반적으로 종속 파일은 async를 사용하지 말고 defer를 사용해야 합니다. defer의 호환성은 상대적으로 좋지 않고 IE9+이지만 일반적으로 모바일 단말에서 사용하므로 이러한 문제는 없습니다.

  Script asynchronous

  Script asynchronous는 일부 비동기 로딩 라이브러리(예: 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. async를 사용하는 경우 이전 버전과의 호환성을 위해 끝에 defer를 추가하세요

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

보통 우리가 사용하는 로딩은 defer loading입니다. 그것은 매우 강한 의존성입니다.

위 내용은 자바스크립트 파일 로딩을 위해 코드를 최적화하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!