共计 1207 个字符，预计需要花费 4 分钟才能阅读完成。
在此之前，咱们先来理解一下当咱们输出网址到浏览器渲染实现的整个过程：
- 用户输出网址（第一次缓存的状况），浏览器像服务端发送申请，服务端返回 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（重绘）。
正文完