浏览器工作原理(前端必须懂的浏览器工作机制和原理)

前端这点事 36 0

作为一个前端,经常会有老板或测试给我们提出某个地方加载太慢了,需要优化一下。我们自己的网站也一样,加载时间过长,自己都不耐烦,对于网页优化是很常见的,今天我们先介绍下网页加载原理。

一、浏览器简介

想要了解浏览器的工作原理,我们必须清楚浏览器的组成有哪些?以及各个部分功能。

浏览器组成部分如图所示:

浏览器工作原理(前端必须懂的浏览器工作机制和原理)-第1张图片-前端这点事

各部分的功能及意义:

  • 用户界面:浏览器的界面,有标签页、地址栏、前进、后退、刷新、收藏等。除了请求到的内容页面。

  • 浏览器引擎:用来查询和操作渲染引擎的接口。

  • 渲染引擎:也叫做 “浏览器内核” ,用来解析 html、css 并将结果以网页的形式显示,不同浏览器内核不同,同理渲染引擎也不同。

  • 网络:用来网络调用,如前后端数据交互中的http请求。

  • js 解释器:用来解释执行js代码。

  • UI 后端:绘制基础原件,如组合框与窗口,提供平台无关的接口,内部使用操作系统的相应实现。

  • 数据存储:属于持久层。浏览器需要把所有数据存到硬盘上,如 cookie、图片、css 等。

二、浏览器工作流程

我们在浏览器用户界面的地址栏中,输入我们需要访问网站地址url后回车。

浏览器工作流程:

  1. 构建请求:浏览器开启网络请求线程,向服务器发送完整的http请求。

  2. 查找缓存:真正发起网络请求之前,浏览器会先在数据存储中查询是否有需要请求的文件。如果没有任何缓存,说明第一次请求,则进入网络请求过程。当浏览器有缓存的时候,会拦截请求,返回缓存,拦截请求。缓存优点:缓解服务器压力,提升性能,实现快速加载资源。

  3. 准备IP地址和端口:通过 URL 地址获取 ip 地址和端口信息,通过 DNS 解析返回域名对应的 ip 和 port ,浏览器也提供了 dns 数据缓存,通常 url 没有指明端口号,则默认80。

  4. 等待TCP队列:chrome 有个机制,同一域名下同时最多只能建立6个TCP连接,如果同时有10个请求发生,其中4个就会进入等待队列,直至进行中的请求完成,如果小于6个,则直接进入TCP 连接。

  5. 建立TCP连接:浏览器与服务器之间通过 TCP 建立连接。TCP协议提供可靠的连接服务,采用三次握手建立一个连接。

  6. 发送http请求:连接建立成功之后,浏览器就可以与服务器之间通讯了。浏览器会向服务器发送请求信息,包括请求方法、请求 URL、http 版本协议。

  7. 服务器处理请求:服务端收到请求信息以后,会根据浏览器的请求信息返回结果,返回结果中包含三部分:响应行、响应头、响应体。响应行内包含状态码,告诉浏览器处理结果,http状态码有很多。响应头包含服务器自身的一些信息,响应体就包含了网页的 html 实际内容。

  8. 服务器响应和断开连接:通常服务器向浏览器返回请求数据之后,就会关闭连接,经过四次分手之后,就断开连接了。

浏览器中http请求阶段如图:

浏览器工作原理(前端必须懂的浏览器工作机制和原理)-第2张图片-前端这点事

http请求和响应处理,是前端与后端数据交互的时候经常使用的部分。

浏览器工作原理(前端必须懂的浏览器工作机制和原理)-第3张图片-前端这点事

三、浏览器渲染过程

渲染引擎通过网络获得请求文档内容(以8k分块的方式完成),然后开始:解析html为DOM树 > 渲染树结构 > 布局渲染 > 绘制渲染树。

具体解析过程为:

开始解析 html 内容,将标签转化为 DOM 节点,然后解析它外部的css文件以及 style 中的样式信息。css 样式信息和 html 标签来构建渲染树。渲染树是由一些包含颜色大小等盒子组成的,按照从上到下,从左到右的方式显示,渲染树构建好之后,执行布局过程,将每个节点确定在屏幕上的确切坐标,最后使用 UI 后端层绘制每个节点。

举例说明下浏览去解析 html、css、js 的过程:

  1. 浏览去地址栏输入地址后回车,假设第一次访问,浏览去向服务器发送请求,返回html文件。

  2. 浏览去载入html代码,解析head中的link引入的外部css文件。

  3. 浏览器发出css文件请求,服务器会返回css文件。

  4. 浏览器继续载入body部分代码,css文件接收到之后,就可以渲染页面。

  5. 遇到img标签引入图片,会立马向服务器发送请求,此时不等待返回的图片,而是继续向下渲染。

  6. 浏览器接收到返回图片文件,由于图片占用一定面积,影响后边排版,所以浏览去需要回过头重新渲染这部分代码。

  7. 浏览器发现script标签,内部包含的js代码,就会立即执行。

  8. js脚本执行js语句,如果js语句操作的是DOM元素,浏览器就需要重新渲染这部分代码。

  9. 等到</html>到来,页面第一次渲染就完成了。

  10. 如果用户点击"换肤"按钮,js让浏览器换一个css文件,此时浏览去又会向服务器发送请求。

  11. 等浏览器返回新的css文件之后,重新渲染页面。

需要注意:

  • js不能并行下载和解析(阻塞下载)。

  • 当引用了JS的时候,浏览器发送1个js request就会一直等待该request的返回。因为浏览器需要1个稳定的DOM树结构,而JS中很有可能有代码直接改变了DOM树结构,比如使用 document.write 或 appendChild,甚至是直接使用的location.href进行跳转,浏览器为了防止出现JS修改DOM树,需要重新构建DOM树的情况,所以 就会阻塞其他的下载和呈现。

  • JS、CSS中如有重定义,后定义函数将覆盖前定义函数。

先了解网页的请求,加载,解析过程,然后再考虑到底该如何优化网页性能呢?


标签: 技术分享

发表评论 (已有0条评论)

还木有评论哦,快来抢沙发吧~