页面生成过程
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 的重新布局；
网友评论