对象篇
模块化编程-自研模块加载器
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
关键渲染路径是指浏览器通过把 HTML、CSS 和 JavaScript 转化成屏幕上的像素的步骤顺序。优化关键渲染路径可以提高渲染性能。关键渲染路径包含了 Document Object Model (DOM),CSS Object Model (CSSOM),渲染树和布局。
❞
优化关键渲染路径可以提升首屏渲染时间。理解和优化关键渲染路径对于确保回流和重绘可以每秒 60 帧、确保高性能的用户交互和避免无意义渲染至关重要。
如何结合CRP
进行性能优化?
我想对于性能优化,大家都不陌生,无论是平时的工作还是面试,是一个老生常谈的话题。
如果单纯针对一些点去泛泛而谈,我想是不太严谨的。
今天我们结合一道非常经典的面试题:从输入URL到页面展示,这中间发生了什么?
来从其中的某些环节,来深入谈谈前端性能优化 CRP
。
从输入 URL 到页面展示,这中间发生了什么?
这道题的经典程度想必不用我多说,这里我用一张图梳理了它的大致流程:这个过程可以大致描述为如下:
1、URI 解析
2、DNS 解析(DNS 服务器)
3、TCP 三次握手(建立客户端和服务器端的连接通道)
4、发送 HTTP 请求
5、服务器处理和响应
6、TCP 四次挥手(关闭客户端和服务器端的连接)
7、浏览器解析和渲染
8、页面加载完成
本文我会从浏览器渲染过程、缓存、DNS 优化几方面进行性能优化的说明。
浏览器渲染过程
构建 DOM 树
构建DOM
树的大致流程梳理为下图:
我们以下面这段代码为例进行分析:
森林
首先浏览器从磁盘或网络中读取 HTML
原始字节,并根据文件的指定编码将它们转成字符。
然后通过分词器将字节流转换为 Token
,在Token
(也就是令牌)生成的同时,另一个流程会同时消耗这些令牌并转换成 HTML head
这些节点对象,起始和结束令牌表明了节点之间的关系。
当所有的令牌消耗完以后就转换成了DOM
(文档对象模型)。
最终构建出的DOM
结构如下:
构建 CSSOM 树
DOM
树构建完成,接下来就是CSSOM
树的构建了。
与HTML
的转换类似,浏览器会去识别CSS
正确的令牌,然后将这些令牌转化成CSS
节点。
❝
子节点会继承父节点的样式规则,这里对应的就是层叠规则和层叠样式表。
❞
构建DOM
树的大致流程可梳理为下图:
我们这里采用上面的HTML
为例,假设它有如下 css:
body {
font-size: 16px;
}
p {
font-weight: bold;
}
div {
color: orange;
}
那么最终构建出的CSSOM
树如下:
有了 DOM
和 CSSOM
,接下来就可以合成布局树(Render Tree)了。
构建渲染树
等 DOM
和 CSSOM
都构建好之后,渲染引擎就会构造布局树。布局树的结构基本上就是复制 DOM
树的结构,不同之处在于 DOM
树中那些不需要显示的元素会被过滤掉,如 display:none
属性的元素、head
标签、script
标签等。
复制好基本的布局树结构之后,渲染引擎会为对应的 DOM
元素选择对应的样式信息,这个过程就是样式计算。
样式计算
样式计算的目的是为了计算出 DOM
节点中每个元素的具体样式,这个阶段大体可分为三步来完成。
把 CSS 转换为浏览器能够理解的结构
和 HTML
文件一样,浏览器也是无法直接理解这些纯文本的 CSS
样式,所以当渲染引擎接收到 CSS
文本时,会执行一个转换操作,将 CSS
文本转换为浏览器可以理解的结构——styleSheets
。
转换样式表中的属性值,使其标准化
现在我们已经把现有的 CSS 文本转化为浏览器可以理解的结构了,那么接下来就要对其进行属性值的标准化操作。
什么是属性值标准化?我们来看这样的一段CSS
:
body {
font-size: 2em;
}
div {
font-weight: bold;
}
div {
color: red;
}
可以看到上面的 CSS
文本中有很多属性值,如 2em、bold、red,这些类型数值不容易被渲染引擎理解,所以需要将所有值转换为渲染引擎容易理解的、标准化的计算值,这个过程就是属性值标准化。
那标准化后的属性值是什么样子的?
从图中可以看到,
2em
被解析成了 32px
,bold
被解析成了 700
,red
被解析成了 rgb(255,0,0)
……
计算出 DOM 树中每个节点的具体样式
现在样式的属性已被标准化了,接下来就需要计算 DOM
树中每个节点的样式属性了,如何计算呢?
这其中涉及到两点:CSS 的继承规则
和层叠规则
。
这里由于不是本文的重点,我简单做下说明:
-
CSS
继承就是每个DOM
节点都包含有父节点的样式 -
层叠是
CSS
的一个基本特征,它是一个定义了如何合并来自多个源的属性值的算法。它在CSS
处于核心地位,CSS
的全称“层叠样式表”正是强调了这一点。
样式计算完成之后,渲染引擎还需要计算布局树中每个元素对应的几何位置,这个过程就是计算布局。
计算布局
现在,我们有 DOM
树和 DOM
树中元素的样式,但这还不足以显示页面,因为我们还不知道 DOM
元素的几何位置信息。那么接下来就需要计算出 DOM
树中可见元素的几何位置,我们把这个计算过程叫做布局
。
绘制
通过样式计算和计算布局就完成了最终布局树的构建。再之后,就该进行后续的绘制操作了。
到这里,浏览器的渲染过程就基本结束了,通过下面的一张图来梳理下:
到这里我们已经把浏览器解析和渲染的完整流程梳理完成了,那么这其中有那些地方可以去做性能优化呢?
从浏览器的渲染过程中可以做的优化点
通常一个页面有三个阶段:加载阶段、交互阶段和关闭阶段。
-
加载阶段,是指从发出请求到渲染出完整页面的过程,影响到这个阶段的主要因素有网络和
JavaScript
脚本。 -
交互阶段,主要是从页面加载完成到用户交互的整合过程,影响到这个阶段的主要因素是
JavaScript
脚本。 -
关闭阶段,主要是用户发出关闭指令后页面所做的一些清理操作。
这里我们需要重点关注加载阶段
和交互阶段
,因为影响到我们体验的因素主要都在这两个阶段,下面我们就来逐个详细分析下。
加载阶段
我们先来分析如何系统优化加载阶段中的页面,来看一个典型的渲染流水线,如下图所示:
总结
=============================================================
从转行到现在,差不多两年的时间,虽不能和大佬相比,但也是学了很多东西。我个人在学习的过程中,习惯简单做做笔记,方便自己复习的时候能够快速理解,现在将自己的笔记分享出来,和大家共同学习。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
个人将这段时间所学的知识,分为三个阶段:
第一阶段:HTML&CSS&JavaScript基础
第二阶段:移动端开发技术
第三阶段:前端常用框架
-
推荐学习方式:针对某个知识点,可以先简单过一下我的笔记,如果理解,那是最好,可以帮助快速解决问题;如果因为我的笔记太过简陋不理解,可以关注我以后我还会继续分享。
-
大厂的面试难在,针对一个基础知识点,比如JS的事件循环机制,不会上来就问概念,而是换个角度,从题目入手,看你是否真正掌握。所以对于概念的理解真的很重要。