¿Errores comunes de Javascript que afectan gravemente el rendimiento? [cerrado]

En una reciente reunión de UI / UX MeetUp a la que asistí, di algunos comentarios sobre un sitio web que usaba Javascript (jQuery) para su interacción e interfaz de usuario: eran animaciones y manipulaciones bastante simples, pero el rendimiento en una computadora decente fue horrible.

En realidad, me recordó a muchos sitios / programas que he visto con el mismo problema, donde ciertas acciones simplemente destruyen el rendimiento. Es principalmente en (o al menos más notable en) situaciones en las que Javascript casi sirve como reemplazo de Flash. Esto está en marcado contraste con algunas de las aplicaciones web que he usado que tienen mucho más Javascript y funcionalidad, pero se ejecutan sin problemas (COGNOS by IBM es una de las que se me ocurre).

Me encantaría conocer algunos de los problemas comunes que no se consideran al desarrollar JS que matarán el rendimiento del sitio.

Un asesino de rendimiento común está solicitando .lengthuna colección HTMLC dentro de un forbucle:

function foo(collection) {
    for (var index = 0; index < collection.length; index++) {
        // do something awesome here
    }
}

Ese antipatrón hace que el tamaño de la colección se calcule en cada pasada a través del bucle. El mejor enfoque es calcular la longitud fuera del ciclo:

function foo(collection) {
    var collectionLen = collection.length;
    for (var index = 0; index < collectionLen; index++) {
        // do something awesome here
    }
}

No, el problema no proviene de JS utilizado como reemplazo de flash. Si no está convencido con eso, documente su información sobre actionscript: está muy cerca de JS.

Como asesino de actuaciones, puedes encontrar varias malas prácticas:

• Adjunte el controlador de eventos en eventos continuos, como desplazarse, mover el mouse o cosas similares. Esto tiene 2 inconvenientes: si el evento no se activa lo suficiente, su aplicación no será reactiva. Si se dispara demasiado, tendrá una gran carga de CPU por nada.
• Realización de llamadas síncronas AJAX. Javascript no es multiproceso, entonces, cuando una parte de JS está esperando algo, su aplicación se congela. Es mejor que use llamadas AJAX asíncronas, y de la misma manera use setTimeout / setInterval para dividir una larga fase de cálculo y mantener su aplicación reactiva.
• Alta complejidad del algoritmo como en cualquier otro idioma.

Di algunos comentarios sobre un sitio web que usaba Javascript (jQuery) para su interacción e interfaz de usuario: eran animaciones y manipulaciones bastante simples, pero el rendimiento en una computadora decente era horrible.

El mayor problema con el rendimiento es usar abstracciones de alto nivel (como jQuery) sin comprender el modelo DOM subyacente y el modelo de animación CSS3 (o lienzo, o svg).

Si no sabe cómo hacerlo sin las abstracciones entonces usted tiene absoluta cero conocimiento de qué técnicas son rápidos o lentos.

Aprenda JavaScript, aprenda el DOM. Una vez que conozca esos dos y sepa lo que hacen sus abstracciones debajo del capó, puede usarlos de manera eficiente. Por supuesto, la mayoría de las veces te das cuenta de que la abstracción es lenta y simplemente hacerlo manualmente sin una biblioteca.

La belleza y el inconveniente de Javascript es que es extremadamente flexible. Dicho esto, en realidad te permite hacer cosas que probablemente no deberías hacer en muchos casos.

De las revisiones de código de las que he formado parte, las principales preocupaciones tienden a estar relacionadas con la representación de CSS. Para los nuevos desarrolladores de JS, tendemos a ver que se utilizan demasiadas variables en el ámbito global.

Además, los cierres inadecuados a menudo pueden causar pérdidas de memoria. Sin embargo, la mayoría de los marcos JavaScript modernos previenen este tipo de problemas siempre que su código siga el marco.

Aquí hay un enlace rápido que encontré hace aproximadamente un año sobre cómo escribir un mejor código jquery: http://net.tutsplus.com/tutorials/javascript-ajax/10-ways-to-instantly-increase-your-jquery-performance / /

Una cosa que acabo de encontrar en un código de compañeros de trabajo que estaba matando el rendimiento era el almacenamiento en caché de datos que no era necesario almacenar en caché.

Ejemplo:

var table = $("#data").dataTable(.....);

DataTables es un complemento de jQuery que usamos para hacer grids agradables. De todos modos, la tabla tenía casi 5k filas, la aplicación del complemento DataTables y luego guardarlo en la variable de la tabla en realidad hizo que tanto FireFox como IE advirtieran que un script estaba tardando demasiado. Moraleja de la historia, solo almacena en caché los datos si es necesario.

Por lo que he escuchado, los forbucles son computacionalmente más rápidos que los de jQuery $.each().