什么是 lazy loading？如何实现？

推荐答案

Lazy loading（懒加载）是一种优化网页性能的技术，它延迟加载页面中的非关键资源（如图片、视频、脚本等），直到用户需要访问这些资源时才进行加载。通过这种方式，可以减少页面初始加载时间，提升用户体验。

实现方式

1. 图片懒加载：

   • 使用 Intersection Observer API 监听图片是否进入视口，进入视口时再加载图片。
   • 使用 data-src 属性代替 src 属性，当图片进入视口时，将 data-src 的值赋给 src。

   -- -------------------- ---- -------
   ---- -------------------- --------- ------ ------ -----------------
   --------
     --------------------------------------------- ---------- -
       ----- ------ - ---------------------------------------
       ----- -------- - --- ------------------------------ --------- -- -
         --------------------- -- -
           -- ---------------------- -
             ----- --- - -------------
             ------- - ----------------
             ------------------------
           -
         ---
       ---
       ------------------ -- -----------------------
     ---
   ---------

2. 脚本懒加载：

   • 使用 async 或 defer 属性延迟加载脚本。
   • 使用 import() 动态加载模块。

   <script src="script.js" defer></script>
   <script>
     import('module.js').then(module => {
       module.init();
     });
   </script>

3. 视频懒加载：

   • 使用 poster 属性显示视频的缩略图，当用户点击播放时再加载视频。

   -- -------------------- ---- -------
   ------ -------- -----------------------
     ------- -------------------- -----------------
   --------
   --------
     --------------------------------------------------------- ---------- -
       -------------------------------- - -----------------------------------------
       ------------
     ---
   ---------

本题详细解读

什么是 Lazy Loading？

Lazy loading 是一种延迟加载技术，主要用于优化网页的初始加载速度。它通过延迟加载页面中的非关键资源（如图片、视频、脚本等），直到用户需要访问这些资源时才进行加载。这样可以减少页面初始加载时的资源请求量，从而加快页面加载速度，提升用户体验。

为什么需要 Lazy Loading？

• 减少初始加载时间：页面初始加载时只加载必要的资源，减少不必要的资源请求，从而加快页面加载速度。
• 节省带宽：对于用户可能不会访问的资源，延迟加载可以减少带宽消耗。
• 提升用户体验：通过减少页面加载时间，用户可以更快地与页面进行交互，提升用户体验。

如何实现 Lazy Loading？

1. 图片懒加载：

   • 使用 Intersection Observer API 监听图片是否进入视口，进入视口时再加载图片。
   • 使用 data-src 属性代替 src 属性，当图片进入视口时，将 data-src 的值赋给 src。

2. 脚本懒加载：

   • 使用 async 或 defer 属性延迟加载脚本。
   • 使用 import() 动态加载模块。

3. 视频懒加载：

   • 使用 poster 属性显示视频的缩略图，当用户点击播放时再加载视频。

注意事项

• 兼容性：Intersection Observer API 在现代浏览器中支持良好，但在旧版浏览器中可能需要使用 polyfill。
• SEO：懒加载的图片和视频可能会影响搜索引擎的抓取，因此需要确保这些资源在页面加载后能够被搜索引擎正确索引。
• 用户体验：在实现懒加载时，需要考虑用户的操作习惯，避免因延迟加载导致用户等待时间过长。