6张图让你搞懂浏览器渲染网页过程
我的想法:如果我要构建快速可靠的网站,需要真正了解浏览器渲染网页的每个步骤机制,这样就可以在开发过程中对每个步骤进行优化。 这篇文章是我在较高水平上对端到端过程的学习总结。
好了,废话不多说,我们开始吧。这个过程可以分为以下几个主要阶段:
- 开始解析HTML
- 获取外部资源
- 解析 CSS 并构建CSSOM
- 执行 JavaScript
- 合并 DOM 和 CSSOM 以构造渲染树
- 计算布局和绘制
1.开始解析HTML
当浏览器通过网络接收页面的HTML
数据时,它会立即设置解析器将HTML
转换为文档对象模型(DOM)。
文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述,并定义了一种方式可以使从程序中对该结构进行访问,从而改变文档的结构,样式和内容。DOM 将文档解析为一个由节点和对象(包含属性和方法的对象)组成的结构集合。简言之,它会将web页面和脚本或程序语言连接起来。
解析过程的第一步是将HTML分解并表示为开始标记、结束标记及其内容标记,然后它可以构造DOM。
2. 获取外部资源
当解析器遇到外部资源(如CSS或JavaScript文件)时,解析器将提取这些文件。 解析器在加载CSS文件时继续运行,此时会阻止页面渲染,直到资源加载解析完(稍后会详细介绍)。
JavaScript 文件略有不同-默认情况下,解析器会在加载 JS 文件然后进行解析同时会阻止对HTML的解析。 可以将两个属性添加到脚本标签中以减轻这种情况:defer
和async
。 两者都允许解析器在后台加载JavaScript 文件的同时继续运行,但是它们的执行方式不同。 关于这一点后面还会再讲一点,但总的来说:
defer
表示文件的执行将被延迟,直到文档的解析完成为止。 如果多个文件具有defer
属性,则将按照页面放置的顺序依次执行。
<script type="text/javascript" src="script.js" defer>
async
意味着文件将在加载后立即执行,这可能是在解析过程中或在解析过程之后执行的,因此不能保证异步脚本的执行顺序。
<script type="text/javascript" src="script.js" async>
预加载资源
<link>
元素的 rel
属性的属性值preload
能够让你在你的HTML页面中 <head>
元素内部书写一些声明式的资源获取请求,可以指明哪些资源是在页面加载完成后即刻需要的。
对于这种即刻需要的资源,你可能希望在页面加载的生命周期的早期阶段就开始获取,在浏览器的主渲染机制介入前就进行预加载。这一机制使得资源可以更早的得到加载并可用,且更不易阻塞页面的初步渲染,进而提升性能。
<link href="style.css" rel="preload" as="style" />
3.解析CSS并构建CSSOM
你可能很早就知道DOM,但对CSSOM(CSS对象模型)可能听得少,反正我也没听过几次。
CSS 对象模型 (CSSOM) 是树形形式的所有CSS选择器和每个选择器的相关属性的映射,具有树的根节点,同级,后代,子级和其他关系。CSSOM 与 文档对象模型(DOM) 非常相似。两者都是关键渲染路径的一部分,也是正确渲染一个网站必须采取的一系列步骤。
CSSOM 与 DOM一起构建渲染树,浏览器依次使用渲染树来布局和绘制网页。
与HTML文件和DOM相似,加载CSS文件时,必须将它们解析并转换为树-这次是CSSOM。 它描述了页面上的所有CSS选择器,它们的层次结构和属性。
CSSOM
与 DOM
的不同之处在于它不能以增量方式构建,因为CSS
规则由于特定性而可以在各个不同的点相互覆盖。 这就是CSS 阻塞渲染的原因,因为在解析所有CSS并构建CSSOM之前,浏览器无法知道每个元素在屏幕上的位置。
4.执行JavaScript
不同的浏览器有不同的 JS 引擎来执行此任务。从计算机资源的角度来看,解析 JS 可能是一个昂贵的过程,比其他类型的资源更昂贵,因此优化它对于获得良好的性能是如此重要。
载入事件
加载的JS和DOM被完全解析并准备就绪后就会 emit document.DOMContentLoaded
事件。 对于需要访问DOM的任何脚本,例如以某种方式进行操作或侦听用户交互事件,优良作法是在执行脚本之前先等待此事件。
document.addEventListener('DOMContentLoaded', (event) => {// 这里面可以安全地访问DOM了
});
在所有其他内容(例如异步JavaScript,图像等)完成加载后,将触发window.load
事件。
window.addEventListener('load', (event) => {// 页面现已完全加载
});
5.合并DOM和CSSOM 构建渲染树
渲染树是DOM和CSSOM的组合,表示将要渲染到页面上的所有内容。 这并不一定意味着渲染树中的所有节点都将在视觉上呈现,例如,将包含opacity: 0
或visibility: hidden
的样式的节点,并仍然可以被屏幕阅读器等读取,而display: none
不包括任何内容。 此外,诸如<head>
之类的不包含任何视觉信息的标签将始终被忽略。
与 JS 引擎一样,不同的浏览器具有不同的渲染引擎。
6. 计算布局和绘制
现在我们有了完整的渲染树,浏览器知道了要渲染什么,但是不知道在哪里渲染。 因此,必须计算页面的布局(即每个节点的位置和大小)。 渲染引擎从顶部开始一直向下遍历渲染树,计算应显示每个节点的坐标。
完成之后,最后一步是获取布局信息并将像素绘制到屏幕上。
6张图让你搞懂浏览器渲染网页过程相关推荐
- Android 动态分区详解(一) 5 张图让你搞懂动态分区原理
文章目录 0. 导读 1. 动态分区详解的背景 1.1 背景 1.2 动态分区的本质 2. Linux device mapper 驱动 3. Android 动态分区布局 3.1 动态分区布局 3. ...
- 原来 8 张图,就可以搞懂「零拷贝」了
前言 磁盘可以说是计算机系统最慢的硬件之一,读写速度相差内存 10 倍以上,所以针对优化磁盘的技术非常的多,比如零拷贝.直接 I/O.异步 I/O 等等,这些优化的目的就是为了提高系统的吞吐量,另外操 ...
- 光盘刻录只允许读取不能拷贝_原来 8 张图,就可以搞懂「零拷贝」了
作者 | 小林coding 来源 | 小林coding(ID:CodingLin) 前言 磁盘可以说是计算机系统最慢的硬件之一,读写速度相差内存 10 倍以上,所以针对优化磁盘的技术非常的多,比如零拷 ...
- 原来 8 张图,就可以搞懂「零拷贝」了!
作者 | 小林coding 来源 | 小林coding(ID:CodingLin) 头图 | CSDN 下载自视觉中国 前言 磁盘可以说是计算机系统最慢的硬件之一,读写速度相差内存 10 倍以上,所 ...
- linux dma 拷贝内存数据_原来 8 张图,就可以搞懂「零拷贝」了
前言 磁盘可以说是计算机系统最慢的硬件之一,读写速度相差内存 10 倍以上,所以针对优化磁盘的技术非常的多,比如零拷贝.直接 I/O.异步 I/O 等等,这些优化的目的就是为了提高系统的吞吐量,另外操 ...
- 8000字 | 32 张图 | 一文搞懂事务+隔离级别+阻塞+死锁
来源 | 悟空聊架构(ID:PassJava666) 本篇主要内容如下: 本篇主要内容 一.事务 1.1 什么是事务 为单个工作单元而执行的一系列操作.如查询.修改数据.修改数据定义. 1.2 语法 ...
- 一张图让你搞懂DES与RSA混合加密技术
原址 1.RSA加解密原理 第1步:ipB先给A发送B公钥,ipA用B公钥加密A公钥发送给ipB,ipB拿到后,用B私钥去取里面内容,ipB拿到A公钥. 第2步:双方通信前,先把自己公钥发给对方!用对 ...
- 一张图让你搞懂“非对称加密”
第一步:ipB先给A发送B公钥,ipA用B公钥加密A公钥发送给ipB,ipB拿到后,用B私钥去取里面内容,ipB拿到A公钥. 第二步:双方通信用对方公钥直接加密后发送.接收方用自己的私钥去解密.
- 几张图让你搞懂波分复用 (WDM)
WDM 允许服务提供商在光纤束的任一端添加新设备来增加容量,并合并单一光纤束上的多个波长/信道.多路复用器用于将波长合并到单一光纤上,解复用器用于分离另一端上的波长.采用了四种主要技术: 1. 粗波分 ...
最新文章
- Spring装配Bean---使用xml配置
- C++ —— 初识C++
- python脚本限制_解决python 上传图片限制格式问题
- Vim引申以及Linux下彩色进度条实现
- python3 正则表达式 嵌套表格_python 正则表达式处理表格
- jenkins--Jenkins+Git+coding+maven 实现自动化测试持续集成
- uniapp实现的购物列表左右联动功能
- mysql创建视图步骤_MySQL创建视图的详细步骤
- 高级计量经济学及stata应用 陈强 2021年5月1-5日 社会科学 经济学 管理学 金融 医学等各个领域
- APP在推广之渠道为王(二 )
- Re-parameterizing Your Optimizers rather than Architectures
- 在OpenWRT路由器上自动更新github等网站的hosts
- win7显示器双屏显示怎么设置
- php图片生成加密pdf文件,php生成PDF格式文件并且加密
- 【Effective C++】item20: Prefer pass-by-reference-to-const to pass-by-value
- 博途v15程序监视无法使用_西门子博图软件如何监视PLC程序?
- matlab第八课:图像分析(下)
- 有哪些电脑必备软件?5款良心软件!电脑必备软件看这一篇就够了
- Token Contrast for Weakly-Supervised Semantic Segmentation
- Linux硬件信息查看命令