• Register

When we created a website, it took so much code and effort. We make code to work as we wanted but sometimes our webpage can break, show errors or may be some performance issues.
This article discusses one of those warnings “[Violation] Forced reflow while executing JavaScript took 42ms”.

Explanation

This warning pops up in the browser's console. Since it is a warning, we want to know what is the meaning and what’s causing this warning?
The warning is related to the performance of the website not with the content of the webpage it means our webpage is still running on the web but there are some minor performance issues.
 

Example

;(function ($) {
  var options = {};
  window.sr = ScrollReveal(options);

  sr.reveal('.sr-item', { viewFactor: 0.6, duration: 500 });
  sr.reveal('.sr-item--seq', { viewFactor: 0.6, duration: 500 }, 50);
})(jQuery);

screen shot 2017-04-05 at 10 23 52 pm

Cause

ScrollReveal depends upon getComputedStyle() function and editing style attributes. Both getComputedStyle() and editing style attributes cause style and layout.
In the above example, the programmer created both of them in the same loop, that caused soome layout thrashing.
 

Solution

Try to separate them (getComputedStyle() and editing style attributes). When we separate them then all computed styles are gathered before any DOM modifications. It should increase the website's performance.

Hope this will help.
 

100 points
7 4