在此之前，我们先来了解一下当我们输入网址到浏览器渲染完成的整个过程：

  1. 用户输入网址（第一次缓存的情况），浏览器像服务端发送请求，服务端返回HTML文件；
  2. 浏览器载入HTML，发现<link>标签，引入了外部样式，浏览器发送CSS文件请求，然后获取到了返回的CSS文件；（CSS文件合并，减少HTTP请求）
  3. 继续解析，浏览器发现了<body>标签部分的代码，此时已经拿到了CSS样式，可以渲染页面了；CSS文件需要放置最上面，避免网页重新渲染）
  4. 在body里面发现了一个img标签引用了一张图片，向服务端请求这样图片，这时，浏览器不会等带图片请求完成，而是继续渲染后面的代码。（图片可以适当合并，减少HTTP请求）
  5. 服务器返回图片，由于图片占用了一定面积，影响了后面的段落排布，因此浏览器需要重新渲染这部分代码；（图片最好都设置好尺寸，避免重新渲染）
  6. 接着浏览器发现了一行JS代码的<srcipt>标签的代码，就会立即运行该代码;（script最好放在最下面）
  7. 那一行js代码执行了后，功能是隐藏了一个div，突然少了一个元素，浏览器不得不重新渲染这部分代码。（页面初始化样式不要使用js控制）
  8. 终于浏览器看到了</html>，然后浏览器的痛苦并没有结束；
  9. 此时用户点了一下“换肤按钮”，浏览器切换了切换了<link>标签的CSS路径；
  10. 浏览器向服务器请求了新的CSS文件，重新渲染页面。浏览器怀着沉重的心情告诉各个div、ul、li、span...我们再来一遍。

通过上面怎么流程看过来，从用户输入网址到浏览器渲染完成有了一个完成的理解。另外对于我们再学习之初，有些默认规则的原理也有了与之对应的解释。例如css文件在之前就引入,<script>标签放在</body>之后等等。

回流

简单来说，浏览器渲染过程中，某个部分发生了变化影响了布局，例如占位面积、定位方式、边距等，需要倒回去重新渲染， 该过程称为reflow（回流）。

reflow(回流)是导致DOM脚本执行低效的关键因素之一。页面上任何一个结点触发reflow，都会导致它的子结点及祖先结点重新渲染。

会引起回流的情况：

  1. 改变窗囗大小
  2. 改变文字大小
  3. 添加/删除样式表
  4. 内容的改变，如用户在输入框中敲字
  5. 激活伪类，如:hover (IE里是一个兄弟结点的伪类被激活)
  6. 操作class属性
  7. 脚本操作DOM
  8. 计算offsetWidth和offsetHeight
  9. 设置style属性

重绘

如果只是改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性，将只会引起浏览器 repaint（重绘）。