Violation Long running JavaScript task took xx ms

Question

Recently  I got this kind of warning  and this is my first time getting it       Violation  Long running JavaScript task took 234ms  Violation  Forced reflow while executing JavaScript took 45ms    I m working on a group project and I have no idea where this is coming from  This never happened before  Suddenly  it appeared when someone else got involved in the project  How do I find what file function causes this warning  I ve been looking for the answer  but mostly about the solution on how to solve it  I can t solve it if I can t even find the source of the problem   In this case  the warning appears only on Chrome  I tried to use Edge  but I didn t get any similar warnings  and I haven t tested it on Firefox yet   I even get the error from jquery min js       Violation  Handler took 231ms of runtime  50ms allowed             jquery min js 2

User · Answer

I found the root of this message in my code, which searched and hid or showed nodes (offline). This was my code:

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

The performance tab (profiler) shows the event taking about 60 ms: Chromium performance profiler layout recalculation reflow

Now:

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

The performance tab (profiler) now shows the event taking about 1 ms: Chromium profiler dark

And I feel that the search works faster now (229 nodes).

User · Answer

Adding my insights here as this thread was the  go to  stackoverflow question on the topic   My problem was in a Material-UI app  early stages     placement of custom Theme provider was the cause    when I did some calculations forcing rendering of the page   one component   display results   depends on what is set in others   input sections      Everything was fine until I updated the  state  that forces the  results component  to rerender  The main issue here was that I had a material-ui theme  https   material-ui com customization theming  a-note-on-performance  in the same renderer  App js   return     as the  results component   SummaryAppBarPure  Solution was to lift the ThemeProvider one level up  Index js   and wrapping the App component here  thus not forcing the ThemeProvider to recalculate and draw   layout   reflow    before   in App js     return        lt  gt         lt MyThemeProvider gt         lt Container className  classes appMaxWidth  gt            lt SummaryAppBarPure         in index js  ReactDOM render     lt React StrictMode gt         lt App   gt          after  in App js    return        lt  gt            move theme to index  made reflow problem go away                lt MyThemeProvider gt             lt Container className  classes appMaxWidth  gt            lt SummaryAppBarPure         in index js  ReactDOM render     lt React StrictMode gt       lt MyThemeProvider gt         lt App   gt

User · Answer

This was added in the Chrome 56 beta  even though it isn t on this changelog from the Chromium Blog  Chrome 56 Beta     Not Secure    warning  Web Bluetooth  and CSS position  sticky  You can hide this in the filter bar of the console with the Hide violations checkbox

User · Answer

This is not an error just simple a message  To execute this message change   lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN   http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt   example  to   lt  DOCTYPE html gt  the Firefox source expect this  The message was shown in Google Chrome 74 and Opera 60   After changing it was clear  0 verbose  A solution approach

User · Answer

In order to identify the source of the problem  run your application  and record it in Chrome s Performance tab   There you can check various functions that took a long time to run  In my case  the one that correlated with warnings in console was from a file which was loaded by the AdBlock extension  but this could be something else in your case   Check these files and try to identify if this is some extension s code or yours   If it is yours  then you have found the source of your problem

User · Answer

These are just warnings as everyone mentioned  However  if you re keen on resolving these  which you should   then you need to identify what is causing the warning first  There s no one reason due to which you can get force reflow warning  Someone has created a list for some possible options  You can follow the discussion for more information  Here s the gist of the possible reasons       What forces layout   reflow      All of the below properties or methods  when requested called in   JavaScript  will trigger the browser to synchronously calculate the   style and layout   This is also called reflow or layout   thrashing    and is common performance bottleneck        Element      Box metrics         elem offsetLeft  elem offsetTop  elem offsetWidth  elem offsetHeight  elem offsetParent   elem clientLeft  elem clientTop  elem clientWidth  elem clientHeight   elem getClientRects    elem getBoundingClientRect           Scroll stuff         elem scrollBy    elem scrollTo     elem scrollIntoView    elem scrollIntoViewIfNeeded       elem scrollWidth  elem scrollHeight   elem scrollLeft  elem scrollTop also  setting them         Focus         elem focus    can trigger a double forced layout  source          Also            elem computedRole  elem computedName     elem innerText  source          getComputedStyle      window getComputedStyle   will typically force style recalc    source       window getComputedStyle   will force layout  as well  if any of the   following is true           The element is in a shadow tree   There are media queries  viewport-related ones   Specifically  one of the following     source      min-width  min-height  max-width  max-height  width  height     aspect-ratio  min-aspect-ratio  max-aspect-ratio           device-pixel-ratio  resolution  orientation       The property requested is one of the following    source          height  width     top  right  bottom  left     margin  -top  -right  -bottom  -left  or shorthand  only if the   margin is fixed      padding  -top  -right  -bottom  -left    or shorthand  only if the padding is fixed      transform    transform-origin  perspective-origin     translate  rotate    scale     webkit-filter  backdrop-filter     motion-path    motion-offset  motion-rotation     x  y  rx  ry            window         window scrollX  window scrollY   window innerHeight  window innerWidth   window getMatchedCSSRules   only forces style         Forms         inputElem focus     inputElem select    textareaElem select    source          Mouse events         mouseEvt layerX  mouseEvt layerY  mouseEvt offsetX  mouseEvt offsetY    source          document         doc scrollingElement only forces style         Range         range getClientRects    range getBoundingClientRect           SVG         Quite a lot  haven t made an exhaustive list   but Tony Gentilcore s 2011 Layout Triggering   List   pointed to a few          contenteditable         Lots  amp  lots of stuff     including copying an image to clipboard  source       Check more here   Also  here s Chromium source code from the original issue and a discussion about a performance API for the warnings     Edit  There s also an article on how to minimize layout reflow on PageSpeed Insight by Google  It explains what browser reflow is       Reflow is the name of the web browser process for re-calculating the   positions and geometries of elements in the document  for the purpose   of re-rendering part or all of the document  Because reflow is a   user-blocking operation in the browser  it is useful for developers to   understand how to improve reflow time and also to understand the   effects of various document properties  DOM depth  CSS rule   efficiency  different types of style changes  on reflow time    Sometimes reflowing a single element in the document may require   reflowing its parent elements and also any elements which follow it    In addition  it explains how to minimize it         Reduce unnecessary DOM depth  Changes at one level in the DOM tree   can cause changes at every level of the tree - all the way up to the   root  and all the way down into the children of the modified node    This leads to more time being spent performing reflow    Minimize CSS rules  and remove unused CSS rules    If you make complex rendering changes such as animations  do so out of the flow  Use position-absolute or position-fixed to accomplish   this    Avoid unnecessary complex CSS selectors - descendant selectors in   particular - which require more CPU power to do selector matching

User · Answer

A couple of ideas    Remove half of your code  maybe via commenting it out     Is the problem still there  Great  you ve narrowed down the possibilities  Repeat  Is the problem not there  Ok  look at the half you commented out   Are you using any version control system  eg  Git   If so  git checkout some of your more recent commits  When was the problem introduced  Look at the commit to see exactly what code changed when the problem first arrived

User · Answer

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    Cut out some all of that task that may be unnecessary Figure out how to do the same task faster 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

User · Answer

Look in the Chrome console under the Network tab and find the scripts which take the longest to load    In my case there were a set of Angular add on scripts that I had included but not yet used in the app        lt script src    cdnjs cloudflare com ajax libs angular-ui-router 0 2 8 angular-ui-router min js  gt  lt  script gt   lt script src    cdnjs cloudflare com ajax libs angular-ui-utils 0 1 1 angular-ui-utils min js  gt  lt  script gt   lt script src    ajax googleapis com ajax libs angularjs 1 3 9 angular-animate min js  gt  lt  script gt   lt script src    ajax googleapis com ajax libs angularjs 1 3 9 angular-aria min js  gt  lt  script gt    These were the only JavaScript files that took longer to load than the time that the  Long Running Task  error specified   All of these files run on my other websites with no errors generated but I was getting this  Long Running Task  error on a new web app that barely had any functionality  The error stopped immediately upon removing   My best guess is that these Angular add ons were looking recursively into increasingly deep sections of the DOM for their start tags - finding none  they had to traverse the entire DOM before exiting  which took longer than Chrome expects - thus the warning

User · Answer

If you re using Chrome Canary  or Beta   just check the  Hide Violations  option

User · Answer

This is violation error from Google Chrome that shows when the Verbose logging level is enabled   Example of error message     Explanation      Reflow is the name of the web browser process for re-calculating the positions and geometries of elements in the document  for the purpose of re-rendering part or all of the document  Because reflow is a user-blocking operation in the browser  it is useful for developers to understand how to improve reflow time and also to understand the effects of various document properties  DOM depth  CSS rule efficiency  different types of style changes  on reflow time  Sometimes reflowing a single element in the document may require reflowing its parent elements and also any elements which follow it    Original article  Minimizing browser reflow by Lindsey Simon  UX Developer  posted on developers google com   And this is the link Google Chrome gives you in the Performance profiler  on the layout profiles  the mauve regions   for more info on the warning

User · Answer

Forced reflow often happens when you have a function called multiple times before the end of execution   For example  you may have the problem on a smartphone  but not on a classic browser   I suggest using a setTimeout to solve the problem   This isn t very important  but I repeat  the problem arises when you call a function several times  and not when the function takes more than 50 ms  I think you are mistaken in your answers    Turn off 1-by-1 calls and reload the code to see if it still produces the error  If a second script causes the error  use a setTimeOut based on the duration of the violation

User · Answer

I found a solution in Apache Cordova source code  They implement like this   var resolvedPromise   typeof Promise     undefined    null   Promise resolve    var nextTick   resolvedPromise   function fn    resolvedPromise then fn       function fn    setTimeout fn        Simple implementation  but smart way   Over the Android 4 4  use Promise  For older browsers  use setTimeout      Usage   nextTick function          your code       After inserting this trick code  all warning messages are gone

User · Answer

For what it   s worth  here are my 2   when I encountered the  Violation  Forced reflow while executing JavaScript took  lt N gt ms  warning  The page in question is generated from user content  so I don   t really have much influence over the size of the DOM  In my case  the problem is a table of two columns with potentially hundreds  even thousands of rows   No on-demand row loading implemented yet  sorry   Using jQuery  on keydown the page selects a set of rows and toggles their visibility  I noticed that using toggle   on that set triggers the warning more readily than using hide    amp  show   explicitly  For more details on this particular performance scenario  see also this article

[javascript] Violation Long running JavaScript task took xx ms

Examples related to javascript

Examples related to google-chrome

Examples related to dom