Adiando o carregamento do JavaScript

9

Eu ouvi e li alguns artigos sobre adiar o carregamento do JavaScript e estou muito interessado. Parece ser muito promissor para aplicativos da web que podem ser úteis em plataformas Mobile, nas quais a quantidade de JavaScript que pode ser carregada e executada é limitada.

Infelizmente, a maioria dos artigos fala sobre isso em um nível extremamente alto. Como alguém abordaria isso?

EDITAR

Normalmente, todo o JavaScript é carregado no carregamento da página, no entanto, pode haver funções que não são necessárias até que uma determinada ação ocorra, momento em que o JavaScript deve ser carregado. Isso ajuda a aliviar o peso do navegador no carregamento da página.

Especificamente, tenho uma página que usa muito JavaScript. Quando eu carregar a página no meu celular, ela não será carregada corretamente. Enquanto depurava a página, eliminei algumas das funções do JS. Quando o suficiente foi eliminado, a página funcionou de repente.

Eu quero poder carregar o JS conforme necessário. E, possivelmente, até mesmo eliminar as funções usadas simplesmente para o arranque.

    
por steveo225 01.09.2011 в 16:51
fonte

4 respostas

4

O básico é simples: dividir seu código JavaScript em componentes separados logicamente e carregar apenas o que você precisa. Dependendo do que você está construindo, você pode usar:

Carregadores:

Gerentes de dependência (que são também loaders):

Essas ferramentas fazem uso de uma ampla variedade de técnicas para adiar o carregamento de scripts, a execução de scripts, gerenciar dependências, etc. O que você precisa depende do que você está construindo.

Você também pode ler esta discussão para aprender algo mais sobre os prós e contras de usando tais técnicas.

Resposta para editar:

Não há realmente uma boa maneira de descarregar o JavaScript que você já carregou - a melhor aproximação que você pode obter é manter todos os nomes de código de carregamento no namespace do aplicativo e depois "limpar" up "definindo esse namespace e todas as referências a ele para null .

    
por Sean Vieira 01.09.2011 / 16:56
fonte
1

Eu usei um script simples publicado de acordo com algumas modificações feitas por mim. Suponha que seu arquivo Javascript COMPRESSADO esteja no diretório de cache em seu servidor da web e você queira adiar o carregamento deste arquivo js compactado.

Seu arquivo js compactado:

80aaad2a95e397a9f6f64ac79c4b452f.js

Este é o código do código html:

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

Este é o conteúdo do arquivo 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;
    }
})();

Gostaria de agradecer ao link que me ajudou a entender como obter os parâmetros do script tag.

tchau

    
por Michelangelo 30.10.2012 / 11:57
fonte
0

Adiando o carregamento até quando? A razão pela qual o JS é carregado por último é porque o DOM inteiro foi carregado primeiro.

Um jeito fácil é simplesmente usar

<body onload="doSomething();">

Assim, você pode facilmente ter a função doSomething() para carregar todo o seu JS.

Você também pode adicionar uma função a window.onload , como

window.onload = function(){ };

Além disso, se você estiver usando bibliotecas JS, como jQuery e Dojo , cada um tem seus próprios métodos onReady e addOnLoad para executar algum JS somente após o documento já ter sido carregado.

    
por Layke 01.09.2011 / 16:56
fonte
0

Aqui está um artigo útil sobre os atributos defer e assíncronos do elemento script. Especificar esses atributos fará com que o navegador adie o carregamento de maneiras diferentes. Você também pode carregar um script externo usando JavaScript após o carregamento da página.

Também deve ser notado que a posição de seus elementos de script dentro do seu documento HTML determinará a ordem de carregamento e execução se nenhum adiamento ou assíncrono tiver sido especificado.

    
por Spycho 01.09.2011 / 16:57
fonte