¿Cómo optimizar los events de "Parse HTML"?

Al perfilar mi aplicación web, noté que mi server se está iluminando rápidamente y Chrome parece ser el cuello de botella. Encendí la herramienta de desarrollador de "línea de time" de Chrome y obtuve los siguientes numbers:

Total time: 523ms Scripting: 369ms (70%) 

También ejecuté algunos console.log(performance.now()) desde el file Javascript principal y el time de carga está realmente más cerca de los 700 ms. Esto es bastante impactante para lo que estoy renderizando (una table vacía y 2 botones).

Continué mi investigación mediante la exploración en "Scripting":

 Evaluating jQuery-min.js: 33ms Evaluating jQuery-UI-min.js: 50ms Evaluating raphael-min.js: 29ms Evaluating content.js: 41ms Evaluating jQuery.js: 12ms Evaluating content.js: 19ms GC Event: 63 ms 

(No enumeré los scripts más pequeños, pero explicaron el time restante). No sé qué hacer con esto.

  1. ¿Son estos numbers normales?
  2. ¿A donde voy desde aqui? ¿Hay otras herramientas que debería ejecutar?
  3. ¿Cómo optimizo los events de Parse HTML?

A pesar del cinismo que recibió esta pregunta, me divierte descubrir que estaban equivocados.

Descubrí que la salida del generador de perfiles de Chrome era difícil de interpretar, así que console.log(performance.now()) a console.log(performance.now()) . Esto me llevó a descubrir que la página tardaba 1400 ms en cargar los files Javascript, incluso antes de invocar una sola línea de código.

Esto no tenía mucho sentido, así que revisé la herramienta de creación de perfiles de Chrome. El order de sorting por defecto Heavy (Bottom Up) no reveló nada significativo, así que cambié al modo Chart . Esto reveló que muchos complementos del browser se estaban cargando y tardaban mucho más en ejecutarse de lo que había previsto. Así que desactivé todos los complementos y volví a cargar la página. ¿Adivina qué? El time de carga bajó a 147 ms.

Así es: ¡ los complementos del browser fueron responsables del 90% del time de carga!

Entonces para concluir:

  • JQuery es sustancialmente más lento que las API nativas, pero esto podría ser irrelevante en el gran esquema de cosas. Esta es la razón por la cual los buenos progtwigdores usan perfiladores para encontrar cuellos de botella , en lugar de optimizar a ciegas. No confíe en los prejuicios subjetivos de las personas o en un "presentimiento". Si hubiera seguido el consejo de la gente para optimizar JQuery lejos, no habría hecho una diferencia notable (habría ahorrado 100ms).
  • La herramienta de timeline no informa el time total correcto. Omita los charts bonitos y use las siguientes herramientas …
  • Comience simple. Use console.log(performance.now()) para verificar supuestos básicos.
  • Perfilador de Javascript de Chrome
    • Chart le dará una descripción cronológica de la ejecución de Javascript.
    • Tree (Top Down) te permitirá profundizar en los methods, un nivel a la vez.
  • Desactive todos los complementos del browser, reinicie el browser y vuelva a intentarlo. ¡Te sorprendería la cantidad de sobrecarga que aportan algunos complementos!

Espero que esto ayude a otros.

PD: Hay un buen artículo en http://www.sitepoint.com/jquery-vs-raw-javascript-1-dom-forms/ que ayuda si quieres replace jQuery con las API nativas.

Creo que los events de Parse HTML suceden cada vez que modificas el HTML interno de un elemento, por ejemplo

 $("#someiD").html(text); 

Un estilo común es agregar elementos repetidamente:

 $.each(something, function() { $("#someTable").append("<tr>...</tr>"); }); 

Esto analizará el HTML de cada fila que se agrega. Puedes optimizar esto con:

 var tablebody = ''; $.each(something, function() { tablebody += "<tr>...</tr>"; }); $("#someTable").html(tablebody); 

Ahora analiza todo al mismo time, en lugar de analizarlo repetidamente.