Hello everyone, Lin Sanxin is here again. Read more than ten times “kangxi dynasty” and “Yong Zheng dynasty”, today, to everyone about “nine dragons to take the state” of those things, incidentally about browser rendering (actually is about browser rendering, incidentally about “nine dragons to take state”, hey hey), feel good remember to give a praise oh.

After all, I am a writer with a dream!

Introduction to the protagonist (Module Introduction)

Please remember the corresponding relationship, so that you can better understand the relationship between modules later

Kangxi (browser)

Speaking of our emperor Kangxi, that can be a great force, capture Oboi, pingsan, the expedition to Gerdan. But that doesn’t keep him from doing it. “Nine children take away the emperor”, put it simply is nine smelly boys fight each other for their own Lao tze’s throne, that also no wonder these smelly boys ah, who called Kangxi emperor born so many? Of course, the most prominent ones are fori (HTML, z. yin-zhi), Z. yin-Zhi (the drafting module), Z. yin-Zhen (the JS engine), Z. yin-Chen (the CSS parser), and Z. yin-Xiii (the Layout module).

Big Arg (HTML parser)

  • Personality: kangxi’s eldest son, strong and strong, likes to fight, but he has no brains (he was captured in the war, which is a shame)
  • Skills: Just parseHTML tagsBy the way, the inner link is analyzedStyle tagsIn style, buildThe DOM tree

8 Argus (CSS parser)

  • Personality: kang Xi’s eighth son, the surface work is very beautiful (every day to learn from his father, but learn the least like)
  • Skills: AnalysislinkTag in the external beautiful style, buildCSS tree

Fourth Brother (JS engine)

  • Personality: Kangxi’s fourth son, the most intelligent son, was a black man (later Emperor Yongzheng)
  • Skills: Manipulates all kinds of things secretlystyleandDOM node(Add, delete, modify or bind events)

Thirteen (Layout module)

  • Character: straight-forward, fortitude, very righteous to all brothers (such a righteous, not suitable to be an emperor)
  • Skills:The DOM treeandCSS treeCombine and make one sheetThe layout drawings(Not responsible for rendering, only provide drawings)

San Diego (Drawing module)

  • Personality: a literati, good at painting and calligraphy, painting a good hand ah (Manchu is a horse on the back of the nation, can pass the throne to you this literary talent strange)
  • Skills: took over the hands of the old thirteendrawingsAnd,drawCome out and show them

Rough rendering process

  1. Big Argo (HTML parser) parses the HTML tags it encounters and constructs a DOM tree
  2. 8 ago (CSS parser) parses the CSS styles in the link TAB and builds a CSS tree
  3. Big Brother and 8 brother give their DOM tree and CSS tree to 4 brother (JS engine)
  4. Four Elder brother (JS engine) processing script in the JS code, and according to the JS code, complete binding events, modify the CSS tree and DOM tree and other operations
  5. The modified CSS tree and DOM tree are synthesized into a rendering tree, and the Layout drawing is designed and handed to the Layout module.
  6. Kangxi (browser) request all kinds of picture resources, audio resources and so on, together to three elder brother
  7. Three elder brother (drawing module) but draw a master, immediately according to this drawing and huang A ma to the material, draw the whole page for everyone to see

Relationships between Argos (relationships between modules)

See the following content before, you need to understand a truth: parsing and rendering are the two processes, the resolution does not necessarily render (that is, you still can’t see the page effect), apply colours to a drawing that parse out, it’s like: do you have the money (parsing) do not necessarily buy villa (rendering), but if you bought a villa (rendering) that shows you are really rich (analysis)

HTML parser

 <style>
     // 60,000 lines of CSS style
     .box { background: red } // The last line
 </style>
 <div class="box"></div>
 <div></div>
 <div></div>
 <div></div>
Copy the code
  • Q: The HTML parser is responsible for parsingHTML tagsBy the way, the inner link is analyzedStyle tagsThere are over 60,000 lines of styles in the style tag. Do they parse so slowly that the following div tags cannot be parsed and rendered?
  • A:Don't, the HTML parser isAsynchronous parsingAnd,Don'tblockingApply colours to a drawing. Big Arg (HTML parser) went down from the top and came across the style tag. He found that there were too many styles in the tag, so he sent four soldiers to parse the following four div tags and render them first to improve efficiency.
  • Problems caused: < div style =” box-style “style =” box-style” style =” box-style “style =” box-style” style =” box-style “style =” box-style” style =” box-style “style =” box-style” style =” box-style “style =” box-style” style =” box-style” This causes the div tag to appear on the pageNo style -> StyleThe effect of the so-calledThe splash screen phenomenon
  • How to solve the problem: use less inline style tags. Arg is already tired of parsing HTML

HTML parser and CSS parser

 / / index. In the CSS
  // 60,000 lines of CSS style
  .box { background: red } // The last line


 / / HTML code
 <link href="index.css"></link> /
      

       </
      
div>
 <div></div>
 <div></div>
 <div></div>
Copy the code
  • Q: The CSS parser is responsible for parsinglinkThe link tag is over 60,000 lines long. Does it parse so slowly that all subsequent div tags cannot be parsed and rendered?
  • A:Don'tBlocking the following div tagparsing, butwillBlocking the following div tagApply colours to a drawingIn other words,CSS parserWhile parsing the 60,000 lines of style in the link tag,HTML parserI have taken a few soldiers to parse the following div tag, but it is only parsed, not rendered, etcCSS parserResolve 60,000 lines of styles and merge them all at onceCSS treeandThe DOM treeAnd render to the page
  • Why: Because it can be avoidedThe splash screen phenomenonandImproved rendering performance. The above saidThe splash screen phenomenonIt’s on the pageNo style -> StyleIt’s a terrible experience, so how do you avoid it? The best thing to do is to waitThe final DOM treewithThe final CSS treeOnce combined, render it once again so that the page does not appearNo style -> Style“Question. Multiple renderings now become one-time renderings, which naturally improves render performance.
  • The problem: If the CSS parser parses too slowly, the final rendering of the page will not be completed for a short timeBad phenomenon
  • How to solve the problem: The core is to speed up the loading of external styles:
  1. External resource acceleration using CDN nodes
  2. Compress external style files (using packaging tools such as Webpack, gulp, etc.)
  3. Optimize your style file code

HTML parser and JS engine

/ / index. Js file
  // More than 60,000 lines of code, a series of operations on the DOM

/ / HTML page
 <script src="index.js"></script> /
      

       </
      
div>
 <div></div>
 <div></div>
 <div></div>
Copy the code
  • Q: The JS engine secretly manipulates all kinds of thingsstyleandDOM nodeWill the script tag reference code be too slow to parse and render the following div tags?
  • A:willBlock after the parsing and rendering of div tags, etcJS enginePut all the JS codeloadingandperformI’ll play it when I’m doneHTML parserGo down and parse the DOM and render it all at once
  • Why: For example, in May (JS) engine slow implementation of the 60000 lines of code at the same time, kangxi ordered big brother (HTML parser) don’t tube may, boldly to parse HTML, the big brother with his batman immediately immediately after parsing all div tags, and then filled with a sense of achievement to run to kangxi like before the receiving of the reward, And at this time four elder brother has not executed his JS code, big elder brother run ah run ah, run to the moment in front of Kangxi, four elder brother just execute JS code, and big elder brother just parse all tags are deleted (after all four elder brother has the ability to control DOM), Kangxi a look, thunder rage: “WDNMD!! Boss, didn’t you say you had it all figured out? Where is it? Dare to cheat me?” I was giving big Brother a lot of scolding. Big elder brother thought: “Lao four, WDNMD, dare to parse the success of Lao Tze to delete!” Later, After Kangxi learned that, they made a set of rules: after four elder brother first execute the code, and then send elder brother to parse HTML, so that elder brother will not do useless work!
  • Problem: If the JS code executes incorrectly or slowly, the HTML will never parse, and the page may remain blank.
  • How to solve the problem: The core is to change the JS code execution order, or optimize the JS execution speed:
  1. <script async></script> addasyncProperty, the code is loaded and executed asynchronously (in the case of multiple script tags, the script is not executed in the order in which the script is loaded on the page, but is executed by whoever finishes loading it first).
  2. <script defer></script> adddeferProperty, the JS code will be loaded asynchronously (if there are multiple script tags that have been set to defer, then all scripts will be executed in order, as shown in theDOMCotentLoadedFormer executive)
  3. Put the script tag at the end of the page
  4. Optimize JS code to speed up execution

CSS parser and JS engine

Just like the ABOVE HTML parser and JS engine, the difference is between DOM tree and CSS tree

JS engine and JS engine

<script src="jquery.js"></script>
<script src="bootstrap.js"></script>
Copy the code

– Bootstrap will execute the above script before executing the below script, because it is possible that the below script depends on the above script (in the above example, bootstrap depends on jquery)

<script src="index1.js"></script>
<script src="index2.js"></script>
<div></div>
Copy the code

I’m going to execute the top script first and then execute the bottom script, because the top script might modify the DOM, and the bottom script might modify the DOM, so I’m going to queue one by one, otherwise I’m going to get confused

<script src="index1.js" defer></script>
<script src="index2.js" defer></script>
Copy the code

It loads asynchronously, meaning that the bottom may load faster than the top, but ultimately the code executes from the top down and before DOMContentLoaded

<script src="index1.js" async></script>
<script src="index2.js" async></script>
Copy the code

It loads asynchronously and executes asynchronously, which means whoever finishes loading first executes first, out of order

A little doubt

Q: Why is it that the CSS parser can only block HTML rendering but not HTML parsing, while the JS engine can block both HTML parsing and rendering?

A: Since CSS can’t manipulate the DOM, there’s no need to block HTML parsing. The JS engine, on the other hand, can manipulate the DOM at will, so you need to block HTML parsing to keep the HTML parser from doing useless work.

DOMContentLoaded and onload

Let’s take a look at the rendering process:

  1. Big Argo (HTML parser) parses the HTML tags it encounters and constructs a DOM tree
  2. 8 ago (CSS parser) parses the CSS styles in the link TAB and builds a CSS tree
  3. Big Brother and eight brother give their DOM tree and CSS tree to four brother (JS engine) //DOMContentLoadedIn this
  4. Four Elder brother (JS engine) processing script in the JS code, and according to the JS code, complete binding events, modify the CSS tree and DOM tree and other operations
  5. The modified CSS tree and DOM tree are synthesized into a rendering tree, and the Layout drawing is designed and handed to the Layout module.
  6. Kangxi (browser) request all kinds of picture resources, audio resources and so on, together to three elder brother
  7. Three elder brother (drawing module) but draw a master, immediately according to this drawing and huang Amar to the material, draw the whole page for everyone to see //onloadIn this

conclusion

JavaScript is the brain of the browser. JavaScript must be the most favored one by the browser (Kangxi), so it must be Yinzhen of the fourth age, congratulations to Emperor Yongzheng!

Yongzheng was also one of my favorites. He carried out the new policy, fought for the public, spread his share into mu, served as one of the gentry’s missions and received food, and sent feast tables to quell the rebellion of Rubzandan and Alabtan, and so on.

If you are interested, you can check out Yongzheng Dynasty, which ranks with The Ming Dynasty as the peak of Chinese costume drama!