实践指南-前端性能提升 270% | 京东云技术团队

一、背景

当我们疲于开发一个接一个的需求时，很容易忘记去关注网站的性能，到了某一个节点，猛地发现，随着越来越多代码的堆积，网站变得越来越慢。

本文就是从这样的一个背景出发，着手优化网站的前端性能，并总结出一套开发习惯，让我们在日常开发时，也保持高性能，而不是又一次回过头来优化性能。

指标名称优化前优化后提升
Lighthouse Performance 评分2981279%
FCP（First Contentful Paint 首次内容绘制）0.7s0.7s
LCP（Largest Contentful Paint 最大内容绘制）6.2s2.5s248%
TTI（Time to Interactive 可交互时间）10.1s2.1s480%
Speed Index（速度指数）5.6s1.8311%
TBT（Total Blocking Time 总阻塞时间）820ms120ms683%

优化前后对比：

优化前后对比

二、优化前

接下来就是介绍下优化前我们要做哪些事件：

  1. 了解性能指标及测量工具

  2. 分析需要优化的地方

1. 了解测量工具及性能指标

一开始我们只是感受到网站的页面打开时白屏时间较长，感觉性能是比较差的，那么具体有哪些性能指标需要去关注呢？

这里我使用的是 Chrome devtools 内置的Lighthouse，Lighthouse 是一种开源的自动化工具，用于提高 Web 应用程序的质量。

Lighthouse 会在一系列的测试下运行网页，比如不同尺寸的设备和不同的网络速度。它还会检查页面对辅助功能指南的一致性，例如颜色对比度和 ARIA 最佳实践。

打开 Chrome devtools Lighthouse 即可使用。

在比较短的时间内，Lighthouse 可以给出这样一份报告。

这份报告从 5 个方面来分析页面： 性能、辅助功能、最佳实践、搜索引擎优化和 PWA。像性能方面，会给出一些常见的耗时统计。

优化前

1.1 Performance

Performance 评分统计，包括了以下指标：

1.1.1 FCP

FCP 测量在用户导航到页面后浏览器呈现第一段 DOM 内容所花费的时间。页面上的图像、非白色<canvas>元素和 SVG 被视为 DOM 内容；不包括 iframe 内的任何内容。

1.1.2 LCP

LCP 测量视口中最大的内容元素何时呈现到屏幕上。这近似于页面的主要内容对用户可见的时间。

需要注意的是 LCP 的计算是一个动态的过程，如下图最后的图片才是这个页面中的最大内容绘制的元素。

lcp

1.1.3 TTI

TTI 测量页面完全交互所需的时间。

TTI 是如何计算的呢，如下图首先延时间轴正向搜索时长至少为 5 秒的安静窗口（安静窗口是指没有长任务且不超过两个正在处理的网络 get 请求），然后沿时间轴反向搜索安静窗口之前的最后一个长任务，如果没有找到长任务，则在 FCP 步骤停止执行，TTI 就是安静窗口之前最后一个长任务的结束时间，如果没有找到长任务的话，则与 FCP 值相同。

TTI

1.1.4 Speed Index

Speed Index 衡量页面加载期间内容以视觉方式显示的速度。Lighthouse 首先捕获浏览器中页面加载的视频，并计算帧之间的视觉进度。

1.1.5 TBT

TBT 测量页面被阻止响应用户输入（例如鼠标点击、屏幕点击或键盘按下）的总时间。

通过添加 First Contentful Paint 和 Time to Interactive 之间所有长任务的阻塞部分来计算总和。任何执行时间超过 50 毫秒的任务都是长任务。

50 毫秒后的时间量是阻塞部分。例如，如果 Lighthouse 检测到一个 70 毫秒长的任务，则阻塞部分将为 20 毫秒。

如下图淡红色区域的时间总和就是这个页面的 TBT 分数。

TBT

1.2 最佳实践

用于检测 Web 应用程序整体代码健康状况，包括是否包含文档类型、图片宽高比是否正确等等。

1.3 SEO

用于检测搜索引擎对网页内容的理解程度。

2. 分析需要优化的地方

了解了关键的性能指标后，就可以测量看看当前网站的性能了，

上面看到综合评分是非常低的，Lighthouse 给出了应该从哪些地方开始优化的建议。

2.1 Performance

性能优化建议主要包括以下几点：

  • 减少未使用的 JS；

  • 合理使用图片的格式，webp 或者 avif 更快；

  • 延迟加载不在视图的图片；

  • JS 压缩；

  • 图片的尺寸大小应该适当；

  • 减少未使用的 CSS。

性能优化建议

Lighthouse 诊断出的网站存在的问题：

  • 需要加载的资源太多太大，有 147 个请求，合计 11mb；

  • 有 40 个静态资源的缓存只有 1 小时

  • 滚动事件没有添加标记{passive: true})，导致需要等待侦听器完成执行后再滚动页面；

  • 图像元素没有设置明确的宽度和高度；

  • JS 文件太多，主线程工作量太大、JS 执行时间太长；

存在的问题

2.2 最佳实践

最佳实践方面有以下问题：

  • 图片的分辨率太低，清晰度不够；

  • 没有设置 CSP 策略。

最佳实践的问题

2.3 SEO

SEO 有以下问题：

  • 没有 meta description；

  • 图片没有 alt 属性；

  • robots.txt 是无效的。

SEO的问题

三、优化 Performance

根据上面 Lighthouse 报告，捋一捋项目中影响性能最大的因素，包括以下几点：

  • 体积太大，达 11mb；

  • 图片太大，图片格式也有影响。

1. 体积优化

1.1 代码压缩

检查是否还有压缩空间，或者有无工具库未压缩的。

1.2 代码分包

通过 webpack-bundle-analyzer 插件分析包体积，将一些大的 npm 包和 runtimeChunk 独立分包，减小包体积。

1.3 组件按需加载

React.lazy + Suspense 封装懒加载组件，路由级组件引入懒加载组件。
同时使用骨架屏作为懒加载的兜底组件，可以让用户感知加载更快。
在鼠标移入导航栏时预加载路由组件，可以加快页面展示。

1.4 工具库按需加载

通过 import(‘xx’).then(xx) 按需加载工具库。

1.5 静态资源上传 CDN

项目内有一些 json 文件存储的静态数据，这部分文件上传至 CDN，改为 fetch 的方式按需引入。

1.6 删除不需要的资源

检查项目中引入的 mf、npm 资源，将没有使用到的删除。

1.7 避免重复的 npm 包引入

发现业务组件库通过 npm 引入的原子组件库，而项目本身又是通过 mf 引入的原子组件库，相对于引入了 2 遍原子组件库。

这时就需要改造业务组件库，也改成用 mf 的方法引入。

1.8 避免 esm 依赖嵌套

因为 webpack 的按需加载是通过 import、export 来标记的，因此想要一个好的按需加载的效果，就需要避免依赖嵌套的问题。

1.9 图标按需加载

原子组件库 mf 暴露的方式会导致只用了 1 个 icon，就会加载组件库下所有 icon 对应的 chunk，导致资源浪费。

新建一个 icon 的 npm 包用于 icon 的按需引入。

1.10 小结

通过以上优化手段，体积从 11.7mb 降低至 1.1mb，降低 10.6 倍。

优化前：

优化前

优化后：

优化后

2. 图片优化

1.1 图片懒加载

对非首屏的图片采用图片懒加载策略。

1.2 图片尺寸

使用图片时，设置图片的合理尺寸。

1.3 图片格式设置

优先使用 webp 格式图片。

四、优化最佳实践

1. 设置 CSP 策略

2. 设置合理的图片的分辨率

优化项目内的图片分辨率。

五、优化 SEO

1. meta description、keywords 优化

详细的 meta description、keywords 可以加快 SEO。

<meta name="keywords" content="xx" /> <meta name="description" content="xx" />

2. 图片加上 alt 属性

<img src="smiley.gif" alt="Smiley face" />

六、优化前后对比

再来回顾下前后对比：

优化前，明显的感知白屏时间长：

优化前

优化后，在清缓存的情况下也能实现秒开：

优化后

整体性能提升 270%：

优化前后对比

七、性能监控

为了在后续的迭代过程中，保持高性能，引入内部前端监控平台 -烛龙，可视化的监控前端性能。

第一步，加载 cdn 插件：

<scriptdefersrc="https://h5static.m.jd.com/act/jd-jssdk/latest/jd-jssdk.min.js"
></script>

第二步，在入口文件中，初始化 cdn 插件：

useEffect(() => {// 初始化测速组件,在这里可以打开一些控制的开关，如是否上报接口if (IS_PROD) {// @ts-ignorejmfe.profilerInit({flag: xxx, // 这是应用ID，需要先在烛龙申请应用autoReport: true,autoAddStaticReport: true,autoAddApiReport: true,autoAddImageReport: false, // 支持所有图片上报,如果图片多，切记关闭，否则存在性能问题performanceReportTime: 8000,profilingRate: 1,})}
}, [])

第三步，查看监控数据：

在烛龙平台，小工具性能评分达 96分：

查看监控数据

第四步，新增告警，实时监控

烛龙平台支持多维度的告警的服务，增加性能指标相关的告警，在性能异动时，及时发现问题，优化性能。

小结

本文详细介绍了一个前端项目优化的详细过程，从优化前的问题分析，到具体的优化措施，最终实现了前端性能提升了近 3 倍。同时也将性能指标落到监控平台，实现可视化的监控前端性能指标。

希望能对你有所帮助，感谢阅读～

参考资料

  • 被删的前端游乐场-前端性能优化-归纳篇
  • 前端缓存 API 请求数据的解决方案
  • 网易云课堂 Service Worker 运用与实践

作者：京东零售 唐姣

来源：京东云开发者社区

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/30067.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

JS逆向系列之猿人学爬虫第8题-验证码-图文点选

JS逆向系列之猿人学爬虫第8题-验证码-图文点选

题目地址 https://match.yuanrenxue.cn/match/8本题的难点就在于验证码的识别，没啥js加密，只要识别对了携带坐标就给返回数据 回过头来看验证码 这里复杂的字体比较多，人看起来都有点费劲（感觉可能对红绿色盲朋友不太又好）&#x
阅读更多...
PS 2023 安装选项页面显示不全

PS 2023 安装选项页面显示不全

文章目录 PS 2023 安装选项页面显示不全解决办法 PS 2023 安装选项页面显示不全 解决办法 按住Tab键&#xff0c;点击该安装选项页面即可&#xff0c;如下如所示&#xff1a;
阅读更多...
仓储10、20代电子标签接口文档

仓储10、20代电子标签接口文档

标签注册 仓储10代注册 右下角左下角组合按键触发注册 注册成功&#xff1a;右上角绿灯变红灯&#xff0c;并显示信号强度的数值 ​ 仓储20代注册 右下角左下角组合按键触发注册 注册成功&#xff1a;右上角绿灯变红灯&#xff0c;并显示信号强度的数值 ​ 查询电子标签信息…
阅读更多...
node笔记——调用免费qq的smtp发送html格式邮箱

node笔记——调用免费qq的smtp发送html格式邮箱

文章目录 ⭐前言⭐smtp授权码获取⭐nodemailer⭐postman验证接口⭐结束 ⭐前言 大家好&#xff0c;我是yma16&#xff0c;本文分享关于node调用免费qq的smtp发送邮箱。 node系列往期文章 node_windows环境变量配置 node_npm发布包 linux_配置node node_nvm安装配置 node笔记_h…
阅读更多...
小红书攻略：爆款引流，如何在激烈竞争中脱颖而出？

小红书攻略：爆款引流，如何在激烈竞争中脱颖而出？

小红书&#xff08;RED&#xff09;作为国内最具影响力的社交电商平台之一&#xff0c;是很多品牌运营者的首选之一。然而&#xff0c;在小红书的激烈竞争中&#xff0c;如何快速引流、吸引关注&#xff0c;成为了品牌运营者面临的挑战。本篇文章一秒推小编将为您介绍小红书运营…
阅读更多...
【SpringCloud】Gateway服务网关

【SpringCloud】Gateway服务网关

Spring Cloud Gateway 是 Spring Cloud 的一个全新项目&#xff0c;该项目是基于 Spring 5.0&#xff0c;Spring Boot 2.0 和 Project Reactor 等响应式编程和事件流技术开发的网关&#xff0c;它旨在为微服务架构提供一种简单有效的统一的 API 路由管理方式。 1.为什么需要网关…
阅读更多...
安全杂记 - 复现nodejs沙箱绕过

安全杂记 - 复现nodejs沙箱绕过

目录 一. 配置环境1.下载nodejs2.nodejs配置3.报错解决方法 二. nodej沙箱绕过1. vm模块2.使用this或引用类型来进行沙箱绕过 一. 配置环境 1.下载nodejs 官网&#xff1a;https://nodejs.org/en2.nodejs配置 安装nodejs的msi文件&#xff0c;默认配置一直下一步即可&#x…
阅读更多...
Spring 创建和使用

Spring 创建和使用

文章目录 创建 Spring 项目1. 创建一个Maven项目2. 添加 Spring 框架支持3. 添加启动类 存储 Bean 对象创建一个 Bean将 Bean 注册到容器 获取并使用 Bean 对象创建 Spring 上下文获取指定的 Bean 对象使用 Bean 对象 getBean() 的用法总结 创建 Spring 项目 1. 创建一个Maven…
阅读更多...
山东布谷科技直播软件源码探索高效、稳定直播传输的技术介绍：流媒体传输技术

山东布谷科技直播软件源码探索高效、稳定直播传输的技术介绍：流媒体传输技术

今天我们探索的是让直播软件源码平台在直播时能够高效、稳定的进行直播传输的技术&#xff0c;而这个技术就是直播软件源码平台的流媒体传输技术&#xff0c;在直播软件源码平台中&#xff0c;流媒体传输技术会将直播的图像、视频、音频等相关的流媒体信号通过网络传递到用户的…
阅读更多...
Is a directory: ‘outs//.ipynb_checkpoints‘

Is a directory: ‘outs//.ipynb_checkpoints‘

提示out/文件夹的.ipynp_chechpoints是一个文件夹&#xff0c;但是打开文件夹却没有看到&#xff0c;可以得知他是一个隐藏文件夹&#xff0c;进入outs/文件夹&#xff0c;使用 ls -a可以看到所有文件 果然出现这个文件夹&#xff0c;但是我们这个outs/文件夹存放的是图片&am…
阅读更多...
25分钟极速入门Java基础教程

25分钟极速入门Java基础教程

1. 前置准备及HelloWord案例 1.1. 创建Java项目(本教程采用Idea演示语法) 1.2. 点击上面的创建你会得到下面一些的项目目录 1.3. 编写第一个代码(在控制台输出HelloWord) 1.3.1. 新建一个包&#xff0c;方便我们管理我们的代码 1.3.2. 建立一个类文件,编写代码的地方(也就是我…
阅读更多...
TCP三次握手、四次握手过程，以及原因分析

TCP三次握手、四次握手过程，以及原因分析

TCP的三次握手和四次挥手实质就是TCP通信的连接和断开。 三次握手&#xff1a;为了对每次发送的数据量进行跟踪与协商&#xff0c;确保数据段的发送和接收同步&#xff0c;根据所接收到的数据量而确认数据发送、接收完毕后何时撤消联系&#xff0c;并建立虚连接。 四次挥手&…
阅读更多...
Mysql in 查询的奇怪方向

Mysql in 查询的奇怪方向

Mysql in 查询的奇怪方向 关于表字段存储的数据为 num1,num2,num3时, 还要通过多个num1,num2入参针对该字段进行查询 建表语句 CREATE TABLE test (test_ids varchar(100) DEFAULT NULL COMMENT 保存ids 以逗号分隔 ) ENGINEInnoDB;数据项 查询语句 SELECT test_ids FROM t…
阅读更多...
dotNet 之数据库sqlite

dotNet 之数据库sqlite

Sqlite3是个特别好的本地数据库&#xff0c;体积小&#xff0c;无需安装&#xff0c;是写小控制台程序最佳数据库。NET Core是同样也是.NET 未来的方向。 **硬件支持型号 点击 查看 硬件支持 详情** DTU701 产品详情 DTU702 产品详情 DTU801 产品详情 DTU802 产品详情 D…
阅读更多...
一文详解 DolphinDB SQL 标准化

一文详解 DolphinDB SQL 标准化

为了提升用户体验&#xff0c;降低用户学习成本和脚本迁移复杂度&#xff0c;自 1.30.17 / 2.00.5 版本开始&#xff0c;DolphinDB 逐步支持了标准化 SQL 的书写方法&#xff1b;并于 1.30.22 / 2.00.10 版本起&#xff0c;对标准 SQL 的常用语法和关键字实现了兼容。 1. 与标…
阅读更多...
HIVE语法优化之Join优化

HIVE语法优化之Join优化

桶用两表关联字段,MapJoin时需要将小表填入内存,这时候,分桶就起到了作用 一个stage阶段代表一个mr执行,好几个MR,会吧每一个MR的结果都压缩 Mysql 慢查询 如果sql语句执行超过指定时间,定义该sql为慢查询,存储日志, 查问题: SQL日志,模拟慢SQL 然后查询执行计划 分组聚合 就…
阅读更多...
2. 软件需求 面向对象分析

2. 软件需求 面向对象分析

目录 1. 软件需求 1.1 需求分类 1.2 需求获取 1.3 需求分析 2. 面向对象分析&#xff08;OOA&#xff09; 2.1 统一建模语言 UML 2.2 用例模型 2.2.1 用例图的元素 2.2.2 识别参与者 2.2.3 合并需求获得用例 2.2.4 细化用例描述 2.3 分析模型 2.3.1 定义概念类 …
阅读更多...
SpringBoot多环境切换及JSR303数据校验

SpringBoot多环境切换及JSR303数据校验

多环境切换 profile是Spring对不同环境提供不同配置功能的支持&#xff0c;可以通过激活不同的环境版本&#xff0c;实现快速切换环境&#xff1b; 多配置文件 我们在主配置文件编写的时候&#xff0c;文件名可以是 application-{profile}.properties/yml , 用来指定多个环境版…
阅读更多...
【历史上的今天】8 月 10 日：“龙芯”点亮操作系统；谷歌宣布拆分；计算机先驱诞生日

【历史上的今天】8 月 10 日：“龙芯”点亮操作系统；谷歌宣布拆分；计算机先驱诞生日

整理 | 王启隆 透过「历史上的今天」&#xff0c;从过去看未来&#xff0c;从现在亦可以改变未来。 今天是 2023 年 8 月 10 日&#xff0c;在 2010 年 5 月&#xff0c;苹果公司市值超过微软&#xff0c;成为全球市值最高的 IT 企业&#xff1b;在此过程中&#xff0c;苹果公…
阅读更多...
云安全攻防（八）之 Docker Remote API 未授权访问逃逸

云安全攻防（八）之 Docker Remote API 未授权访问逃逸

Docker Remote API 未授权访问逃逸 基础知识 Docker Remote API 是一个取代远程命令行界面&#xff08;rcli&#xff09;的REST API&#xff0c;其默认绑定2375端口&#xff0c;如管理员对其配置不当可导致未授权访问漏洞。攻击者利用 docker client 或者 http 直接请求就可以…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023