CSS Basics (i)--browser loading and rendering Web pages

1. Introduction

Although this is a CSS note, but as a web development, every day and browser to deal with, it is necessary to first of all I understand the browser loading and rendering the process of the page.

2. Page loading and rendering process

:(the focus of this article is CSS, so the graph highlights CSS rendering)

• 1. Rebuilding the DOM tree: The rendering engine begins parsing the HTML document, converting the tags in the tree to the DOM node
• 2. Build the render tree: parse the CSS, find the style of the node based on the CSS selector, create another tree ——— the render tree
• 3. Layout render Tree: calculates the size and position of each element, starting at the root node
• 4. Draw the render tree: traverse the render tree to draw each node

the whole process is simple description: The user visits the webpage sends the HTTP request, the server receives the request to make the corresponding processing through the HTTP response to return the HTML file to the browser, the browser resolves the HTTP response and creates the DOM tree, the browser downloads the CSS, and applied in the DOM tree, rendering, browser download JS, and parse the execution JS;

3. Related concepts (redraw, reflow, CSS engine find style sheet rules)Redraw:Is the appearance of an element changes, but does not change the layout of the case occurs;
Scene Description: When the size is not set, while the external container does not have a dead height, occupy space from 0 to the full appearance, the left and right up and down are possible displacements, a large-scale redraw.reflow:The browser found that a part of the changes in the impact of the layout, you need to rewind back to render;
Scene Description: An element has a very complex animation effect (from top to bottom from the right to move), change the layout, there will be reflux;
Solution: This element uses absolute positioning, leaving it out of the document flow;
The CSS engine looks for style sheet rules:Search from right to left;
Scene Description: #ul Li is now in the page to find all Li, and then find #ul;
Solution: Minimize the use of descendant selectors, depending on the situation

CSS Basics (i)--browser loading and rendering Web pages