个性化阅读
专注于IT技术分析

前端开发者进阶之路必看!快速了解浏览器的工作原理

浏览器原理讲解-头部展示图

1、了解浏览器的工作原理有什么好处?

浏览器是个什么东西?

平时我们在浏览器地址栏输入网址到网页展示,这过程发生了什么事?

JavaScript操作的HTML DOM是什么?怎么产生的?

前端网页加载性能如何优化?具体有哪些做法? 。。。。。。

这些问题都是面试官的最爱,网页性能优化是前端设计师必备的技能,了解浏览器的工作原理更有利于日常的前端开发,不止性能优化,包括对JS引擎原理的理解,能让你知道这些代码为什么这样写,哪种方式更好。

在设计中,对原理的理解一般都是技术进阶的方向。比如学习spring boot或Android开发,如果你不了解其生命周期,一些开发错误你可能无法及时处理,
理解一些运行原理,我们能够学习或开发起来更有依据。

2、流行浏览器有哪些?渲染引擎和JS引擎?

浏览器是一个应用程序,主要部分是浏览器内核,内核主要包括渲染引擎和JS引擎。渲染引擎主要负责解析数据,并显示html文档、图片以及其它文档;JS引擎负责解析并执行JavaScript。从整体来看,渲染引擎和JS引擎的执行原理是类似的,它们都需要对数据进行词法分析以及语法分析,目前流行的浏览器以及对应的渲染引擎和JS引擎如下表:

浏览器名称 渲染引擎 JS引擎
Internet Explorer Trident Jscript
Firefox Gecko TraceMonkey
Chrome Webkit V8
Safari WebKit SquirrelFish Extreme
Opera Presto Carakan

3、浏览器的整体结构以及主要工作流程

浏览器运行机制流程图

浏览器主要组成:

1)用户界面。包含基本的组件如地址栏,以及浏览器厂商自定义的功能;

2)数据储存模块。用于持久化网页的数据,如cookies,database;

3)浏览器处理引擎。类似于控制器,在渲染引擎和用户界面之间进行任务调度;

4)渲染引擎,负责处理web文档,并最终显示在用户界面;

5)JS引擎,和渲染引擎类似,不过主要集中处理JS;

6)网络模块,给渲染引擎提供网络请求;

7)UI后端负责绘制渲染引擎处理得到的渲染树节点元素。

浏览器的主要运行流程:用户在浏览器输入www.baidu.com并回车,浏览器引擎将该URL传给渲染引擎,渲染引擎调用网络模块向服务器请求资源,若请求资源成功,则渲染引擎开始解析资源,最后调用UI后端绘制界面。

下面侧重分析三个部分:网络调用模块,渲染引擎以及JS引擎。涉及的内容都是IT开发者基本必备的知识

4、浏览器网络请求过程,从输入URL到网页展示过程都发生了什么?

在浏览器地址栏输入www.baidu.com,到页面显示,该过程涉及的网络调用主要包括:NDS域名解析;客户端和服务端进行TCP/IP三次握手;服务器返回数据给浏览器。

IP(Internet Protocol)即互联网协议,如192.168.1.1,互联网每台主机的IP地址都是唯一的,HTTP连接实际使用的是IP地址,而不是域名www.baidu.com,使用该域名字符串是为了好记忆。查看域名对应的IP可以使用:ping www.baidu.com查看百度的实际IP地址。

好记忆的代价就是每次进行网络访问,都要找到域名对应的IP地址,这就产生了一个叫做DNS(Domain Name Server,域名服务器)的东西,域名服务器中主要保存了一张IP与域名对应的数据表,如:

domain_name(域名) ip_address(IP地址)
www.baidu.com 14.215.177.39
www.google.com 75.126.135.131

当浏览器通过DNS服务器找到域名对应的IP地址后,这时浏览器开始和服务器建立TCP/IP连接,这过程经过著名的TCP/IP三次握手,最后服务器响应信息给浏览器,浏览器接受到信息,并进行处理,最后展示。

HTTP运行原理图

下面我们再来详细看下这个执行过程

1)DNS域名解析的过程

浏览器DNS缓存记录: 浏览器在寻求域名解析时,首先会先查询浏览器DNS缓存记录,在Chrome地址栏输入:chrome://net-internals/#dns,可以查看浏览器的所有DNS缓存记录:

DNS缓存记录

本机DNS缓存记录:若浏览器在浏览器DNS缓存中找不到,则继续查询本地DNS缓存记录,即你本机的hosts文件。

A、windows下查看本机DNS缓存命令:ipconfig /displaydns,

清除DNS缓存命令:ipconfig /flushdns;

B、linux系统(只有开启nscd服务才会有dns缓存),删除dns缓存命令:rm -f /var/db/nscd/hosts,重启nscd:service nscd restart。

路由DNS缓存记录:路由器中也会有DNS缓存记录。

ISP的DNS服务器:ISP(Internet Service Provider)互联网服务提供商,专门提供DNS解析服务的,比如国内有阿里DNS,360,百度。

根服务器:请求跟服务器进行递归查询。

2)TCP/IP三次握手过程

TCP协议的三次握手主要是保证数据传输的安全可靠性,大概过程如下:

A、客户端发送SYN数据包给服务器,询问服务器是否可以开放新的连接;服务器返回带有SYN/ACK的数据包给客户端作为答复(客户端-浏览器:服务器你让我进去吗?服务器:呐!写在数据包里面,你自己看了!)

B、客户端收到数据包发现允许连接,继续发送ACK包回答服务器(客户端-浏览器:我准备进去了。。。)

C、建立连接,准备传输数据。

3)HTTP报文

什么是HTTP报文呢?其实就是一个文档,该文档遵循一定的格式,一个报文一般由三部分组成:HTTP协议,头部信息,正文信息。报文又分为:HTTP请求和HTTP响应。

A、HTTP请求:浏览器向服务器发出请求,会携带请求报文数据,包括User-agent,cookie,请求头例子如下:

HTTP请求报文数据

GET请求和POST请求的区别是:

GET请求携带的数据是在请求头中的,所以你提交数据可以在URL中看到。

POST请求携带的数据是在请求体中的,所以数据不暴露,这样显得安全。

B、HTTP响应

服务器响应客户端,其响应报文的HTTP响应头实例如下:

HTTP响应头信息

HTTP响应报文也包括:HTTP协议 – 状态码,响应头,相应正文,HTTP相应正文的内容就是html文档内容。

关于HTTP报文信息,在Chrome浏览器的操作如下(其它浏览器类似):

HTTP响应头和请求头

5、渲染引擎执行过程

渲染引擎获取到服务器HTML文档后,开始解析HTML得到HTML DOM节点树,同时解CSS,创建得到渲染节点树,渲染节点元素带有CSS定义的属性(颜色、大小等)。渲染节点树的结构和DOM节点树的结构大致相同。称为渲染树是因为该节点树的节点元素,稍后会被绘制到屏幕上,和HTML DOM节点树比,渲染树没有<head>中不会显示的头部信息。

HTML DOM节点树的结构如下:

DOM节点树

接着引擎对渲染树进行布局,布局的意思是在渲染树追加每个节点的屏幕坐标。

布局完成,引擎遍历所有渲染树,并调用UI后端进行绘制,最后显示在屏幕上。

注意:渲染引擎处理的过程不是一次解析一次显示,而是一个渐进过程,能先显示的显示。

渲染引擎解析

关于渲染引擎的解析过是相当复杂的,涉及到编译原理,该解析过程和一般编程语言的解析是类似的。

渲染引擎主要是对web文档资源进行解析,解析的目的是为了得到解析节点树,编译原理中叫语法树,它的样子和上面提到的DOM节点树一样。

解析过程主要分为两步:词法分析和语法分析。

词法分析:主要是将文档内容切分成各种标记,实例如下:

词法分析图解

语法分析:对词法分析得出的结果进行语法应用,分析文档结构,语法分析的实例如下:

语法分析图解
语言语法结构分析

词法分析和语法分析是所有语言解析中,都比较重要,当前有强大的工具支持生成解析器,你也可以实现自己的解析器:

A、词法分析生成器Flex + 语法分析生成器Bison;

B、词法分析生成器Lex + 语法分析生成器Yacc;

WebKit也是使用Flex创建词法分析器,使用Bison创建语法分析器。

1)关于浏览器的容错机制

A、避免过多的元素嵌套

如果在一个表单中嵌套另一个表单,第二个表单会被忽略;同类标签嵌套最多只能20层,过多也会被忽略;

B、不规则表格元素

在table中嵌入另一个table,但又不在table的单元格中,WebKit会更改为两个同级table的形式。

2)关于处理脚本和样式表的问题

解析器遇到script脚本会立即解析并执行脚本,现在WebKit和Firefox优化成了可以并行解析,也就是在执行脚本的时候,也会解析文档的其余部分,加快了速度。

另外,在加载或解析样式表过程中,firefox会禁止脚本。webkit则是仅当脚本可能访问未加载的样式时候,才禁止脚本。

6、什么是JS解析引擎?

JS解析解析引擎和上面提到的渲染引擎解析html文档是类似的,都是需要进行词法分析,语法分析,不同的是JS引擎还要将解析的结构编译成本地机器码,然后执行机器码。

为什么JS是单线程?JS的主要任务是操作DOM,更友好地实现用户交互,如果对同一个DOM进行读写操作,那么浏览器将不能决定该执行哪个操作。

7、如何优化前端页面加载性能?

关于页面性能的优化可以参考DOM的结构(访问速度),一方面可以关注UI绘制的问题,另一方面可以侧重网络请求的优化,下面是一些建议,但并不是规范性的,更具体的需要根据情况对DOM、UI和网络请求方面作出优化设计。

 1)减少HTML DOM的操作,js操作dom会触发reflow(回流,重新计算元素的位置和尺寸)或repaint重画,这会导致性能的损耗;

2)尽量不要使用CSS3动画(动画也会触发回流重画);

3)尽量不用table布局,table的调整会导致重新渲染;

4)使用预加载,使用缓存,主要针对网络请求;

5)使用class和id选择元素,少用后代选择器(针对DOM的结构);

赞(0) 打赏
未经允许不得转载:srcmini » 前端开发者进阶之路必看!快速了解浏览器的工作原理
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏