浏览器的探索

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。则就叫称为重绘。
复制代码

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

• 回流什么时候发生：

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

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

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

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

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