Violation Long Running JavaScript Task Took Xx Ms

Violation Long running JavaScript task took xx ms

Update: Chrome 58+ hid these and other debug messages by default. To display them click the arrow next to 'Info' and select 'Verbose'.

Chrome 57 turned on 'hide violations' by default. To turn them back on you need to enable filters and uncheck the 'hide violations' box.

suddenly it appears when someone else involved in the project

I think it's more likely you updated to Chrome 56. This warning is a wonderful new feature, in my opinion, please only turn it off if you're desperate and your assessor will take marks away from you. The underlying problems are there in the other browsers but the browsers just aren't telling you there's a problem. The Chromium ticket is here but there isn't really any interesting discussion on it.

These messages are warnings instead of errors because it's not really going to cause major problems. It may cause frames to get dropped or otherwise cause a less smooth experience.

They're worth investigating and fixing to improve the quality of your application however. The way to do this is by paying attention to what circumstances the messages appear, and doing performance testing to narrow down where the issue is occurring. The simplest way to start performance testing is to insert some code like this:

function someMethodIThinkMightBeSlow() {
    const startTime = performance.now();

    // Do the normal stuff for this function

    const duration = performance.now() - startTime;
    console.log(`someMethodIThinkMightBeSlow took ${duration}ms`);
}

If you want to get more advanced, you could also use Chrome's profiler, or make use of a benchmarking library like this one.

Once you've found some code that's taking a long time (50ms is Chrome's threshold), you have a couple of options:

1. Cut out some/all of that task that may be unnecessary
2. Figure out how to do the same task faster
3. Divide the code into multiple asynchronous steps

(1) and (2) may be difficult or impossible, but it's sometimes really easy and should be your first attempts. If needed, it should always be possible to do (3). To do this you will use something like:

setTimeout(functionToRunVerySoonButNotNow);

or

// This one is not available natively in IE, but there are polyfills available.
Promise.resolve().then(functionToRunVerySoonButNotNow);

You can read more about the asynchronous nature of JavaScript here.

Violation Long running JavaScript task took xx ms

He editado la respuesta con información nueva.

Es un bug de todos los navegadores que sólo Chrome detecta, por ahora

Al parecer se trata de un bug, reportado en Chromium.org.

He leído que no es sólo un bug de Chrome, sino de todos los navegadores, pero que el único que lo detecta por ahora es Chrome:

The underlying problems are there in the other browsers but the
browsers just aren't telling you there's a problem.

---

Los
problemas subyacentes están ahí en los otros navegadores, pero los
navegadores simplemente no están diciendo que hay un problema.
Fuente: Una de las respuestas a la pregunta: Violation Long running JavaScript task took xx ms de Stackoverflow en inglés.

En cuanto a tu pregunta:

¿Hay que preocuparse?

Según SO en inglés:

Estos mensajes son advertencias en lugar de errores porque realmente no van a causar grandes problemas. Puede causar que las frames se caigan... y otros problemas, pero no ligados a la seguridad.

En cuanto a la seguridad no hay que preocuparse, pues es una advertencia (warning) de que algo no está optimizado en nuestra página. Entonces sí hay que preocuparse por optimizar nuestro contenido (ver algunos enlaces al final).

Posibles soluciones

En gonodejs dan varias posibles soluciones al problema (en inglés). Aunque considero, personalmente, que no vale la pena intentarlas, ya que lo del mensaje viene resuelto en Chrome 57...

Ya está resuelto, lo del mensaje

Chrome 58 todavía en versión beta, oculta estos y otros mensajes de depuración de forma predeterminada. Para mostrarlos hay que hacer clic en la flecha junto a 'Info' y seleccionar 'Verbose'.

Chrome 57, ya disponible, activa "ocultar violaciones" de forma predeterminada. Para volverlos a activar, debes activar los filtros y desmarcar la casilla "Ocultar violaciones".

Pero... queda una tarea pendiente

La tarea pendiente es OPTIMIZAR.

Aunque ya no veas aparecer el molesto mensaje, es posible que en nuestra aplicación haya un problema de optimización.

¿Qué hacer entonces? Sin duda actualizar a la última versión de Chrome y de vez en cuando activar el modo Verbose para ver si hay algo que necesita ser optimizado.

En cuanto a la optimización, puedes encontrar contenido interesante en Chrome Dev Tools, además en español. Te dejo sólo algunos enlaces que he encontrado:

• Optimización de la ejecución de JavaScript.
• Analiza el rendimiento del tiempo de ejecución
• Reglas y recomendaciones de PageSpeed

La respuesta citada más arriba de Stackoverflow en inglés también proporcionan algunas sugerencias en cuanto a la optimización.

---

Related Topics