优化站点访问体验

2024-2-19 05:55:55

#前端

6

前言

  • 最近发现我的站点在访问的时候，会发生点击一个链接，但是页面没有跳转的情况，经过排查发现是页面加载时间过长导致的。
  • 毫无疑问这对用户体验来讲是很差的，有时候点击了链接，却不知道是页面未响应，还是在等待请求返回结果。
  • 针对这个问题，我决定从以下两个方面进行优化
    • 页面加载时间过长，可以采用Suspense来优化,将需要查询sql来渲染的内容块，封装成独立组件，并用Suspense组件进行包裹，增加fallBack，使其不阻塞页面加载，而是呈现出异步加载的状态
    • 其次，我们可以通过在顶部增加加载条的办法，来提示用户页面正在跳转中，增强用户体验

Suspense

  • Suspense是React 16.6的新特性，它允许我们定义加载状态，并渲染备用内容，直到加载完成。
  • 简单来讲，可以理解为一个在组件加载完毕之前，为用户呈现loading状态的组件。
  • 对于服务端渲染的组件，用这个特性可以减少跳转页面的响应时间，提升用户体验。
  • Suspense接受两个参数
    • children：真正的 UI 渲染内容。如果 children 在渲染中被挂起，Suspense 边界将会渲染 fallback。
    • fallback：真正的 UI 未渲染完成时代替其渲染的备用 UI，它可以是任何有效的 React 节点。后备方案通常是一个轻量的占位符，例如表示加载中的图标或者骨架屏。当 children 被挂起时，Suspense 将自动切换至渲染 fallback；当数据准备好时，又会自动切换至渲染 children。如果 fallback 在渲染中被挂起，那么将自动激活最近的 Suspense 边界。

应用

  • 首先，我们找到需要优化加载速度的页面，排查出是什么地方耗时最长
  • 然后，将这些耗时过长的内容块，封装成独立的组件，代码见下
import { Suspense } from 'react';
import BlogList from './BlogList'
  <Suspense fallback={loadingSkeleton()}>
    <BlogList label={label} firstLoadingSize={firstLoadingSize} />
  </Suspense>
  • 如上，这些组件被Suspense包裹，当组件被挂起时，会渲染fallback，当组件加载完成后，会自动切换至渲染children。这些组件的渲染就不会阻塞页面加载，而是呈现出对应的加载骨架屏。

Next NProgress bar

  • 这是一个适用于nextjs框架的加载条组件，可以用来提示用户页面正在跳转中，增强用户体验。
  • 使用 npm i next-nprogress-bar 命令来安装
  • 首先我们封装一个NprogressProvider组件，并将其定义为客户端组件
"use client";
import { AppProgressBar as ProgressBar } from "next-nprogress-bar";
const NprogressProvider = ({ children }) => {
  return (
    <>
      {children}
      <ProgressBar height="2px" color="#4F46E5" options={{ showSpinner: false }} />
    </>
  );
};
export default NprogressProvider
  • 如上，你可以对顶部的进度条样式做自定义
  • 接着我们找到项目中的src\app\layout.jsx文件，注意，这里讲的是nextjs的app路由目录，其他情况下只要找到对应的页面根节点，用NprogressProvider包裹整个页面即可
export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN">
      <body className={inter.className}>
        <NprogressProvider>
          {children}
        </NprogressProvider>
      </body>
    </html>
  )
}

参考文章

Loading UI and Streaming

NextJs13给页面添加帅气的顶部加载进度条

Suspense

Next NProgress bar

Github登录