Odradzam JavaScript ładowanie

Słyszałem i przeczytałem kilka artykułów o odroczeniu JavaScriptu ładowaniu i jestem bardzo zainteresowany. Wydaje się być bardzo obiecującym dla aplikacji internetowych, które mogą być przydatne na platformach mobilnych, w których liczba skryptów JavaScript, które można załadować i wykonać, jest ograniczona.Odradzam JavaScript ładowanie

Niestety, większość artykułów mówi o tym na bardzo wysokim poziomie. Jak by się do tego zbliżyć?

EDIT

Normalnie wszystko JavaScript jest załadowany na stronie obciążenia, jednak nie mogą być funkcje, które nie są niezbędne do czasu występuje pewna akcja, w której razem JavaScript powinien być załadowany. Pomaga to zmniejszyć obciążenie przeglądarki podczas ładowania strony.

W szczególności mam stronę, która bardzo intensywnie korzysta z JavaScript. Po załadowaniu strony do telefonu nie zostanie ona poprawnie załadowana. Podczas debugowania strony wyeliminowałem niektóre funkcje JS. Po wyeliminowaniu wystarczającej ilości stron strona nagle zadziałała.

Chcę móc ładować JS w razie potrzeby. A może nawet wyeliminować funkcje używane po prostu do uruchomienia.

Źródło

2011-09-01 steveo225

Czy próbujesz opóźnić ładowanie kodu javascript lub przeglądarki ładowanie pliku js? Jeśli poprzednia funkcja jquery.ready zrobi to, co chcesz, – Eonasdan

Podstawy są proste - podzielenie kodu JavaScript na logicznie oddzielne składniki i załadowanie tylko tego, czego potrzebujesz. W zależności od tego, co budują można użyć:

Ładowarki:

Modernizr.load (lub yepnope.js samą w sobie)
LABjs
Many, many, many inne odroczonego ładowanie bibliotek.

menedżerów Zależność (które są również ładowarki):

Require.js
dojo.require
JavaScript MVC's steal.js
Kilka innych bibliotek zarządzania zależność.

Narzędzia te korzystają z szerokiej gamy technik odroczyć ładowanie skryptów, na wykonanie skryptów, zarządzanie zależnościami, itd. Co trzeba zależy co budują.

Możesz także przeczytać this discussion, aby dowiedzieć się więcej o zaletach i wadach używania takich technik.

Response do edycji:

Tam naprawdę nie jest dobrym sposobem na rozładunku JavaScript, który został już załadowany - najbliższa przybliżeniem można dostać to, aby utrzymać wszystkie kodzie załadunku umieszczane są w przestrzeni nazw aplikacji, a następnie "czyść", ustawiając tę przestrzeń nazw i wszystkie odniesienia do niej do null.

Źródło

2011-09-01 14:56:52

, jeśli używasz podejścia AMD lub commonJS (requirejs i backdraft używają AMD), wtedy załadowany JS jest powiązany z lokalną zmienną.Gdy wykracza to poza zakres, o ile nie zachowujesz żadnych odniesień, gromadzi się śmieci, więc struktura twojego kodu może zarządzać utrzymywaniem twoich paczek. – peller

Ten komentarz jest nieco mylący, więc pomyślałem, że wyjaśnię. CommonJS i AMD nie robią nic specjalnego, aby pomóc w odśmiecaniu kodu. W najlepszym przypadku funkcja oddzwaniania w AMD jest zamknięciem, a więc wszystkie zmienne są ograniczone do tego zamknięcia dla _potential_ garbage collection (zakładając, że nie wyeksponowałeś żadnych funkcji, które mogą trzymać kontekst wywołania funkcji zamknięcia.To nie różni się od użycia IIFE, jak większość ludzi w swoim kodzie. Przez IIFE, mam na myśli pakowanie twojego kodu w (function() {... twój kod tutaj ...}()); –

Odroczenie ładowania do kiedy? Powodem, dla którego typowo JS jest wczytany jako ostatni, jest to, że cały DOM został załadowany jako pierwszy.

Łatwym sposobem jest po prostu użyć

<body onload="doSomething();">

Można więc łatwo mieć doSomething() funkcję ładowania wszystkich JS.

Można również dodać funkcję do window.onload, jak

window.onload = function(){ };

Ponadto, jeśli używasz Biblioteki JS, takich jak jQuery i Dojo, każdy z nich ma swoje własne onReady i addOnLoad metod w celu uruchamiać niektóre JS dopiero po załadowaniu dokumentu.

Źródło

2011-09-01 14:56:12 Layke

Oto a useful article na atrybutach opóźnienia i asynchronizacji elementu skryptu. Określenie tych atrybutów spowoduje, że przeglądarka będzie odkładać ładowanie na różne sposoby. Możesz również załadować skrypt zewnętrzny za pomocą JavaScript po wczytaniu strony.

Należy również zauważyć, że położenie elementów skryptu w dokumencie HTML będzie określało obciążenie i kolejność wykonywania, jeśli nie określono ani opóźnienia, ani asynchronizacji.

Źródło

2011-09-01 14:57:42 Spycho

Użyłem prostego skryptu opublikowanego na stronie z pewnymi modyfikacjami wykonanymi przeze mnie. Załóż, że Twój skompresowany plik JavaScript znajduje się w katalogu pamięci podręcznej na serwerze internetowym i chcesz odłożyć ładowanie skompresowanego pliku js.

Twój skompresowany plik js:

80aaad2a95e397a9f6f64ac79c4b452f.js

Jest to kod, kod html:

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

To jest zawartość pliku defer.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; 
    } 
})();

chciałbym powiedzmy, dzięki http://feather.elektrum.org/book/src.html, które pomogły mi zrozumieć, jak uzyskać parametry z tagu skryptu.

Źródło

2012-10-30 10:57:14 Michelangelo

Odradzam JavaScript ładowanie

Odpowiedz

Powiązane problemy