《二》优化页面加载和渲染的过程

页面加载和渲染的过程：浏览器解析 HTML，生成 DOM 树；同时解析 CSS，生成 CSS 规则树；CSS 规则附着到 DOM 树上，生成渲染树；浏览器对渲染树中各节点的布局进行计算，然后绘制出来，显示在显示器上。

针对解析 HTML 生成 DOM 树：

1. 减少 DOM 元素的数量和嵌套层级。

2. 避免使用 table 布局，使用其他标签代替。

   原因是：一般来说，浏览器解析标签都是解析一行就显示一行，但是 table 是作为一个整体解析的，要等整个表格都解析完才会显示；而且可能很小的一点改动，也会造成整个 table 的重排。

针对解析 CSS 生成 CSS 规则树：

1. 不要使用嵌套过多、过于复杂的选择器。

   原因是：浏览器在解析 CSS 选择器的时候，是从右往左解析的。例如：ul li a，浏览器会先找到所有的 a 标签，然后再去找到的 a 标签中找上级节点是 li 的 a 标签，然后再去找到的 a 标签中找上上级节点是 ul 的 a 标签。嵌套越多，查找的次数就越多。

2. 避免使用 CSS 自身的 @import 导入 CSS。

   原因是：页面不会等待这种方式引入的样式表加载完毕，就会立即渲染 HTML 结构，会导致页面有几秒钟没有样式的情况。

3. CSS 一般在 head 中引入；JS 一般在 body 的末尾引入。

   CSS 一般在 head 中引入原因是：CSS 的下载和解析不会阻塞 HTML 的继续解析，且还能避免出现无样式内容的闪烁或白屏现象。

   JS 一般在 body 的末尾引入原因是：JS 的下载和解析会阻塞 HTML 的继续解析。

针对生成渲染树之后布局与绘制：

减少重排与重绘。

元素的尺寸、位置、隐藏等属性改变时，浏览器需要重新计算，称为重排（重布局、回流）。
元素的外观、风格等属性改变时，浏览器只需要重新绘制，称为重绘。
重排一定会引起重绘，重绘不一定会引起重排。重排比重绘更加影响性能。