From the front-end point of view, the page freeze is the most affecting user experience, and good code is the cornerstone to ensure the stable and high-performance operation of the page. There are many reasons for the front-end page freeze, which can be divided into two categories from the rendering mechanism and operation:
(1) The rendering is not timely, and the page drops frames
(2) The memory usage of the webpage is too high, and the operation freezes
The two categories are subdivided into:
The rendering is not timely, and the page drops frames
Occupying the js thread for a long time
Js is a single-threaded language. The browser only assigns one main thread to JS, and executes a task from the task queue each time until the task queue is empty. When the calculation time is too long, it is inevitable that the rendering will not be timely.
Reasons for delayed rendering:
The rendering frequency of the browser is generally 60HZ, that is, the time required for one frame is 1s / 60 = 16.67ms. When the browser displays the page, it must process js logic and render, and each execution segment cannot exceed 16.67ms. In fact, the operation of the browser kernel's own support system also takes some time, so the time left for us is only about 10ms.
Common optimization methods:
Using requestIdleCallback and requestAnimationFrame, task fragmentation
More page reflows and redraws
solve:
1. Try to use the abbreviation of css attributes: such as: use boder instead of boder-width, boder-style, boder-color
2. Batch modify element style elem.className
3. Try to avoid using table layout (once the table element triggers reflow, it will cause all other elements in the table to reflow)
4. When multiple DOM nodes need to be created, use DocumentFragment to create them.
Because: reflow occurs every time a page is created, so DocumentFragment is used for batch creation
5. Try to write css expressions. Because the value is recalculated on every call (including loading the page
Resource loading blocking
solve:
(1) Optimize resource loading, code splitting, on-demand loading, reduce CSS blocking of rendering, load CSS as early as possible, and reduce loading size
The memory usage of the webpage is too high, and the operation is stuck [Here, we need to pay attention to the memory recovery mechanism of js ]
Memory leak caused by unexpected global variable
solve:
(1) Use strict mode to avoid
Memory leaks caused by closures
solve:
(1) Set null for shared variables
forgotten timer
solve:
(1) Timely recovery timer
circular reference
solve:
(1) Circular reference means that object A contains another pointer to object B, and B also contains a reference to A.
Because the implementation of BOM and DOM in IE uses COM, and the garbage collection mechanism used by COM objects is a reference counting strategy. So there will be a circular reference problem
Method: manually disconnect the link between the js object and the DOM, and assign null.
For example:
function handle () {
var element = document.getElementById(“testId”);
element.onclick = function (){
alert(element.id)
}
}
solve:
function handle () {
var element = document.getElementById(“testId”);
element.onclick = function (){
alert(element.id)
}
element = null
There is no unbind event when DOM is deleted
solve:
(1) For example, delete a button, but the event on the button is not released
References to DOM elements that are not sanitized
DOM nodes or events occupy too much memory
solve:
(1) Adopt virtual list and event delegation