A long time ago, I read an article about the principle of the browser on the Internet. The author of the article is Paul Alice. It was just when I started, I did not understand it at that time.
I don’t understand!
Then I looked again, but never recorded what I knew. Today is just to record a few points that I feel need to be looked at carefully.
Consider the browser’s makeup first, because within the browser’s makeup is a rendering engine.
Rendering is, of course, a page that parses a DOM document and draws it out for people to manipulate.
The rendering engine also has a main process in the process of parsing, which is to create a DOM tree, generate a rendering tree, go to the layout layout, that is, positioning, and finally the real drawing.
This is a gradual process and does not require the entire document to be loaded and parsed.
So I can understand the concept of rearrangement or layout and redrawing.
It is obvious that rearrangement is the event that is triggered when the engine parses the structure. Redrawing happens during the final drawing process.
This means that updating nodes, or changing global fonts, can cause structural changes.
Changing colors and backgrounds only involves repainting.
Rearrangement obviously takes more time than drawing.
In the process of parsing, the engine will analyze both lexical and syntactic aspects first.
And morphology is like words, like Chinese characters. First of all, we need to know these things first, and then discuss the rules of its use, and these rules are its grammar.
Solve these problems and the computer will render the page correctly.
I’ve omitted how the computer interprets its lexical and grammatical rules, because I don’t think these are very meaningful and complicated for a front-end that isn’t a study of how browsers develop.
And then there’s the dom tree and the render tree, which is not 11, depending on the display property of the element.
CSS parsing and look-up elements need to be understood in order to cause unnecessary performance drain.
Then there is the dirty bit system. It is the tag of an element.
As well as global and incremental layouts.
The browser’s caching mechanism can store the renderer size without recalculation. Can improve performance.