Basics-rendering mechanism, page loading
1. Rendering mechanism
1) What is DOCTYPE, function, type
DOCTYPE is used to declare the document type and DTD specification. One of the main purposes is to verify the legality of the file. If the file code is not legal, then the browser will make some errors when parsing.
(Tell the browser which file type to use now)
- DOCTYPE type:
HTML 5
HTML 4.01 Strict （该DTD包含所有HTML元素和属性，但不包括展示性和弃用性的元素font...）
HTML 4.01 Transitional （该DTD包含所有HTML元素和属性，包括展示性和弃用性的元素font...）
2) Browser rendering process
3) Rearrange reflow
Each element has its own box, and the browser will calculate according to various styles and place it where it should appear based on the result.
触发：（说出2条即可） ① 增、删、改DOM节点时，会导致 Reflow 或 Repaint； ② 移动DOM的位置，或者搞个动画的时候； ③ 修改CSS样式时； ④ Resize窗口时（移动端没这个问题），或是滚动时； ⑤ 修改网页的默认字体时；
4) repaint
Each box has its own size, location, and other attributes, such as color and font size. After confirming, the browser will draw each element's characteristics once and appear on the page.
触发： DOM改动； CSS改动；
5) Layout layout
Layout mainly tells the position of each element of the Render Tree, and the content contained in each element of the render tree is calculated.
Two, page loading
1 knowledge points
1.1 The form of loading resources
①Enter url (or jump page) to load html
http://coding.m.imooc.com
②Load static resources in html
<script src="/static/js/jquery.js"></script>
1.2 The process of loading a resource
① The browser delivers the dns domain name resolution according to the requested url, finds the real IP, and initiates an http request to the server;
② The server returns the data after the background processing is completed, and the browser receives the files (HTML, CSS, JS, pictures, etc.)
③ Browse The interpreter parses the loaded resources and establishes the corresponding internal data structure (such as HTML DOM)
④ Load the parsed resource file, render the page, and complete
1.3 The process of browser rendering page
Generate DOM Tree
according to HTML structure Generate CSSOM according to CSS
Integrate DOM and CSSOM to form
RenderTree Start rendering and display according to RenderTree
Encounter
2 Q&A
Topic:
*Detailed process from inputting url to getting html
* The difference between window.onload and DOMContentLoaded
2.1 The detailed process from entering url to getting html
(Same knowledge point 1.2)
2.2 The difference between window.onload and DOMContentLoaded
window.onload-all resources of the page will be executed after loading, including pictures, videos, etc.
DOMContentLoaded-DOM can be executed after rendering, at this time pictures and videos have not been loaded yet
