Nine tips for improving Web page performance

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

Second, if a style is re-queued, it is best to cache the result. Avoid the next time you use it, your browser will have to rearrange it again.

Third, do not change the style, but by changing the class, or Csstext properties, one-time changes in style.

Badvar left = 10;var top = 10;el.style.left = left + "px"; el.style.top  = top  + "px";//good El.classname + = "T Heclassname ";//Goodel.style.cssText + ="; Left: "+ left +" PX; Top: "+ top +" px; ";

Fourth, try to use the offline DOM instead of the real web dom to change the element style. For example, manipulate the Document Fragment object and then add the object to the DOM when you are done. For example, use the CloneNode () method to operate on the cloned node, and then replace the original node with the cloned node.

Fifth, the element is set to Display:none (1 reflow and redraw required), then 100 operations are performed on the node, and then the display is restored (1 reflow and redraw required). This allows you to re-render two times instead of possibly up to 100 times.

Sixth, the Position property is a absolute or fixed element, and the cost of rearrangement is small because it does not take into account the effect it has on other elements.

Seventh, only when necessary, the display property of the element is visible, because invisible elements do not affect reflow and redraw. In addition, the elements of Visibility:hidden only have an effect on rearrangement, and do not affect redrawing.

Eighth, the use of Virtual DOM script library, such as React.

Nineth, use the Window.requestanimationframe (), Window.requestidlecallback () methods to adjust the re-rendering.

First, Window.requestanimationframe ()

There are some JavaScript methods that can adjust the re-rendering to dramatically improve Web page performance.

The most important of these is the Window.requestanimationframe () method. It can put some code into execution the next time it is re-rendered.

function Doubleheight (Element) {  var currentheight = element.clientheight;  Element.style.height = (Currentheight * 2) + ' px ';} Elements.foreach (Doubleheight);

The above code uses a looping operation to increase the height of each element by one-fold. However, each loop is followed by a write operation followed by the read operation. This triggers a lot of re-rendering in a short period of time, which is obviously bad for Web page performance.

We can use it to window.requestAnimationFrame () separate the read and write operations and put all the writes to the next re-render.

function Doubleheight (Element) {  var currentheight = element.clientheight;  Window.requestanimationframe (function () {    element.style.height = (Currentheight * 2) + ' px ';  }); Elements.foreach (Doubleheight);

Page scrolling event (scroll) of the listener function, it is appropriate to use Window.requestanimationframe (), deferred to the next re-rendering.

$ (window). On (' scroll ', function () {   window.requestanimationframe (scrollhandler);});

Of course, the most suitable for the occasion is web animation. Here is an example of a rotation animation, where the element rotates 1 degrees per frame.

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

Second , 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 if there is idle time at the end of a frame.

Requestidlecallback (FN);

In the above code, the function FN executes only if the current frame is running at less than 16.66ms. Otherwise, postpone to the next frame, and if the next frame has no idle time, postpone to the next frame, and so on.

It can also accept the second parameter, which represents the specified number of milliseconds. If there is no idle time for each frame during the specified period of time, the function FN will be enforced.

Requestidlecallback (FN, 5000);

The code above indicates that the function FN will be executed at the latest after 5000 milliseconds.

The 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 milliseconds remaining in the current frame. This method is read-only, cannot be written, and is dynamically updated. Therefore, you can constantly check this property, and if there is time remaining, perform certain tasks. Once this attribute is equal to 0, the task is assigned to the next round requestIdleCallback .

In the preceding example code, the Doworkifneeded method is called continuously as long as there is idle time in the current frame. Once there is no idle time, but the task is not fully implemented, it is assigned to the next round requestIdleCallback .

(2) Didtimeout property

The properties of the deadline object didTimeout return a Boolean value that indicates whether the specified time expires. This means that if the callback function is triggered by a specified time expiration, you will get two results.

• The Timeremaining method returns 0
• Didtimeout property equals True

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

function Mynonessentialwork (deadline) {while  ((deadline.timeremaining () > 0 | | deadline.didtimeout) && Tasks.length > 0)    doworkifneeded ();  if (Tasks.length > 0)    requestidlecallback (mynonessentialwork);} Requestidlecallback (Mynonessentialwork, 5000);

The above code ensures that the Doworkifneeded function is bound to be repeated over time (or after a specified time expires) in the future.

Requestidlecallback is a very new function that has just introduced the standard and is currently only supported by Chrome.

Nine tips for improving Web page performance