作为一个前端开发，浏览器就相当于我们的脸面。做的所有项目都要通过它来展示给用户，虽然你跟它相处的时间可能比你女朋友还多，但你真的了解它吗？
就拿我们最常见的渲染引擎WebKit来举例，我们来看下它的组成：
按步骤从一到四依次执行，这也是浏览器渲染的一个过程。 其中布局和绘制引擎关联了两个重要的概念：重排（Reflow）和 重绘（Repaint）
1.重排： 当我们改变了元素的大小，位置和布局方式的时候，渲染树里的所有节点都要重新计算，这就是重排。每次发生重排时，需要重新经历页面渲染的整个流程，会影响浏览器的性能，所以我们要尽量减少重排的操作。那具体哪些操作会导致重排呢？
比如：
- 浏览器窗口大小发生变化；
- 元素的内容发生变化；
- 元素的尺寸或者位置发生变化；
- 元素的字体大小发生变化；
- 激活CSS伪类；
- 添加或者删除可见的DOM元素。
2.重绘： 修改元素的绘制属性，未影响其几何属性，这个过程就是重绘。 比如以下属性：color、background、outline、border-radius、visibility、box-shadow等
注意： 当触发重排时，一定会触发重绘，但是重绘不一定会引发重排
说到Webkit，我们不得不说到另一个渲染引擎Blink,它是由Google团队基于webkit开发的，在它的基础上进行了一些优化和改进，其中一个重要的优化在于引进了独立的javascript引擎，比如我们熟悉的V8引擎。再加上分层绘制和多线程架构，使其性能有显著的提高。
