网页生成过程及性能影响

页面生成过程

1. DNS服务器通过域名查找对应的web服务器ip地址；

2. 浏览器访问web服务器；
这里涉及到客户端与服务器的tcp三次握手（建立连接）与四次挥手（关闭连接）；

3. 服务器处理完成返回html

4. 浏览器解析、加载页面
    这里又涉及五步：
   （1） HTML代码转化为DOM（Document Object Model， 文档对象模型）

   （2） CSS代码转化成CSSOM（CSS Object Model， css对象模型）

   （3） 结合DOM和CSSOM，生成一棵渲染树（Render Tree, 网页中有哪些节点、各个节点的CSS定义以及他们的从属关系, ）
     注意：Render Tree 渲染树并不等同于 DOM 树，因为一些像 Header 或 display:none 的东西就没必要放在渲染树中了。

   （4）生成布局（layout），计算出每个节点在屏幕中的位置

   （5） 将布局绘制（paint）在屏幕上

    在这五步里面，第一步到第三步都非常快，`第四步和第五步很耗时`。

重排和重绘

网页生成的时候，至少会渲染一次。而我们需要关注的是用户访问过程中，那些会导致网页重新渲染的行为：

· 修改DOM

· 修改样式表

· 用户事件（例如鼠标悬停，页面滚动，输入框输入文字等）

重新渲染，就涉及重排和重绘

重排（reflow）

即重新生成布局，重排必然导致重绘，如元素位置的改变，就会触发重排和重绘。

重绘（repaint）

即重新绘制，需要注意的是，重绘不一定需要重排，比如改变某个元素的颜色，就只会触发重绘，而不会触发重排。

对于性能的影响

重排和重绘会不断触发，这是不可避免的，但是它们非常消耗资源，是导致网页性能低下的根本原因。

提高网页性能，就是要降低重排和重绘的频率和成本，尽量少触发重新渲染。

Reflow要比Repaint更花费时间，也就更影响性能。所以在写代码的时候，要尽量避免过多的Reflow。

常见减少 reflow/repaint方法

（1）不要一条一条地修改 DOM 的样式。可以先定义好 css 的 class，然后修改 DOM 的 className；

（2）批量修改DOM时, 使用文档片段（document fragement）；

（3）在经常取“引起浏览器重排的属性值”时，要缓存到变量，如窗口的offsetTop、offsetLeft；

（4）千万不要使用 table 布局。因为可能很小的一个小改动会造成整个 table 的重新布局；