Three practical techniques for improving web page performance and improving web page performance

Three practical techniques for improving web page performance and improving web page performance

1,Display attribute settings

Set the elementDisplay: none(The node needs to be reshuffled and re-painted once), 100 operations are performed on the node, and the display is restored (the node needs to be re-painted once ). In this way, you can use two re-renders to replace up to 100 re-renders.

The display attribute of the element is visible only when necessary,Because invisible elements do not affect shuffling and re-painting.. In addition,Visibility: hiddenOnly the re-painting has an effect on the elements, and does not affect the re-arrangement.

 

2,Position: absolute/fixed

The position attribute is absolute orFixedThe overhead of the rearrangement is relatively small, because you do not need to consider its impact on other elements.

 

3,Do not change the style one by one, but change the style one by changing the class or csstext attribute..

// Badvar left = 10; var top = 10; el. style. left = left + "px"; el. style. top = top + "px"; // good el. className + = "theclassname"; // goodel.style.css Text + = "; left:" + left + "px; top:" + top + "px ;";

 

The above reference Ruan Yifeng technology blog: http://www.ruanyifeng.com/blog/2015/09/web-page-performance-in-depth.html