浏览器渲染流程初步
『页面渲染出来了』可以分为三种情况
尚未显示图片的首屏（StepA）
显示了全部图片的首屏（StepB）
页面完整地加载好了（StepC）
StepC => script标签不放在body底部不会拖慢页面完整地加载好的时间
StepA => 不影响（如果这里里的首屏指的是页面从白板变成网页画面——也就是第一次Painting），但可能截断首屏的内容，使其只显示上面一部分。
浏览器的渲染过程
1.Create/Update DOM And request css/image/js：浏览器请求到HTML代码后，在生成DOM的最开始阶段（应该是 Bytes → characters 后），并行发起css、图片、js的请求，无论他们是否在HEAD里。
注意：发起 js 文件的下载 request 并不需要 DOM 处理到那个 script 节点，比如：简单的正则匹配就能做到这一点，虽然实际上并不一定是通过正则：）。
2.Create/Update Render CSSOM：CSS文件下载完成，开始构建CSSOM
3.Create/Update Render Tree：所有CSS文件下载完成，CSSOM构建结束后，和 DOM 一起生成 Render Tree。
4.Layout：有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系。下一步操作称之为Layout，顾名思义就是计算出每个节点在屏幕中的位置。
5.Painting：Layout后，浏览器已经知道了哪些节点要显示（which nodes are visible）、每个节点的CSS属性是什么（their computed styles）、每个节点在屏幕中的位置是哪里（geometry）。就进入了最后一步：Painting，按照算出来的规则，通过显卡，把内容画到屏幕上。
css才是影响页面首屏时间的罪魁祸首，如果css太大，页面白屏的时间就长了，就是render tree被推迟了，所以如果css太大就需要把非首屏css也放到底部，js只不过是影响用户和js相关的那些操作的时间而已。
笔记灵感学习于 德来 的文章：https://segmentfault.com/a/1190000004292479