JavaScript 로딩 지연

JavaScript 로딩 연기에 관한 몇 가지 기사를 읽었으며 매우 흥미 롭습니다. 로드 및 실행 가능한 JavaScript의 양이 제한적인 모바일 플랫폼에서 유용 할 수있는 웹 앱의 경우 매우 유망한 것으로 보입니다.JavaScript 로딩 지연

불행히도, 대부분의 기사는 이것에 대해 매우 높은 수준에서 이야기합니다. 어떻게 접근 할 것인가?

편집

일반적으로, 모든 자바 스크립트가 페이지로드로드, 그러나, 특정 행동이 어떤 시간에, 자바 스크립트를로드 할 수 있어야 발생할 때까지 필요하지 않은 기능이있을 수 있습니다. 이렇게하면 페이지로드시 브라우저의 부담을 덜어줍니다.

특히 JavaScript를 많이 사용하는 페이지가 있습니다. 휴대 전화에서 페이지를로드하면 제대로로드되지 않습니다. 페이지를 디버깅 할 때 일부 JS 함수가 제거되었습니다. 일단 충분하게 제거되면 페이지가 갑자기 작동합니다.

필요에 따라 JS를로드하고 싶습니다. 그리고 시동에 단순히 사용되는 기능을 제거 할 수도 있습니다.

출처

2011-09-01 steveo225

자바 스크립트 코드 실행로드 또는 브라우저에서 js 파일 로딩을 지연 시키려고하십니까? 이전 jquery.ready 함수가 원하는대로 할 수 있다면 – Eonasdan

기본 사항은 간단합니다. JavaScript 코드를 논리적으로 분리 된 구성 요소로 분해하고 필요한 항목 만로드하면됩니다. 당신이 사용할 수있는 구축 작업에 따라 :

로더 (자체 또는 yepnope.js)

Modernizr.load
LABjs
Many, many, many 다른 이연로드 라이브러리를.(또한 로더입니다)

종속성 관리자 :

Require.js
dojo.require
JavaScript MVC's steal.js
다른 몇몇 의존성 관리 라이브러리.

이러한 도구는 다양한 기술의 사용은 당신이 구축에 따라 달라집니다 필요한 것 등, 스크립트의 로딩, 스크립트의 실행을 연기 종속성을 관리 할 수 있습니다.

this discussion을 통해이 기법을 사용하는 데 대한 장단점에 대해 더 자세히 알고 싶을 수도 있습니다.

응답 편집 : 정말 언로드 이미로드 한 자바 스크립트에 좋은 방법이 아니다

- 당신이 얻을 수있는 가장 가까운 근사치가 로딩 모든 코드를 유지하는 것입니다 네임 스페이스를 응용 프로그램의 네임 스페이스에 배치 한 다음 해당 네임 스페이스를 설정하여 "정리"하고 모든 참조는 null입니다.

출처

2011-09-01 14:56:52

AMD 또는 commonJS 접근 방식 (requirejs 및 backdraft는 AMD 사용)을 사용하면로드 된 JS는 로컬 변수에 바인딩됩니다.코드가 범위를 벗어나면 참조를 보관하지 않는 한 가비지 수집이 이루어 지므로 코드 구조로 인해 패키지 유지 방법을 관리 할 수 있습니다. – peller

이 의견은 약간 오도 된 내용이므로 명확히 할 것이라고 생각했습니다. CommonJS와 AMD는 코드 쓰레기 수집을 돕기 위해 특별한 조치를 취하지 않습니다. 고작 AMD의 콜백 함수는 클로저이므로 모든 변수는 _potential_ 가비지 콜렉션의 클로저로 범위가 지정됩니다 (클로저의 함수 호출 컨텍스트를 보유하고있는 함수를 노출하지 않았다고 가정 할 때). 대부분의 사람들과 마찬가지로 IIFE는 코드에서 수행합니다 .IIFE는 (function() {... your code here ...}()); –

언제 로딩 지연? 일반적으로 JS가 마지막으로로드되는 이유는 전체 DOM이 먼저로드되기 때문입니다.

쉬운 방법은 너무 쉽게 모든 JS를로드 할 doSomething() 기능을 가질 수

<body onload="doSomething();">

을 사용하는 것입니다.

이 같은 jQuery 및 Dojo을 JS의 librarys를 사용하는 경우도, 또한

window.onload = function(){ };

처럼 window.onload에 기능을 추가 할 수 있습니다

, 그들은 각각 순서대로 자신의 onReady 및 addOnLoad 방법을 문서가 이미로드 된 후에 만 일부 JS를 실행합니다.

출처

2011-09-01 14:56:12 Layke

여기 스크립트 요소의 defer 및 async 속성에 a useful article이 있습니다. 이러한 속성을 지정하면 브라우저가 여러 가지 방법으로로드를 지연하게됩니다. 페이지로드 후 JavaScript를 사용하여 외부 스크립트로로드 할 수도 있습니다.

HTML 문서 내의 스크립트 요소 위치가 defer 또는 async가 지정되지 않은 경우로드 및 실행 순서를 결정한다는 점에 유의해야합니다.

출처

2011-09-01 14:57:42 Spycho

필자는 간단한 수정을 통해 온라인으로 발행 된 간단한 스크립트를 사용했습니다. COMPRESSED Javascript 파일이 웹 서버의 캐시 디렉토리에 있고이 압축 된 js 파일의로드를 지연한다고 가정합니다.

압축 된 JS 파일 :

(function() { 

    /* 
    * http://gtmetrix.com/ 
    * In order to load a page, the browser must parse the contents of all <script> tags, 
    * which adds additional time to the page load. By minimizing the amount of JavaScript needed to render the page, 
    * and deferring parsing of unneeded JavaScript until it needs to be executed, 
    * you can reduce the initial load time of your page. 
    */ 

    // http://feather.elektrum.org/book/src.html 
    // Get the script tag from the html 
    var scripts = document.getElementsByTagName('script'); 
    var myScript = scripts[ scripts.length - 1 ]; 

    // Get the querystring 
    var queryString = myScript.src.replace(/^[^\?]+\??/,''); 

    // Parse the parameters 
    var params = parseQuery(queryString); 

    var s = document.createElement('script'); 
    s.type = 'text/javascript'; 
    s.async = true; 
    s.src = '/cache/' + params.cache; // Add the name of the js file 

    var x = document.getElementsByTagName('script')[0]; 
    x.parentNode.insertBefore(s, x); 

    function parseQuery (query) { 
     var Params = new Object(); 
     if (! query) return Params; // return empty object 
     var Pairs = query.split(/[;&]/); 
     for (var i = 0; i < Pairs.length; i++) { 
      var KeyVal = Pairs[i].split('='); 
      if (! KeyVal || KeyVal.length != 2) continue; 
      var key = unescape(KeyVal[0]); 
      var val = unescape(KeyVal[1]); 
      val = val.replace(/\+/g, ' '); 
      Params[key] = val; 
     } 
     return Params; 
    } 
})();

내가 싶습니다 :

<script type="text/javascript" src="/resources/js/defer.js?cache=80aaad2a95e397a9f6f64ac79c4b452f.js"></script>

이것은 defer.js 파일 내용은 다음과 같습니다

80aaad2a95e397a9f6f64ac79c4b452f.js

이 코드의 HTML 코드는 http://feather.elektrum.org/book/src.html 덕분에 스크립트 태그에서 매개 변수를 가져 오는 방법을 이해하는 데 도움이되었습니다.

바이

출처

2012-10-30 10:57:14 Michelangelo

JavaScript 로딩 지연

답변

관련 문제