Display: None and visibility: hidden

Display: None The space occupied by hidden elements will also disappear. Visibility: Hidden or occupying space.

2, display: none has no inheritance, visibility: hidden has inheritance. If you set the parent element to visibility: hidden, its children will inherit the property. If you set the child element to visibility: Visible, the child element will be visible.

3, visibility: hidden Will not affect the operation of the counter. For example, the li label in the OL label will hide the second label, and the serial number of subsequent labels will remain the same. If you use display: None, the serial number of subsequent labels will connect to the previous one.

CSS3 transition supports visibility, but does not support display

5, display: None causes backflow and redraw visibility:hidden causes redraw

Second, the submission of documents and rendering phase

1. Submit documents

The requested document data is stored in the web process and has not yet been submitted to the renderer. During the document submission phase, the browser process submits the HTML data received by the web process to the renderer process.

Specific process:

1.1. First, when the browser process receives the response header data from the network process, it sends a message of “submit document” to the renderer process;

1.2. After receiving the message of “submit document”, the rendering process will establish a “pipeline” to transmit data with the network process; After the document data transfer is complete, the renderer process returns a “confirm submit” message to the browser process.

1.3. After receiving the message “confirm submission”, the browser process will update the browser interface status, including the security status, URL of the address bar, historical status of forward and backward, and update the Web page.

2. Rendering stage

2.1. Build a DOM tree (one node for each label, including display: None hidden node)

2.2 CSS is parsed into style structure styleSheets (which can be interpreted as CSSOM), and finally the style of each DOM node is calculated and stored in the structure of ComputedStyle.

Add all visible nodes from the DOM tree to the LayoutTree (dispaly: None). Dispaly: None

2.4. Layer the layout tree and generate a layered tree.

2.5. Generate a draw list for each layer and submit it to the composition thread.

2.6. Composite threads divide layers into blocks and convert blocks into bitmaps in the rasterized thread pool.

2.7. The composite thread sends the DrawQuad command to the browser process.

2.8 The browser process generates a page based on the DrawQuad message and displays it on the monitor.

Three, rearrangement, redrawing, synthesis

1. Update element geometry (rearrangement)

If you change the geometry of an element using JavaScript or CSS, such as changing its width, height, etc., then the browser triggers a rearrangement, a series of sub-stages after parsing, called rearrangement. Of course, reordering requires updating the entire rendering pipeline, so it’s also the most expensive.

2. Update the element’s draw attribute (redraw)

As can be seen in the figure, if you change the background color of the element, the layout phase will not be performed, because there is no change in the geometry position, so you directly enter the drawing phase, and then perform a series of subsequent phases, which is called redraw. Redraw eliminates layout and layering, so it is more efficient than rearrange.

3. Direct synthesis stage

So what happens if you change a property that neither layouts nor draws? The rendering engine skips layout and drawing and only performs subsequent compositing operations, which we call compositing. In the image above, we use the TRANSFORM of CSS to animate the effect, which avoids the rearrangement and redraw phases and executes the compositing animation directly on the non-main thread. This is the highest efficiency, because it is composed on the non-main thread, does not occupy the main thread resources, and avoids the layout and drawing two sub-stages, so compared with redraw and rearrangement, composition can greatly improve the drawing efficiency.

Iv. Optimization (to be studied)

1. Browser queue optimization mechanism

Modern browsers do not perform every backflow redraw. Instead, they queue operations that involve backflow redraw. After a period of time or when the queue is full, the browser executes all operations in the queue at once, greatly reducing backflow redraw times and improving performance. However, the queue will be forced to refresh when the code execution needs to obtain the location information of some elements (for example, when executing some jS apis to obtain the location information). These apis include: ClientWidth, clientHeigth, clientLeft, clientTop, ScrollWidth, scrollHeight, scrollLeft, scrollTop, getBoundingClientRect()…

2. How to reduce backflow and redraw

css

Use transform instead of TOP (CSS hardware acceleration, one less layout delay). Avoid using table layout to avoid multi-layer nesting and flat structure as much as possible. For DOM elements with complex animation effects, they should be separated from the document flow and use visibility. Opacity replaces display: none (the former only involves redrawing, while the latter requires backflow)

js

Setting a CSS style for a DOM element avoids setting it line by line (for example: Width = ’40px’, el.style.color = ‘red’), can be set centrally with cssText, or first set the style class in CSS, using JS directly add the class name. There are three steps involved in batch DOM modification

(1): Take the DOM element to be modified out of the document flow.

(2): It has been modified for several times.

(3): Bring the DOM element back into the document flow.

For the above methods involving batch DOM modification, there are probably one of the following:

(1) First set the display element to None, then modify it, and finally redisplay it

(2) Create a subtree outside the current document stream using createDocumentfragment() and insert it back into the document.

(3) Copy the original element to a separate node, modify the node, and then replace the original element (API: copy cloneNode(), replace replaceChild()))