一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第5天，点击查看活动详情。
前言
之前学习过项目优化相关知识，但是一直没有尝试过。刚好最近做了一个项目，将学习过的性能优化使用到具体项目中，顺便学习
web性能检测工具。这里的性能检测工具我使用的是Chrome的Lighthouse。
了解
Lighthouse：它能针对性能、可访问性、渐进式Web应用等进行审核。当你提供url时，它会针对该页面运行一系列审核，然后进行跑分，最后生成一份报告（有点像电脑的鲁大师）。这份报告包含页面性能（performance）、Progressive（渐进式Web应用）、Accessibility（可访问性）、BestPractices（最佳实践）、SEO五项指标的跑分，然后针对我们的跑分结果提出优化建议。
使用
使用的方法有三种：
Chrome扩展程序、命令行工具、Chrome开发者工具，这里我使用的是Chrome扩展程序
-
安装
-
使用
项目运行后，在控制台中点击
Generate report，默认是英文的，为了方便，这里我将它设置为中文，在控制台右上角的齿轮中设置。
-
生成报告
做项目的时候没有注意那么多，没想到项目问题这么多，有很多问题我还没接触过，甚至没有听说过。接下来的任务是花时间把报告中的问题处理了，再理解一下报告中给的建议。
对于本项目生成的报告内容如下：
-
优化建议
启用文本压缩 对于文本资源，应先压缩（gzip、deflate 或 brotli），然后再提供，以最大限度地减少网络活动消耗的字节总数。 这一项能提高页面加载速度。 -
诊断结果
避免网络负载过大 网络负载过大不仅会让用户付出真金白银，还极有可能会延长加载用时。 采用高效的缓存策略提供静态资源 延长缓存期限可加快重访您网页的速度。 确保文本在网页字体加载期间保持可见状态 利用 font-display 这项 CSS 功能，确保文本在网页字体加载期间始终对用户可见。 注册“unload”事件监听器 “`unload`”事件不会可靠地触发，而且监听该事件可能会妨碍系统实施“往返缓存”之类的浏览器优化策略。请改用“`pagehide`”或“`visibilitychange`”事件。 -
无障碍
表单元素不具备关联的标签 标签可确保辅助技术（如屏幕阅读器）正确读出表单控件。 背景色和前景色没有足够高的对比度 对于许多用户而言，对比度低的文字都是难以阅读或无法阅读的。 <html> 元素缺少 [lang] 属性 这些提示旨在让不同语言区域中的用户能够更好地解读您的内容。 -
信任与安全
未使用 HTTPS 所有网站都应该通过 HTTPS 来保护，即使网站不处理敏感数据也应如此。 大型第一方 JavaScript 缺少源代码映射 源代码映射会将缩减了大小的代码转换成原始源代码。 -
内容最佳做法
文档缺少 meta 描述 元描述可能会被包含在搜索结果中，以简要概括网页内容。 -
PWAWeb 应用清单或 Service Worker 不符合可安装性要求 Service Worker 是一项技术，可让您的应用使用很多渐进式 Web 应用功能，例如离线、添加到主屏幕和推送通知。 优化 PWA 无法注册用于控制网页和 start_url 的 Service Worker 未针对自定义启动画面进行配置 没有为地址栏设置主题背景颜色。 未提供有效的 apple-touch-icon 清单不含可遮罩的图标No manifest was fetched
-
总结
这个项目开发之初由于没有注重性能优化，导致项目完成还要花大量时间来处理。当然不仅是性能，还有未使用HTTPS、缺少meta、无障碍等问题都得注意。
