浏览器内核和浏览器工作原理

### 浏览器的工作原理

1、浏览器组成

-人机交互（UI，浏览器的功能菜单，如：收藏夹）

-网络请求部分（Socket，发起网络请求功能，接收响应返回功能。【无论什么编程语言深度学习都会有这个socket】）

-JavaScript引擎部分（解析执行js, 如：Chrome V8引擎）

-渲染引擎部分（渲染HTML、CSS等）

-数据存储部分（cookie、HTML5中的本地存储LocalStorage、SessionStorage） 

## 主流渲染引擎 

-介绍- 

1》渲染引擎又叫排版引擎 或 浏览器内核

2》主流的 渲染引擎有：

**Chrome浏览器引擎**：Blink引擎（webkit的一个分支）

**Safari浏览器**： webkit引擎

**Firefox浏览器**：gecko引擎，

**opera浏览器**：blink引擎，（早起使用presto引擎）

**Internet Explore浏览器**： trident引擎

**Microsoft Edge浏览器**： EdgeHTML引擎（Trident的一个分支）

2、浏览器渲染引擎工作原理

 ##工作原理

1》解析HTML构建的Dom树（Document Object Model，文档对象模型），DOM是W3C组织推荐的处理可扩展置标语言的标准编程接口。

2》构建“渲染树”，渲染树并不同等于渲染树，因为像‘head’标签或‘display：none’这样的元素就没有必要放到渲染树树。

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

4》绘制“渲染树”，调用系统操作底层API进行绘制操作。

首先parse解析HTML构建DOM树》》render构建一个渲染树（剔除了DOM树不需要显示的标签元素）》》layout（为渲染树布局）》》painting操作系统底层的API绘制出来。

   首先解析我们HTML和CSS，生成DOM树和Style规则树》两个结合结果生成我们的渲染树》》对我们的渲染树进行layout布局操作设置它的大小，布局坐标定位等等》》paint进行绘制最后我们看到网页。

【Gecko】

首页也是拿到HTML进行解析》》生成的是Content Sink（内容槽[接下来槽又分成了两支]），一支是Content Model（内容模型也就是DOM树），另一支解析CSS也是生成一个Style Rules（规则树）》》两支生成的树合并成Frame Construction（帧，同渲染树）》》对Frame Tree做了reflow操作（同layout操作）  》》最后paint操作系统的API绘制展示出来。

【layout与reflow】面试题  

浏览器的layout或reflow过程

more tools 》rendering 》paint flashing （观察页面的【layout与reflow过程】）

3、浏览器访问网站的全过程

1》在浏览器地址栏中输入网址。（输入地址）

2》浏览器通过用户在地址栏中输入的URL构建HTTP请求报文。（构建HTTP请求报文）

3》浏览器发起DNS解析请求，将域名转换为IP地址。（DNS解析转换成地址）

4》浏览器将请求报文发送给服务器。（）

5》服务器接收请求报文，并解析。

6》服务器处理用户请求，并将处理结果封装成HTTP响应报文。

7》服务器将HTTP响应报文发送给浏览器

8》浏览器接收服务器响应的HTTP报文，并解析。

9》浏览器解析HTML页面并展示，在解析HTML页面时遇到新的资源需要再次发起请求。

10》最终浏览器展示出了页面。

【HTTP请求报文和响应报文格式】

【DNS解析过程】

### WEB开发的本质

1、请求：客户端发起的请求 

2、处理：服务器 - 处理请求

3、响应：服务器将处理结果发送给客户端

【客户端处理响应】

服务器响应完毕后，客户端急需处理

-浏览器：解析服务器返回的数据

-ios 、Android客户端，解析服务器返回的数据，并且通过ios或Android的UI技术实现页面的展示功能

关于C/S(client/server)和B/S(browser/server)

C/S：客户端服务器》有独立客户端的应用架构我们叫CS架构。

B/S：浏览器服务器》没有独立的客户端而是通过浏览器访问网页，这种叫BS架构。

根据不同的需求选择架构。

BS架构【优点】（部署非常方便，维护也非常方便）【缺点】（用户体验差一些）

不需要为每个客户开发独立的客户端，只需要把后台服务器做好，全世界任何一个角落的浏览器都可以使用这个应用程序。

CS架构： 【优点】（用户体验好，链接服务器非常稳定）【缺点】（为客户独立开发拥有，升级应用）

在应用升级的时候客户端都要跟着一同升级应用和下载。

/*********************************************************************************************/

浏览器内核简要说明

一个完整的浏览器包含浏览器内核和浏览器的外壳（shell）。浏览器内核又可以分为两部分：渲染引擎（Layout Engine或Rendering Engine）和JS引擎。由于JS引擎越来越独立，内核就倾向于只指渲染引擎。

浏览器的构成

浏览器一般由七个模块组成，User Interface（用户界面）、Browser engine（浏览器引擎）、Rendering engine（渲染引擎）、Networking（网络）、JavaScript Interpreter（js解释器）、UI Backend（UI 后端）、Date Persistence（数据持久化存储） 如下图：

用户界面 －包括地址栏、后退/前进按钮、书签目录等，也就是你-所看到的除了页面显示窗口之外的其他部分

浏览器引擎 －可以在用户界面和渲染引擎之间传送指令或在客户端本地缓存中读写数据等，是浏览器中各个部分之间相互通信的核心

渲染引擎 －解析DOM文档和CSS规则并将内容排版到浏览器中显示有样式的界面，也有人称之为排版引擎，我们常说的浏览器内核主要指的就是渲染引擎

网络 －用来完成网络调用或资源下载的模块

UI 后端 －用来绘制基本的浏览器窗口内控件，如输入框、按钮、单选按钮等，根据浏览器不同绘制的视觉效果也不同，但功能都是一样的。

JS解释器 －用来解释执行JS脚本的模块，如 V8 引擎、JavaScriptCore

数据存储 －浏览器在硬盘中保存 cookie、localStorage等各种数据，可通过浏览器引擎提供的API进行调用

常见引擎：

渲染引擎：

　　　　firefox使用gecko引擎

　　　　IE使用Trident引擎

　　　　2015年微软推出自己新的浏览器，原名叫斯巴达，后改名edge,使用edge引擎

　　　　opera最早使用Presto引擎，后来弃用

　　　　chrome\safari\opera使用webkit引擎

　　　　13年chrome和opera开始使用Blink引擎

JS 引擎：

　　　　老版本IE使用Jscript引擎

　　　　IE9之后使用Chakra引擎

　　　　edge浏览器仍然使用Chakra引擎

　　　　firefox使用monkey系列引擎

　　　　safari使用的SquirrelFish系列引擎

　　　　Opera使用Carakan引擎

　　　　chrome使用V8引擎。nodeJs其实就是封装了V8引擎

文章转载自：https://www.cnblogs.com/qfy0411/p/13973033.html