JS CSS HTML 加载顺序

JS CSS 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延迟加载

<script src=""  async></script>
<script src=""  defer></script>

两者都只适用于外部脚本.
区别: async不保证执行的先后顺序
记忆: async异步,不同时的(无顺序), defer延期(有顺序)
一般来说，如果脚本之间没有依赖关系，就使用async属性，如果脚本之间有依赖关系，就使用defer属性。