在此之前，咱们先来理解一下当咱们输出网址到浏览器渲染实现的整个过程：
- 用户输出网址（第一次缓存的状况），浏览器像服务端发送申请，服务端返回HTML文件；
- 浏览器载入HTML，发现
<link>标签，引入了内部款式，浏览器发送CSS文件申请，而后获取到了返回的CSS文件；<span style="color:red">（CSS文件合并，缩小HTTP申请）</span>- 持续解析，浏览器发现了
<body>标签局部的代码，此时曾经拿到了CSS款式，能够渲染页面了；CSS文件须要搁置最下面，防止网页从新渲染）- 在body外面发现了一个img标签援用了一张图片，向服务端申请这样图片，这时，浏览器不会等带图片申请实现，而是持续渲染前面的代码。<span style="color:red">（图片能够适当合并，缩小HTTP申请）</span>
- 服务器返回图片，因为图片占用了肯定面积，影响了前面的段落排布，因而浏览器须要从新渲染这部分代码；<span style="color:red">（图片最好都设置好尺寸，防止从新渲染）</span>
- 接着浏览器发现了一行JS代码的
<srcipt>标签的代码，就会立刻运行该代码;<span style="color:red">（script最好放在最上面）</span>- 那一行js代码执行了后，性能是暗藏了一个div，忽然少了一个元素，浏览器不得不从新渲染这部分代码。<span style="color:red">（页面初始化款式不要应用js管制）</span>
- 终于浏览器看到了
</html>，而后浏览器的苦楚并没有完结；- 此时用户点了一下“换肤按钮”，浏览器切换了切换了
<link>标签的CSS门路；- 浏览器向服务器申请了新的CSS文件，从新渲染页面。浏览器怀着惨重的情绪通知各个div、ul、li、span...咱们再来一遍。
通过下面怎么流程看过去，从用户输出网址到浏览器渲染实现有了一个实现的了解。另外对于咱们再学习之初，有些默认规定的原理也有了与之对应的解释。例如css文件在之前就引入,<script>标签放在</body>之后等等。
回流
简略来说，浏览器渲染过程中，某个局部产生了变动影响了布局，例如占位面积、定位形式、边距等，须要倒回去从新渲染， 该过程称为reflow（回流）。
reflow(回流)是导致DOM脚本执行低效的关键因素之一。页面上任何一个结点触发reflow，都会导致它的子结点及先人结点从新渲染。
会引起回流的状况：
- 扭转窗囗大小
- 扭转文字大小
- 增加/删除样式表
- 内容的扭转，如用户在输入框中敲字
- 激活伪类，如:hover (IE里是一个兄弟结点的伪类被激活)
- 操作class属性
- 脚本操作DOM
- 计算offsetWidth和offsetHeight
- 设置style属性
重绘
如果只是扭转某个元素的背景色、文字色彩、边框色彩等等不影响它四周或外部布局的属性，将只会引起浏览器 repaint（重绘）。