Part.2 HTML文件加载、解析顺序

• 加载：下载代码
• 解析：运行代码

---

1. JS脚本 ( 因为js修改DOM, 所以需要先js解析 )

script标签: 阻塞html文档的解析, 直到脚本执行完
外引js: 先网络请求,加载js, 再阻塞html文档的解析, 直到脚本执行完

2. CSS ( js有可能依赖样式,如var a=$('#id').width() 需要先css解析 )

Firefox 所有css阻塞js脚本
chrome 脚本访问css时, 阻塞这个js脚本

3. 阻塞优先级: CSS > JS > HTML

4. 预解析

浏览器多线程异步优先解析script link 标签, 并加载这些资源. 就是优先加载外引js css

5. chrome网页加载顺序:

1. 浏览器一边下载html, 一边开始从上往下顺序解析
2. 预解析, 下载js css
3. 遇到js脚本, script标签, 阻塞html解析, 由js引擎解析js代码
4. js代码中访问了css, 阻塞这个脚本, 优先css
5. 以上head里的js css 解析完成, 解析body中html
6. 运行body最后的js脚本 script标签
7. 进行DOM渲染和Render树渲染：

• 获取html并解析为Dom树
• 解析css并形成一个cssom（css树）
• 将cssom和dom合并成渲染树（render树）
• 进行布局（layout）
• 进行绘制（painting）
• 回流重绘（回流必将引起重绘，重绘不一定引起回流）

6. js延迟加载

• js加载属性：<script defer />延迟加载；<script async />异步加载
• 两者都只适用于外部脚本