js阻塞问题

今天来聊聊前端性能问题中的js阻塞问题。

浏览器渲染机制

首先先来看看浏览器渲染机制，大致分为以下几步

1、浏览器根据服务器响应回来的html，进行解析后构建一颗DOM节点树；
2、根据css文件，构建得到CSSOM树；
3、将DOM树与CSSOM树结合，精确计算每个节点的位置、尺寸等等属性，构建出渲染树；
4、渲染至用户页面

结论：从这个我们可以看出，css不会影响DOM的解析，但是会影响DOM的渲染过程。

浏览器引擎

浏览器引擎分为渲染引擎以及js引擎，其实之前是区分这2个概念的，但是慢慢地大家发现有必要将二者进行独立区分

1、渲染引擎：主要负责html解析以及css等相关文件
2、js引擎：负责js代码运行与解析

尽管浏览器在加载页面的时候是多线程的，但是浏览器在渲染页面的时候却是一个单线程过程，那么也就是说，渲染引擎与js引擎不能同时工作，所以也就引出了js阻塞问题。

js阻塞问题

js阻塞问题是指当浏览器在解析文档或者渲染页面时，遇见了js代码，需要渲染引擎中断，而运行js引擎，从而阻塞浏览器原本的工作状态。

1、script标签放在头部加载：由于需要加载js代码，所以会阻塞后面html的解析与加载；
2、放在中间与放在头部道理一样；
3、放在底部(body闭合之前)：此时由于DOM已经加载解析完了，浏览器可以专心地加载js代码

解决方法：
1、通常我们会将script标签放在body闭合时的上方；
2、利用dom动态创建script标签；
3、将script标签放在头部，但是要加上async或者defer属性

async、defer区别

1、共同点：可以让浏览器进行异步加载js代码，而不会出现js阻塞的情况
2、区别：
	async：当js代码加载会之后会异步执行js代码；
	defer：当js代码加载完之后回等到dom解析完之后，在DocumentContentLoaded之前执行js代码，在一定程度上可以保证js代码加载的顺序。