浏览器组成、回流、重绘及性能优化

1、浏览器组成

用户界面： 包括地址栏、后退/前进按钮、书签目录等，也就是除了用来显示所请求页面的主窗口之外的其他部分。

浏览器引擎： 用来查询及操作渲染引擎的接口 。

渲染引擎（浏览器内核）： 用来显示请求的内容，例如，如果请求内容为html，它负责解析html及css，并将解析后的结果显示出来 。

网络： 用来完成网络调用，例如http请求，它具有平台无关的接口，可以在不同平台上工作 。

UI 后端： 用来绘制类似组合选择框及对话框等基本组件，具有不特定于某个平台的通用接口，底层使用操作系统的用户接口 。

JS解释器： 用来解释执行JS代码 。

数据存储： 属于持久层，浏览器需要在硬盘中保存类似cookie的各种数据，HTML5定义了Storage技术，这是一种轻量级完整的客户端存储技术。

2、渲染引擎

浏览器的渲染引擎也叫排版引擎，或者是：【浏览器内核】

主流的 渲染引擎 有：

• Chrome浏览器: Blink引擎（WebKit的一个分支）。
• Safari浏览器: WebKit引擎，windows版本2008年3月18日推出正式版，但苹果已于2012年7月25日停止开发Windows版的Safari。
• FireFox浏览器: Gecko引擎。
• Opera浏览器: Blink引擎(早期版使用Presto引擎）。
• Internet Explorer浏览器: Trident引擎 。
• Microsoft Edge浏览器: EdgeHTML引擎（Trident的一个分支）。

3、渲染引擎工作原理

1. 解析HTML构建Dom树，DOM 是W3C组织推荐的处理可扩展置标语言的标准编程接口。

2. 构建渲染树，渲染树并不等同于Dom树，因为像`head`标签 或 `display: none`这样的元素就没在渲染树中了，但是它们在Dom树中。 

3. 对渲染树进行布局，定位坐标和大小、确定是否换行、确定position、overflow、z-index等等，这个过程叫`layout` 或 `reflow`。

4. 绘制渲染树，调用操作系统底层API(UI Backend)进行绘图操作。 

 

4、内核工作流程

webkit 内核工作流程：

 gecko内核工作流程

5、回流（重排）与重绘

回流、重绘在浏览器性能优化上很是重要

回流：当渲染树(render tree)中一部分(或全部)元素的规模尺寸，布局，隐藏等改变而需要重新构建。【会影响到布局】

重绘：当渲染树(render tree)中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而【不会影响布局】的，比如background-color。

页面渲染初始化时会进行回流，回流必然会引起重绘，所以每个页面至少需要一次回流与重绘。

回流出现的情景：

1、添加或者删除【可见】的DOM元素；——触及页面元素结构变化

2、元素位置改变；——触及布局变化

3、元素尺寸改变——边距、填充、边框、宽度和高度——触及尺寸变化

4、内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变；——尺寸

5、页面渲染初始化；——初始化

6、浏览器窗口尺寸改变——resize事件发生时；——触及尺寸变化

// 举例
var s = document.body.style;
s.padding = "2px"; // 回流+重绘
s.border = "1px solid red"; // 再一次 回流+重绘
s.color = "blue"; // 再一次重绘
s.backgroundColor = "#ccc"; // 再一次 重绘
s.fontSize = "14px"; // 再一次 回流+重绘
document.body.appendChild(document.createTextNode('abc!'));// 添加node，再一次 回流+重绘

6、优化方案

优化回流与重绘的核心在于：尽量减少重绘与回流的次数。

···建议1：

使用类来变换样式，少用style行内样式

div.classList.add('newStyle');   //一次重排 重绘

···建议2： 

把要频繁操作的元素从渲染树中去除，也就是不让他显示着去变换样式，都变完了再整体显示

div.style.display = 'none';//第一次 重排 重绘
div.style.width = 200px;
div.style.heigt= 200px; 
div.style.color = 'red';
div.style.margin = 20px;
div.style.display = 'block';//第二次 重排 重绘
//这样一来总共发生两次重绘和重排

···建议3：

布局经常改变的盒子进行定位脱标， 比如动画 先定位 ，建议使用css3动画和变换 transform

···建议4：

使用DocumentFragment(虚拟DOM)进行缓存操作,引发一次回流和重绘

var pNode,fragment = document.createDocumentFragment(); 
//动态创建20个p标签，先用DocumentFragment 对象来缓存     
for(var i=0; i<20; i++){
   pNode = document.createElement('p');
   pNode.innerHTML = i;
   fragment.appendChild(pNode);
}
document.body.appendChild(fragment);

总而言之：

渲染就出自：HTML和CSS，而优化就是减少回流和重绘的次数，也就是减少页面结构或样式调整的次数，比如使用类名把样式一起追加就好于一个一个加。