APP下载

浏览器工作原理

2020-07-29崔滔

计算机与网络 2020年10期
关键词:引擎浏览器绘制

崔滔

Web浏览器无疑是用户访问互联网很常见的入口,其借免安装和跨平台等优势,逐渐取代了很多传统的客户端。

Web浏览器通过向URL发送网络请求来访问Web服务器资源,并以交互性的方式展示这些内容。基本操作包括获取、处理、显示和存储,常见的浏览器包括Internet Explorer,Firefox,Chrome,Safari,Opera等。

用户界面

这是用户与浏览器发生交互的区域。浏览器的外观没有特定的标准,HTML5规范没有规定UI元素该长什么样,但是列出了一些常见元素:地址栏、个人信息栏、滚动条、状态栏和工具栏等。

瀏览器引擎

它提供了UI与底层渲染引擎之间的接口,根据用户交互进行查询和操控渲染引擎,提供初始化加载URL的方法,并负责重新加载、返回和前进等操作。

渲染引擎

渲染引擎负责在屏幕上显示网页内容,其主要工作是解析HTML。渲染引擎默认可展示HTML、XML和图片,还可以通过插件或扩展程序支持其他数据类型。

Web内容渲染过程大致如下:

HTML数据转成DOM

来自网络层的请求内容在渲染引擎中接收(通常是8 KB的块),然后将原始字节转换为HTML文件中的字符(基于字符编码)。接着词法分析器进行词法分析,将输入分解为各种标记(token),在标记化过程中,文件中的每个开始和结束标签都被记录下来。它知道如何去掉不相关的字符,比如空格和换行符。

接着,解析器进行语法分析,通过分析文档结构,应用语言语法规则构造解析树。解析过程是迭代进行的,它向词法分析器请求新的token,如果匹配语法规则,token就被添加到解析树中,然后再请求另一个token。如果没有匹配的规则,解析器将在内部存储token,并不断请求新token,直到找到匹配所有内部存储token的规则。如果没有找到规则,解析器将抛出异常,说明文档无效或包含语法错误。

这些节点在文档对象模型(DOM)树数据结构中互相链接,建立父子关系、相邻兄弟关系。

CSS数据转成CSSOM

CSS数据原始字节被转换成字符、token和节点,最终变成CSS对象模型(CSSOM)。CSS的层级特性决定了元素会应用什么样式。元素的样式数据可以来自父元素(通过继承),也可以直接在元素上设置。浏览器需要递归遍历CSS树结构来确定特定元素的样式。

DOM与CSSOM组成渲染树

DOM树包含了HTML元素之间的关系信息,CSSOM树则包含了这些元素的样式信息。从根节点开始,浏览器会遍历每一个可见节点,有些节点是隐藏的(通过CSS控制),不会出现在渲染结果中。对于每个可见节点,浏览器找到CSSOM中定义的相关规则进行匹配,最终这些节点会带着内容和样式出现在渲染树中。

布局

接下来进行内容布局。内容的实际尺寸和位置需要经过计算才能渲染到页面上,这个过程也叫重排(reflow)。HTML采用基于流的布局模型,也就是说大部分情况下,几何位置是一次性计算出来的(内容大小或位置发生变化,需要重新计算)。这个过程是从文档根元素开始,递归完成的。

绘制

通过遍历每个渲染器,并调用paint方法在屏幕上显示内容。绘制过程可以是全局的(绘制整个树),也可以是增量的(渲染树在屏幕上验证某个矩形区域),操作系统在这些特定节点上生成绘制事件,整个树不受影响。绘制是一个渐进的过程,其中一部分在被解析和渲染过后,而该过程将继续处理其余部分。

JavaScript解析器(JS引擎)

JavaScript是一种脚本语言,可动态更新Web内容、控制多媒体和动画等,这些是通过浏览器的JS引擎完成的。DOM和CSSOM提供了JS接口,都可以通过JS修改,由于浏览器不确定某些JS会做什么,因此它会在遇到script标签后会立即暂停构建DOM树。

JS解析器在接收到服务器发送来的代码后,会立即进行解析,代码被转换成机器能理解的对象表示形式。保存了所有解析信息的对象叫做抽象语法树(AST),这些对象又被解析器转换成字节码。这种编译方式叫做(Just In Time,JITs),也就是Java Script从服务器下载后在客户端实时编译。解析器和编译器是组合使用的,解析器立即处理源代码,编译器则生成机器码,客户端操作系统可直接运行。

UI Back End用于绘制基础控件,比如复选框和窗口等。底层使用操作系统的用户界面方法,暴露通用的接口,跟平台无关。

数据存储层

这是持久化层,辅助浏览器保存一些数据(比如cookies,session storage,indexed DB,Web SQL和书签以及用户的偏好设置等)。HTML5规范提出了浏览器端的完整数据库功能。

网络层

这一层处理浏览器的各种网络通信,浏览器使用各种通信协议获取网络资源,比如HTTP,HTTPs,FTP等。

浏览器用DNS解析URL,这些解析记录缓存在浏览器、操作系统、路由器或者ISP中。如果请求的URL不在缓存中, ISP的DNS服务器首先发起DNS查询,找到正确的IP地址后,浏览器使用特定的协议与服务器建立连接。浏览器向服务器发送SYN数据包,询问服务器是否打开了TCP连接,服务器用SYN/ACK数据包响应作为前面SYN的应答,浏览器接收到应答后,再向服务器发送ACK数据包。通过这样的3次握手就建立了TCP连接,一旦建立了连接,就可以传输数据了。传输数据过程中必须遵守HTTP协议的相关要求,包括请求和响应的规则等。

浏览器比较

如今市面上有各种不同的浏览器,尽管核心功能都是相同的,但是它们之间的区别也是多方面的。包括平台(Linux,Windows,Mac,BSD以及其他Unix系统)、协议、用户界面、HTML5支持情况、是否开源和所有权等。

猜你喜欢

引擎浏览器绘制
点燃企业发展的“引擎”
打造信息化建设的“党建引擎”
Painting ski maps 绘制滑雪地图
绘制童话
车坛往事4:引擎进化之屡次失败的蒸汽机车
绘制世界地图
微软发布新Edge浏览器预览版下载换装Chrome内核
神秘的不速之客
浏览器
lE8设置技巧大放送