浏览器渲染的步骤
(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引用