阅读 667

浏览器到底都有什么?

前端人员最常接触的就是浏览器,无论我们平时写页面,F12里查看Element,还是写js功能调试的Console,或是调试接口用到的Network。但我们的浏览器还有哪些东西,由于这也是很大的内容,所以建了个专栏专门介绍,今天先说说他的构成,为以后具体的原理机制做基础。

浏览器的主要功能

浏览器主要功能是将用户输入的web资源以图形化的形式展示出来,一般资源格式是HTML格式。用户用URI(Uniform Resource Identifier 统一资源标识符)来指定所请求资源的位置。那在用户输入了URL后浏览器到底做了些什么?我们得先了解浏览器都有些什么。

浏览器的构成

  1. 用户界面
  2. 浏览器引擎
  3. 渲染引擎
  4. 网络
  5. 显示后端
  6. JS解释器
  7. 数据持久层

用户界面(User Interface)

除了浏览器窗口显示的页面,其他用户看见的都属于用户界面,比如:地址栏、书签、首选项、用户头像(有登录功能的浏览器)、前进/后退/刷新、下载器 等等。是用户与浏览器本身发生交互的功能组件。

浏览器引擎(Browser Engine)

在用户界面和渲染引擎之间传送指令,是渲染引擎的一个接口。
用来加载指定的URI,实现前进、后退、刷新等功能。
用来查询/修改渲染引擎设置。

渲染引擎(Rendering Engine)

它是浏览器最重要的一个模块,负责指定的URI生成可视化界面,解析html,css以及图片等资源。
其实解析的过程是我们最要了解和关注的:回流,重绘,cssom,DOM树,一个进程上不同线程执行的先后顺序等。这些我会陆续的写,也请大家关注期待。
渲染引擎也被称为浏览器内核,市面上常见有五种内核:

  1. Trident 常见浏览器:IE,360安全浏览器(1.0-5.0为Trident,6.0为Trident+Webkit)猎豹浏览器.
  2. Gecko 常见浏览器:火狐浏览器
  3. Presto 常见浏览器:Opera浏览器早期使用,目前由于兼容等问题被废弃。
  4. Webkit 常见浏览器:谷歌浏览器,Safari,手机浏览器。
  5. Blink 常见浏览器:谷歌,Opera,是谷歌和Opera共同开发的。

网络(Networking)

实现http/https,FTP等文件传输协议。可以在不同字符集之间转换。也可以缓存最近检索的资源。这里引出一个话题:
1.浏览器缓存机制,最主要的就是http缓存,其中的强缓存协商缓存分别都是什么,怎么执行。
2.http/https区别,getpost等请求

显示后端(Display Backend)

绘制用户界面控件集合,组合框(下拉框,列表框),字体合集等。例如input中不同type的样式,底层使用操作系统的用户接口。

JS解释器

用来解释,执行JavaScript代码。在ES6之前,渲染引擎JS解释器是在一起工作的。我们最常提到的就是Webkit,就是WebCore排版引擎及JavaScriptCore解析引擎构成,但Chrome对脚本解析是用的自己研发的V8引擎。
又引出一些话题:
1.渲染引擎Js解释器的协同工作,事件循环
2.Js解释器中的垃圾回收机制
3.V8中解释器解析器优化编译器是怎么运行的。执行Js时,解析器解析的AST,字节码,词法解析,语法解析等等。

数据持久层(Data Persistence)

浏览器在硬盘中保存的数据:
1.书签、工具栏设置等这样的高级数据。
2.Cookie,安全证书、缓存等低级数据。
我们更应该关注他们的缓存:Local Storage,Session Storage,indexedDB,Web SQL。这些都是HTML5规范中定义的。日后我会拿出一章来对他们进行描述对比。

用户输入了URL后浏览器到底做了些什么?

这也是很经典的一道面试题。回答也可粗可细。这里粗略的说,因为细说能拆出很多文章。
1.DNS域名解析;
2.建立TCP连接;
3.发送HTTP请求;
4.服务器处理请求;
5.返回响应结果;
6.关闭TCP连接;
7.浏览器解析HTML并布局渲染;

DNS域名解析

DNS解析试将语义化的域名,变为服务器的ip地址。
1.先查找浏览器中的DNS缓存,是否有域名对应的ip。
2.没有向操作系统查找。
3.系统没有对应ip,就采用递归或者迭代查询的方式,依次向根域名服务器顶级域名服务器权威域名服务器发起查询请求,直至找到一个或一组 IP 地址,返回给浏览器。

建立TCP连接

找到对应ip后,需要与服务器通过三次握手,建立TCP连接。
回头可以聊聊有关TCP三次握手,四次挥手,UDP无连接的协议,之间的特点及区别。

发送HTTP请求

浏览器开始发送 HTTP 请求,一个请求报文由请求行、请求头、空行、实体(Get 请求没有)组成。

服务器处理请求

浏览器请求报文到达服务器之后,服务器接口会对请求报文进行处理,执行接口对应的代码,处理完成后响应客户端。

返回响应结果

浏览器处理返回结果。当客户端发送的报文头accept(客户端期望得到的数据类型,这是浏览器自动封装的请求头),如果服务器返回的content-type是accept中的任何一个,浏览器都能解析,并直接展示在网页上。

关闭TCP连接

  1. 服务器向客户端发送 Alert 报文,类型为 Close Notify,通知客户端不再发送数据,即将关闭连接,同样,这条报文也是经过加密处理的。
  2. 服务器通过调用 close 函数主动关闭连接,向客户端发送带有 FIN 标志位的分组,序列号为 m。
  3. 客户端确认收到该分组,向服务器发送带有 ACK 标志位的分组,确认号为 m+1。
  4. 客户端发送完所有数据后,向服务器发送带有 FIN 标志位的分组,序列号为 n。
  5. 服务器确认收到该分组,向客户端发送带有 ACK 标志位的分组,序列号为 n+1。客户端收到确认分组后,立即进入 CLOSED 状态;同时,服务器等待 2 个 MSL(Maximum Segment Lifetime,最大报文生存时间) 的时间后,进入 CLOSED 状态。

浏览器解析HTML并布局渲染

浏览器通过解析HTML,生成DOM树,解析CSS,生成CSS规则树,然后通过DOM树和CSS规则树生成渲染树。这里就涉及到渲染引擎的工作了,我们专门拿一篇文章去描述它。\


至此,对浏览器的大概介绍就完成了,同时也引发出很多问题:
1.浏览器缓存机制。
2.http/https协议的差别。
3.GET/POST及其他请求的差别
4.浏览器垃圾回收机制。
5.渲染引擎,Js解释器如何工作。
6.Event Loop。
7.V8脚本引擎的工作原理。
8.浏览器那些存储机制。
前端是多么有趣,一个浏览器就够我们去这么深入的探索。请大家关注我,我会把这些文章补齐。
如果此文章对您有帮助或启发,那便是我的荣幸
文章分类
前端
文章标签