作为前端开发，你在无论是在面试中还是在工作中一定都遇到过性能优化相关的问题。

我们经常会提到资源压缩合并、CDN缓存、使用HTTP2.0的多路复用等优化手段。

那我们优化的到底是什么呢？什么结果才是好的呢？

本文通过使用真实的页面，结合谷歌提倡的用户体验指标，通过lighthouse对页面的性能进行分析优化。

Performance（性能）

performance主要记录页面从加载资源解析资源以及渲染页面，执行脚本等一系列动作的综合表现。主要指标有如下几点：

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

LCP：最大面积渲染，这个指标比上一个指标更有代表性，因为上一个指标可以使用loading或一些动画来欺骗用户，所以会使用这个指标来作为重要的性能指标。原因：最大内容绘画（LCP）是衡量用户感知加载速度的重要，以用户为中心的度量标准，因为它标记了页面主要内容可能已加载时页面加载时间线中的时间点-快速的LCP有助于使用户确信页面有用

TTI：页面可以进行交互的时间。什么叫可交互：页面有可见内容渲染，可见渲染的内容已经注册事件，并且页面在50毫秒响应用户输入。（举个🌰，就像当我们和一个女生谈恋爱，你和她去约会，她约会迟到的时间）

FID：衡量的是从用户第一次与页面进行交互，到浏览器实际上能够开始处理事件处理程序的时间，响应这种互动。以用户为中心的度量负载响应能力的指标，因为它量化了用户在尝试与没有响应的页面交互时的体验。低的FID有助于确保页面可用。（再举个🌰，就像当我们刚加了一会妹子微信，你和她第一次聊天，她不回你你着不着急？然后一会她给你回了个我去洗澡了，FID就好像是这个妹子）

CLS：累积布局移位。页面内容的意外移动，通常是由于异步加载资源或将DOM元素动态添加到现有内容上方的页面而发生的。（再再举个🌰，就像当我们和一个女生进行的如火如荼，然后你第一次见到她卸妆时候的样子。CLS就好像这样，当异步的资源或者DOM操作改变了原内容，这就和你预期的结果不同了。）

Accessibility（无障碍功能）

此参数指标是为了提高web应用程序的可访问性。官方定义的可访问性为无障碍功能阅读。怎么去理解这个指标呢？我们看下面的例子：

如何让一个有眼部疾病（色弱，色盲）的人轻而易举的获取我们页面的内容？（背景色和前景色对比度不够鲜明，用一句东北话来说就是不能靠色）

如何让一个盲人可以获取页面信息（浏览器有相应的屏幕阅读器）（input没有label标签去解释，a标签没有alt，页面没有语言声明【浏览器不知道你的语言不知道如何正确去阅读】，没有title......等等）

Best Practices（最佳实践）

最佳实践包括：网络层，解析渲染层，安全层

网络层：使用http2.0代替http1.1、https，不使用AppCache等

安全层：https、a标签打开不同域名的安全处理、避免在页面加载时请求地理位置权限、三方类库是否有安全漏洞等。

解析渲染层：声明doctype防止浏览器切换到怪癖模式、console控制台是否有报错、避免长宽比不正确的图像等

SEO（搜索引擎优化）

该指标是确保您的页面优化了搜索引擎结果排名。主要有以下几点：

TDK：title 、description 、keywords

HTTP：HTTP状态码不成功的页面可能不能被正确索引

meta：添加 <meta name="viewport"> 来保证你面的适配

robots.txt对于网络爬虫是有用的

img标签必要的alt说明

文档使用清晰的字体大小等

PWA（渐进式web应用）

这个主要有以下几个衡量指标：

快速平滑打开页面，因为性能高的网站要比性能低的网站更好地吸引和留住用户。

在任何浏览器中均可使用，用户可以在安装Web应用程序之前使用他们选择的任何浏览器访问您的Web应用程序。

响应任何屏幕尺寸，用户可以在任何屏幕尺寸上使用PWA，并且所有内容都可以在任何视口尺寸上使用。

提供离线缓存等。

以上的性能指标我们通过lighthouse都可以分析得出。

比如这个就是我找的一个网站首页的性能分析。 是不是很差QAQ。

什么是lighthouse

它是一个开源的自动化工具，用于改进网络应用质量。您只需要提供网址，它就测试该页面，並生成页面性能报告。你看看可以采取哪些措施来改进您的应用。

lighthouse的使用方式

作为 Chrome 扩展程序运行

作为命令行工具运行

其实也不必要那么麻烦，你也可以使用已经提供了的分析 网站 。

首先我通过一个网站进行了测试，我们来看下事例结果：

根据对该网站的性能分析，结合官方文档，我总结出来了一些最佳实践。

在所有关键资源加载完成后，考虑延迟加载屏幕外和隐藏图像，以缩短交互时间

减少阻碍渲染的资源加载

图片资源大小压缩

CSS文件压缩

JS文件压缩

移除没有用到的CSS文件

避免多次重定向，重定向会降低您的页面加载速度

使用视频来代替gif图片的加载

避免引入第三方代码or文件

避免巨大的网络负载（官方说的很通俗，流量也是要钱的）

资源缓存，当浏览器请求资源时，提供资源的服务器可以告诉浏览器它应该暂时存储或缓存资源多长时间。对于对该资源的任何后续请求，浏览器将使用其本地副本，而不是从网络获取它。

避免大型的DOM结构（少于1500多个节点、深度不大于32个节点、父节点的子节点不超过60个）

减少请求数量和请求数据大小

无障碍功能提供方面

根据对该网站的无障碍功能（主要是针对色弱、色盲、盲人以及需要辅助阅读的人群），结合官方文档，我总结出来了一些最佳实践。

提供给用户快捷键来操作我们的网页

HTML文档中的每个ID必须唯一。在多个元素上使用相同的ID可能会导致屏幕阅读器和其他辅助技术仅使用共享ID声明第一个元素，从而阻止用户访问后面的元素

尽量使用内置HTML控件（如按钮和单选按钮组）

button必须有名称

每个页面都应该有title，为屏幕阅读器和其他辅助技术的用户提供了页面概述

图片需要使用alt（装饰性图片给空）

屏幕设置可以缩放的（主要是给视力不好的人使用）

audio和video提供字幕使音频元素可用于聋哑或听力障碍的用户，提供关键信息，例如谁在讲话，他们在说什么以及其他非语音信息

给网页指定语言

背景和前景应该有足够的对比度

最佳实践方面

根据对该网站的最佳实践分析，结合官方文档，我总结出来了一些针对本模块的优化方式。

指定DTD，避免触发浏览器的怪癖行为

页面中的错误记录到了控制台

避免长宽比不正确的图像

使用HTTP2.0保证页面的速度

不使用document.write()，会造成页面延时

尽量少的监听触摸和滚动事件

不引入已知有漏洞的JS库

不要在页面加载期间去自动请求地理位置信息和通知权限

不要使用已经废弃的API

SEO方面

可以看出我上面分析的那个网站的SEO做的还是比较好的，那么我们看下他是具体做了什么呢？

文档应该有title元素

文档应该有description描述

跳转链接应该有清楚的文字描述

文档中应该有合理有效的hreflang，来便于搜索引擎确定站点来源

配置有效的robots.txt

使用合理清楚的字体大小

lighthouse盲区

上面这些优化的内容在我们使用lighthouse进行分析时，分析结果会自动给出我们优化的方案。

但是lighthouse只是一个性能测试工具，并不能完全代表用户的真实体验，当我们使用Lighthouse的时候，基于都是本地机器的性能结果，我们可以限制网速和CPU等等，但是和现实中的用户体验还有有所差距。

虽然有上述问题，但这并不影响lighthouse成为一个主流的性能分析工具。