前端最佳实践（三）—— Lighthouse 应用最佳实践

Question

1、避免使用应用缓存

AppCache 已被废弃，考虑使用 service worker 的 Cache API。

2、避免使用 console.time()

如果您使用 console.time() 测量页面的性能，请考虑改用 User Timing API。 其优势包括：

• 高分辨率时间戳。
• 可导出的计时数据。
• 与 Chrome DevTools Timeline 相集成。在 Timeline 录制期间调用 User Timing 函数 performance.measure() 时，DevTools 自动将此测量结果添加到 Timeline 的结果中，如以下屏幕截图中的 my custom measurement 标签中所示。

3、避免使用 Date.now()

如果使用 Date.now() 测量时间，请考虑改用 performance.now()。performance.now() 可提供较高的时间戳分辨率，并始终以恒定的速率增加，它不受系统时钟（可以调整或手动倾斜）的影响。

4、避免使用 document.write()

对于网速较慢（如 2G、3G 或较慢的 WLAN）的用户，外部脚本通过 document.write() 动态注入会使页面内容的显示延迟数十秒。

5、避免使用 mutation events

以下突变事件会损害性能，在 DOM 事件规范中已弃用。

• DOMAttrModified
• DOMAttributeNameChanged
• DOMCharacterDataModified
• DOMElementNameChanged
• DOMNodeInserted
• DOMNodeInsertedIntoDocument
• DOMNodeRemoved
• DOMNodeRemovedFromDocument
• DOMSubtreeModified

建议将每个 mutation events 替换成 MutationObserver

6、避免使用旧版 CSS Flexbox

2009 年的旧 Flexbox 规范已弃用，其速度比最新的规范慢 2.3 倍。 请参阅 Flexbox 布局并不慢了解更多信息。

7、避免在页面加载时自动请求地理位置

页面在加载时自动请求用户位置会使用户不信任页面或感到困惑。应将此请求与用户的手势（如点按一个“Find Stores Near Me”按钮）进行关联，而不是在页面加载时自动请求用户的位置。

8、避免在页面加载时自动请求通知权限

如怎样才算好的通知中所述，好的通知需要做到及时、相关且精确。 如果您的页面在加载时要求权限以发送通知，则这些通知可能与您的用户无关或者不是他们的精准需求。为提高用户体验，最好是向用户发送特定类型的通知，并在他们选择加入后显示权限请求。

9、避免显示宽高比不正确的图像

如果渲染的图像与其源文件中的宽高比不同，则呈现的图像可能看起来失真，产生不好的用户体验。建议：

• 避免将元素的宽度或高度设置为可变大小的容器的百分比。
• 避免设置不同于源图像尺寸的显式宽度或高度值。
• 考虑使用 css-aspect-ratio 或 Aspect Ratio Boxes 来帮助保留宽高比。
• 如果可能的话，在 HTML 中指定图片的宽度和高度是一个很好的做法，这样浏览器就可以为图片分配空间，这样可以防止页面在加载时跳过。在 HTML 中而不是 CSS 中指定宽度和高度是更好的做法，因为浏览器在解析 CSS 之前分配空间。实际上，如果您使用响应式图像，则此方法可能很困难，因为在知道视口尺寸之前无法指定宽度和高度。

10、避免使用具有已知安全漏洞的前端 JavaScript 库

入侵者具有自动的 Web 爬虫程序，可以对您的站点进行扫描以查找已知的安全漏洞。 Web 搜寻器检测到漏洞时，会向入侵者发出警报。从那里，入侵者只需要弄清楚如何利用站点上的漏洞。

建议：停止使用 Lighthouse 标志的每个库。如果该库发布了解决该漏洞的较新版本，请升级到该版本，或考虑使用其他库。请参阅 Snyk 的漏洞数据库，以了解有关每个库的漏洞的更多信息。

11、打开外部链接使用 rel="noopener"

当您的页面链接至使用 target="_blank" 的另一个页面时，新页面将与您的页面在同一个进程上运行。如果新页面正在执行开销极大的 JavaScript，您的页面性能可能会受影响。

此外，target="_blank" 也是一个安全漏洞。新的页面可以通过 window.opener 访问您的窗口对象，并且它可以使用 window.opener.location = newURL 将您的页面导航至不同的网址。

如需了解详细信息，请参阅 rel=noopener 的性能优势。

建议：将 rel="noopener" 添加至 Lighthouse 在您的报告中识别的每个链接。 一般情况下，当您在新窗口或标签中打开一个外部链接时，始终添加 rel="noopener"。

<a href="https://examplepetstore.com" target="_blank" rel="noopener">...</a>

12、允许用户粘贴密码到表单字段中

一些网站声称阻止用户粘贴密码会以某种方式提高安全性。国家网络安全中心在“让他们粘贴密码”中说，这一说法是没有根据的。

密码粘贴可提高安全性，因为它使用户能够使用密码管理器。密码管理器通常会为用户生成强密码，将其安全存储，然后在用户需要登录时自动将其粘贴到密码字段中。

建议：

删除阻止用户粘贴到密码字段中的代码。这可能是在与密码输入元素关联的粘贴事件侦听器中对 preventDefault（）的调用。

let input = document.querySelector('input');
input.addEventListener('paste', (e) => {
  e.preventDefault(); // This is what prevents pasting.
});

13、使用 HTTPS

所有网站均应使用 HTTPS 进行保护，即使是不处理敏感数据的网站也应如此。 HTTPS 可防止入侵者篡改或被动地侦听您的网站和您的用户之间的通信。HTTPS 也是许多强大的新网络平台功能（如拍照或录制音频）的前提条件。

根据定义，一个应用如果不在 HTTPS 上运行，那么它就不符合成为 Progressive Web App 的条件。 这是因为许多核心的 Progressive Web App 技术（如服务工作线程）都需要使用 HTTPS。

如果您运行自己的服务器并且需要一个成本低廉且简单的方式来生成证书，请访问 Let's Encrypt。 有关在您的服务器上启用 HTTPS 的更多帮助，请参阅以下文档集：对传输中的数据进行加密。

14、使用 HTTP/2

HTTP/2 可更快地提供页面的资源，并且可减少通过网络传输的数据。

有关 HTTP/2 通过 HTTP/1.1 提供的优势的列表，请参阅 HTTP/2 常见问题解答。

有关深入的技术概览，请参阅 HTTP/2 简介。

在 URLs 下，Lighthouse 列出不是通过 HTTP/2 提供的每个资源。要通过此审查，需要通过 HTTP/2 提供其中的每个资源。

要了解如何在您的服务器上启用 HTTP/2，请参阅设置 HTTP/2。

15、使用被动事件监听器以提升滚动性能

被动事件是新兴的 Web 标准，可以显著提高滚动性能，尤其在移动设备上。当使用 touch 事件监听器（scroll 事件不存在这个问题）进行滚动时，因为浏览器不知道你是否会取消滚动，它们总是等待监听器执行完毕后才开始滚动，这样就造成了明显的延迟。事件监听器 options 中使用 passive：true 表明监听器永远不会取消滚动，这样浏览器就可以立即滚动。
在支持被动事件侦听器的浏览器中，将侦听器标记为 passive 即可：

建议：将 passive 标志添加到 Lighthouse 已识别的所有事件侦听器。 一般情况下，将 passive 标志添加到每个没有调用 preventDefault() 的 wheel、mousewheel、touchstart 和 touchmove 事件侦听器。

在支持被动事件侦听器的浏览器中，将侦听器标记为 passive 与设置标志一样简单：

var supportsPassive = false;
try {
  var opts = Object.defineProperty({}, 'passive', {
    get: function() {
      supportsPassive = true;
    }
  });
  window.addEventListener("testPassive", null, opts);
  window.removeEventListener("testPassive", null, opts);
} catch (e) {}

document.addEventListener('touchstart', onTouchStart, {passive: true});