Descarga de javascript sin bloqueo

Question

Contexto: mi pregunta se refiere a mejorar el rendimiento de carga de la página web y, en particular, el efecto que javascript tiene sobre la carga de página (recursos/elementos debajo del script están bloqueados de descarga/renderización).

Este problema generalmente se evita/mitiga colocando los scripts en la parte inferior (por ejemplo, justo antes de la etiqueta).

El código que estoy buscando es para análisis web. Colocarlo en la parte inferior reduce su precisión; y porque esta secuencia de comandos no tiene efecto en el contenido de la página, es decir, no está reescribiendo ninguna parte de la página, quiero moverlo dentro de la cabeza. Solo cómo hacerlo sin arruinar el rendimiento de carga de páginas es el quid de la cuestión.

De mi investigación, he encontrado seis técnicas (w/apoyo entre todos o la mayoría de los principales navegadores) para la descarga de secuencias de comandos para que no bloquee el contenido de la página hacia abajo desde la carga/representación:

(i) XHR + eval();

(ii) XHR + inject;

(iii) descargue el script envuelto en HTML como en iFrame;

(iv) el establecimiento de bandera asíncrono de la etiqueta de script a TRUE (HTML 5 solamente);

(v) el establecimiento deDefer atributo de la etiqueta script; y

(vi) 'Script DOM Element'.

Es el último de estos que no entiendo. El Javascript para implementar el patrón (VI) es:

(function() { 
    var q1 = document.createElement('script'); 
    q1.src = 'http://www.my_site.com/q1.js' 
    document.documentElement.firstChild.appendChild(q1) 
})(); 

parece bastante simple: y función anónima se crea entonces ejecutados en el mismo bloque. Dentro de esta función anónima:

• se crea un elemento de script

• su src elemento se ajusta a su ubicación, a continuación,

• se añade el elemento de secuencia de comandos para el DOM

Pero mientras que cada línea es clara, todavía no está claro para mí cómo exac ¿Este patrón permite la carga de scripts sin bloquear los elementos/recursos de la página de procesamiento/carga?

Answer 1

Una nota en primer lugar:

(iv) el establecimiento de bandera 'asíncrono' de la etiqueta de script a 'verdadero' (HTML 5 solamente);

async es un "atributo booleano", en el sentido HTML. Eso significa que cualquiera de los siguientes es correcta:

<script async src="..."></script> 
<script async="" src="..."></script> 
<script async="async" src="..."></script> 

Y eso tanto de la siguiente hacer el guión puede cargar de forma asíncrona, pero no se ajustan a ellas (debido a la posible confusión):

<script async="true" src="..."></script> 
<script async="false" src="..."></script> 

---

Ahora en su pregunta. El punto es que es el HTML parser que está siendo bloqueado por el script (porque la gente hace cosas estúpidas como document.write("<!--"), incluso desde archivos JS externos, y esperan que "funcione"). Sin embargo, en su caso (vi), el analizador HTML nunca ve el elemento script, porque se agrega directamente al DOM. Algo lógicamente, si un elemento script (o más bien, una etiqueta de inicio <script>) no es visto por el analizador HTML, tampoco puede detener el análisis sintáctico.

Answer 2

Intentaré decir todo con una URL, nos ahorrará tiempo.

Por favor, eche un vistazo a esta presentación del autor de un libro que trata temas como los que está mencionando.Encontré la presentación (también hay una de youtube, creo que en el canal de google) muy muy interesante. Explica mucho de lo que quieres saber.

http://www.slideshare.net/souders/sxsw-even-faster-web-sites

http://www.youtube.com/watch?v=aJGC0JSlpPE (vídeo largos muchos detalles sobre parametros de rendimiento/temas)

Answer 3

Su último ejemplo se modifica el árbol DOM y sólo se puede utilizar después de que el árbol DOM es completa (proceso de carga). Por lo tanto, el navegador ya puede mostrar la página por completo mientras carga el script js.

Aquí está un ejemplo de cómo Firefox hace 2 versiones diferentes:

img http://img177.imageshack.us/img177/9302/40229406.jpg

• cargas Test.html con su método anterior dentro onload en la parte inferior de la página.
• test2.html carga con una etiqueta de script simple en la cabeza.

Tenga en cuenta la línea roja, esto es cuando se activa el elemento de carga.