前端性能优化关键词：Render blocking resources

什么是Render blocking resources？

根据前几篇提到的浏览器渲染过程，有了DOM 和 CSSOM 之后，浏览器才开始渲染。所以挡在渲染前面的资源都叫做阻塞渲染的资源。

这些资源包括：

• HTML，当然了，没有DOM，就没什么可渲染的；
• CSS，根据浏览器渲染过程看到，没有CSSOM，也不会开始渲染；
• JavaScript，因为JS有可能改变页面内容和样式，所以浏览器会等待JS加载完成并解析运行后才继续向下解析文档。

从以上可以知道：

• DOM节点越多，浏览器（下载、解析）耗时越多（优化建议：快看天猫首页源代码——2016年11月16日，首屏以外的DOM节点动态生成）；
• CSS内容越多，文件越多，浏览器下载、解析时间越长（优化建议：看淘宝首页源代码——2016年11月16日，inline关键CSS，其他CSS异步加载）；
• JavaScript的话，只要不是渲染页面必须的，都放到文档底部，就不会阻塞渲染。

另外：图片不会Block render。

参考文档：
https://www.keycdn.com/blog/blocking-the-dom/
https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css
https://varvy.com/pagespeed/render-blocking-css.html
https://www.ibm.com/developerworks/cn/web/1308_caiys_jsload/
https://developers.google.com/speed/docs/insights/BlockingJS