Impacto en el rendimiento del navegador de muchos archivos js incluye

Question

Estoy trabajando en un sitio web para el trabajo que utiliza un diseño principal para todo el sitio que incluye muchos (más de 40) archivos js. Este sitio web es muy lento de renderizar. ¿Cuánta sobrecarga hay para que el navegador pueda analizar y (por falta de un mejor término técnico) "tratar con" todo esto incluye? Sé que están en caché, por lo que no se están descargando en cada vista de página. Sin embargo, ¿cada uno se analiza y se ejecuta de nuevo en cada actualización de página?

En cualquier caso, me imagino que hay algunos gastos generales en el tratamiento de todos estos elementos, pero no estoy seguro de si es grande o pequeño.

Answer 1

La mejor manera de entender es medir. Intente fusionar esos archivos de 40 js en uno solo y vea si hace una gran diferencia. También comprimirlos podría reducir los costos de ancho de banda.

Habrá una sobrecarga de tener varias inclusiones, pero como dices esas páginas están en caché y la sobrecarga debe ser solo en la primera solicitud. Creo que si ignoramos esta sobrecarga inicial, la diferencia de rendimiento no será enorme en comparación con el tiempo empleado en esas secuencias de comandos que manipulan el DOM, etc.

Answer 2

Puede tratar de poner todos los archivos .js en un solo archivo y luego comprimirlo.

Esto reducirá la cantidad de solicitudes hechas por el navegador por 39 también :).

Espero que esto haya ayudado.

Answer 3

que depende de lo que hacen - para probar que podía hacer esto antes de que son todos cargados:

<script> 
    var test_start_time = (new Date()).getTime(); 
    </script> 

y esto después:

<script> 
    alert("took: " + (((new Date()).getTime()-test_start_time)/1000) + " seconds"); 
    </script> 

Answer 4

El impacto puede ser importante. Tener en cuenta que la página de guión descargar bloques de representación Un par de cosas que usted puede probar:

• combinar tantos guiones como pueda para que descarga menos archivos
• Minimizar y comprimir archivos js combinados
• Intentar ponga tantas referencias como pueda en la parte inferior de la página para que no bloqueen el procesamiento (esto no es fácil y debe hacerse con cuidado, puede terminar permitiendo la interacción con algunos controles antes de que se descargue el javascript necesario).
• Implemente la descarga paralela para archivos js (de forma predeterminada, se descargan secuencialmente). Here tiene algunos ejemplos sobre eso

Answer 5

Definitivamente comparar y contrastar: ese será el juez más confiable.

Sin embargo, hago todo lo posible para cargar solo uno o dos archivos JS en la sección principal, luego uso jquery para probar ciertos elementos que pueden requerir scripts adicionales o CSS una vez que se carga el DOM. Por ejemplo, yo uso la biblioteca lo más destacado fuente js para estilizar etiquetas pre:

if($('pre').length > 0) { 
    $.getScript(svx_cdns+'pkgs/shjs-0.6/sh_main.min.js', function() { 
    $('<link>', { 
     'rel': 'stylesheet', 
     'type': 'text/css', 
     'href': svx_cdns+'pkgs/shjs-0.6/css/sh_vim.min.css' 
    }).appendTo('head'); 
    sh_highlightDocument('/s/pkgs/shjs-0.6/lang/', '.min.js'); 
    }); 
} 

De esta manera se carga la página muy rápidamente, y luego "se ajusta" después.

Answer 6

Incluso si los archivos están en caché, aún hay una solicitud para verificar si el archivo ha sido modificado.Puede cambiar su estrategia de almacenamiento en caché y configurar sus archivos para que nunca caduquen. De esa forma, el navegador ni siquiera preguntará si ha sido modificado. Eso significa que tendrá que agregar un destructor de memoria caché a todas sus direcciones URL. Mira la pestaña de red de firebug para estar seguro. Obtengo un 304 No modificado con todos mis css/js/imgs.

Los archivos van a tener que analizarse cada vez, pero eso probablemente no sea el cuello de botella.

Intente copiar todas sus js en un solo archivo. Una de nuestras pantallas incluía más de 100 archivos js. Creamos un archivo minimizado unificado y nuestro tiempo de carga de pantalla pasó de 10 segundos a menos de 3.