笔记&收藏&学习

Appearance

本文由 简悦 SimpRead 转码， 原文地址 mp.weixin.qq.com

点击上方 程序员成长指北，关注公众号

回复1，加入高级Node交流群

在数字化时代，网站性能的好坏直接影响用户体验和转化率。对于外投页面而言，如何在保证视觉效果和功能的同时提升加载速度，成为了开发者必须面对的挑战。本文将探讨几种有效的外投页面性能优化策略，包括构建方式的优化、非首屏组件的处理、关键大图的预加载、动效模板的升级，以及针对低端机器的降级策略。 ​

unsetunset1. 构建方式的优化：从 SSR 切换到 ISRunsetunset ​

在构建现代 web 应用时，SSR（Server-Side Rendering）和 ISR（Incremental Static Regeneration）是两种常用的渲染方式。

SSR 的优缺点 ​

  • 优点：

  • SEO 友好：页面内容在服务器端渲染，搜索引擎能够更好地抓取。

  • 用户首次访问时迅速加载完整页面。

  • 缺点：

  • 服务器负担重：每次请求都需要服务器渲染，可能导致响应时间变慢。

  • 难以处理高并发访问。

ISR 的优缺点 ​

  • 优点：

  • 性能提升：静态页面在构建时生成，后续请求直接从 CDN 提供，速度极快。

  • 灵活性：可以定期更新静态页面，保持内容的新鲜感。

  • 缺点：

  • 相对较低的实时性：对于频繁变动的数据，可能需要手动触发更新。

通过将外投页面从 SSR 切换到 ISR，可以在保持良好 SEO 的同时，大幅提升页面加载速度，特别是在高并发访问的场景中。

unsetunset2. 非首屏组件：使用 next/dynamic 的 ssr: falseunsetunset ​

在优化页面加载时，非首屏组件的渲染方式至关重要。通过使用 Next.js 的 next/dynamic 实现组件的动态加载，可以将这些非首屏组件的 SSR 设置为 false，在用户滚动到相应位置时再进行加载。这种懒加载策略不仅减少了首屏加载时间，还提高了整体用户体验。

import dynamic from 'next/dynamic';

const NonCriticalComponent = dynamic(() => import('../components/NonCriticalComponent'), {
  ssr: false,
});

unsetunset3. 关键大图在 head 中 preloadunsetunset ​

对于外投页面而言，视觉效果往往是吸引用户的关键。为了提升大图的加载效率，可以在 HTML 的 <head> 中使用 <link rel="preload"> 标签提前加载关键大图。这种做法能够在用户访问页面时，优先加载重要的视觉元素，从而减少用户等待时间。

<link rel="preload" href="/images/important-image.jpg" as="image">

unsetunset4. 针对动效模板的升级：APNG 到 Lottieunsetunset ​

动效在页面中起到了吸引用户注意力的作用，但不同的动效格式在性能上有着显著差异。APNG（Animated PNG）虽然支持透明背景和较高的质量，但其文件大小通常较大，导致加载速度慢。

Lottie 是一种基于 JSON 的动画文件格式，相较于 APNG，Lottie 动画体积更小，且支持更复杂的动效。使用 Lottie 动画可以在保证效果的前提下，显著提升页面性能。

APNG 与 Lottie 的差异 ​

  • APNG：

  • 文件较大，加载时间长。

  • 兼容性较差，某些浏览器可能不支持。

  • Lottie：

  • 文件小，加载快。

  • 可实现更复杂的动效，且可在多种平台上使用。

unsetunset5. 针对低端机的降级策略：跳过动画 unsetunset ​

为了确保所有用户都能获得良好的体验，特别是那些使用低端机器的用户，可以考虑为这些用户提供降级策略，跳过动画。通过检测用户的设备性能，决定是否加载动画元素，确保页面在性能较低的设备上依然流畅。

if (isLowEndDevice) {
  // 跳过动画
} else {
  // 加载动画
}

当然，Next.js 14 引入的流渲染（Streaming Rendering）为页面性能优化提供了新的可能性。让我们将这一部分纳入到性能优化的讨论中，并对其进行详细阐述。

unsetunset6. Next.js 14 的流渲染（Streaming Rendering）unsetunset ​

在 Next.js 14 中，流渲染是一种新功能，可以将页面的内容分块发送到客户端，这意味着用户可以在等待整个页面加载的同时，先看到一些内容。这种方法极大地提高了页面的首屏加载速度，并且改善了用户体验。

流渲染的优点 ​

  • 快速首屏加载：用户可以在页面的某些部分已经渲染完成时开始互动，而不必等待整个页面的加载。这对于提高页面的感知性能尤其重要。

  • 渐进式增强：流渲染允许开发者逐步加载页面的其他部分，用户可以在页面的某些部分完成渲染后，继续加载其余内容。这种方式有助于改善页面的交互性。

  • 更高效的资源利用：流渲染可以优化网络带宽使用，在用户浏览过程中按需加载内容，避免一次性发送大量数据。

示例代码 ​

在使用流渲染时，开发者可以通过设置 React 组件的 Suspense 和 lazy 方法来实现。以下是一个简单的示例：

import { Suspense } from 'react';
import { MyComponent } from './MyComponent';

export default function Page() {
  return (
    <div>
      <h1>欢迎来到我的页面</h1>
      <Suspense fallback={<div>加载中...</div>}>
        <MyComponent />
      </Suspense>
    </div>
  );
}

在这个示例中，MyComponent 将在被加载时显示一个 "加载中..." 的占位符，用户可以在等待内容加载的同时与页面的其它部分进行交互。

结合其他优化策略 ​

流渲染与之前提到的其他优化策略（如 ISR、动态加载非首屏组件、预加载关键图像等）可以结合使用，形成一个全面的性能优化方案。通过将流渲染与这些技术相结合，开发者可以确保用户在访问页面时获得更快的反馈和更流畅的体验。

unsetunset 总结 unsetunset ​

在页面的性能优化过程中，Next.js 14 的流渲染为开发者提供了新的工具，帮助他们提升用户体验。结合 ISR、动态加载非首屏组件、关键大图预加载、Lottie 动画，以及针对低端设备的降级策略，可以形成一个多层次的优化方案，为用户提供流畅而快速的访问体验。

通过这些优化措施，外投页面不仅能够更好地满足用户需求，还能有效提高转化率，为业务带来更多机会。希望本文能够帮助你在实际项目中更好地应用这些性能优化策略。

Node 社群

我组建了一个氛围特别好的 Node.js 社群，里面有很多 Node.js小伙伴，如果你对Node.js学习感兴趣的话（后续有计划也可以），我们可以一起进行Node.js相关的交流、学习、共建。下方加 考拉 好友回复「Node」即可。

   “分享、点赞、在看” 支持一波👍