浏览器的渲染过程

一、从用户请求到浏览器渲染的过程大致如下

1.用户输入域名，然后DNS解析成IP地址

2.浏览器根据IP地址请求服务器

3.服务器响应http请求，并返回给浏览器

4.浏览开始渲染：

　　。根据html，生成DOM TREE

　　。根据css，生成CSS TREE

　　。将DOM TREE和CSS TREE结合生成Render Tree

　　。根据Render Tree渲染页面

　　。遇到<script>则暂停渲染，优先执行js，然后再继续渲染（因为js执行和渲染引擎公用一个进程，原因是js可能做了一些dom操作，一般会把js放到页面的底部）

　　。直至把Render Tree渲染页面

二、reflow和repaint

reflow回流：

当某个部分发生了变化影响了布局，需要倒回去重新渲染， 该过程称为reflow（回流）。reflow 几乎是无法避免的。现在界面上流行的一些效果，比如树状目录的折叠、展开（实质上是元素的显 示与隐藏）等，都将引起浏览器的 reflow。鼠标滑过、点击……只要这些行为引起了页面上某些元素的占位面积、定位方式、边距等属性的变化，都会引起它内部、周围甚至整个页面的重新渲染。通常我们无法预估浏览器到底会 reflow 哪一部分的代码，它们彼此相互影响。

repaint重绘：

如果只是改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性，将只会引起浏览器 repaint（重绘）。repaint 的速度明显快于 reflow（在IE下需要换一下说法，reflow 要比 repaint 更缓慢）。

reflow一定引起repaint，而repaint不一定要reflow。reflow的成本比repaint高很多，DOM tree里每个结点的reflow很可能触发其子结点、祖先结点、兄弟结点的reflow。reflow(回流)是导致DOM脚本执行低效的关键因素之一。

现代浏览器会对回流做优化，它会等到足够数量的变化发生，再做一次批处理回流。

 

在哪些情况下会导致reflow发生：

l 改变窗囗大小

l 改变文字大小

l 添加/删除样式表

l 内容的改变，如用户在输入框中敲字

l 激活伪类，如:hover (IE里是一个兄弟结点的伪类被激活)

l 操作class属性

l 脚本操作DOM

l 计算offsetWidth和offsetHeight

l 设置style属性