- 加载:下载代码
- 解析:运行代码
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网页加载顺序:
- 浏览器一边下载html, 一边开始从上往下顺序解析
- 预解析, 下载js css
- 遇到js脚本, script标签, 阻塞html解析, 由js引擎解析js代码
- js代码中访问了css, 阻塞这个脚本, 优先css
- 以上head里的js css 解析完成, 解析body中html
- 运行body最后的js脚本 script标签
- 进行DOM渲染和Render树渲染:
- 获取html并解析为Dom树
- 解析css并形成一个cssom(css树)
- 将cssom和dom合并成渲染树(render树)
- 进行布局(layout)
- 进行绘制(painting)
- 回流重绘(回流必将引起重绘,重绘不一定引起回流)
6. js延迟加载
- js加载属性:
<script defer />
延迟加载;<script async />
异步加载 - 两者都只适用于外部脚本