浏览器的渲染阻塞

浏览器渲染的步骤

（1）浏览器解析HTML标记去构造DOM树（DOM = Document Object Model 文档对象模型） （2）解析CSS去构造CSSOM树( CSSOM = CSS Object Model CSS对象模型) （3）将DOM和CSSOM树结合成渲染树之前，JS文件被解析和执行 阻塞了渲染树的部分 （1）阻塞渲染的CSS 在构造CSSOM时，所有的CSS都会被下载，无论它们是否在当前页面中被使用。 为了解决这个渲染阻塞，将关键CSS内嵌入页面中，即将最重要的（首次加载时可见的部分页面所使用到的）style写入head中，移除没用到的CSS 那么如何找出没用到的CSS的呢? 使用Pagespeed Insight 去得到像未使用的CSS，阻塞渲染的CSS和JS文件等等的统计数据 使用Gulp任务，如gulp-uncss，或是使用Grunt 任务，如grunt-uncss （2）渲染阻塞的JavaScript 如果在解析HTML标记时，浏览器遇到了JavaScript，解析会停止。只有在该脚本执行完毕后，HTML渲染才会继续进行 所以建议在页面底部引入js，去除非必要的js引用