Aplazamiento de JavaScript cargando

He oído y leído algunos artículos sobre cómo diferir la carga de JavaScript y estoy muy interesado. Parece ser muy prometedor para las aplicaciones web que pueden ser útiles en las plataformas móviles donde la cantidad de JavaScript que se puede cargar y ejecutar es limitada.Aplazamiento de JavaScript cargando

Lamentablemente, la mayoría de los artículos hablan de esto en un nivel extremadamente alto. ¿Cómo se podría abordar esto?

EDITAR

Normalmente, todo JavaScript se carga en carga de la página, sin embargo, puede haber funciones que no son necesarias hasta que se produce una determinada acción, en cuyo momento, el JavaScript debe ser cargado. Esto ayuda a aliviar la carga del navegador en la carga de la página.

Específicamente, tengo una página que usa mucho JavaScript. Cuando cargo la página en mi teléfono, no se carga correctamente. A medida que depuré la página, eliminé algunas de las funciones de JS. Una vez que se eliminó lo suficiente, la página de repente funcionó.

Quiero ser capaz de cargar el JS según sea necesario. Y posiblemente incluso elimine las funciones simplemente usadas para el inicio.

Fuente

2011-09-01 steveo225

¿Estás tratando de demorar la carga de la ejecución de código JavaScript del navegador o cargar un archivo js? Si la función anterior jquery.ready hace lo que quiere – Eonasdan

Lo básico es simple: dividir el código JavaScript en componentes lógicamente separados y cargar solo lo que necesita. Dependiendo de lo que usted está construyendo puede utilizar:

cargadoras:

Modernizr.load (o yepnope.js por sí mismo)
LABjs
Many, many, many otras bibliotecas de carga diferida.

gestores de dependencia (que son también cargadoras):

Require.js
dojo.require
JavaScript MVC's steal.js
Varias otras bibliotecas de gestión de dependencia.

Estas herramientas hacen uso de una amplia variedad de técnicas para diferir la carga de secuencias de comandos, el ejecución de secuencias de comandos, administrar dependencias, etc. Lo que se necesita depende de lo que está construyendo.

También le recomendamos leer this discussion para obtener más información sobre los pros y los contras de usar tales técnicas.

Respuesta a editar:

En realidad no hay una buena forma de descarga JavaScript que ya ha cargado - la aproximación más cercana que puede obtener es mantener todo el código de carga namespaced dentro del espacio de nombres de su aplicación y luego "limpiar" al establecer ese espacio de nombres, y todas las referencias a él en null.

Fuente

2011-09-01 14:56:52

si usa un enfoque AMD o commonJS (requirejs y backdraft usan AMD), entonces el JS cargado está ligado a una variable local.Cuando eso se sale del alcance, siempre y cuando no conserve ninguna referencia, se recolecta la basura, por lo que la estructura de su código puede administrar cómo se guardan sus paquetes. – peller

Este comentario es un poco engañoso, así que pensé en aclararlo. CommonJS y AMD no hacen nada especial para ayudar a recolectar la basura de su código. En el mejor de los casos, la función de devolución de llamada en AMD es un cierre, por lo que todas las variables tienen un alcance para ese cierre para la recolección de basura _potential_ (suponiendo que no haya expuesto ninguna función que pueda contener el contexto de la llamada de función del cierre. un IIFE como la mayoría de las personas en su código. Por IIFE, me refiero a envolver su código en (función() {... su código aquí ...}()); –

Deferring loading til when when? La razón por la cual JS se carga por última vez es para que todo el DOM se haya cargado primero.

Una forma sencilla es usar

<body onload="doSomething();">

Por lo que podría tener fácilmente doSomething() función para cargar todas sus JS.

También puede agregar una función a window.onload, como

window.onload = function(){ };

Además, si está utilizando librarys JS, como jQuery y Dojo, cada uno tiene sus propias onReady y addOnLoad métodos con el fin ejecutar algunos JS solo después de que el documento ya se haya cargado.

Fuente

2011-09-01 14:56:12 Layke

Aquí está a useful article en los atributos diferir y asincrónico del elemento script. Al especificar estos atributos, el navegador pospondrá la carga de diferentes maneras. También puede cargar un script externo usando JavaScript después de cargar la página.

También se debe tener en cuenta que la posición de los elementos del script en su documento HTML determinará la carga y el orden de ejecución si no se han especificado ni defer ni async.

Fuente

2011-09-01 14:57:42 Spycho

He usado un script simple publicado en línea con alguna modificación hecha por mí. Suponga que su archivo COMPRESSED Javascript está en el directorio caché de su servidor web y desea diferir la carga de este archivo comprimido js.

Su comprimido archivo JS:

80aaad2a95e397a9f6f64ac79c4b452f.js

Este es el código de código html:

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

Este es el contenido del archivo 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; 
    } 
})();

me gustaría Dile gracias a http://feather.elektrum.org/book/src.html que me ayudó a entender cómo obtener los parámetros de la etiqueta del script.

bye

Fuente

2012-10-30 10:57:14 Michelangelo

Aplazamiento de JavaScript cargando

Respuesta

Cuestiones relacionadas