像绝地武士一样掌握 Web 性能

2025-06-10

像绝地武士一样掌握 Web 性能

为什么我们不断听到有关 Web 性能的消息？

WPO，即 Web 性能优化，用于分析网站或应用程序在“准备就绪”状态下的效率。
如果我们的代码中没有遵循良好的实践，极简设计的用户界面 (UI) 可能会性能不佳，因此 WPO 是一个值得我们学习使用的强大工具。

我们如何衡量 Web 性能？

让我们将这个概念分成几个部分：

  • FCP — 首次内容绘制：它测量从页面开始加载到其内容（例如图像、徽标、文本等）在屏幕上呈现的时间。来源FCP 图像：web.dev
  • LCP（最大内容绘制）：与上面提到的 FCP 非常相似，它测量的是最大图像或文本块（可见显示）渲染完成的时间。对于此测量，所考虑的图像尺寸将是原始尺寸或网站/应用程序上显示尺寸中较小的一个。
  • FID - 首次输入延迟：如果我们敲门，5分钟后才有人应门，我们可能会认为门铃没有响或没有正常工作。在我们的网站中，FID 测量的是用户交互（例如，点击按钮事件）到浏览器开始处理之间的时间。

用于测量 Web 性能的开源工具

  1. Lighthouse：您可以从 Chrome DevTools 中使用此工具，可以直接从命令行使用，也可以在本地安装。
  2. PageSpeed Insights
  3. 网页测试

编码时的良好做法：

通常，基础知识可以帮助我们避免性能方面出现大问题。

📦外部库：

如果我告诉你，你可能只用了 10% 的繁重软件包，却导致性能下降，你会怎么想？
库每天都在帮助我们，而且有一些很棒的技巧可以在不影响性能的情况下使用它们。

  1. Bundlephobia此工具帮助我们识别依赖性可能过强的软件包并将它们与其他选项进行比较。捆绑包1
  2. Chrome DevTools 覆盖率如果您不想安装本地工具来检查库中的内容，您可以使用 DevTools 检查网站库中未使用的组件。只需在 Chrome DevTools 中键入CTRL+SHIFT+P（Windows 系统）或CMD+SHIFT+P（Mac 系统），然后选择“显示覆盖率”抽屉即可。只需重新加载，我们就能看到所有 js 文件的覆盖率，并确定哪些库包含最多未使用的组件。
  3. 假设我们检查了我们的库并发现其中一个太大但我们需要将它用于我们的项目，这里有一些你可以使用的额外技巧：
    • 仅在需要用户交互时加载库：在此示例中，我们notify()在单击按钮时调用以查看通知。
const notify = () => {
  import("react-toastify").then(el => el.toast("Wow so easy!"))
}
Enter fullscreen mode Exit fullscreen mode

结果通知

  • 一些库允许您通过仅导入所需的函数而不是完整导入来减少包的大小，例如包文档中的这些示例date-fns：
// The main submodule:
import addDays from 'date-fns/addDays'

// FP variation:
import addDays from 'date-fns/fp/addDays'
Enter fullscreen mode Exit fullscreen mode
  • 使用 Next Application 时动态导入组件：
import dynamic from 'next/dynamic'

const DynamicComponent = dynamic(() => import('../components/hello'))

function Home() {
  return (
    <div>
      <Header />
      <DynamicComponent />
      <p>HOME PAGE is here!</p>
    </div>
  )
}

export default Home
Enter fullscreen mode Exit fullscreen mode

🖼 图片和视频优化：

为了优化媒体，我每天遵循以下步骤：

  1. 尺寸：回到基础，更轻的图像总是会改善应用程序的流程，有大量的工具可以帮助我们减小尺寸（从而减轻重量），例如：
    • Photopea：如果你习惯编辑图片，那么这款在线工具对你来说应该不陌生。最基本的操作就是调整图片大小并将其保存为更轻量级的格式。
    • 图像或视频在线压缩器
  2. 格式：并非所有格式都同样有效，JPEG 和 PNG 是基本格式，取决于我们图像中有多少颜色，但Webp绝对是网站图像的最佳格式，甚至谷歌也有自己的开放脚本供您在本地使用，这样您就可以在不损失质量的情况下更改格式并同时压缩图像。👁您需要记住，某些格式可能无法在某些浏览器上正常工作，例如 Safari 中的 Webp 格式
  3. 延迟加载：现在您已经有了优化过的图片，接下来我们来谈谈延迟加载。顾名思义，它只在需要时加载图片，这样您的网站在渲染时就无需一次性加载所有媒体。我们有不同的方法来实现它：
    • img标签的 HTML 属性：这是 HTML 的一个相当新的功能，包括loading=lazy作为属性，但它仅适用于某些浏览器。
    • 路口观察员
    • 类似 Yall.js 的外部惰性加载器：yall.js 是一个惰性加载器，适用于、 和img元素picture以及CSS 背景图片。它兼容所有现代浏览器，包括 IE 11（它会在 Intersection Observer 可用的情况下使用，但从版本 3 开始，此 API 必须针对旧版浏览器进行 polyfill）。videoiframe
    • 如果您使用 Next.js 开发项目，这将非常有用。<img/>我们将使用 Next 中的组件，而不是使用标签Image。首先，我们导入组件：import Image from 'next/image'。最后一步是在我们的代码中使用它及其相应的 props（点击此处查看其文档）：
function Home() {
  return (
    <>
      <h1>My Homepage</h1>
      <Image src={profilePic} alt="Picture of the author" />
      <p>Welcome to my homepage!</p>
    </>
  )
}
Enter fullscreen mode Exit fullscreen mode

✍🏽 字体

字体也是 Web 性能的重要组成部分，尽管我们可能从未将其视为负担过重的对象。
为了避免 FOUT（无样式文本闪烁），您可以预加载在首次渲染时立即需要的 Web 字体。为此，请在文档的<link>元素中添加 ，并包含以下属性：<head>rel="preload"

<head>
 <!-- ... -->
 <link rel="preload" href="/assets/Pacifico-Bold.woff2" as="font" type="font/woff2" crossorigin>
</head>
Enter fullscreen mode Exit fullscreen mode

其余属性是什么意思？

  • as="font" type="font/woff2"通知浏览器将此资源作为字体下载，因此作为资源列表的优先级。
  • crossorigin告知浏览器是否应使用 CORS 请求获取资源（字体可能来自其他域）。如果没有此属性，预加载的字体将被浏览器忽略。正如我们之前提到的，此操作只应针对必需的字体执行，否则，如果我们预加载最初不需要的元素，可能会对性能产生负面影响。

使用优化字体的另一种方法是确保文本在 webfont 加载期间保持可见，因为某些浏览器会隐藏文本直到字体加载完成，从而导致不可见文本闪烁（FOIT）。
以下是避免 FOIT 的两个技巧：

  • font-display: swap在您的定义中使用@font-face（这可能不适用于所有主流浏览器）
  • 对于 Google 字体，&display=swap在字体 URL 末尾添加参数<link>：<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet">

💾 Web 缓存

某些性能指标可能总是检查您的网站，就好像缓存是空的一样，但是优化的缓存总是会加快用户通过您的应用程序的速度。

好了，各位！我想听听你们对这个话题的看法。欢迎在下方留言👇。

鏂囩珷鏉ユ簮锛�https://dev.to/one-beyond/master-web-performance-like-a-jedi-4p0j
Devto 翻译
PREV
NestJS：从 Promises 到 Observables
NEXT
使用 TensorFlow.js (ReactJS) 在浏览器中运行机器学习模型