浏览器的渲染原理及优化方式（浏览器的渲染过程）
一 、从用户请求到浏览器渲染的过程大致如下
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属性
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！