一、准备

https://developer.chrome.com/docs/devtools/speed/get-started/https://developer.chrome.com/docs/devtools/speed/get-started/

git clone https://github.com/crush12132/performance-optimization.git

先下载git clone项目，接着初始化安装依赖npm i,如果运行项目报错的话，请看这篇博客进行处理： Cannot find module ‘@babel/runtime/helpers/builtin/interopRequireDefault‘_豆浆油条_煎bingo子的博客-CSDN博客报错：可能报两个错误原因：一开始我以为babel转es6失败，重新安装@babel/runtime发现问题没能解决，当我去node_modules里面查找‘babel/runtime/helpers/builtin/interopRequireDefault'路径时发现没有builtin这个文件夹，尝试把helpers下的一堆js文件复制到新建builtin文件夹中，重新运行后成功！解决：2.在helpers文件夹下新建builtin文件夹，并把helpers下的js文件全都复制到builtinhttps://blog.csdn.net/qq_45679015/article/details/125234034?spm=1001.2014.3001.5501

成功运行后发现网站性能较差：

二、开始

接下来使用工具Lighthouse去算算这个网站的得分，对优化前后进行一个比较，查看性能效果

选性能和桌面端就ok

点击generate report，开始生成报告

或者使用命令行的方式生成报告


npm install -g lighthouselighthouse http://localhost:1234/

看看结果

如果各个指标忘了啥含义，来看这篇博客！2.前端性能优化-web性能指标_豆浆油条_煎bingo子的博客-CSDN博客

给出对应的优化建议

我们来看看在app.js里有一段代码执行方法获取最新时间，空循环了1500ms，在执行过程中造成渲染堵塞，我们阻塞后看看性能得多少分

可以发现，把空循环相关的代码注释掉，性能提高了些。

比如在model.js中，现在加载的图片都是大图片（网络地址），可以切换成小图片

总结一下：

性能指标

这6种不同的指标数据需要通过加权计算，才能得到关于性能的最终评分，所加的权值越大对应性能的影响就越大，如下图所示：lighthouse的权重情况

优化建议：

这些建议按照优化后预计能带来的提升效果从高到低进行排列，每一项展开又有更加详细的优化指导建议：

1.使用文本压缩

基于文本的资源应该使用压缩（gzip、deflate或brotli）来最小化网络总字节。

2.移除阻塞渲染的资源

部分 JavaScript 脚本⽂件和样式表⽂件可能会阻塞系统对⽹站⻚⾯的⾸次渲染，建议可将其以内嵌的⽅式进⾏引⽤，并考虑延迟加载。报告会将涉及需要优化的资源⽂件排列在下⾯，每个⽂件还包括尺⼨⼤⼩信息和优化后预计提升⾸屏渲染时间的效果，据此可安排资源⽂件优化的优先级。

3.缩小JavaScript

缩小JavaScript文件可以减少负载大小和脚本分析时间。

4.减少未使用的JavaScript

这部分列出了未使⽤但却被引⼊的JavaScript⽂件列表，可以将其删除来降低对⽹络带宽的消耗，若需要对资源⽂件的内部代码使⽤率进⾏进⼀步精简删除，则可以使⽤ Chrome 开发者⼯具的 Coverage ⾯板进⾏分析。

诊断结果：

这部分分别从影响网站页面性能的多个维度进行详细检测和分析得到的一些数据：

1.对静态资源文件使用高效的缓存策略

这⾥列出了所有静态资源的缓存过期时间以及⽂件⼤⼩，开发者可以根据具体情况进⾏缓存策略的调整，⽐如延迟⼀些静态资源的缓存期限来加快⼆次访问时的速度。

2.缩短请求深度

浏览器通常会对同⼀域名下的并发请求进⾏限制，超过限制的请求会被暂时挂起，如果请求链的深度过⻓，则需要加载资源的总尺⼨也会越⼤，这都会对⻚⾯渲染性能造成很⼤影响。因此建议在进⾏性能检测时，对该维度进⾏关注和及时优化。

3.利用User Timing API测量应用性能

考虑使用用户计时API检测应用程序，以衡量关键用户体验期间应用程序的真实性能。

参考：

时间都去哪儿了——利用User Timing API测量应用性能_hentailing的博客-CSDN博客

Navigation timing (Windows) | Microsoft Docs

4.保持低请求计数和小传输大小

请求计数越高，传输大小越大，页面加载所需的时间就越长。其中一些资源甚至可能会阻塞渲染，因此必须减少它们的数量以改善访问者的页面体验。

通过以下方式最大限度地减少页面发出的请求数量：

避免多个页面重定向
使用css精灵组合图像
删除不必要的第三方脚本

可以通过以下方式实现更小的传输大小：

压缩文本资源
缩小css和JavaScript
正确调整和压缩图像的大小

已通过的性能：

延迟加载首屏视窗外的图片，对首屏关键资源加载完毕后，延迟首屏外或处于隐藏状态的图片加载能够有效缩短用户可交互前的等待时间，提高用户访问体验。
压缩css文件，降低网络负载规模。
压缩js文件，降低网络负载规模。
对图片文件采用高效的编码方式。
采用新一代的图片文件格式，WebP、JPEG XR、JPEG 2000等对传统的PNG或JPEG有更好的压缩效果，获得更快的速度和更少的流量消耗，同时注意对新格式的兼容性进行处理。
使用文本压缩，先压缩再提供最大限度减少网络传输的总字节数，例如gzip、deflate、brotli。
避免多次页面重定向，否则会造成加载前延迟。
预加载关键请求，通过 <link rel="preload"> 来预先获取在网页加载后期需要请求的资源，这主要是为了充分利用网站运行的间歇期。
使用视频格式提供动画内容，建议通过 WebM 或 MPEG4 提供动画，来取代网站页面中大型GIF 的动画。
避免 DOM 的规模过⼤，如果 DOM 规模过大，则可能会导致消耗大量的内存空间、过长的样式计算耗时及较高的页面布局重排代价。Lighthouse 给出的参考建议是，页面包含的 DOM 元素最好少于 1500 个，树的深度尽量控制不要超过 32 层。
确保在网页字体加载期间⽂本内容可见，使用 CSS 的 font-display 功能，来让网站页面中的文本在字体加载期间始终可见。

3 .前端性能优化-使用Lighthouse测试性能相关推荐

前端性能优化（一）性能优化的指标和工具
前端性能优化(一)性能优化的指标和工具一.性能指标 1. F12 network进行调试,我们以淘宝为例 2. 此外还有一个瀑布流的概念 waterfall 3.蓝线和红线 4.保存当前网页指标,方 ...
【Linux 性能优化系列】Linux 性能优化 -- CPU 性能篇(三) Linux 软中断
[Linux 性能优化系列]Linux 性能优化 -- CPU 性能篇(三) Linux 软中断 [1]相关概念 [1.1]中断中断其实是一种异步的事件处理机制,可以提高系统的并发处理能力:为了减少 ...
【Linux 性能优化系列】Linux 性能优化 -- CPU 性能篇(一) 平均负载、上下文切换、CPU 使用率
[Linux 性能优化系列]Linux 性能优化 -- CPU 性能篇(一) 平均负载.上下文切换.CPU 使用率 [1]相关概念 [1.1]平均负载平均负载是指单位时间内,系统处于可运行状态和不可 ...
超实用web前端开发工具推荐（web开发+前端性能优化+浏览器兼容性测试+……）
要说有哪些好用的前端开发软件和工具,我可有发言权哈~因为在学习的过程中积累了不少实用型前端开发工具.今天我就从浏览器兼容性测试工具.web开发工具.前端性能优化工具.大数据可视化工具这四个方向来和大家 ...
Openfire性能优化与压力测试小结
Openfire配置: Ubuntu安装Openfire后性能极低,压力测试只能到4000在线用户数. 第一步修改Openfire运行环境通过ps -aux | grep openfire查看op ...
JavaScript性能优化【下】--性能优化的具体方式
前言下面出现的代码只做效率测试,若运行,请修改其中存在命名冲突,再进行代码的执行. 代码优化如何精准测试 JavaScript 性能本质上就是采集大量的执行样本进行数学统计和分析. 使用基于 B ...
JavaScript系列—性能优化之《网站性能优化实战——从12.67s到1.06s的故事》
本篇博文来源于网络 226 人赞同了该文章原文作者:IMWeb jerryOnlyZRJ 原文链接:网站性能优化实战--从12.67s到1.06s的故事 - 腾讯Web前端 IMWeb 团队社区 ...
抖音 Android 性能优化：新一代全能型性能分析工具 Rhea！
本文选自「抖音 Android 性能优化」系列文章. 「抖音 Android 性能优化」系列文章是由抖音 Android 基础技术部门技术专家倾力打造的技术干货内容,和大家分享基础技术团队在打造极致用 ...
java性能优化权威指南_Java性能优化权威指南 PDF扫描[132MB]
Java性能优化权威指南主要为Java SE 和Java EE 应用的性能调优提供建议.主要包括以下几方面:性能监控.性能分析.Java HotSpot VM 调优.高效的基准测试以及Java EE ...

3 .前端性能优化-使用Lighthouse测试性能