HTML页面解析

1、前置知识

DOMContentLoaded - Web API 接口参考 | MDN当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完全加载。https://developer.mozilla.org/zh-CN/docs/Web/API/Window/DOMContentLoaded_eventload - Web API 接口参考 | MDN当整个页面及所有依赖资源如样式表和图片都已完成加载时，将触发load事件。https://developer.mozilla.org/zh-CN/docs/Web/API/Window/load_event

2、解析页面流程 

• 输入url回车后去DNS映射会对应的IP地址；
• 请求对应的服务器拿到页面资源，这里指拿到HTML;
• 浏览器开始解析HTML，顺序执行;
• 在GUI线程生成dom树和cssrule树，并行执行的;
• 遇到js开始在js引擎线程开始js执行，和GUI线程是互斥的，暂停GUI线程执行；
• 生成的dom树和cssrule树生成render树；
• 开始根据render树画出每个元素的盒子
• 根据render树开始对页面进行在浏览器上的layout布局，也称回流/重排；
• layout布局后开始在浏览器绘制出来，此时也叫重绘；

你不知道的浏览器页面渲染机制 - 掘金浏览器的内核是指支持浏览器运行的最核心的程序，分为两个部分的，一是渲染引擎，另一个是JS引擎。渲染引擎在不同的浏览器中也不是都相同的。目前市面上常见的浏览器内核可以分为这四种：Trident（IE）、Gecko（火狐）、Blink（Chrome、Opera）、Webkit（Sa…https://juejin.cn/post/6844903815758479374

3、dom树生成过程 

• HTML页面顺序执行;
• 遇到内联CSS，执行CSS，dom暂停解析，执行完，继续往下走;
• 遇到内联JS,执行JS，dom停止解析，执行完，继续往下走;
• 遇到在JS前面的外联（link）样式表，暂停dom解析 去请求下载样式表资源，并执行完，继续dom解析；
• 遇到外联JS,暂停dom解析 去请求下载样式表资源，并执行完，继续dom解析；
• 遇到外联deferJS,请求下载时，dom继续解析，等待html解析完，再执行deferJS，该JS
• 会在调用DOMContentLoaded方法之前执行完，所以还是归纳在阻塞dom树解析的JS；
• 遇到外联 AsyncJS，请求下载，按照下载的顺序执行（即执行的JS代码前后不可控），下载后开始执行，不理会dom是否解析完成，所以async有可能会影响dom解析，也可能不影响，但是能肯定的是，下载时异步的，不阻塞dom解析；
• 遇到后面无JS代码的外联link样式表，dom解析和cssrule解析并行，即不影响dom解析；
• 遇到iframe，不影响当前dom解析；
• 遇到image，去下载对应的资源，不影响dom解析

浏览器是如何解析html的？ - 掘金当我们在浏览器地址栏输入一个合法的url时，浏览器首先进行DNS域名解析，拿到服务器IP地址后，浏览器给服务器发送GET请求，等到服务器正常返回后浏览器开始下载并解析html。这里仅总结浏览器解析html的过程。 html页面主要由dom、css、javascript等部分构成…https://juejin.cn/post/6844903745730396174

4、外联script类型

1. script ：html写入顺序执行，下载完开始执行，下载和执行影响dom解析；
2. defer script：html写入顺序执行，下载和执行不影响dom解析
3. async script：请求回来的顺序执行（即为不可控执行顺序），下载不影响dom解析，执行有可能影响dom解析，取决下载速度和dom解析速度；

async vs defer attributes - Growing with the WebThe async and defer attributes for the https://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html