How the browser parses the code

This article mainly introduces how the browser parses the code, the article is very detailed, has a certain reference value, interested friends must read it!

How does the browser parse the code?

parse HTML

HTML is parsed line-by-line, and the browser's rendering engine parses and converts HTML documents into DOM nodes.

Parse HTML into Tokens

Resolving Tokens to Objects

Combine objects into a DOM tree

Parsing CSS

Browsers parse CSS selectors from right to left

We know that the DOM tree merges with the CSSOM tree into a render tree, which is essentially attaching CSSOM to the DOM tree, so we need to traverse the DOM tree based on the information provided by the selector.

Let's look at an example:

.nav .title span {color:blue} Nanjiu front end

Match from right to left:

First find all the rightmost nodes span, for each span, look up the node div.title

Go up from h4 to div.nav

Finding the root element html ends the traversal of this branch.

Analyze JS

There is a js parser tool in the browser specifically designed to parse our js code.

When the browser encounters js code, it immediately summons the "js parser" to work.

The parser finds all variables, functions, parameters, etc. in js and assigns the variable undefined.

Take the function out into a function block and store it in the repository. After this is done, parse the code line by line (top down, left to right), and then match it to the repository.

The above is "how browsers parse code" all the content of this article, thank you for reading! Hope to share the content to help everyone, more relevant knowledge, welcome to pay attention to the industry information channel!