Web性能优化中的预渲染与延迟加载技术及其最佳实践

创作时间:

作者:

@小白创作中心

Web性能优化中的预渲染与延迟加载技术及其最佳实践

引用

CSDN

https://m.blog.csdn.net/qq_36287830/article/details/144479879

随着互联网的发展，用户对于网站加载速度的要求越来越高。一个快速响应的网站不仅能提升用户体验，还能提高SEO排名和转化率。为了满足这一需求，开发者们不断探索各种技术手段来加速网页内容的呈现。其中，预渲染（Prerendering）和延迟加载（Lazy Loading）作为两种重要的资源管理策略，在优化页面性能方面扮演着不可或缺的角色。本文将详细介绍这两种技术的工作原理、应用场景及最佳实践。

预渲染与延迟加载的基本概念

定义与区别

预渲染：是指在服务器端提前生成静态HTML页面，并将其发送给客户端。这样可以确保浏览器接收到的是完整的文档结构，从而减少首次渲染时间。
延迟加载：则是指推迟某些非关键资源（如图片、视频等）的加载，直到它们真正出现在视口内或即将进入视口时才开始下载。这有助于减轻初始加载的压力，让主要内容更快地展示出来。

示例代码 - 使用 `rel="prerender">`进行预渲染

<link rel="prerender" href="/next-page.html">

这段HTML代码展示了如何通过<link>标签定义预渲染页面，帮助浏览器提前准备可能需要访问的内容。

预渲染的应用场景

提升首屏渲染速度

对于那些依赖于大量动态数据生成的页面来说，采用预渲染技术可以有效缩短“白屏”时间，让用户更快地看到实际内容。

改善SEO效果

搜索引擎更倾向于收录那些加载速度快、内容丰富的站点。因此，利用预渲染生成静态版本可以帮助提高搜索排名。

增强移动端体验

移动网络环境往往不如桌面端稳定，而预渲染能够提供更好的离线支持，即使在网络较差的情况下也能保证基本功能可用。

延迟加载的应用场景

图片库展示

相册、图集等包含众多图片的页面非常适合使用延迟加载。这样不仅可以节省带宽，还可以避免一次性加载过多资源导致页面卡顿。

视频播放

当页面中存在多个嵌入式视频时，可以通过延迟加载技术只在用户点击播放按钮后才开始下载媒体文件。

广告位处理

广告位上的内容通常是由第三方提供的。为了避免突然出现空白区域影响视觉效果，可以提前加载好备用的广告图。

示例代码 - 使用Intersection Observer API实现图片延迟加载

const lazyImages = document.querySelectorAll('img[data-src]');
function loadImages(img) {
  const src = img.getAttribute('data-src');
  if (!src) { return; }
  img.src = src;
  img.removeAttribute('data-src');
}
if ('loading' in HTMLImageElement.prototype) {
  lazyImages.forEach(img => {
    img.src = img.dataset.src;
  });
} else {
  import('intersection-observer').then(() => {
    const observer = new IntersectionObserver((entries, observer) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          loadImages(entry.target);
          observer.unobserve(entry.target);
        }
      });
    });
    lazyImages.forEach(img => observer.observe(img));
  });
}

这段JavaScript代码展示了如何通过Intersection Observer API实现图片的延迟加载，确保只有当图片接近视口时才会触发下载操作。