JS CSS HTML 加载顺序
解析: 运行代码
加载: 下载代码
-
JS脚本 ( 因为js修改DOM, 所以需要先js解析 )
script标签: 阻塞html文档的解析, 直到脚本执行完
外引js: 先网络请求,加载js, 再阻塞html文档的解析, 直到脚本执行完 -
CSS ( js有可能依赖样式,如var a=$('#id').width() 需要先css解析 )
Firefox 所有css阻塞js脚本
chrome 脚本访问css时, 阻塞这个js脚本 -
阻塞优先级: CSS > JS > HTML
-
预解析
浏览器多线程异步优先解析script link 标签, 并加载这些资源. 就是优先加载外引js css -
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)
- 回流重绘
- 回流必将引起重绘,重绘不一定引起回流
-
js延迟加载
<script src="" async></script>
<script src="" defer></script>
两者都只适用于外部脚本.
区别: async不保证执行的先后顺序
记忆: async异步,不同时的(无顺序), defer延期(有顺序)
一般来说,如果脚本之间没有依赖关系,就使用async
属性,如果脚本之间有依赖关系,就使用defer
属性。
转:https://www.cnblogs.com/sexintercourse/p/16839499.html