Недавно я получил такое предупреждение, и это мой первый раз:

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

Я работаю над групповым проектом, и я понятия не имею, откуда это исходит. Этого никогда не было раньше. Внезапно это появилось, когда кто-то еще вмешался в проект. Как мне найти, какой файл / функция вызывает это предупреждение? Я искал ответ, но в основном о том, как его решить. Я не могу решить это, если я даже не могу найти источник проблемы.

В этом случае предупреждение появляется только в Chrome. Я пытался использовать Edge, но я не получил подобных предупреждений, и я еще не тестировал его в Firefox.

Я даже получаю ошибку от jquery.min.js:

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

Обновление : Chrome 58+ скрыл эти и другие сообщения отладки по умолчанию. Чтобы отобразить их, нажмите стрелку рядом с «Информация» и выберите «Подробно».

Chrome 57 по умолчанию включил «скрыть нарушения». Чтобы включить их снова, необходимо включить фильтры и снять флажок «скрывать нарушения».

внезапно появляется, когда кто-то еще участвует в проекте

Я думаю, что вы, скорее всего, обновили Chrome 56. Это предупреждение - замечательная новая функция, на мой взгляд, пожалуйста, отключайте ее, только если вы в отчаянии и ваш оценщик уберет у вас оценки. Основные проблемы есть в других браузерах, но браузеры просто не сообщают вам, что есть проблема. Билет Chromium здесь, но на самом деле нет никакой интересной дискуссии по нему.

Эти сообщения являются предупреждениями, а не ошибками, потому что это не вызовет серьезных проблем. Это может привести к тому, что кадры будут пропущены или иным образом вызвать менее гладкое впечатление.

Тем не менее, их стоит изучить и исправить, чтобы улучшить качество вашего приложения. Это можно сделать, обращая внимание на обстоятельства, при которых появляются сообщения, и проводя тестирование производительности, чтобы определить причину возникновения проблемы. Самый простой способ начать тестирование производительности - вставить такой код:

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

    // Do the normal stuff for this function

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

Если вы хотите стать более продвинутым, вы также можете использовать профилировщик Chrome или использовать такую ​​библиотеку для сравнения, как эта .

Как только вы нашли некоторый код, который занимает много времени (50 мс - порог Chrome), у вас есть несколько вариантов:

1. Вырежьте часть / всю эту задачу, которая может быть ненужной
2. Узнайте, как выполнить ту же задачу быстрее
3. Разделите код на несколько асинхронных шагов

(1) и (2) может быть трудным или невозможным, но иногда это действительно просто и должно быть вашими первыми попытками. При необходимости это всегда можно сделать (3). Для этого вы будете использовать что-то вроде:

setTimeout(functionToRunVerySoonButNotNow);

или

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

Вы можете прочитать больше об асинхронной природе JavaScript здесь .

Это всего лишь предупреждения, как все упоминали. Однако, если вы заинтересованы в разрешении этих проблем (что следует), вам необходимо сначала определить причину, по которой выдается предупреждение. Там нет ни одной причины, из-за которой вы можете получить предупреждение о принудительном оплавлении. Кто-то создал список для некоторых возможных вариантов. Вы можете следить за обсуждением для получения дополнительной информации.
Вот суть возможных причин:

Что заставляет верстку / оплавление

Все нижеприведенные свойства или методы, при запросе / вызове в JavaScript, будут запускать браузер для синхронного вычисления стиля и макета *. Это также называется перекомпоновкой или компоновкой макета , и является обычным узким местом производительности.

Элемент

Box метрики

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

Прокрутка вещи

• elem.scrollBy(), elem.scrollTo()
• elem.scrollIntoView(), elem.scrollIntoViewIfNeeded()
• elem.scrollWidth, elem.scrollHeight
• elem.scrollLeft, elem.scrollTopТакже, устанавливая их

фокус

• elem.focus() может вызвать двойной принудительный макет ( источник )

Также…

• elem.computedRole, elem.computedName
• elem.innerText( источник )

getComputedStyle

window.getComputedStyle()будет обычно вызывать стиль recalc ( источник )

window.getComputedStyle() также принудительно выполнит компоновку, если выполнено любое из следующих действий:

1. Элемент находится в теневом дереве
2. Есть медиа-запросы (связанные с окном просмотра). В частности, одно из следующих действий : ( источник ) * min-width, min-height, max-width, max-height, width, height * aspect-ratio, min-aspect-ratio,max-aspect-ratio
   • device-pixel-ratio, resolution,orientation
3. Запрашиваемое свойство является одним из следующих: ( источник )
   • height, width * top, right, bottom, left * margin[ -top, -right, -bottom, -left, Или сокращенная ] только , если граница фиксируется. * padding[ -top, -right, -bottom, -left, Или сокращенная ] только если обивка фиксируется. * transform, transform-origin, perspective-origin * translate, rotate, scale * webkit-filter, backdrop-filter * motion-path, motion-offset, motion-rotation * x, y, rx,ry

окно

• window.scrollX, window.scrollY
• window.innerHeight, window.innerWidth
• window.getMatchedCSSRules() только силы стиля

формы

• inputElem.focus()
• inputElem.select(), textareaElem.select()( источник )

События мыши

• mouseEvt.layerX, mouseEvt.layerY, mouseEvt.offsetX, mouseEvt.offsetY ( Источник )

документ

• doc.scrollingElement только силы стиля

Ассортимент

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

SVG

• Достаточно много; Я не сделал исчерпывающий список, но список запуска макета Тони Джентилкора в 2011 году указал на несколько.

contenteditable

• Много-много всего, включая копирование изображения в буфер обмена ( источник )

Проверьте больше здесь .

Кроме того, вот исходный код Chromium из оригинального выпуска и обсуждение API производительности для предупреждений.

Изменить: Есть также статья о том, как минимизировать перекомпоновку макета на PageSpeed ​​Insight от Google . Это объясняет, что такое перекомпоновка браузера:

Reflow - это имя процесса веб-браузера для перерасчета позиций и геометрии элементов в документе с целью повторного рендеринга части или всего документа. Поскольку reflow является операцией блокировки пользователя в браузере, разработчикам полезно понять, как улучшить время перекомпоновки, а также понять влияние различных свойств документа (глубина DOM, эффективность правил CSS, различные типы изменений стиля) на перекомпоновку. время. Иногда для перекомпоновки одного элемента в документе может потребоваться перекомпоновка его родительских элементов, а также любых элементов, следующих за ним.

Кроме того, это объясняет, как минимизировать это:

1. Уменьшите ненужную глубину DOM. Изменения на одном уровне в дереве DOM могут вызвать изменения на каждом уровне дерева - вплоть до корня и вплоть до потомков модифицированного узла. Это приводит к увеличению времени, затрачиваемого на выполнение оплавления.
2. Минимизируйте правила CSS и удалите неиспользуемые правила CSS.
3. Если вы делаете сложные изменения рендеринга, такие как анимация, делайте это из потока. Используйте абсолютное положение или фиксированное положение для достижения этой цели.
4. Избегайте ненужных сложных CSS-селекторов - в частности, потомков-селекторов - которые требуют больше ресурсов процессора для сопоставления селекторов.

Пара идей:

• Удалите половину вашего кода (возможно, закомментировав его).

  • Проблема все еще там? Отлично, вы сузили возможности! Повторение.

  • Проблема не в этом? Хорошо, посмотрите на половину, которую вы закомментировали!

• Используете ли вы какую-либо систему контроля версий (например, Git)? Если так, git checkoutто некоторые из ваших последних коммитов. Когда возникла проблема? Посмотрите на коммит, чтобы увидеть, какой именно код изменился, когда впервые появилась проблема.

Чтобы определить источник проблемы, запустите приложение и запишите его на вкладке «Производительность» Chrome .

Там вы можете проверить различные функции, которые потребовалось много времени для запуска. В моем случае, тот, который коррелировал с предупреждениями в консоли, был из файла, который был загружен расширением AdBlock, но это может быть что-то другое в вашем случае.

Проверьте эти файлы и попытайтесь определить, является ли это кодом какого-либо расширения или вашим. (Если это ваше, значит, вы нашли источник вашей проблемы.)

Посмотрите в консоли Chrome на вкладке Сеть и найдите скрипты, которые загружаются дольше всего.

В моем случае был набор сценариев добавления Angular, которые я включил, но еще не использовал в приложении:

<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>

Это были единственные файлы JavaScript, которые загружались дольше, чем время, указанное в сообщении об ошибке «Long Running Task».

Все эти файлы запускаются на других моих веб-сайтах без сгенерированных ошибок, но я получаю эту ошибку "Long Running Task" в новом веб-приложении, которое едва имело какую-либо функциональность. Ошибка прекратилась сразу после удаления.

Мое предположение заключается в том, что эти надстройки Angular рекурсивно изучали все более глубокие разделы DOM для своих начальных тегов - не найдя ни одного, им пришлось пройти через весь DOM перед выходом, что заняло больше времени, чем ожидает Chrome, - таким образом, предупреждение.

Я нашел корень этого сообщения в своем коде, который искал и скрывал или показывал узлы (в автономном режиме). Это был мой код:

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');
});

Вкладка производительности (профилировщик) показывает, что событие занимает около 60 мс:

Сейчас:

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'));
});

Вкладка производительности (профилировщик) теперь показывает, что событие занимает около 1 мс:

И я чувствую, что поиск теперь работает быстрее (229 узлов).

Я нашел решение в исходном коде Apache Cordova. Они реализуют так:

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

Простая реализация, но умный способ.

Над Android 4.4 используйте Promise. Для старых браузеров используйтеsetTimeout()

Использование:

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

После вставки этого кода, все предупреждающие сообщения исчезли.

Это было добавлено в бета-версию Chrome 56, хотя в этом списке изменений нет из блога Chromium: Chrome 56 Beta: предупреждение «Not Secure», веб-Bluetooth и CSSposition: sticky

Вы можете скрыть это в панели фильтров консоли с помощью флажка Скрыть нарушения .

Если вы используете Chrome Canary (или бета-версию), просто установите флажок «Скрыть нарушения».

Это ошибка нарушения от Google Chrome, которая показывает, когда Verboseуровень ведения журнала включен.

Пример сообщения об ошибке:

Объяснение:

Reflow - это имя процесса веб-браузера для перерасчета позиций и геометрии элементов в документе с целью повторного рендеринга части или всего документа. Поскольку reflow является операцией блокировки пользователя в браузере, разработчикам полезно понять, как улучшить время перекомпоновки, а также понять влияние различных свойств документа (глубина DOM, эффективность правил CSS, различные типы изменений стиля) на перекомпоновку. время. Иногда для перекомпоновки одного элемента в документе может потребоваться перекомпоновка его родительских элементов, а также любых элементов, следующих за ним.

Оригинальная статья: Минимизация перекомпоновки браузера Линдси Саймон, разработчиком UX, опубликована на developers.google.com.

И эта ссылка Google Chrome дает вам в профилировщике производительности, в профилях макетов (лиловые регионы), для получения дополнительной информации о предупреждении.

Добавление моих идей здесь, поскольку эта тема была вопросом «перейти к» stackoverflow по теме.

Моя проблема была в приложении Material-UI (ранние стадии)

• причиной был выбор поставщика Темы

когда я делал некоторые расчеты, заставляющие рендеринг страницы (один компонент, «отображение результатов», зависит от того, что установлено в других, «входные разделы»).

Все было хорошо, пока я не обновил «состояние», которое заставляет «компонент результатов» перерисовываться. Основная проблема заключалась в том, что у меня была тема материала-интерфейса ( https://material-ui.com/customization/theming/#a-note-on-performance ) в том же устройстве визуализации (App.js / return ..) в качестве «компонента результатов», SummaryAppBarPure

Решение состояло в том, чтобы поднять ThemeProvider на один уровень вверх (Index.js) и обернуть здесь компонент App, не заставляя ThemeProvider пересчитывать и рисовать / layout / reflow.

перед

в App.js:

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

        <SummaryAppBarPure
//...

в index.js

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

после

в App.js:

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

        <SummaryAppBarPure
//...

в index.js

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

Принудительное перекомпонование часто происходит, когда у вас есть функция, вызванная несколько раз до конца выполнения.

Например, у вас может быть проблема на смартфоне, но не на классическом браузере.

Я предлагаю использовать setTimeoutдля решения проблемы.

Это не очень важно, но я повторяю, проблема возникает, когда вы вызываете функцию несколько раз, а не когда функция занимает более 50 мс. Я думаю, что вы ошибаетесь в своих ответах.

1. Выключите вызовы «1 на 1» и перезагрузите код, чтобы увидеть, все равно ли он выдает ошибку.
2. Если второй скрипт вызывает ошибку, используйте setTimeOutоснованный на продолжительности нарушения.

Это не ошибка, просто сообщение. Чтобы выполнить это сообщение, измените
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">(пример)
на
<!DOCTYPE html>(источник Firefox ожидает этого)

Сообщение было показано в Google Chrome 74 и Opera 60. После смены было понятно, 0 многословно.
Подход к решению