加载异步

<script src="script.js"></script>

没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。

<script async src="script.js"></script>

有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。

<script defer src="script.js"></script>

有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。

defer:脚本延迟到文档解析和显示后执行，有顺序
async:不保证顺序

浏览器渲染机制

1.解析 HTML 标签, 构建 DOM 树
2.解析 CSS 标签, 构建 CSSOM 树
3.把 DOM 和 CSSOM 组合成 渲染树 (render tree)
4.在渲染树的基础上进行布局, 计算每个节点的几何结构
5.把每个节点绘制到屏幕上 (painting)

repaint & reflow

Reflow: 对于每个DOM结构中的各个元素都有自己的盒子（模型），这些都需要浏览器根据各种样式（浏览器的，开发人员定义的）来计算并根据计算结果将元素放到它出现的位置，这个过程称为 reflow。

Repaint:当各种盒子的位置、大小以及其他属性，例如颜色、字体大小都确定下来后，浏览器便把这些元素都按照各自的特性绘制了一遍，于是页面的内容出现了，这个过程称之为repaint.
引起Repaint和Reflow的一些操作：
成本比较高的操作：
1）增加、删除、修改DOM节点时，会导致Reflow或Repaint。
2）移动DOM位置，或者搞个动画的时候；
3）修改CSS样式的时候；
4）Resize窗口 或 滚动的时候；
5）修改网页默认字体的时候；
注意： display:none 会触发 reflow;
visibility:hidden 只会触发repaint。