9 tips for improving web page performance and 9 tips for Web pages

9 tips for improving web page performance and 9 tips for Web pages

First, multiple DOM read Operations (or multiple write operations) should be put together. Do not add a write operation between two read operations.

Second, if a style is obtained by shuffling, it is best to cache the result. This prevents the browser from re-arranging when it is used for the next time.

Article 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.cssText += "; left: " + left + "px; top: " + top + "px;";

Article 4: Use offline DOM instead of the real DOM to change the element style. For example, to operate on the Document Fragment object, add the object to the DOM. For example, use the cloneNode () method to operate on the cloned node, and then replace the original node with the cloned node.

Article 5: first set the element to display: none (requires one re-arrangement and re-painting), and then perform 100 operations on the node, then restore the display (one re-arrangement and re-painting are required ). In this way, you can use two re-renders to replace up to 100 re-renders.

Article 6: if the position attribute is an element of absolute or fixed, the overhead of rescheduling is relatively small because it does not have to be considered as an impact on other elements.

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

Article 8: Use a virtual DOM script library, such as React.

Article 9: Adjust the re-rendering using the window. requestAnimationFrame () and window. requestIdleCallback () methods.

 

I. window. requestAnimationFrame ()

Some JavaScript methods can be used to adjust the re-rendering, greatly improving the web page performance.

The most important one is the window. requestAnimationFrame () method. It can put some code into the next re-rendering for execution.

function doubleHeight (element) {  var currentHeight = element.clientHeight;  element.style.height = (currentHeight * 2) + 'px';}elements.forEach (doubleHeight);

The above Code uses a loop operation to double the height of each element. However, each loop is followed by a write operation. This will trigger a lot of re-rendering in a short time, which is obviously unfavorable to the web page performance.

We can usewindow.requestAnimationFrame ()To separate read and write operations and put all write operations to the next re-rendering.

function doubleHeight (element) {  var currentHeight = element.clientHeight;  window.requestAnimationFrame (function () {    element.style.height = (currentHeight * 2) + 'px';  });}elements.forEach (doubleHeight);

The page rolling event (scroll) Listening function is suitable for window. requestAnimationFrame (), which is postponed to the next re-rendering.

$(window) .on ('scroll', function() {   window.requestAnimationFrame (scrollHandler);});

Of course, webpage animation is the most suitable scenario. The following is an example of rotating an animation. Each frame of an element is rotated at 1 degree.

var rAF = window.requestAnimationFrame;var degrees = 0;function update () {  div.style.transform = "rotate (" + degrees + "deg)";  console.log ('updated to degrees ' + degrees);  degrees = degrees + 1;  rAF (update);}rAF (update);

II, Window. requestIdleCallback ()

There is also a function window. requestIdleCallback (), which can also be used to adjust the re-rendering.

It specifies that the callback function is executed only when the end of a frame has idle time.

requestIdleCallback (fn);

In the code above, function fn is executed only when the running time of the current frame is less than 16.66 ms. Otherwise, it will be postponed to the next frame. If there is no idle time for the next frame, it will be postponed to the next frame, and so on.

It can also accept the second parameter, indicating the specified number of milliseconds. If there is no idle time for each frame within the specified period, the function fn will be executed forcibly.

requestIdleCallback (fn, 5000);

The code above indicates that the function fn will be executed in 5000 milliseconds at the latest.

Function fn can accept a deadline object as a parameter.

requestIdleCallback (function someHeavyComputation (deadline) {  while(deadline.timeRemaining () > 0) {    doWorkIfNeeded ();  }  if(thereIsMoreWorkToDo) {    requestIdleCallback (someHeavyComputation);  }});

In the above Code, the someHeavyComputation parameter of the callback function is a deadline object.

The deadline object has a method and a property: timeRemaining () and didTimeout.

(1) timeRemaining () method

The timeRemaining () method returns the remaining milliseconds of the current frame. This method can only be read, cannot be written, and will be dynamically updated. Therefore, you can constantly check this attribute and execute some tasks if there is still time remaining. Once this attribute is equal to 0, the task is assigned to the next round.requestIdleCallback.

In the previous sample code, the doWorkIfNeeded method is continuously called as long as the current frame has idle time. Once there is no idle time, but the task has not been fully executed, it will be allocated to the next roundrequestIdleCallback.

(2) didTimeout attribute

Deadline objectdidTimeoutReturns a Boolean value indicating whether the specified time has expired. This means that if the callback function is triggered due to a specified expiration time, you will get two results.

• The timeRemaining method returns 0.
• The didTimeout attribute is equal to true.

Therefore, if the callback function is executed, there are only two reasons: the current frame has idle time, or the specified time has reached.

function myNonEssentialWork (deadline) {  while ((deadline.timeRemaining () > 0 || deadline.didTimeout) && tasks.length > 0)    doWorkIfNeeded ();  if (tasks.length > 0)    requestIdleCallback (myNonEssentialWork);}requestIdleCallback (myNonEssentialWork, 5000);

The code above ensures that the doWorkIfNeeded function will be executed repeatedly in a relatively idle time (or after the specified time expires) in the future.

RequestIdleCallback is a very new function, just introduced the standard, currently only supported by Chrome.