집 > 기사 > 웹 프론트엔드 > js의 파일 로딩 최적화 관련 문제

js의 파일 로딩 최적화 관련 문제

亚连원래의: 2018-06-13 18:16:061216검색

이제 참고할만한 좋은 js 파일 로딩 최적화(자세한 설명)에 관한 기사를 공유하겠습니다. 모든 분들께 도움이 되기를 바랍니다.

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

BODY 하단에 배치합니다

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

DEFER 로딩

이것은 HTML4에 정의된 스크립트 속성입니다. 참조되면 일시적으로 중단되고 로드됩니다. 렌더링 엔진은 계속해서 다음 HTML 문서를 구문 분석합니다. 구문 분석이 완료되면 스크립트 내의 스크립트가 실행됩니다.

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

그의 지원은 <=IE9입니다.

실행 순서는 엄격하게 종속됩니다. 즉,

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

페이지가 구문 분석된 후 그는 Outside1 및 Outside2 파일을 순서대로 실행하기 시작합니다.

IE9 이하에서 defer를 사용하면 두 가지가 순차적으로 실행되지 않을 수 있습니다. 여기서 이를 처리하려면 해킹이 필요합니다. 즉, 둘 사이에 빈 스크립트 태그를 추가해야 합니다

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

ASYNC loading

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(&#39;script&#39;);
  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(&#39;script&#39;);
    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, 모바일 브라우저, 데스크톱 브라우저 또는 둘의 조합과 호환됩니까?

그러나 특정 스킬이 단독으로 사용되는 시나리오의 경우, 사용 시 몇 가지 팁에 주의해야 합니다.

js 파일은 body의 마지막에 위치해야 합니다

async를 사용하는 경우 이전 버전과의 호환성을 위해 끝에 defer를 추가하세요

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

보통 우리가 사용하는 로드는 (강한 종속성 때문에) defer load입니다.

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

js의 파일 로딩 최적화 관련 문제

관련 기사