简要介绍

Lighthouse 是一个网站质量测评工具，它是由 Google 开源的一个自动化工具，内嵌在 Chrome 开发者工具里面。它能够对 PWA 或网页多维度的效果指标进行审计，并给出对应缺陷的修复意见和一些最佳实践的调整建议，以帮助开发者改进网站的整体质量，包括但不限于：^{[^1]}

• 性能：如内存占用，CPU/GPU 使用率，Worker 线程调度等
• 响应：加载速度，资源缓存等
• 安全性：CSP，SSL 等
• 易使用性：页面色彩对比度，图标大小，元素间隔，残障用户操作友好等
• SEO: 搜索引擎优化

测评完成后，它会生成一个有关页面性能的报告。通过该报告，我们就可以知道需要采取哪些措施来改进应用的性能和体验。就像 TDD 测试驱动开发一样，根据反馈，红黄或绿，调整策略，优胜劣汰，迭代优化，臻於至善。^{[^2]}

- More -

问题背景

昨天在写为什么这么设计系列文章时，心血来潮在 <h1>, <h2>, <h3> 等标题标签中加上了色彩鲜明的 Emoji，增强标题区的对比度。

写作时——开两个窗口，边撰写边实时预览——一切都正常显示，但是一经发布，在电脑端的 Chrome 浏览器中就发现了个诡异现象，正文和目录中的表情显示正常，但是在标题中渲染成了一副傻大黑粗的模样🌑，五颜六色，惨遭剥离，独留黑白，茕茕孑立，形影相吊，不忍直视。

- More -