Recientemente, recibí este tipo de advertencia, y esta es la primera vez que la recibo:

[Violation] Long running JavaScript task took 234ms
[Violation] Forced reflow while executing JavaScript took 45ms

Estoy trabajando en un proyecto grupal y no tengo idea de dónde viene esto. Esto nunca pasó antes. De repente, apareció cuando alguien más se involucró en el proyecto. ¿Cómo encuentro qué archivo / función causa esta advertencia? He estado buscando la respuesta, pero principalmente sobre la solución sobre cómo resolverla. No puedo resolverlo si ni siquiera puedo encontrar la fuente del problema.

En este caso, la advertencia solo aparece en Chrome. Intenté usar Edge, pero no recibí ninguna advertencia similar, y aún no lo he probado en Firefox.

Incluso recibo el error de jquery.min.js:

[Violation] Handler took 231ms of runtime (50ms allowed)            jquery.min.js:2

Actualización : Chrome 58+ ocultó estos y otros mensajes de depuración de forma predeterminada. Para mostrarlos, haga clic en la flecha al lado de 'Información' y seleccione 'Detallado'.

Chrome 57 activó 'ocultar violaciones' de forma predeterminada. Para volver a activarlos, debe habilitar los filtros y desmarcar la casilla 'ocultar violaciones'.

de repente aparece cuando alguien más involucrado en el proyecto

Creo que es más probable que haya actualizado a Chrome 56. Esta advertencia es una nueva característica maravillosa, en mi opinión, solo desactívela si está desesperado y su asesor le quitará las marcas. Los problemas subyacentes están allí en los otros navegadores, pero los navegadores simplemente no le dicen que hay un problema. El boleto de Chromium está aquí, pero en realidad no hay ninguna discusión interesante al respecto.

Estos mensajes son advertencias en lugar de errores porque en realidad no va a causar problemas importantes. Puede hacer que los cuadros se caigan o causar una experiencia menos fluida.

Sin embargo, vale la pena investigar y corregir para mejorar la calidad de su aplicación. La forma de hacerlo es prestando atención a las circunstancias en que aparecen los mensajes y realizando pruebas de rendimiento para reducir dónde se produce el problema. La forma más sencilla de comenzar las pruebas de rendimiento es insertar un código como este:

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

    // Do the normal stuff for this function

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

Si desea avanzar más, también puede usar el generador de perfiles de Chrome o utilizar una biblioteca de evaluación comparativa como esta .

Una vez que haya encontrado algún código que tarde mucho tiempo (50 ms es el umbral de Chrome), tiene un par de opciones:

1. Elimina parte / toda esa tarea que puede ser innecesaria
2. Descubre cómo hacer la misma tarea más rápido
3. Divide el código en múltiples pasos asincrónicos

(1) y (2) pueden ser difíciles o imposibles, pero a veces es realmente fácil y deberían ser tus primeros intentos. Si es necesario, siempre debe ser posible hacer (3). Para hacer esto usarás algo como:

setTimeout(functionToRunVerySoonButNotNow);

o

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

Puede leer más sobre la naturaleza asincrónica de JavaScript aquí .

Estas son solo advertencias como todos mencionaron. Sin embargo, si está interesado en resolverlos (que debería), primero debe identificar qué está causando la advertencia. No hay una sola razón por la cual puede obtener una advertencia de reflujo de fuerza. Alguien ha creado una lista para algunas opciones posibles. Puedes seguir la discusión para más información.
Aquí está la esencia de las posibles razones:

Lo que fuerza el diseño / reflujo

Todas las propiedades o métodos a continuación, cuando se solicitan / llaman en JavaScript, activarán el navegador para calcular sincrónicamente el estilo y el diseño *. Esto también se llama reflujo o distribución de diseño , y es un cuello de botella de rendimiento común.

Elemento

Métricas de caja

• elem.offsetLeft` elem.offsetTop` elem.offsetWidth` elem.offsetHeight`elem.offsetParent
• elem.clientLeft, elem.clientTop, elem.clientWidth,elem.clientHeight
• elem.getClientRects(), elem.getBoundingClientRect()

Cosas de desplazamiento

• elem.scrollBy(), elem.scrollTo()
• elem.scrollIntoView(), elem.scrollIntoViewIfNeeded()
• elem.scrollWidth, elem.scrollHeight
• elem.scrollLeft, elem.scrollToptambién, configurándolos

Atención

• elem.focus() puede desencadenar un diseño doblemente forzado ( fuente )

También…

• elem.computedRole, elem.computedName
• elem.innerText( fuente )

getComputedStyle

window.getComputedStyle()típicamente forzará el recalc de estilo ( fuente )

window.getComputedStyle() forzará el diseño, también, si alguno de los siguientes es cierto:

1. El elemento está en un árbol de sombra.
2. Hay consultas de medios (relacionadas con la ventana gráfica). Específicamente, uno de los siguientes: ( fuente ) * min-width, min-height, max-width, max-height, width, height * aspect-ratio, min-aspect-ratio,max-aspect-ratio
   • device-pixel-ratio` resolution`orientation
3. La propiedad solicitada es una de las siguientes: ( fuente )
   • height, width * top, right, bottom, left * margin[ -top, -right, -bottom, -left, O taquigrafía ] sólo si el margen es fijo. * padding[ -top, -right, -bottom, -left, O abreviada ] sólo si el relleno es fijo. * transform, transform-origin, perspective-origin * translate, rotate, scale * webkit-filter, backdrop-filter * motion-path, motion-offset, motion-rotation * x, y, rx,ry

ventana

• window.scrollX, window.scrollY
• window.innerHeight, window.innerWidth
• window.getMatchedCSSRules() solo fuerza el estilo

Formas

• inputElem.focus()
• inputElem.select(), textareaElem.select()( fuente )

Eventos de mouse

• mouseEvt.layerX, mouseEvt.layerY, mouseEvt.offsetX, mouseEvt.offsetY ( Fuente )

documento

• doc.scrollingElement solo fuerza el estilo

Rango

• range.getClientRects(), range.getBoundingClientRect()

SVG

• Bastante; no han hecho una lista exhaustiva, pero la Lista de Disparos de Diseño 2011 de Tony Gentilcore señaló algunos.

contento

• Montones y montones de cosas, ... incluyendo copiar una imagen al portapapeles ( fuente )

Consulta más aquí .

Además, aquí está el código fuente de Chromium del problema original y una discusión sobre una API de rendimiento para las advertencias.

Editar: También hay un artículo sobre cómo minimizar el reflujo de diseño en PageSpeed ​​Insight de Google . Explica qué es el reflujo del navegador:

Reflow es el nombre del proceso del navegador web para volver a calcular las posiciones y las geometrías de los elementos en el documento, con el fin de volver a representar parte o la totalidad del documento. Debido a que el reflujo es una operación de bloqueo del usuario en el navegador, es útil para los desarrolladores comprender cómo mejorar el tiempo de reflujo y también comprender los efectos de varias propiedades del documento (profundidad del DOM, eficiencia de la regla CSS, diferentes tipos de cambios de estilo) en el reflujo hora. A veces, el reflujo de un solo elemento en el documento puede requerir el reflujo de sus elementos principales y también de los elementos que lo siguen.

Además, explica cómo minimizarlo:

1. Reduce la profundidad innecesaria del DOM. Los cambios en un nivel en el árbol DOM pueden causar cambios en cada nivel del árbol, hasta la raíz y hasta los elementos secundarios del nodo modificado. Esto lleva a pasar más tiempo realizando reflujo.
2. Minimice las reglas CSS y elimine las reglas CSS no utilizadas.
3. Si realiza cambios de representación complejos, como animaciones, hágalo fuera del flujo. Use position-absolute o position-fixed para lograr esto.
4. Evite los selectores CSS complejos innecesarios, en particular los selectores descendientes, que requieren más potencia de CPU para hacer la selección del selector.

Un par de ideas:

• Elimina la mitad de tu código (quizás comentando).

  • ¿El problema sigue ahí? ¡Genial, has reducido las posibilidades! Repetir.

  • ¿El problema no está ahí? Ok, mira la mitad que comentaste!

• ¿Está utilizando algún sistema de control de versiones (por ejemplo, Git)? Si es así, git checkoutalgunos de sus compromisos más recientes. ¿Cuándo se introdujo el problema? Mire la confirmación para ver exactamente qué código cambió cuando llegó el problema por primera vez.

Para identificar la fuente del problema, ejecute su aplicación y regístrela en la pestaña Rendimiento de Chrome .

Allí puede verificar varias funciones que tardaron mucho en ejecutarse. En mi caso, el que se correlacionó con las advertencias en la consola fue de un archivo que fue cargado por la extensión AdBlock, pero esto podría ser algo más en su caso.

Verifique estos archivos e intente identificar si este es el código de alguna extensión o el suyo. (Si es tuyo, entonces has encontrado la fuente de tu problema).

Busque en la consola de Chrome debajo de la pestaña Red y encuentre los scripts que tardan más en cargarse.

En mi caso, había un conjunto de scripts adicionales de Angular que había incluido pero que aún no había usado en la aplicación:

<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-utils/0.1.1/angular-ui-utils.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular-aria.min.js"></script>

Estos fueron los únicos archivos JavaScript que tardaron más en cargarse que el tiempo que especificó el error "Tarea de ejecución larga".

Todos estos archivos se ejecutan en mis otros sitios web sin generar errores, pero recibí este error de "Tarea de ejecución prolongada" en una nueva aplicación web que apenas tenía funcionalidad. El error se detuvo inmediatamente al eliminarlo.

Mi mejor conjetura es que estos complementos angulares buscaban recursivamente en secciones cada vez más profundas del DOM para sus etiquetas de inicio; al no encontrar ninguna, tuvieron que atravesar todo el DOM antes de salir, lo que llevó más tiempo de lo que Chrome esperaba, por lo tanto, la advertencia.

Encontré la raíz de este mensaje en mi código, que buscaba y ocultaba o mostraba nodos (sin conexión). Este fue mi código:

search.addEventListener('keyup', function() {
    for (const node of nodes)
        if (node.innerText.toLowerCase().includes(this.value.toLowerCase()))
            node.classList.remove('hidden');
        else
            node.classList.add('hidden');
});

La pestaña de rendimiento (generador de perfiles) muestra que el evento tarda unos 60 ms:

Ahora:

search.addEventListener('keyup', function() {
    const nodesToHide = [];
    const nodesToShow = [];
    for (const node of nodes)
        if (node.innerText.toLowerCase().includes(this.value.toLowerCase()))
            nodesToShow.push(node);
        else
            nodesToHide.push(node);

    nodesToHide.forEach(node => node.classList.add('hidden'));
    nodesToShow.forEach(node => node.classList.remove('hidden'));
});

La pestaña de rendimiento (generador de perfiles) ahora muestra que el evento dura aproximadamente 1 ms:

Y siento que la búsqueda funciona más rápido ahora (229 nodos).

Encontré una solución en el código fuente de Apache Cordova. Implementan así:

var resolvedPromise = typeof Promise == 'undefined' ? null : Promise.resolve();
var nextTick = resolvedPromise ? function(fn) { resolvedPromise.then(fn); } : function(fn) { setTimeout(fn); };

Implementación simple, pero de manera inteligente.

Sobre el Android 4.4, use Promise. Para navegadores antiguos, usesetTimeout()

Uso:

nextTick(function() {
  // your code
});

Después de insertar este código de truco, todos los mensajes de advertencia desaparecen.

Esto se agregó en Chrome 56 beta, a pesar de que no está en este registro de cambios del Blog de Chromium: Chrome 56 Beta: advertencia "No seguro", Web Bluetooth y CSSposition: sticky

Puede ocultar esto en la barra de filtro de la consola con la casilla de verificación Ocultar infracciones .

Si está utilizando Chrome Canary (o Beta), simplemente marque la opción 'Ocultar infracciones'.

Este es un error de violación de Google Chrome que se muestra cuando el Verbosenivel de registro está habilitado.

Ejemplo de mensaje de error:

Explicación:

Reflow es el nombre del proceso del navegador web para volver a calcular las posiciones y las geometrías de los elementos en el documento, con el fin de volver a representar parte o la totalidad del documento. Debido a que el reflujo es una operación de bloqueo del usuario en el navegador, es útil para los desarrolladores comprender cómo mejorar el tiempo de reflujo y también comprender los efectos de varias propiedades del documento (profundidad del DOM, eficiencia de la regla CSS, diferentes tipos de cambios de estilo) en el reflujo hora. A veces, el reflujo de un solo elemento en el documento puede requerir el reflujo de sus elementos principales y también de los elementos que lo siguen.

Artículo original: minimizar el reflujo del navegador por Lindsey Simon, UX Developer, publicado en developers.google.com.

Y este es el enlace que Google Chrome le brinda en el perfilador de rendimiento, en los perfiles de diseño (las regiones malva), para obtener más información sobre la advertencia.

Agregar mis ideas aquí ya que este hilo era la pregunta de "ir a" stackoverflow sobre el tema.

Mi problema estaba en una aplicación Material-UI (primeras etapas)

• la ubicación del proveedor de tema personalizado fue la causa

cuando hice algunos cálculos forzando la representación de la página (un componente, "mostrar resultados", depende de lo que esté configurado en otros, "secciones de entrada").

Todo estuvo bien hasta que actualicé el "estado" que obliga al "componente de resultados" a volver a rendir. El problema principal aquí fue que tenía un tema material-ui ( https://material-ui.com/customization/theming/#a-note-on-performance ) en el mismo renderizador (App.js / return ..) como el "componente de resultados", SummaryAppBarPure

La solución fue elevar el ThemeProvider un nivel (Index.js) y ajustar el componente de la aplicación aquí, sin forzar al ThemeProvider a recalcular y dibujar / diseñar / refluir.

antes de

en App.js:

  return (
    <>
      <MyThemeProvider>
      <Container className={classes.appMaxWidth}>

        <SummaryAppBarPure
//...

en index.js

ReactDOM.render(
  <React.StrictMode>
      <App />
//...

después

en App.js:

return (
    <>
      {/* move theme to index. made reflow problem go away */}
      {/* <MyThemeProvider> */}
      <Container className={classes.appMaxWidth}>

        <SummaryAppBarPure
//...

en index.js

ReactDOM.render(
  <React.StrictMode>
    <MyThemeProvider>
      <App />
//...

El reflujo forzado a menudo ocurre cuando tiene una función llamada varias veces antes del final de la ejecución.

Por ejemplo, puede tener el problema en un teléfono inteligente, pero no en un navegador clásico.

Sugiero usar a setTimeoutpara resolver el problema.

Esto no es muy importante, pero repito, el problema surge cuando se llama a una función varias veces, y no cuando la función tarda más de 50 ms. Creo que te equivocas en tus respuestas.

1. Desactive las llamadas 1 por 1 y vuelva a cargar el código para ver si aún produce el error.
2. Si una segunda secuencia de comandos causa el error, use una setTimeOutbasada en la duración de la violación.

Esto no es un error, solo un simple mensaje. Para ejecutar este mensaje, cambie
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">(ejemplo)
a
<!DOCTYPE html>(la fuente de Firefox lo espera)

El mensaje se mostró en Google Chrome 74 y Opera 60. Después de cambiarlo estaba claro, 0 detallado.
Un enfoque de solución