浏览器基础

一、浏览器基础介绍

1. 五大浏览器

• Chrome
• IE(Edge)
• Firefox
• Safari
• Opera

2. 浏览器内核

内核（Rendering Engine），即“渲染引擎”。
作用：将网页代码 解析 并 渲染 出（显示）网页。

常用浏览器的内核

1. Trident：IE
2. Webkit：Safari
3. Blink(Webkit的升级版)：Chrome, Opera
4. Gecko：Firefox

二、浏览器的工作原理

1. 浏览器的组成

• 用户界面
  包括地址栏、后退/前进按钮、书签目录等，也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分
• 浏览器引擎
  用来查询及操作渲染引擎的接口
• 渲染引擎（浏览器内核）
  用来显示请求的内容，例如，如果请求内容为html，它负责解析html及css，并将解析后的结果显示出来
• 网络
  用来完成网络调用，例如http请求，它具有平台无关的接口，可以在不同平台上工作
• UI 后端
  用来绘制类似组合选择框及对话框等基本组件，具有不特定于某个平台的通用接口，底层使用操作系统的用户接口
• JS解释器（JS引擎）
  用来解释执行JS代码
• 数据存储
  属于持久层，浏览器需要在硬盘中保存类似cookie的各种数据
  

2. 渲染引擎工作原理

渲染引擎解析的基本流程

1. 解析HTML, 构建Dom树
   DOM 是W3C组织推荐的处理可扩展置标语言的标准编程接口。同时解析css样式, 得到样式结构体/css规则.
2. 构建渲染树
   渲染树并不等同于Dom树，因为像head标签 或 display: none这样的元素就没有必要放到渲染树中了，但是它们在Dom树中。
   Dom树和渲染树不同: 是否有css样式, 是否包括隐藏元素.
3. 对渲染树进行布局
   定位坐标和大小、确定是否换行、确定position、overflow、z-index等等，这个过程叫layout 或 reflow。
4. 绘制渲染树
   调用操作系统底层API(UI Backend)进行绘图操作。
   
   ===》 浏览器能够解析HTML文件，并且显示到页面中。

三、性能优化：重绘与回流

回流(reflow):

当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。

重绘(repaint)：

当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。

产生回流场景：
1、添加或者删除可见的DOM元素；
2、元素位置改变；
3、元素尺寸改变（margin、padding、border、width、height）；
4、内容改变导致宽高变化；
5、页面渲染初始化；
6、浏览器窗口尺寸改变时；

如何性能优化?

尽量减少重绘与回流的次数:

1. 使用className修改样式，少用style设置样式。
2. 将需要多次重排的元素，position属性设为absolute或fixed，脱离文档流，不影响其他元素布局。
3. 让要操作的元素进行”离线处理”，处理完后一起更新。
   1）使用DocumentFragment进行缓存操作,引发一次回流和重绘。
   2）使用display:none技术，只引发两次回流和重绘。