说到性能优化，很多人是不是都会想起面试的经历呢？无论如何，在我看来，性能优化永远是前端领域最火热的话题。

我最近在维护的项目正好在这个方向下了不少功夫，所以想跟大家分享一些我的经验，希望对大家有些帮助！

性能优化标准

既然讲性能优化，那就必须有一个公认的标准，这也是我们多次听到的。

很多单位都有自己的性能监控平台，我们只需要引入相应的SDK，就可以在该平台上分析你的页面的性能问题了，学会这个是不是很神奇呢？

事实上，除了要求较高、需要特殊定制的业务外，大多数情况下我们单位的性能优化平台本质上都是使用无头浏览器（）运行的。

了解了我们单位性能监控平台的原理之后，就可以做针对性的性能优化，也就是面向编程

[1] 是一个开源的自动化工具，可以收集多项现代网页性能指标，分析Web应用程序的性能并生成报告，为开发人员优化性能提供参考方向。

说到这里，它已经集成到现代的谷歌浏览器中。

它可以通过几个指标来分析我们的页面性能

测量的性能指标如下：

总体来说下拉优化软件，根据我的经验，由于性能监控平台和本地平台的差异，本地平台可能需要达到 70 分，线上平台才可能达到及格状态，如果有性能优化的需求，可以酌情处理（不过我觉得及格就够了，毕竟大学考试有句话叫：60 分万岁，61 分白白浪费，传承不能丢，要把时间花在更重要的事情上！）

通用优化方法

它最酷的地方在于它可以识别页面中的一些常见性能瓶颈并提出优化建议，例如：

所以针对这些优化建议，我们需要做一些通用的优化：

减少未使用的

删除阻碍渲染的资源

图像质量压缩

限制使用的字体数量，并尽可能少使用变体

优化关键渲染路径：仅加载当前页面渲染所需的必要资源，页面渲染完成后再加载次要资源

通用性能优化分析

我们知道，绩效指标有六个，而在这六个指标当中，LCP，FCP，这三个指标是尤为重要的，因为一般来说，这三个指标会影响TTI，TBT，CLS的得分。

因此我们在优化的时候需要提升LCP、FCP的分数，经过测试，即使是一个空页面也会有时间损耗，初始分数基本都在0.8秒。

注：值得注意的是，我们目前所有的测试都是基于移动端（使用移动端的原因是PC计算能力强，很少出现性能瓶颈），且页面必须有以下内容才能获得分数。内容必须包含以下一项或多项

否则会出现以下错误

接下来我们先从LCP、FCP这三个指标说起

氟化碳（ ）

顾名思义就是首次内容绘制，也就是页面第一次绘制内容的时间。但是由于我们现在开发的页面都是spa应用，所以框架层面的初始化肯定会有一定的性能损耗。以vue-cli搭建的脚手架为例，当我初始化空的脚手架、打包上传到cdn部署时，FCP会从0.8s提升到1.5秒。可见vue的diff并不是免费的，也会有性能损耗。

在优化页面内容之前，我们声明三个先决条件

提高 FCP 时间实际上就是优化关键渲染路径[11]

如果是样式表（CSS 文件），浏览器必须在渲染页面之前完全解析它（这就是 CSS 阻止渲染的原因）

如果是脚本文件（文件），浏览器必须：停止解析，下载脚本，并运行。只有在这之后，它才能继续解析，因为脚本可以改变页面内容（尤其是 HTML）。（这就是为什么它被称为阻塞解析）

基于以上用例测试我们发现无论我们怎么优化都无法消除框架本身的性能损耗，我们唯一能做的就是让框架早点进行初始化，少初始化一些内容，可以做的优化方法如下：

所有初始化时没用到的js文件都是异步加载的，也就是添加or，以及一些需要经过CDN的第三方插件都需要放在页面最底部（因为如果放在最顶部的话它的解析会阻止HTML的解析，从而影响CSS等文件的下载，这也是雅虎军规）

js文件解包，以vue-cli为例，一般我们可以通过cli配置做代码拆分，将一些第三方的包发到cdn，或者解包，如果有路由，则对路由进行解包，保证每次路由只加载当前路由对应的js代码

优化文件大小，减少字体包、css文件、js文件的大小（当然这些脚手架已经默认做好了）

优化项目结构淘宝手机端下拉关键词★64xl.com下拉框软件可霸屏，如何关闭百度搜索框里推送消息，各个组件的初始化都有性能损耗，在保证可维护性的基础上，尽量减少加载的初始化组件数量。

网络协议层面的优化。这种优化方式需要服务器配合纯前端，无法实现。在现在的云服务器时代，公司一般都会在云服务器中默认开启这些优化方式，比如开启gzip、使用CDN等。

其实改进FCP的核心毕竟只有两个概念：减少初始观看内容、减少初始下载资源大小。

液晶聚合物( )

顾名思义就是最大内容绘制，什么时候上报LCP，官方说了

为了解决这一潜在变化，浏览器在绘制第一帧后立即分派 --type [12]，以识别最大的内容元素。但是，在渲染后续帧后，如果最大的内容元素发生变化，浏览器将分派另一个 --type [12]。

例如，在包含文本和标题图像的页面上，浏览器最初可能只呈现文本部分，在此期间，调度 -- 条目，其属性通常引用

或者。稍后，一旦第一个图像加载完毕，浏览器将发送第二个 -- 条目，其属性将引用

。

需要注意的是，元素只有在渲染完成并可供用户看到后才被视为最大内容元素。尚未加载的图像不被视为“已渲染”。在字体阻塞期间使用 Web 字体的文本节点也是如此[13]。在这种情况下，较小的元素可能会被报告为最大内容元素，但一旦较大的元素渲染完成，它将通过另一个对象报告。

其实用通俗的话说，就是画完图、视频、大量文字之后，通常就报道LCP完成了。

明白了这一点，优化方法就清晰了，就是尽量减小这些资源的大小。经过测试，减小首屏渲染的图片和视频内容的大小后，整体得分有明显提升。下面是一些优化方法：

本地图像可以使用在线压缩工具进行压缩。[14]

界面自带图片，一般单位都有相应的OSS或者CDN参数配置，通过地址栏参数传输的方式控制图片质量。

图像延迟加载

（速度指数）

使用可见页面加载的视觉进度，计算内容绘制速度的总体得分。为此，您首先需要能够计算出在页面加载过程中各个点“完成”了多少页面内容。

在 中，这是通过捕获浏览器中页面加载的视频并检查每个视频帧（在我的测试中，启用视频捕获后每秒 10 帧）来实现的。下面将介绍此算法，但现在我们假设我们可以为每个视频帧分配一个完整性百分比（每个帧下显示的数字）。

以上是官方对于计算方法的解释，其实通俗的说，所谓的速度指数，就是衡量页面内容填充速度的一个指标。

一张图片胜过千言万语

经过测试发现，和LCP一样，图片、视频内容对性能的影响也非常大，一切优化方向和前面一致，总体来说只要改善一下LCP、FCP时间，就会有明显的提升。

不过需要注意的是，接口的速度也会影响时间。在AJAX盛行的今天，我们的数据大部分都是通过接口拉取的。如果接口速度太慢，会影响你页面的初次渲染，造成性能问题。所以在优化性能的同时，寻求后端小伙伴的帮助也是性能优化的一种解决方案。

解决性能瓶颈问题

以上分析基于这三个指标给出了一些常见的优化方法，其中有些优化方法你可以立即检查并进行优化，例如：

优化图片，优化字体大小

配合服务器使用浏览器缓存机制。启用CDN、启用gzip等。

减少网络协议过程中的消耗，减少http请求，减少dns查询，避免重定向

优化关键渲染路径，异步加载js等。

但是有些优化方法因为被封装在包里了，不太容易找到。如果这个 js 文件包含了很多逻辑怎么办？下面介绍两种方法，或许可以帮助我们找到性能瓶颈出现的位置：

分析包内容

一般情况下，我们无法确定优化点，因为封装完之后就没法分析了。那些东西对于我们首屏来说不是必须的，所以没法做新的优化。为了解决现在的问题下拉优化软件，各大厂商也有自己的分析封装方案。

以vue-cli为例

    <div>
        {{ data1 }}
    div>
    <div v-if="data1">
        {{ data2 }}
    div>
</template>
/ 假设 这是从后端取到的数据
        const data = {
            data1: '这是渲染内容1',
            data2: '这是渲染内容2'
        }
        data1.value = data.data1
        //利用requestAnimationFrame 在空闲的时候当前渲染之后在渲染剩余内容
        requestIdleCallback(() => {
            data2.value = data.data2
        })
        return {
            data1,
            data2
        }
    },
}
script>

上面的例子比较简单，可能不太合适，这里我再解释一下，现在这种方式适合内容量大的组件，每次耗时太长，导致白屏时间过长。比如你一次拉取一个用户列表，那么批量渲染就很合适，先显示部分用户信息，最后再慢慢渲染全部内容。这样对浏览器也非常友好

终于

性能优化一直都是一个热门话题，无论是面试还是工作中都非常重要，掌握了这些优化点，在写代码或者优化旧项目时就可以安心了，可以提前考虑到一些坑，并尽量避免。

但大家需要明白的是，不要为了性能优化而去优化性能，要因地制宜，在不破坏项目可维护性的情况下进行优化。不要优化了一个项目的性能，结果没人看得懂，这是得不偿失的。我说了，60分是好的，61分是浪费的。够了，把经验留给更重要的事情吧！

向下滚动查看

参考

[1]

：:////

[2]