浏览器的渲染机制
先叨叨几个概念
DOM(Document Object Model)：浏览器将 HTML 解析成树形的数据结构。。CSSOM(CSS Object Model)：浏览器将 CSS 代码解析成树形的数据结构。- DOM 和 CSSOM 的成长历程（构建过程）都是 Bytes → characters → tokens → nodes → object model。
Render Tree：待 DOM 和 CSSOM 都长齐整以后，它们结合产生了 Render Tree。
再来捋捋整个渲染过程
Create/Update DOM And request css/image/js：浏览器在请求到 HTML 代码后，开始生成 DOM 树，在 Bytes → characters 后的这个阶段，并行发起 css、图片，无论这些静态资源请求放在 DOM 的任何地方。这里特别说明一下 js，当执行到 script 标签时，HTML 文档停止解析。而 Webkit and Firefox 浏览器做过这方面优化，当执行到 script 标签时，另起一个线程解析剩下的 HTML 文档，这样资源就可以并行加载，性能会好一点。Create/Update Render CSSOM。当 CSS 文件被生下来以后（下载完成），CSSOM 开始愉快地成长了。Create/Update Render Tree：当所有 CSS 文件都下载完成，CSSOM 的羽翼完整以后，就可以和 DOM 开始过上幸福的生活了，幸福生活的结晶就是 Render Tree。Layout：Render Tree被生下来以后，浏览器根据 Render Tree 该知道的不该知道的都知道了，比如网页中应该有哪些节点、各个节点的 CSS 定义以及他们的从属关系，浏览器决定把这些都记录下来，它先得写个文章的提纲，这个过程就叫做 Layout 。Painting：浏览器根据它的提纲，开始进行创作，这个过程的叫做 Painting。网页终于可以呈现在大家面前了。- 明显，作品被创作的过程需要不断修改更新嘛，所以 Layout 和 Painting 也会反复发生，除了 DOM、CSSOM 更新的原因外，图片下载完成后也需要调用 Layout 和 Painting 来更新网页。因此以上步骤会反复进行。
DOMContentLoaded事件： 当 HTML 文档下载并解析完成以后，不鸟 CSS 文件、图片、iframe 是否加载完成，但是 js 文件是大头，只有 js 文件都执行完成以后，该事件才触发。
最后 5 毛钱唠嗑，江湖再见
首屏时间与 CSS 密切相关，因为浏览器能够有素材 Painting 需要看 CSSOM 和 DOM 啥时候结合并产生它们的孩子 Render Tree 。在 Webkit and Firefox 浏览器中 js 只是一个第三者，可能会影响 DOM 和 CSSOM 婚后的感情生活（ js 文件里面可能会修改 DOM 和 CSS），阻塞网页的更新，影响 DOMContentLoaded 事件触发。而在其他浏览器里，js 则会阻塞 HTML 文档的解析。