一张图搞定浏览器解析html流程

浏览器渲染html的过程?

• 遇到外链js是否阻塞渲染

  • 情况一：会阻塞GUI渲染(一个单独的js文件，函数，对元素对操作.... )
  • 情况二：如果给window添加 DOMContentLoaded(DOM渲染完成),或 onload(页面所有资源加载完成) 事件监听，不会阻塞GUI渲染
  • 情况三：使用 async 请求JS资源是异步的【单独开辟HTTP去请求】，此时GUI继续渲染，但是一旦当js请求回来，会立即暂停GUI的处理，接下来会渲染JS
  • 情况四：使用 defer 不会阻碍GUI渲染，当GUI渲染完，才会把全部使用defer的请求回来的JS去渲染

• 遇到外链css是否阻塞渲染

  • 不会阻塞GUI渲染
  • GUI渲染线程会开辟一个http线程请求外链的css，此时GUI会继续向下渲染，css资源请求回来之后，GUI再去渲染请求回来的css资源

• script标签有多少个属性值、分别作用

  <script type="text/javascript" src="index.js" async/defer></script>
  
  - type="text/javascript" 告诉浏览器我引入的代码是 文本 形式的 js
  - src 外链js的路径
  - async: 对js进行异步加载
  - defer: 延迟js文件渲染，当GUI渲染完成，再去渲染
  

为什么css要放在头部，js要放在内部? css放在头部：

• 为了在没有dom渲染的时候，通知http网络线程请求css资源，此时并不会阻塞GUI的渲染，并且重新利用时间差，加快渲染速度

js 放在底部：

• 防止阻塞GUI渲染