浏览器的探索

01- 浏览器组成

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

02- 主流的渲染引擎

1.开发的时候只需要兼容三大浏览器即可,(谷歌, 火狐, IE浏览器)
2.负责解析html与css的

• 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的一个分支）。

03- 渲染引擎工作原理

• 渲染引擎解析的基本流程：

1. 解析html标签，内存中构建DOM树  , 解析css样式，解析规则表, css和DOM树同时进行
2. 构建渲染树，渲染树并不等同于Dom树，因为像head标签 或 display: none这样的元素就没有必要放到渲染树中了，但是它们在Dom树中。
    - dom树没有样式，所有的节点
    - 渲染树有样式，只有需要显示的节点
3. 布局渲染树  reflow, layout,  对节点进行布局
4. 绘制渲染树，调用操作系统底层API(UI Backend)进行绘图操作。
复制代码

04- 渲染引擎工作流程

webkit内核工作流程

Gecko工作流程

05- 重绘与回流

重绘(repaints): 属性只是影响元素的外观，风格 重新操作第四步
回流(repaints): 布局发生改变就会引发回流 , 回流必将引起重绘重新操作第三步第四步

1. 当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。
2. 当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。
复制代码

注意：回流必将引起重绘，而重绘不一定会引起回流。
我们需要明白，页面若发生回流则需要付出很高的代价。

• 回流何时发生：

当页面布局和几何属性改变时就需要回流。下述情况会发生浏览器回流：
1、添加或者删除可见的DOM元素；
2、元素位置改变；
3、元素尺寸改变——边距、填充、边框、宽度和高度
4、内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变；
5、页面渲染初始化；
6、浏览器窗口尺寸改变——resize事件发生时；
复制代码

06- 优化性能(减少回流与重绘)的两种方法:

1. 先加一个类,样式全部写在类里,只会回流一次
2. 然后离线处理 先none 再block 只有一次回流和一次重绘 直接一次第二第三第四步

07- 浏览器与服务器的交互流程

1、浏览器根据主机名"www.gacl.cn"去操作系统的Hosts文件中查找主机名对应的IP地址。
2、浏览器如果在操作系统的Hosts文件中没有找到对应的IP地址，就去互联网上的DNS服务器上查找"www.gacl.cn"这台主机对应的IP地址。
3、浏览器查找到"www.gacl.cn"这台主机对应的IP地址后，就使用IP地址连接到Web服务器。  
4、浏览器连接到web服务器后，就使用http协议向服务器发送请求，发送请求的过程中，浏览器会向Web服务器以Stream(流)的形式传输数据，告诉Web服务器要访问服务器里面的哪个Web应用下的Web资源
5、浏览器做完上面4步工作后，就开始等待，等待Web服务器把自己想要访问的1.jsp这个Web资源传输给它。
6、服务器接收到浏览器传输的数据后，开始解析接收到的数据，服务器解析"GET /JavaWebDemo1/1.jsp HTTP/1.1"里面的内容时知道客户端浏览器要访问的是JavaWebDemo1应用里面的1.jsp这个Web资源，然后服务器就去读取1.jsp这个Web资源里面的内容，将读到的内容再以Stream(流)的形式传输给浏览器
7、浏览器拿到服务器传输给它的数据之后，就可以把数据展现给用户看了
复制代码

转载于:https://juejin.im/post/5cf268d05188250193199d1b