浏览器渲染机制-从输入url到渲染出页面的整个过程

原创

已于 2024-07-03 16:18:13 修改 · 1.2k 阅读

标签

#前端

于 2024-05-16 18:33:16 首次发布

浏览器渲染机制-从输入url到渲染出页面的整个过程

前言
浏览器组成
浏览器内核
整个过程
性能优化策略
async和defer的作用是什么？有什么区别
首屏优化加载
总结
- 补充

前言

浏览器是我们日常开发的重要的工具，那么你了解浏览器吗？即使在前端面试中，我们也经常会遇到：在浏览器地址中从输入url地址到出现页面，这个过程发生了什么？介绍一下重绘和回流？这一类关于浏览器的问题。我们可能会知道大概的轮廓但对于具体的细节却是不那么清楚，那么今天我们就从浏览器组成开始来了解一下浏览器的渲染机制

浏览器组成

浏览器主要由7个部分组成：

用户界面（User Interface）：定义了一些常用的浏览器组件，比如地址栏，返回、书签等等
数据持久化（Data Persistence）：指浏览器的cookie、local storage等组件
浏览器引擎（Browser engine）：平台应用的相关接口，在用户界面和呈现引擎之间传送指令。
渲染引擎（Rendering engine）：处理HTML、CSS的解析与渲染
JavaScript解释器（JavaScript Interpreter）：解析和执行JavaScript代码
用户界面后端（UI Backend）：指浏览器的的图形库等
网络（Networking）：用于网络调用，比如HTTP请求

浏览器内核

浏览器内核分为两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎
·渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机
·JS引擎：负责解析和执行javascript来实现网页的动态效果浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核，最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎
常见的浏览器内核：Trident（IE）、Gecko（火狐）、Blink（Chrome、Opera）、Webkit（Safari）

整个过程

加载过程

DNS解析：
将域名解析成ip地址，因为域名只是一个中间的服务号，真正在网络中还是通过ip地址做网络访问的
浏览器根据ip地址向服务器发起http请求
服务器处理http请求，并返回给浏览器

下载资源

从服务器中获取所需的资源，
要加载的资源形式：

在这里插入图片描述

渲染过程

根据HTML代码生成DOM Tree

这个解析过程大概可以分为几个步骤
在这里插入图片描述

第一步：浏览器从磁盘或网络读取HTML的原始字节，也就是传输的0和1这样的字节数据，并根据文件的指定编码（例如 UTF-8）将它们转换成字符串。（在网络中传输的内容其实都是 0 和 1 这些字节数据。当浏览器接收到这些字节数据以后，它会将这些字节数据转换为字符串，也就是我们写的代码。）

第二步：将字符串转换成Token，例如：<html>、<body>等。Token中会标识出当前Token是“开始标签”或是“结束标签”亦或是“文本”等信息。

第三步：在每个Token被生成后，会立刻消耗这个Token创建出节点对象，因此在构建DOM的过程中，不是等待所有的Token都生成后才去构建DOM,而是一边生成Token一边消耗来生成节点对象。（DOM树的构建是从接受到文档开始的，一边会进行将字节转化为字符，字符转化为标记（Token），标记构建dom树，这个过程被分为标记化和树构建，而这是一个渐进的过程。为达到更好的用户体验，呈现引擎会力求尽快将内容显示在屏幕上。它不必等到整个 HTML 文档解析完毕之后，就会开始构建呈现树和设置布局。在不断接收和处理来自网络的其余内容的同时，呈现引擎会将部分内容解析并显示出来。
）（注意：带有结

最低0.47元/天解锁文章