浏览器工作原理

浏览器的组成

• 人机交互部分（UI）
• 网络请求部分（socket）
• JavaScript引擎部分（解析执行JavaScript）
• 渲染引擎部分（渲染HTML CSS等）
• 数据存储部分（cookie、HTML5中的本地存储LocalStorage、SessionStorage）

主流渲染引擎

介绍

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

2、主流的 渲染引擎 有

• Chrome浏览器：Blink引擎（WebKit的一个分支）。
• Safari浏览器：WebKit引擎。
• FireFox浏览器：Gecko引擎。
• Opera例浏览器：Blink引擎。（早期版使用Presto引擎）。
• Internet Explorer浏览器：Trident引擎。
• Microsoft Edge浏览器：EdgeHTML引擎（Trident的一个分支）。

工作原理

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

2、构建渲染树，渲染树并不等同于Dom树，因为像head标签 或 display：none这样的元素就没有必要放到渲染树中了，但是他们在Dom树中。

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

4、绘制渲染树，调用操作系统底层API进行绘图操作。

浏览器访问网站过程

1、在浏览器地址栏中输入网址。

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

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

4、浏览器将请求报文发送给服务器。

5、服务器接受请求报文发送给服务器。

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

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

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

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

10、最终浏览器显示出页面。

Web开发本质

---

牢记以下三点

---

1、请求，客户端法起请求。
2、处理，服务器处理请求。
3、响应，服务器将处理结果发送给客户端。

---

客户端处理响应

---

• 服务器响应完毕后，客户端继续处理：
  • 浏览器解析服务器返回的数据
  • iOS、Android客户端，解析服务器返回的数据，并且通过iOS或Android的UI技术实现界面的展示功能

关于C/S（Client/Server）和B/S(Browser/Server)

C/S:客户端服务器
特点：不好维护，但用户体验感好。

B/S:浏览器服务器
特点：部署维护方便，但用户体验不好。

---