前端性能优化【进阶篇】

后端罐子君沟通交流”

重新加入他们一同自学，整天不断进步

译者：后端辅仁 高家岭 / 后端杰普森 （责任编辑源自译者征稿）

来衡量页面的操控性是两个较为零碎的事，即使没某两个分项或位数能间接说他们页面的操控性甚么样。强化的目地是让页面读取的更快，对使用者操作方式积极响应更及时处理，为使用者增添更快的使用者新体验，对开发人员而言强化能增加页面允诺数，能节约天然资源。

意味深长的归纳：

1､后端操控性强化

2､后端操控性监视

3､架构操控性强化

一、后端操控性强化

1、从输出url到页面展现出出现了甚么？（LX1丘托韦）

2、互联网强化

3、浏览器强化

详细如下：

从输出url到页面展现出出现了甚么？

（LX1丘托韦）

1）浏览器的地址栏输出URL并按下回车；

2）DNS 解析：将域名解析成 IP 地址；

3）TCP 连接：TCP 三次握手；

4）发送 HTTP 允诺；

5）服务器处理允诺并返回 HTTP 报文；

6）浏览器解析渲染页面；

7）断开连接：TCP 四次挥手

说完整个过程的几个关键点后他们再来展开的说一下。

1、URL

他们常见的URL是这样的:http://www.baidu.com,这个域名由三部分组成：协议名、域名、端口号，这儿端口是默认所以隐藏。最常见的的协议是HTTP协议，除此之外还有加密的HTTPS协议、FTP协议、FILe协议等等。如HTTP默认端口80，HTTPS默认端口443。说到这儿可能有的面试官会问你同源策略，以及更深层次的跨域的问题。

2、DNS 解析 （ * 互联网强化 ）

在浏览器输出网址后，首先要经过域名解析，即使浏览器并不能间接通过域名找到对应的服务器，而是要通过 IP 地址。

1) IP 地址

IP 地址是指互联网协议地址，是 IP Address 的缩写。IP 地址是 IP 协议提供的一种统一的地址格式。

2) 域名解析定义

DNS 协议提供通过域名查找 IP 地址，或逆向从 IP 地址反查域名的服务。DNS 是两个网络服务器，他们的域名解析简单而言就是在 DNS 上记录一条信息记录。

3) 浏览器如何通过域名去查询 URL 对应的 IP 呢？

DNS域名解析分为递归查询和迭代查询两种方式，现一般为迭代查询。

DNS 应用

1) CDN (Content Delivery Network) 就是利用DNS的重定向技术，DNS服务器会返回两个跟 使用者最接近的点的IP地址给使用者，CDN节点的服务器负责积极响应使用者的允诺，提供所需的内容。

2) dns-prefetch 是一种 DNS 预解析技术。当你浏览页面时，浏览器会在读取页面时对页面中的域名进行解析缓存，这样在你单击当前页面中的连接时就无需进行 DNS 的解析，增加使用者等待时间，提高使用者新体验。

OSI参考模型与TCP/IP四层模型

3、TCP 连接

客户端和服务端建立TCP连接需要三次握手。过程如下：

1) 客户端发送两个带 SYN=1，Seq=X 的数据包到服务器端口（第一次握手，由浏览器发起，说服务器我要发送允诺了）

2) 服务器发回两个带 SYN=1， ACK=X+1， Seq=Y 的积极响应包以示传达确认信息（第二次握手，由服务器发起，说浏览器我准备接受了，你赶紧发送吧）

3) 客户端再回传两个带 ACK=Y+1， Seq=Z 的数据包，代表“握手结束”（第三次握手，由浏览器发送，说服务器，我马上就发了，准备接受吧）

说明：

ACK：确认标识，用于表示对数据包的成功接收。

SYN：同步标识，表示TCP连接已初始化。

三次握手的目地：为了防止已经失效的连接允诺报文段突然又传送到了服务器端，从而产生错误。

4、发送HTTP允诺 （ * 互联网强化 ）

允诺报文由允诺行、允诺头和允诺体三部分组成。

1）允诺行包含允诺方法、url和协议版本。

2）允诺头包含允诺的附加信息，由键值对组成。如Host:github.com、User-Agent：””、Connection:keep-alive以及Cookie。

3）允诺体主要是允诺参数（Query String Parameters）。

注意：在发送HTTP允诺的过程中，要先考虑浏览器缓存情况。缓存又分为强制缓存和协商缓存。

详细资料：一文读懂，关于 “ HTTP ” 那些事

5、服务器处理允诺并返回 HTTP 报文

每台服务器上都会安装处理允诺的应用——Web server。常见的web server产品有apache、nginx、IIS、Lighttpd等。

6、浏览器解析渲染页面 （ * 浏览器强化 ）

浏览器渲染过程

1）HTML解析，处理HTML标记并构建DOM树。

2）CSS解析，处理CSS标记并构建CSSOM树。

3）将DOM树和CSSOM合并称render tree(渲染树)。将每条css规则按照【从右至左】的方式在dom树上进行逆向匹配，然后生成具有样式规则描述的渲染树。

4）渲染树布局，计算每个节点的集合信息。包括repaint和reflow。

5）渲染树绘制，将每个节点绘制到屏幕上。

重绘与重排（重排 又叫 回流）

1）重排 (html改变) 一般是位置，大小，节点变化引起文档空间变化时出现的。

引起重排：

添加或删除可见的DOM元素

元素的位置出现变化

元素的尺寸出现变化（包括外边距、内边框、边框大小、高度和宽度等）

内容出现变化，比如文本变化或图片被另两个不同尺寸的图片所替代。

页面一已经开始渲染的时候（这肯定避免不了）

浏览器的窗口尺寸变化（即使回流是根据视口的大小来计算元素的位置和大小的）

2）重绘（css改变）一般是颜色等不引起文档结构变化时出现的。

注：重绘不一定导致重排，但重排一定会导致重绘。

7、断开连接：TCP 四次挥手

当数据传送完毕，需要断开 tcp 连接，此时发起 tcp 四次挥手。

1) 发起方向被动方发送报文，Fin、Ack、Seq，表示已经没数据传输了。并进入 FIN_WAIT_1 状态。(第一次挥手：由浏览器发起的，发送给服务器，我允诺报文发送完了，你准备关闭吧)

2) 被动方发送报文，Ack、Seq，表示同意关闭允诺。此时主机发起方进入 FIN_WAIT_2 状态。(第二次挥手：由服务器发起的，告诉浏览器，我允诺报文接受完了，我准备关闭了，你也准备吧)

3) 被动方向发起方发送报文段，Fin、Ack、Seq，允诺关闭连接。并进入 LAST_ACK 状态。(第三次挥手：由服务器发起，说浏览器，我积极响应报文发送完了，你准备关闭吧)

(第四次挥手：由浏览器发起，说服务器，我积极响应报文接受完了，我准备关闭了，你也准备吧)

TCP与UDP区别总结：

相同点：TCP和UDP都是互联网层之上的，传输层协议，都能都能保护互联网层的传输，双方的通信都需要开放端口，TCP和UDP中都存在复用和分用技术。

不同点：TCP是可靠传输的，UDP是不可靠传输的。

TCP VS UDP 对比：

选项

TCP

UDP

可靠性

全双工可靠传输无差错，不丢失，不重复，且按序到达

尽最大努力交付

建立连接

需要建立连接

无需建立连接

数据发送模式

面向字节流

面向报文

传输方式

点对点（不支持广播和多播）

一对一，一对多，多对一，多对多

首部开销

20字节

8字节

拥塞机制

有

无

流量控制

有

无

系统天然资源占用

对系统天然资源要求较多

对系统天然资源要求较少

实时性

相对UDP较低

较高，适用于对高速传输和实时性要求较高的通信或广播通信

确认重传机制

TCP提供超时重发，丢弃重复数据，检验数据，

无重传，只是把应用程序传给IP层的数据报发送出去，但是并不能保证它们能到达目地地

简单粗暴的强化策略

1、⽂件读取的更少

1) 缓存，CDN   （详细资料：解析Web缓存及其最佳实践）

2) 图⽚强化

3) 静态⽂件强化

4) 浏览器强化

5) ⽂件合并压缩等雅⻁军规常规操作方式

2、代码执⾏的更少

1）节流防抖 （详细资料：彻底弄懂 “ 防抖 和 节流 ”）

2）按需执⾏

3）回流重绘

4）架构强化（⽐如vue3的静态标记）

5）html、css、javascript

二、后端操控性监视

1、后端操控性分项分析

2、关键操控性分项统计

3、操控性分析工具

详细如下：

后端操控性分项分析

以 https://www.google.com.hk 为例，下图是使用Lighthouse（两个操控性测评工具）捕获出的测评结果报告。

下图是使用Chrome浏览器的DevTools捕获出的读取操控性结果报告。

从上面这两张操控性测评报告中，他们会发现报告通常会给出很多个 “关键时间点” 来表示操控性数据，单独的某个“时间点”无法体现出页面的操控性，只有将它们与自身的产品类型相结合，综合评估，才能判断出页面的操控性到底甚么样。而他们要做的，就是读懂报告中的各种专业术语，并分辨出哪些因素影响了页面的读取操控性。

关键操控性分项统计

FP、FCP、FMP与TTI

从前面的评测报告中，他们会看到FP、FCP、FMP与TTI这几个字母很接近的术语，实际上他们的意思也非常接近，都表示浏览器在屏幕上渲染像素的时间点。

1）FP（全称“First Paint”，翻译为“首次绘制”） 是时间线上的第两个“时间点”，它代表浏览器第一次向屏幕传输像素的时间，也就是页面在屏幕上首次出现视觉变化的时间。

注意：FP不包含默认背景绘制，但包含非默认的背景绘制。

2）FCP（全称“First Contentful Paint”，翻译为“首次内容绘制”），顾名思义，它代表浏览器第一次向屏幕绘制 “内容”。

注意：只有首次绘制文本、图片（包含背景图）、非白色的canvas或SVG时才被算作FCP。

FP与FCP这两个分项之间的主要区别是：

FP是当浏览器已经开始绘制内容到屏幕上的时候，只要在视觉上已经开始出现变化，无论是甚么内容触发的视觉变化，在这一刻，这个时间点，叫做FP。

FCP指的是浏览器首次绘制源自DOM的内容。例如：文本，图片，SVG，canvas元素等，这个时间点叫FCP。

3）FMP（全称“First Meaningful Paint”，翻译为“首次有效绘制”） 表示页面的“主要内容”已经开始出现在屏幕上的时间点。它是他们测量使用者读取新体验的主要分项。

注意：FMP本质上是通过两个算法来猜测某个时间点可能是FMP，所以有时候不准。

说明：

FMP 实现的三种方式：（需要扩展）

1､固定好dom的id，统计高度变化时间。

2､统计首屏dom的面积，计算占比 总结FMP。

3､dom变化趋势，来统计FMP。

计算占比 的思路 （需要扩展）

元素权重：宽*⾼*权重(img,video要⽐普通dom⾼）；

进⼊⻚⾯已经开始记录，启⽤mutationobserver；

遍历domtree，根据可视区域⾯积，计算得分；

遍历⽗元素修正得分（⽗元素和⼦元素之和的最⼤值）；

平均值，过滤出⽬标元素；

是否img(video,canvas等；

合集求出FMP

4）TTI（全称“Time to Interactive”，翻译为“可交互时间”） 表示页面第一次 完全达到可交互状态 的时间点。可交互状态指的是页面上的UI组件是能交互的（能积极响应按钮的点击或在文本框输出文字等），不仅如此，此时主线程已经达到“流畅”的程度，主线程的任务均不超过50毫秒。TTI很重要，即使TTI能让他们了解他们的产品需要多久能真正达到“可用”的状态。

图3给出了FP、FCP、FMP、TTI之间的较为。

W3C发布导航计时（Navigation Timing 2）的标准工作草案，该规范定义了两个统一的接

地址：https://www.w3.org/TR/navigation-timing-2/  

如图：

操控性分析工具

1）谷歌开发人员工具的“操控性”选项进行分析：performance

详细资料：操控性强化篇 – Performance（工具 & api）

2）谷歌的Lighthouse工具（国内互联网环境）：基于 node（版本≥6）

安装：npm install -g lighthouse

运行使用：lighthouse <url> –view

例如：lighthouse https://www.baidu.com/ –view

3）如果能翻墙的话：能在 Chorome 网上应用商店中安装 – 页面操控性强化的扩展程序：Lighthouse、PageSpeed Insights ；

4）在线页面操控性分析工具（推荐）

https://tools.pingdom.com/

Pingdom是两个免费的网站速度测试工作，不仅是看起来非常棒，而且尽可能多的呈现出你的网站的各方面信息。

5）使用 Chrome 原生 lazyload 属性进行图片懒读取

chrome://flags/#enable-lazy-image-loading

复制它到 Chrome 浏览器的地址栏，然后找到如下选项，将其设置为「Enabled」。

例如：<img src=”具体图片” alt=”” lazyload=”on”>

说明：

auto 浏览器自行判断

on 开启懒读取

off 关闭懒读取

三、架构操控性强化

1、Vue操控性强化

2、长列表强化 

3、使用者新体验强化

详细如下：

Vue操控性强化

1、你都做过哪些Vue的操控性强化？（ 统计后的结果 ）

1）编码阶段

尽量增加data中的数据，data中的数据都会增加getter和setter，会收集对应的watcher；

如果需要使用v-for给每项元素绑定事件时使用事件代理；

SPA 页面采用keep-alive缓存组件；

在更多的情况下，使用v-if替代v-show；

key保证唯一；

使用路由懒读取、异步组件；

防抖、节流；

第三方模块按需导入；

长列表滚动到可视区域动态读取；

图片懒读取；

2）使用者新体验：

骨架屏；

PWA；

还能使用缓存(客户端缓存、服务端缓存)强化、服务端开启gzip压缩等。

3）SEO强化

预渲染；

服务端渲染SSR；

4）打包强化

压缩代码；

Tree Shaking/Scope Hoisting；

使用cdn读取第三方模块；

多线程打包happypack；

splitChunks抽离公共文件；

sourceMap强化；

说明：强化是个大工程，会涉及很多方面，这儿申请另开两个专栏

2、vue1.X，vue2.X，vue3 架构分析操控性 （ 还需要进一步自学 ）

Vue1.x （特点：积极响应式）

没vdom，完全的积极响应式，每个数据变化，都通过积极响应式通知机制来新建Watcher干活，项目规模变大后，过多的Watcher，会导致操控性的瓶颈。

Vue2.x （特点：组件级积极响应式，组件内部vdom diff） 

引入vdom，控制了颗粒度，组件层面走watcher通知， 组件内部走vdom做diff，既不会有太多watcher，也不会让vdom的规模过大，diff超过16ms，真是优秀。

Vue3 （特点：proxy做积极响应式：静态标记、按需更新） 

先说结论，静态标记，upadte操控性提升1.3~2倍，ssr提升2~3倍。

Vue3通过Proxy积极响应式+组件内部vdom+静态标记，把任务颗粒度控制的足够细致，所以也不太需要time-slice了。

长列表强化

1、vue-virtual-scroll-list强化长列表

虚拟列表的实现原理：只渲染可视区的 dom 节点，其余不可见的数据卷起来，只会渲染可视区域的 dom 节点，提高渲染操控性及流畅性，优点是支持海量数据的渲染；

github地址：https://github.com/tangbc/vue-virtual-scroll-list

2、Object.freeze强化长列表

Object.freeze()方法能冻结两个对象。两个被冻结的对象再也不能被修改；冻结了两个对象则不能向这个对象添加新的属性，不能删除已有属性，不能修改该对象已有属性的可枚举性、可配置性、可写性，以及不能修改已有属性的值。

对data()或vuex中冻结的对象，vue不会做getter和setter的转换。因此对两个不变的、大数据量的数组或Object数据而言，使用Object.freeze()能有效地提升操控性。

使用者新体验强化

使用骨架屏

骨架屏可以理解为是当数据还未读取进来前，页面的两个空白版本，两个简单的关键渲染路径。

屏先读取两个轮廓，而不是让使用者觉得这个页面挂了。

能看一下上面的示例图，第两个为骨架屏，第二个为菊花图，第三个为无强化，能看到相比于传统的菊花图会在感官上觉得内容出现的流畅而不突兀，新体验更加优良。

最后