loading

  1. First the browser will make sure that the input iskeywordsorsite, if it is a keyword to carry keywords to the engine to find the site, then the site for a resolution.

  1. Then, the Network thread will be notified to search for the DNS IP address before it can connect to the server. If HTTPS is used, the TLS connection will be required, and the access may encounter 301. Then, the Network thread will need to initiate a request again, and then access the real address to request. Before launching a request, it will set some information for the request. The current browser is UA (User Agent) and some information of the header, and then it will initiate a GET request to get resources. After receiving the request, the server will search for the corresponding application, which will have related functions. Then organize the page and data into the response according to the logic inside. Instead of reading all the response, we need to analyze the data type when reading the first few bytes of response. Although the header part tells the data type, But the browser will still parse the content, because the type we tell you may not be the type the browser really needs.

  2. Security check to determine whether the access to the domain name is safe. There will be a whitelist and blacklist in the browser. If the access is here, it will prompt or prohibit access. The other thing is to do some checking of the resource to see if there are any cross-site access cases, and after the security check is passed, the UI thread is notified that all the data is ready.

  1. The navigation part is done. EnterDocument rendering“, the browser will save the record of the visit, and will find that forward and backward can be used.

The next step is for the browser to parse the DOM.

What does the browser do before rendering the page?

  • Javascript: Does something to the DOM.
  • Style: Modify based on some of the actions made.
  • Layout: Re-reads the CSS for rendering. Layout is actually a matter of geometry because it gets the position, size, and so on of the DOM and rearranges it.
  • Paint: After retrieving the DOM information in step 3, start painting.
  • Composite: If a part of the DOM tree is changed, a new layer (similar to photoshop) is created to draw the changed content and then the content is combined.
  • Styles do not go through Layout and Paint if they do not affect the Layout and drawing.

Finally, here are the three steps:

  • Building an object Model
    • HTML-DOM
  • Build the CSSOM object
    • CSS-CSSOM
  • The browser builds the render tree
    • DOM and CSSDOM are merged into Rend Tree

1. Build an object model

Parsing an HTML document into a DOM tree, nested relationships can be expressed by enclosing Angle brackets for tags and placing strings in a chained tree structure. Also called DOM Document Object Model

2. Build the CSSOM object

If you parse to external CSS resources, load those resources to see which style is described and describe it in a tree structure.

  1. The main thread also has some optimization points when parsing the DOM. For example, in order to speed up the process, it first prescans and parses some tags in the document. If the tags of the sub-resources appear, they are loaded while parsing the DOM (that is, parallel loading).
  2. JS blocks parsing: Because JS may contain changes to the DOM, this is why parsing is blocked for JS.
  3. Parsing CSS: a DOM is ultimately computed tocomputed stylesThis attribute is not what we define it to be, because some browsers add some default styles to the DOM as well.
  4. Constructing a layout tree: CSS combined with DOM. Such as calculating geometry, position, size, layout trees only contain what is really displayed, such asDisplay: noneElements are not displayed, but they are in the DOM tree.
  5. Create a draw record to determine the order in which to draw.

6. Then split the page into layers and build a layer tree. This step we can debug tools in ChromeperformanceseeLayout Tree. With the layer tree, you can use the composite thread to combine the layers into a single frame, and get everything you need for a single frame, and then the page is really complete.