实践指南-前端性能提升 270%

阮方明

一、背景

当我们疲于开发一个接一个的需求时，很容易忘记去关注网站的性能，到了某一个节点，猛地发现，随着越来越多代码的堆积，网站变得越来越慢。
本文就是从这样的一个背景出发，着手优化网站的前端性能，并总结出一套开发习惯，让我们在日常开发时，也保持高性能，而不是又一次回过头来优化性能。
指标名称优化前优化后提升Lighthouse<meta name="keywords" content="xx" /> <meta name="description" content="xx" />Performance<meta name="keywords" content="xx" /> <meta name="description" content="xx" />评分2981279%FCP（First<meta name="keywords" content="xx" /> <meta name="description" content="xx" />Contentful<meta name="keywords" content="xx" /> <meta name="description" content="xx" />Paint<meta name="keywords" content="xx" /> <meta name="description" content="xx" />首次内容绘制）0.7s0.7sLCP（Largest<meta name="keywords" content="xx" /> <meta name="description" content="xx" />Contentful<meta name="keywords" content="xx" /> <meta name="description" content="xx" />Paint<meta name="keywords" content="xx" /> <meta name="description" content="xx" />最大内容绘制）6.2s2.5s248%TTI（Time<meta name="keywords" content="xx" /> <meta name="description" content="xx" />to<meta name="keywords" content="xx" /> <meta name="description" content="xx" />Interactive<meta name="keywords" content="xx" /> <meta name="description" content="xx" />可交互时间）10.1s2.1s480%Speed<meta name="keywords" content="xx" /> <meta name="description" content="xx" />Index（速度指数）5.6s1.8311%TBT（Total<meta name="keywords" content="xx" /> <meta name="description" content="xx" />Blocking<meta name="keywords" content="xx" /> <meta name="description" content="xx" />Time<meta name="keywords" content="xx" /> <meta name="description" content="xx" />总阻塞时间）820ms120ms683%优化前后对比：

二、优化前

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

• 了解性能指标及测量工具
  
• 分析需要优化的地方
  

1.<meta name="keywords" content="xx" /> <meta name="description" content="xx" />了解测量工具及性能指标

一开始我们只是感受到网站的页面打开时白屏时间较长，感觉性能是比较差的，那么具体有哪些性能指标需要去关注呢？
这里我使用的是<meta name="keywords" content="xx" /> <meta name="description" content="xx" />Chrome<meta name="keywords" content="xx" /> <meta name="description" content="xx" />devtools<meta name="keywords" content="xx" /> <meta name="description" content="xx" />内置的Lighthouse，Lighthouse<meta name="keywords" content="xx" /> <meta name="description" content="xx" />是一种开源的自动化工具，用于提高<meta name="keywords" content="xx" /> <meta name="description" content="xx" />Web<meta name="keywords" content="xx" /> <meta name="description" content="xx" />应用程序的质量。
Lighthouse<meta name="keywords" content="xx" /> <meta name="description" content="xx" />会在一系列的测试下运行网页，比如不同尺寸的设备和不同的网络速度。它还会检查页面对辅助功能指南的一致性，例如颜色对比度和<meta name="keywords" content="xx" /> <meta name="description" content="xx" />ARIA<meta name="keywords" content="xx" /> <meta name="description" content="xx" />最佳实践。
打开<meta name="keywords" content="xx" /> <meta name="description" content="xx" />Chrome<meta name="keywords" content="xx" /> <meta name="description" content="xx" />devtools<meta name="keywords" content="xx" /> <meta name="description" content="xx" />Lighthouse<meta name="keywords" content="xx" /> <meta name="description" content="xx" />即可使用。
在比较短的时间内，Lighthouse<meta name="keywords" content="xx" /> <meta name="description" content="xx" />可以给出这样一份报告。
这份报告从<meta name="keywords" content="xx" /> <meta name="description" content="xx" />5<meta name="keywords" content="xx" /> <meta name="description" content="xx" />个方面来分析页面：<meta name="keywords" content="xx" /> <meta name="description" content="xx" />性能、辅助功能、最佳实践、搜索引擎优化和<meta name="keywords" content="xx" /> <meta name="description" content="xx" />PWA。像性能方面，会给出一些常见的耗时统计。

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

Performance<meta name="keywords" content="xx" /> <meta name="description" content="xx" />评分统计，包括了以下指标：
1.1.1<meta name="keywords" content="xx" /> <meta name="description" content="xx" />FCP
FCP<meta name="keywords" content="xx" /> <meta name="description" content="xx" />测量在用户导航到页面后浏览器呈现第一段<meta name="keywords" content="xx" /> <meta name="description" content="xx" />DOM<meta name="keywords" content="xx" /> <meta name="description" content="xx" />内容所花费的时间。页面上的图像、非白色元素和<meta name="keywords" content="xx" /> <meta name="description" content="xx" />SVG<meta name="keywords" content="xx" /> <meta name="description" content="xx" />被视为<meta name="keywords" content="xx" /> <meta name="description" content="xx" />DOM<meta name="keywords" content="xx" /> <meta name="description" content="xx" />内容；不包括<meta name="keywords" content="xx" /> <meta name="description" content="xx" />iframe<meta name="keywords" content="xx" /> <meta name="description" content="xx" />内的任何内容。
1.1.2<meta name="keywords" content="xx" /> <meta name="description" content="xx" />LCP
LCP<meta name="keywords" content="xx" /> <meta name="description" content="xx" />测量视口中最大的内容元素何时呈现到屏幕上。这近似于页面的主要内容对用户可见的时间。
需要注意的是<meta name="keywords" content="xx" /> <meta name="description" content="xx" />LCP<meta name="keywords" content="xx" /> <meta name="description" content="xx" />的计算是一个动态的过程，如下图最后的图片才是这个页面中的最大内容绘制的元素。

1.1.3<meta name="keywords" content="xx" /> <meta name="description" content="xx" />TTI
TTI<meta name="keywords" content="xx" /> <meta name="description" content="xx" />测量页面完全交互所需的时间。
TTI<meta name="keywords" content="xx" /> <meta name="description" content="xx" />是如何计算的呢，如下图首先延时间轴正向搜索时长至少为<meta name="keywords" content="xx" /> <meta name="description" content="xx" />5<meta name="keywords" content="xx" /> <meta name="description" content="xx" />秒的安静窗口（安静窗口是指没有长任务且不超过两个正在处理的网络<meta name="keywords" content="xx" /> <meta name="description" content="xx" />get<meta name="keywords" content="xx" /> <meta name="description" content="xx" />请求），然后沿时间轴反向搜索安静窗口之前的最后一个长任务，如果没有找到长任务，则在<meta name="keywords" content="xx" /> <meta name="description" content="xx" />FCP<meta name="keywords" content="xx" /> <meta name="description" content="xx" />步骤停止执行，TTI<meta name="keywords" content="xx" /> <meta name="description" content="xx" />就是安静窗口之前最后一个长任务的结束时间，如果没有找到长任务的话，则与<meta name="keywords" content="xx" /> <meta name="description" content="xx" />FCP<meta name="keywords" content="xx" /> <meta name="description" content="xx" />值相同。

1.1.4<meta name="keywords" content="xx" /> <meta name="description" content="xx" />Speed<meta name="keywords" content="xx" /> <meta name="description" content="xx" />Index
Speed<meta name="keywords" content="xx" /> <meta name="description" content="xx" />Index<meta name="keywords" content="xx" /> <meta name="description" content="xx" />衡量页面加载期间内容以视觉方式显示的速度。Lighthouse<meta name="keywords" content="xx" /> <meta name="description" content="xx" />首先捕获浏览器中页面加载的视频，并计算帧之间的视觉进度。
1.1.5<meta name="keywords" content="xx" /> <meta name="description" content="xx" />TBT
TBT<meta name="keywords" content="xx" /> <meta name="description" content="xx" />测量页面被阻止响应用户输入（例如鼠标点击、屏幕点击或键盘按下）的总时间。
通过添加<meta name="keywords" content="xx" /> <meta name="description" content="xx" />First<meta name="keywords" content="xx" /> <meta name="description" content="xx" />Contentful<meta name="keywords" content="xx" /> <meta name="description" content="xx" />Paint<meta name="keywords" content="xx" /> <meta name="description" content="xx" />和<meta name="keywords" content="xx" /> <meta name="description" content="xx" />Time<meta name="keywords" content="xx" /> <meta name="description" content="xx" />to<meta name="keywords" content="xx" /> <meta name="description" content="xx" />Interactive<meta name="keywords" content="xx" /> <meta name="description" content="xx" />之间所有长任务的阻塞部分来计算总和。任何执行时间超过<meta name="keywords" content="xx" /> <meta name="description" content="xx" />50<meta name="keywords" content="xx" /> <meta name="description" content="xx" />毫秒的任务都是长任务。
50<meta name="keywords" content="xx" /> <meta name="description" content="xx" />毫秒后的时间量是阻塞部分。例如，如果<meta name="keywords" content="xx" /> <meta name="description" content="xx" />Lighthouse<meta name="keywords" content="xx" /> <meta name="description" content="xx" />检测到一个<meta name="keywords" content="xx" /> <meta name="description" content="xx" />70<meta name="keywords" content="xx" /> <meta name="description" content="xx" />毫秒长的任务，则阻塞部分将为<meta name="keywords" content="xx" /> <meta name="description" content="xx" />20<meta name="keywords" content="xx" /> <meta name="description" content="xx" />毫秒。
如下图淡红色区域的时间总和就是这个页面的<meta name="keywords" content="xx" /> <meta name="description" content="xx" />TBT<meta name="keywords" content="xx" /> <meta name="description" content="xx" />分数。

1.2<meta name="keywords" content="xx" /> <meta name="description" content="xx" />最佳实践

用于检测<meta name="keywords" content="xx" /> <meta name="description" content="xx" />Web<meta name="keywords" content="xx" /> <meta name="description" content="xx" />应用程序整体代码健康状况，包括是否包含文档类型、图片宽高比是否正确等等。
1.3<meta name="keywords" content="xx" /> <meta name="description" content="xx" />SEO

用于检测搜索引擎对网页内容的理解程度。
2.<meta name="keywords" content="xx" /> <meta name="description" content="xx" />分析需要优化的地方

了解了关键的性能指标后，就可以测量看看当前网站的性能了，
上面看到综合评分是非常低的，Lighthouse<meta name="keywords" content="xx" /> <meta name="description" content="xx" />给出了应该从哪些地方开始优化的建议。
2.1<meta name="keywords" content="xx" /> <meta name="description" content="xx" />Performance

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

• 减少未使用的<meta name="keywords" content="xx" /> <meta name="description" content="xx" />JS；
  
• 合理使用图片的格式，webp<meta name="keywords" content="xx" /> <meta name="description" content="xx" />或者<meta name="keywords" content="xx" /> <meta name="description" content="xx" />avif<meta name="keywords" content="xx" /> <meta name="description" content="xx" />更快；
  
• 延迟加载不在视图的图片；
  
• JS<meta name="keywords" content="xx" /> <meta name="description" content="xx" />压缩；
  
• 图片的尺寸大小应该适当；
  
• 减少未使用的<meta name="keywords" content="xx" /> <meta name="description" content="xx" />CSS。
  

Lighthouse<meta name="keywords" content="xx" /> <meta name="description" content="xx" />诊断出的网站存在的问题：

• 需要加载的资源太多太大，有<meta name="keywords" content="xx" /> <meta name="description" content="xx" />147<meta name="keywords" content="xx" /> <meta name="description" content="xx" />个请求，合计<meta name="keywords" content="xx" /> <meta name="description" content="xx" />11mb；
  
• 有<meta name="keywords" content="xx" /> <meta name="description" content="xx" />40<meta name="keywords" content="xx" /> <meta name="description" content="xx" />个静态资源的缓存只有<meta name="keywords" content="xx" /> <meta name="description" content="xx" />1<meta name="keywords" content="xx" /> <meta name="description" content="xx" />小时
  
• 滚动事件没有添加标记{passive:<meta name="keywords" content="xx" /> <meta name="description" content="xx" />true})，导致需要等待侦听器完成执行后再滚动页面；
  
• 图像元素没有设置明确的宽度和高度；
  
• JS<meta name="keywords" content="xx" /> <meta name="description" content="xx" />文件太多，主线程工作量太大、JS<meta name="keywords" content="xx" /> <meta name="description" content="xx" />执行时间太长；
  

2.2<meta name="keywords" content="xx" /> <meta name="description" content="xx" />最佳实践

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

• 图片的分辨率太低，清晰度不够；
  
• 没有设置<meta name="keywords" content="xx" /> <meta name="description" content="xx" />CSP<meta name="keywords" content="xx" /> <meta name="description" content="xx" />策略。
  

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

SEO<meta name="keywords" content="xx" /> <meta name="description" content="xx" />有以下问题：

• 没有<meta name="keywords" content="xx" /> <meta name="description" content="xx" />meta<meta name="keywords" content="xx" /> <meta name="description" content="xx" />description；
  
• 图片没有<meta name="keywords" content="xx" /> <meta name="description" content="xx" />alt<meta name="keywords" content="xx" /> <meta name="description" content="xx" />属性；
  
• robots.txt<meta name="keywords" content="xx" /> <meta name="description" content="xx" />是无效的。
  

三、优化<meta name="keywords" content="xx" /> <meta name="description" content="xx" />Performance

根据上面<meta name="keywords" content="xx" /> <meta name="description" content="xx" />Lighthouse<meta name="keywords" content="xx" /> <meta name="description" content="xx" />报告，捋一捋项目中影响性能最大的因素，包括以下几点：

• 体积太大，达<meta name="keywords" content="xx" /> <meta name="description" content="xx" />11mb；
  
• 图片太大，图片格式也有影响。
  

1.<meta name="keywords" content="xx" /> <meta name="description" content="xx" />体积优化

1.1<meta name="keywords" content="xx" /> <meta name="description" content="xx" />代码压缩

检查是否还有压缩空间，或者有无工具库未压缩的。
1.2<meta name="keywords" content="xx" /> <meta name="description" content="xx" />代码分包

通过<meta name="keywords" content="xx" /> <meta name="description" content="xx" />webpack-bundle-analyzer<meta name="keywords" content="xx" /> <meta name="description" content="xx" />插件分析包体积，将一些大的<meta name="keywords" content="xx" /> <meta name="description" content="xx" />npm<meta name="keywords" content="xx" /> <meta name="description" content="xx" />包和<meta name="keywords" content="xx" /> <meta name="description" content="xx" />runtimeChunk<meta name="keywords" content="xx" /> <meta name="description" content="xx" />独立分包，减小包体积。
1.3<meta name="keywords" content="xx" /> <meta name="description" content="xx" />组件按需加载

React.lazy<meta name="keywords" content="xx" /> <meta name="description" content="xx" />+<meta name="keywords" content="xx" /> <meta name="description" content="xx" />Suspense<meta name="keywords" content="xx" /> <meta name="description" content="xx" />封装懒加载组件，路由级组件引入懒加载组件。
同时使用骨架屏作为懒加载的兜底组件，可以让用户感知加载更快。
在鼠标移入导航栏时预加载路由组件，可以加快页面展示。
1.4<meta name="keywords" content="xx" /> <meta name="description" content="xx" />工具库按需加载

通过<meta name="keywords" content="xx" /> <meta name="description" content="xx" />import('xx').then(xx)<meta name="keywords" content="xx" /> <meta name="description" content="xx" />按需加载工具库。
1.5<meta name="keywords" content="xx" /> <meta name="description" content="xx" />静态资源上传<meta name="keywords" content="xx" /> <meta name="description" content="xx" />CDN

项目内有一些<meta name="keywords" content="xx" /> <meta name="description" content="xx" />json<meta name="keywords" content="xx" /> <meta name="description" content="xx" />文件存储的静态数据，这部分文件上传至<meta name="keywords" content="xx" /> <meta name="description" content="xx" />CDN，改为<meta name="keywords" content="xx" /> <meta name="description" content="xx" />fetch<meta name="keywords" content="xx" /> <meta name="description" content="xx" />的方式按需引入。
1.6<meta name="keywords" content="xx" /> <meta name="description" content="xx" />删除不需要的资源

检查项目中引入的<meta name="keywords" content="xx" /> <meta name="description" content="xx" />mf、npm<meta name="keywords" content="xx" /> <meta name="description" content="xx" />资源，将没有使用到的删除。
1.7<meta name="keywords" content="xx" /> <meta name="description" content="xx" />避免重复的<meta name="keywords" content="xx" /> <meta name="description" content="xx" />npm<meta name="keywords" content="xx" /> <meta name="description" content="xx" />包引入

发现业务组件库通过<meta name="keywords" content="xx" /> <meta name="description" content="xx" />npm<meta name="keywords" content="xx" /> <meta name="description" content="xx" />引入的原子组件库，而项目本身又是通过<meta name="keywords" content="xx" /> <meta name="description" content="xx" />mf<meta name="keywords" content="xx" /> <meta name="description" content="xx" />引入的原子组件库，相对于引入了<meta name="keywords" content="xx" /> <meta name="description" content="xx" />2<meta name="keywords" content="xx" /> <meta name="description" content="xx" />遍原子组件库。
这时就需要改造业务组件库，也改成用<meta name="keywords" content="xx" /> <meta name="description" content="xx" />mf<meta name="keywords" content="xx" /> <meta name="description" content="xx" />的方法引入。
1.8<meta name="keywords" content="xx" /> <meta name="description" content="xx" />避免<meta name="keywords" content="xx" /> <meta name="description" content="xx" />esm<meta name="keywords" content="xx" /> <meta name="description" content="xx" />依赖嵌套

因为<meta name="keywords" content="xx" /> <meta name="description" content="xx" />webpack<meta name="keywords" content="xx" /> <meta name="description" content="xx" />的按需加载是通过<meta name="keywords" content="xx" /> <meta name="description" content="xx" />import、export<meta name="keywords" content="xx" /> <meta name="description" content="xx" />来标记的，因此想要一个好的按需加载的效果，就需要避免依赖嵌套的问题。
1.9<meta name="keywords" content="xx" /> <meta name="description" content="xx" />图标按需加载

原子组件库<meta name="keywords" content="xx" /> <meta name="description" content="xx" />mf<meta name="keywords" content="xx" /> <meta name="description" content="xx" />暴露的方式会导致只用了<meta name="keywords" content="xx" /> <meta name="description" content="xx" />1<meta name="keywords" content="xx" /> <meta name="description" content="xx" />个<meta name="keywords" content="xx" /> <meta name="description" content="xx" />icon，就会加载组件库下所有<meta name="keywords" content="xx" /> <meta name="description" content="xx" />icon<meta name="keywords" content="xx" /> <meta name="description" content="xx" />对应的<meta name="keywords" content="xx" /> <meta name="description" content="xx" />chunk，导致资源浪费。
新建一个<meta name="keywords" content="xx" /> <meta name="description" content="xx" />icon<meta name="keywords" content="xx" /> <meta name="description" content="xx" />的<meta name="keywords" content="xx" /> <meta name="description" content="xx" />npm<meta name="keywords" content="xx" /> <meta name="description" content="xx" />包用于<meta name="keywords" content="xx" /> <meta name="description" content="xx" />icon<meta name="keywords" content="xx" /> <meta name="description" content="xx" />的按需引入。
1.10<meta name="keywords" content="xx" /> <meta name="description" content="xx" />小结

通过以上优化手段，体积从<meta name="keywords" content="xx" /> <meta name="description" content="xx" />11.7mb<meta name="keywords" content="xx" /> <meta name="description" content="xx" />降低至<meta name="keywords" content="xx" /> <meta name="description" content="xx" />1.1mb，降低<meta name="keywords" content="xx" /> <meta name="description" content="xx" />10.6<meta name="keywords" content="xx" /> <meta name="description" content="xx" />倍。
优化前：

优化后：

2.<meta name="keywords" content="xx" /> <meta name="description" content="xx" />图片优化

1.1<meta name="keywords" content="xx" /> <meta name="description" content="xx" />图片懒加载

对非首屏的图片采用图片懒加载策略。
1.2<meta name="keywords" content="xx" /> <meta name="description" content="xx" />图片尺寸

使用图片时，设置图片的合理尺寸。
1.3<meta name="keywords" content="xx" /> <meta name="description" content="xx" />图片格式设置

优先使用<meta name="keywords" content="xx" /> <meta name="description" content="xx" />webp<meta name="keywords" content="xx" /> <meta name="description" content="xx" />格式图片。
四、优化最佳实践

1.<meta name="keywords" content="xx" /> <meta name="description" content="xx" />设置<meta name="keywords" content="xx" /> <meta name="description" content="xx" />CSP<meta name="keywords" content="xx" /> <meta name="description" content="xx" />策略

2.<meta name="keywords" content="xx" /> <meta name="description" content="xx" />设置合理的图片的分辨率

优化项目内的图片分辨率。
五、优化<meta name="keywords" content="xx" /> <meta name="description" content="xx" />SEO

1.<meta name="keywords" content="xx" /> <meta name="description" content="xx" />meta<meta name="keywords" content="xx" /> <meta name="description" content="xx" />description、keywords<meta name="keywords" content="xx" /> <meta name="description" content="xx" />优化

详细的<meta name="keywords" content="xx" /> <meta name="description" content="xx" />meta<meta name="keywords" content="xx" /> <meta name="description" content="xx" />description、keywords<meta name="keywords" content="xx" /> <meta name="description" content="xx" />可以加快<meta name="keywords" content="xx" /> <meta name="description" content="xx" />SEO。

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

复制代码

2.<meta name="keywords" content="xx" /> <meta name="description" content="xx" />图片加上<meta name="keywords" content="xx" /> <meta name="description" content="xx" />alt<meta name="keywords" content="xx" /> <meta name="description" content="xx" />属性

1. <img src="https://www.cnblogs.com/smiley.gif" alt="Smiley face" />

复制代码

六、优化前后对比

再来回顾下前后对比：
优化前，明显的感知白屏时间长：

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

整体性能提升<meta name="keywords" content="xx" /> <meta name="description" content="xx" />270%：

七、性能监控

为了在后续的迭代过程中，保持高性能，引入内部前端监控平台<meta name="keywords" content="xx" /> <meta name="description" content="xx" />-烛龙，可视化的监控前端性能。
第一步，加载<meta name="keywords" content="xx" /> <meta name="description" content="xx" />cdn<meta name="keywords" content="xx" /> <meta name="description" content="xx" />插件：

1. [/code]第二步，在入口文件中，初始化<meta name="keywords" content="xx" /> <meta name="description" content="xx" />cdn<meta name="keywords" content="xx" /> <meta name="description" content="xx" />插件：
2. [code]useEffect(()<meta name="keywords" content="xx" /> <meta name="description" content="xx" />=><meta name="keywords" content="xx" /> <meta name="description" content="xx" />{<meta name="keywords" content="xx" /> <meta name="description" content="xx" /><meta name="keywords" content="xx" /> <meta name="description" content="xx" />//<meta name="keywords" content="xx" /> <meta name="description" content="xx" />初始化测速组件,在这里可以打开一些控制的开关，如是否上报接口<meta name="keywords" content="xx" /> <meta name="description" content="xx" /><meta name="keywords" content="xx" /> <meta name="description" content="xx" />if<meta name="keywords" content="xx" /> <meta name="description" content="xx" />(IS_PROD)<meta name="keywords" content="xx" /> <meta name="description" content="xx" />{<meta name="keywords" content="xx" /> <meta name="description" content="xx" /><meta name="keywords" content="xx" /> <meta name="description" content="xx" /><meta name="keywords" content="xx" /> <meta name="description" content="xx" /><meta name="keywords" content="xx" /> <meta name="description" content="xx" />//<meta name="keywords" content="xx" /> <meta name="description" content="xx" />@ts-ignore<meta name="keywords" content="xx" /> <meta name="description" content="xx" /><meta name="keywords" content="xx" /> <meta name="description" content="xx" /><meta name="keywords" content="xx" /> <meta name="description" content="xx" /><meta name="keywords" content="xx" /> <meta name="description" content="xx" />jmfe.profilerInit({<meta name="keywords" content="xx" /> <meta name="description" content="xx" /><meta name="keywords" content="xx" /> <meta name="description" content="xx" /><meta name="keywords" content="xx" /> <meta name="description" content="xx" /><meta name="keywords" content="xx" /> <meta name="description" content="xx" /><meta name="keywords" content="xx" /> <meta name="description" content="xx" /><meta name="keywords" content="xx" /> <meta name="description" content="xx" />flag:<meta name="keywords" content="xx" /> <meta name="description" content="xx" />xxx,<meta name="keywords" content="xx" /> <meta name="description" content="xx" />//<meta name="keywords" content="xx" /> <meta name="description" content="xx" />这是应用ID，需要先在烛龙申请应用<meta name="keywords" content="xx" /> <meta name="description" content="xx" /><meta name="keywords" content="xx" /> <meta name="description" content="xx" /><meta name="keywords" content="xx" /> <meta name="description" content="xx" /><meta name="keywords" content="xx" /> <meta name="description" content="xx" /><meta name="keywords" content="xx" /> <meta name="description" content="xx" /><meta name="keywords" content="xx" /> <meta name="description" content="xx" />autoReport:<meta name="keywords" content="xx" /> <meta name="description" content="xx" />true,<meta name="keywords" content="xx" /> <meta name="description" content="xx" /><meta name="keywords" content="xx" /> <meta name="description" content="xx" /><meta name="keywords" content="xx" /> <meta name="description" content="xx" /><meta name="keywords" content="xx" /> <meta name="description" content="xx" /><meta name="keywords" content="xx" /> <meta name="description" content="xx" /><meta name="keywords" content="xx" /> <meta name="description" content="xx" />autoAddStaticReport:<meta name="keywords" content="xx" /> <meta name="description" content="xx" />true,<meta name="keywords" content="xx" /> <meta name="description" content="xx" /><meta name="keywords" content="xx" /> <meta name="description" content="xx" /><meta name="keywords" content="xx" /> <meta name="description" content="xx" /><meta name="keywords" content="xx" /> <meta name="description" content="xx" /><meta name="keywords" content="xx" /> <meta name="description" content="xx" /><meta name="keywords" content="xx" /> <meta name="description" content="xx" />autoAddApiReport:<meta name="keywords" content="xx" /> <meta name="description" content="xx" />true,<meta name="keywords" content="xx" /> <meta name="description" content="xx" /><meta name="keywords" content="xx" /> <meta name="description" content="xx" /><meta name="keywords" content="xx" /> <meta name="description" content="xx" /><meta name="keywords" content="xx" /> <meta name="description" content="xx" /><meta name="keywords" content="xx" /> <meta name="description" content="xx" /><meta name="keywords" content="xx" /> <meta name="description" content="xx" />autoAddImageReport:<meta name="keywords" content="xx" /> <meta name="description" content="xx" />false,<meta name="keywords" content="xx" /> <meta name="description" content="xx" />//<meta name="keywords" content="xx" /> <meta name="description" content="xx" />支持所有图片上报,如果图片多，切记关闭，否则存在性能问题<meta name="keywords" content="xx" /> <meta name="description" content="xx" /><meta name="keywords" content="xx" /> <meta name="description" content="xx" /><meta name="keywords" content="xx" /> <meta name="description" content="xx" /><meta name="keywords" content="xx" /> <meta name="description" content="xx" /><meta name="keywords" content="xx" /> <meta name="description" content="xx" /><meta name="keywords" content="xx" /> <meta name="description" content="xx" />performanceReportTime:<meta name="keywords" content="xx" /> <meta name="description" content="xx" />8000,<meta name="keywords" content="xx" /> <meta name="description" content="xx" /><meta name="keywords" content="xx" /> <meta name="description" content="xx" /><meta name="keywords" content="xx" /> <meta name="description" content="xx" /><meta name="keywords" content="xx" /> <meta name="description" content="xx" /><meta name="keywords" content="xx" /> <meta name="description" content="xx" /><meta name="keywords" content="xx" /> <meta name="description" content="xx" />profilingRate:<meta name="keywords" content="xx" /> <meta name="description" content="xx" />1,<meta name="keywords" content="xx" /> <meta name="description" content="xx" /><meta name="keywords" content="xx" /> <meta name="description" content="xx" /><meta name="keywords" content="xx" /> <meta name="description" content="xx" /><meta name="keywords" content="xx" /> <meta name="description" content="xx" />})<meta name="keywords" content="xx" /> <meta name="description" content="xx" /><meta name="keywords" content="xx" /> <meta name="description" content="xx" />}},<meta name="keywords" content="xx" /> <meta name="description" content="xx" />[])

复制代码

第三步，查看监控数据：
在烛龙平台，小工具性能评分达<meta name="keywords" content="xx" /> <meta name="description" content="xx" />96分：

第四步，新增告警，实时监控
烛龙平台支持多维度的告警的服务，增加性能指标相关的告警，在性能异动时，及时发现问题，优化性能。
小结

本文详细介绍了一个前端项目优化的详细过程，从优化前的问题分析，到具体的优化措施，最终实现了前端性能提升了近<meta name="keywords" content="xx" /> <meta name="description" content="xx" />3<meta name="keywords" content="xx" /> <meta name="description" content="xx" />倍。同时也将性能指标落到监控平台，实现可视化的监控前端性能指标。
希望能对你有所帮助，感谢阅读～
参考资料

• 被删的前端游乐场-前端性能优化-归纳篇
  
• 前端缓存<meta name="keywords" content="xx" /> <meta name="description" content="xx" />API<meta name="keywords" content="xx" /> <meta name="description" content="xx" />请求数据的解决方案
  
• 网易云课堂<meta name="keywords" content="xx" /> <meta name="description" content="xx" />Service<meta name="keywords" content="xx" /> <meta name="description" content="xx" />Worker<meta name="keywords" content="xx" /> <meta name="description" content="xx" />运用与实践
  

作者：京东零售 唐姣
来源：京东云开发者社区

来源:https://www.cnblogs.com/jingdongkeji/p/17619666.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】<meta name="keywords" content="xx" /> <meta name="description" content="xx" />我们会及时删除侵权内容，谢谢合作！