# 几个概念
DOM：Document Object Model，浏览器将 HTML 解析成树形的数据结构，简称 DOM。
CSSOM：CSS Object Model，浏览器将 CSS 代码解析成树形的数据结构。
DOM 和 CSSOM 都是以 Bytes → characters → tokens →nodes → object model.这样的方式生成最终的数据。如下图所示：
DOM 树的构建过程是一个深度遍历过程：当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。
Render Tree：DOM 和 CSSOM 合并后生成 Render Tree，如下图：
Render Tree 和 DOM 一样，以多叉树的形式保存了每个节点的 css 属性、节点本身属性、以及节点的孩子节点。
注意：display:none 的节点不会被加入 Render Tree，而 visibility: hidden 则会，所以，如果某个节点最开始是不显示的，设为 display:none 是更优的。
# 浏览器的渲染过程
Create/Update DOM And request css/image/js：浏览器请求到HTML代码后，在生成 DOM 的最开始阶段(应该是 Bytes → characters 后)，并行发起css、图片、js的请求，无论他们是否在 HEAD 里。
注意：发起 js 文件的下载 request 并不需要 DOM 处理到那个 script 节点，比如：简单的正则匹配就能做到这一点，虽然实际上并不一定是通过正则。这是很多人在理解渲染机制的时候存在的误区
Create/Update Render CSSOM：CSS 文件下载完成，开始构建 CSSOM
Create/Update Render Tree：所有 CSS 文件下载完成，CSSOM 构建结束后，和 DOM 一起生成 Render Tree。
Layout：有了 Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的 CSS 定义以及他们的从属关系。下一步操作称之为 Layout，顾名思义就是计算出每个节点在屏幕中的位置。
Painting：Layout 后，浏览器已经知道了哪些节点要显示(whichnodes are visible)、每个节点的 CSS 属性是什么(their computedstyles)、每个节点在屏幕中的位置是哪里(geometry)。就进入了最后一步：Painting，按照算出来的规则，通过显卡，把内容画到屏幕上。
以上五个步骤前3个步骤之所有使用 “Create/Update” 是因为 DOM、CSSOM、Render Tree 都可能在第一次 Painting 后又被更新多次，比如 JS 修改了 DOM 或者 CSS 属性。
Layout 和 Painting 也会被重复执行，除了 DOM、CSSOM 更新的原因外，图片下载完成后也需要调用 Layout 和 Painting 来更新网页。
# 问题
script 标签的位置会影响首屏时间么?
不影响(如果这里里的首屏指的是页面从白板变成网页画面——也就是第一次 Painting)，但有可能截断首屏的内容，使其只显示上面一部分。
为什么说是“有可能”呢?，如果该 js 下载地比 css 还快，或者 script 标签不在第一屏的 html 里，实际上是不影响的。明白这一影响边界非常重要，这样我们在考察页面性能瓶颈的时候就有的放矢了。举个例子：在网页的第二屏有一个通用模块，实际上我们是可以把它的 js 逻辑独立成一个文件，将模块的 html 和 js 标签放在一起做成独立的模板引进来的(如果它的 js 比较小或者说因为多了一个文件会多占用一个 TCP 连接和带宽)。
# 总结
如果script标签的位置不在首屏范围内，不影响首屏时间
所有的script标签应该放在body底部是很有道理的
但从性能最优的角度考虑，即使在 body 底部的 script 标签也会拖慢首屏出来的速度，因为浏览器在最一开始就会请求它对应的 js 文件，而这，占用了有限的 TCP 链接数、带宽甚至运行它所需要的 CPU。这也是为什么 script 标签会有 async 或 defer 属性的原因之一。
可是，在复杂的实际应用场景中，要贯彻这几条结论可能会遇到问题，比如：
你的页面是分模块来写的，每一个模块都有自己的 html、js 甚至 css，当把这些模块凑到一个页面中的时候就会出现 js 自然而然地出现在 HTML 中间部分。你很难把 script 标签都放到底部
即使你把 script 标签都放到底部，但 script 标签的存在终究是拖慢了首屏时间、DomContendLoad 和 loaded 的时间。如果只有一个 script 标签，我们可以加一个 async，但多个 async 的 script 标签的结果会是 js 文件被乱序执行的，这显然不是我们想要的。