M

MLOG

中文

一份关于延迟加载图片和组件的综合指南，旨在为全球用户提升网站性能和用户体验。

延迟加载：通过图片与组件优化网络性能

在当今的数字时代，网站性能至关重要。用户期望快速、响应迅速的体验，搜索引擎也优先考虑那些能提供卓越性能的网站。一项提升性能的关键技术是延迟加载 (lazy loading)。本文将全面介绍如何延迟加载图片和组件，帮助您为全球用户优化您的网站。

什么是延迟加载？

延迟加载是一种推迟加载非关键资源（如图片、iframe、组件等）的技术，直到它们真正被需要时——通常是当它们即将进入视口（viewport）时。这意味着浏览器不会在页面加载之初就加载所有资源，而只加载用户初次访问时可见的资源。当用户向下滚动页面时，更多资源会随着它们进入可视区域而被加载。

您可以这样理解：想象一下为旅行打包。您不会从一开始就带上整个衣柜的衣服，而只会打包那些您知道马上会需要的衣物。随着旅程的推进，您再根据需要取出其他物品。这基本上就是延迟加载在网站上的工作原理。

为什么要使用延迟加载？

延迟加载有以下几个显著的好处：

延迟加载图片

图片通常是网站上最大的资源，这使它们成为延迟加载的首选对象。以下是如何为图片实现延迟加载的方法：

原生延迟加载

现代浏览器（Chrome、Firefox、Safari 和 Edge）现在都支持使用 loading 属性进行原生延迟加载。这是延迟加载图片最简单、最高效的方法。

要启用原生延迟加载，只需将 loading="lazy" 属性添加到您的 <img> 标签中：

<img src="image.jpg" alt="My Image" loading="lazy">

loading 属性可以有三个值：

示例：

<img src="london_bridge.jpg" alt="London Bridge" loading="lazy" width="600" height="400">
<img src="tokyo_skyline.jpg" alt="Tokyo Skyline" loading="lazy" width="600" height="400">
<img src="rio_de_janeiro.jpg" alt="Rio de Janeiro" loading="lazy" width="600" height="400">

在此示例中，伦敦桥、东京天际线和里约热内卢的图片只有在用户滚动到它们时才会被加载。这非常有用，特别是当用户没有滚动到页面最底部时。

使用 JavaScript 进行延迟加载

对于不支持原生延迟加载的旧版浏览器，您可以使用 JavaScript 库或编写自己的自定义脚本。以下是使用 Intersection Observer API 的一个基本示例：

const images = document.querySelectorAll('img[data-src]');

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.removeAttribute('data-src');
      observer.unobserve(img);
    }
  });
});

images.forEach(img => {
  observer.observe(img);
});

解释：

  1. 我们选择所有带有 data-src 属性的 <img> 元素。
  2. 我们创建一个新的 IntersectionObserver 实例。当被观察的元素进入或离开视口时，回调函数将被执行。
  3. 在回调函数内部，我们遍历 entries（与视口相交的元素）。
  4. 如果一个元素正在与视口相交（entry.isIntersecting 为 true），我们就将图片的 src 属性设置为 data-src 属性的值。
  5. 然后我们移除 data-src 属性，并停止观察该图片，因为它不再需要被观察了。
  6. 最后，我们使用 observer.observe(img) 来观察每个图片。

HTML 结构：

<img data-src="image.jpg" alt="My Image">

请注意，实际的图片 URL 放在 data-src 属性中，而不是 src 属性中。这可以防止浏览器立即加载图片。

使用延迟加载库

有几个 JavaScript 库可以简化延迟加载图片的过程。一些流行的选项包括：

这些库通常提供简单的 API 来初始化延迟加载，并提供诸如占位符图片和过渡效果等附加功能。

延迟加载组件

延迟加载不仅适用于图片，它也可以应用于组件，特别是在 React、Angular 和 Vue 等现代 JavaScript 框架中。这对于拥有许多组件的大型单页应用（SPA）尤其有用。

在 React 中延迟加载

React 提供了一个内置的 React.lazy() 函数用于延迟加载组件。该函数允许您动态导入组件，这些组件只在被渲染时才会被加载。

import React, { Suspense } from 'react';

const MyComponent = React.lazy(() => import('./MyComponent'));

function App() {
  return (
    <Suspense fallback={<div>加载中...</div>}>
      <MyComponent />
    </Suspense>
  );
}

export default App;

解释：

  1. 我们使用 React.lazy() 来动态导入 MyComponent。import() 函数返回一个 promise，该 promise 会解析为组件模块。
  2. 我们将 MyComponent 包裹在 <Suspense> 组件中。Suspense 组件允许您在组件加载期间显示一个后备 UI（在此例中为“加载中...”）。

在 Angular 中延迟加载

Angular 支持在路由配置中使用 loadChildren 属性来延迟加载模块。

const routes: Routes = [
  {
    path: 'my-module',
    loadChildren: () => import('./my-module/my-module.module').then(m => m.MyModuleModule)
  }
];

解释：

  1. 我们为 my-module 路径定义一个路由。
  2. 我们使用 loadChildren 属性来指定 MyModuleModule 应该被延迟加载。import() 函数会动态导入该模块。
  3. then() 方法用于访问模块并返回 MyModuleModule 类。

在 Vue.js 中延迟加载

Vue.js 支持使用动态导入和 component 标签来延迟加载组件。

<template>
  <component :is="dynamicComponent"></component>
</template>

<script>
export default {
  data() {
    return {
      dynamicComponent: null
    }
  },
  mounted() {
    import('./MyComponent.vue')
      .then(module => {
        this.dynamicComponent = module.default
      })
  }
}
</script>

解释：

  1. 我们使用带有 :is 属性的 <component> 标签来动态渲染一个组件。
  2. 在 mounted 生命周期钩子中，我们使用 import() 函数来动态导入 MyComponent.vue。
  3. 然后我们将 dynamicComponent 数据属性设置为模块的默认导出。

延迟加载的最佳实践

为确保延迟加载得到有效实施，请考虑以下最佳实践：

国际化考量

在为全球用户实施延迟加载时，请考虑以下国际化因素：

结论

延迟加载是优化网站性能和改善用户体验的强大技术。通过推迟加载屏幕外资源，您可以减少首次页面加载时间、降低带宽消耗并减轻服务器负载。无论您是构建一个小型个人网站还是一个大型企业应用，延迟加载都应成为您性能优化策略的关键部分。通过遵循本文中概述的最佳实践并考虑国际化因素，您可以确保您的延迟加载实现是有效的，并为全球用户提供积极的用户体验。

拥抱延迟加载，为每个人解锁一个更快、更高效、更友好的网络体验。