解决 Next.js 中长列表性能的问题及优化方法

AI 编程助手,豆包旗下的编程助手,提供智能补全、智能预测、智能问答等能力,节省开发时间,释放脑海中的创造力,支持 VSCode,点击体验 AI

对于前端开发人员而言,一般都会遇到大量数据的情况,特别是在开发长列表的时候。在 Next.js 中,长列表性能的优化尤为重要,因为它是一个非常流行的 React 框架,因此下面就来探究一下解决 Next.js 中长列表性能问题的方法。

常见问题

1. 初始化数据过多导致时间延迟

长列表初始化需要大量的数据,这会让浏览器在加载时感到很慢。当使用getInitialPropsgetServerSideProps时,应该只返回需要渲染的数量的数据。

正确的方式是将 API 请求的数据拆分成多次更新,以避免在页面初次加载时将所有数据拉出。

2. 数据更新时引起的性能问题

当数据从服务端返回时,每个列表项将被重新渲染。这意味着在更新数据时,页面的响应时间会变慢,从而降低用户体验。

这可以通过React技术中的React.memo来优化,即只渲染有更改的组件。另外,尽可能少地使用useState,而使用组件的属性来传递数据。

3. 用户手动滚动时的响应速度

用户滚动过程中还需要保持反应迅速。这可以通过使用window.requestAnimationFrame来创造具有超高帧率的滚动。

优化方法

了解了上述问题,下面就来介绍如何优化 Next.js 中的长列表性能。

懒加载 与 无限滚动

优化大量数据的方法之一是使用react-virtualized库。这个库可以将列表项进行懒加载,意味着只有在列表项被滚动到可见区域时才加载每个项。

同时,它还提供了一个属性,可以实现无限滚动并加载列表项。这样做会减少加载期间的数据请求。

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

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

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

这里的loadMoreRows是一个回叫函数,用于提供更多的数据项,滚动到列表末尾的时候会自动调用。isRowLoaded则是一个返回布尔值的函数,用于检查列表的某一行是否已经加载。

使用React.memo

使用React.memo可以创建高阶组件(HOC),它将包装组件并仅在组件属性更改时重新呈现。

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

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

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

这里将示例中的Row组件包装成memo,并将areEqual函数传递给它,这个函数的作用是判断是否需要重新渲染。

针对任务执行器的优化

在更高级的应用中,您可能需要按顺序执行任务列表。在这种情况下,任务执行器可以将方法标准化,并在状态更新时立即运行它们。

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

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

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

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

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

这里使用了useCallbackuseEffect来控制任务的执行。State来跟踪所有待决任务和已完成任务,并使用runFirstPendingTask函数来开始运行任务。这是由于当任务列表发生更改时,它将在useEffect中作为依赖项重新运行。

Waypoint

react-waypoint是一个非常实用的库,它可以跟踪拖动或滚动过程中特定的元素是否可见。

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

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

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

这里用react-waypoint检查最后一个元素是否可见,同时在onEnteronLeave中控制执行相应的代码。

结论

以上是一些解决 Next.js 中长列表性能的问题及优化方法。合理的内存管理、骨架屏的引用、列表项的懒加载,使用stateless组件等,都可以使下一个React.js长列表在性能上更加平稳,让用户有更舒适的体验。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/671a02479babaf620fa06561


猜你喜欢

  • Babel 7.x 版升级手记及配置项

    简介 Babel是一个流行的 JavaScript 编译器,支持将 ES6+ 的语法转换为浏览器或 Node.js 可以理解的语法。在 2018 年底发布的 Babel 7.x 版本中,有一些重要的变...

    17 天前
  • RxJS 组合操作符 combineLatest 与 switchMap 的结合

    RxJS 组合操作符 combineLatest 与 switchMap 的结合 RxJS 是一个基于观察者模式的 JavaScript 库,它可以用于在浏览器中响应式地处理异步操作。

    17 天前
  • 性能优化遇到的坑及解决方法

    在前端开发中,性能优化是一个常见的问题。一方面,在今天的互联网时代,用户对速度和响应时间的要求越来越高,因此在进行性能优化时需要非常注意。另一方面,随着前端技术的发展和更新迭代,新的技术和框架也带来了...

    17 天前
  • 带你了解无障碍设计:实践和标准

    无障碍设计,是指在设计产品时,使所有人都能够舒适地使用该产品,包括有身体上,听力上,视力上,认知上等不同特殊需求的人群。无障碍设计是为了让每个人都享有公平和平等的机会,而非仅仅让多数受众受益。

    17 天前
  • React Native 组件测试:使用 Enzyme

    React Native 渐渐成为了一种非常流行的前端框架,它使得我们能够使用 Javascript 来开发原生的移动端应用。但是,随着 React Native 项目的复杂度增加,我们需要更好的方法...

    17 天前
  • 如何通过 Headless CMS 实现跨平台信息共享?

    在现代 Web 应用程序和网站开发中,跨平台信息共享是至关重要的。传统的 CMS(内容管理系统)因限制在内容管理和呈现方面而无法满足当前的跨平台需求。Headless CMS 可以解决这个问题,提供了...

    17 天前
  • Deno 中使用多线程提高应用性能的方法

    Deno 是一个现代化的 JavaScript 和 TypeScript 运行时环境。相比 Node.js,它更加安全,并支持 TypeScript 作为官方语言。而且它的运行性能也非常出色。

    17 天前
  • ES9 新特性应用在分布式、微服务架构中的案例分享

    随着互联网和移动互联网的发展,分布式和微服务架构变得越来越流行。在这种架构下,前端开发者需要处理的数据量和复杂度都很高。ES9 新特性的出现,则为前端开发者带来了更便捷更高效的开发体验。

    17 天前
  • MongoDB 数据库压力测试工具推荐

    随着互联网的快速发展,越来越多的企业开始采用 MongoDB 数据库来存储和管理自己的数据,而如何对 MongoDB 数据库进行效率和稳定性的测试,成为了很多前端工程师和开发人员关注的问题。

    17 天前
  • 在 Node.js 中使用 ECMAScript 2017 (ES8) 的 Object.getOwnPropertyDescriptors() 方法

    在 Node.js 中使用 ECMAScript 2017 (ES8) 的 Object.getOwnPropertyDescriptors() 方法 ECMAScript 2017 (ES8) 是 ...

    17 天前
  • 如何在 jQuery 中使用 Promise

    什么是 Promise Promise 是一个异步编程的解决方案,在 JavaScript 语言中被广泛应用。Promise 的出现主要是为了解决异步操作嵌套过深、回调函数难以管理的问题。

    17 天前
  • 在Redux应用程序中使用Jest进行单元测试

    单元测试是前端开发中非常重要的一环,它可以确保你的应用程序符合预期的行为,并在发现错误时提供快速而准确的反馈。在Redux应用程序中使用Jest进行单元测试可以帮助你将代码减少错误,并改善代码质量。

    18 天前
  • 使用 GraphQL 中的聚合器处理复杂数据

    在现代的 Web 开发中,数据处理一直都是非常重要的一环。GraphQL 作为一种新型的数据查询语言,极大地改善了前端工程师在处理数据上的效率和灵活性。在 GraphQL 中,聚合器是一种非常有用的工...

    18 天前
  • Lambda 函数性能优化技巧分享:Serverless 架构实践指南

    随着云计算技术的不断发展,Serverless 架构已经成为了越来越多企业和开发者的选择。作为一种全新的架构模式,Serverless 架构不仅可以降低开发成本,还可以提升应用的灵活性和可拓展性。

    18 天前
  • 如何使用 Fastify 与 Blitz.js 结合构建现代 web Fullstack 应用

    在现代 web 开发中,使用组合式架构(Composable Architecture)来构建 web 应用是一个广泛采用的方法。其中,Fastify 和 Blitz.js 是两个很有名的框架,它们都...

    18 天前
  • React Native 中的路由设计指南

    前言 React Native 是一款开源的跨平台移动应用开发框架,它可以让开发者使用 JavaScript 和 React 来编写原生应用,减少了开发应用时的学习成本和开发成本,提高了开发效率。

    18 天前
  • ECMAScript 2021 中新增的 String.prototype.trim 方法使用指南

    在 ECMAScript 2021 中,我们又迎来了新的方法,其中之一就是 String.prototype.trim。这个新方法是为了方便开发者快速去除字符串中的空格而生。

    18 天前
  • MongoDB 数据库事务处理的性能分析

    在现代应用程序开发中,数据库事务处理是一项非常重要的任务。不幸的是,并非所有的数据库都支持事务,或者它们的事务处理性能可能不足以满足应用程序的需求。MongoDB 是一种性能出色,易于扩展和管理的 N...

    18 天前
  • 为什么你选择了响应式网站设计,而不是原生应用?

    随着移动设备数量的增加,越来越多的用户开始在手机和平板电脑上使用网络浏览器来访问网站,而不是使用原生应用程序。这就引出了问题,对于前端开发人员来说,应该选择响应式网站设计还是原生应用? 响应式网站设计...

    18 天前
  • Docker 中如何使用 Ansible 自动化部署

    前言 Docker 是一种轻量级的容器化技术,可以用来方便地构建、发布和运行软件。与此同时,Ansible 是一种自动化部署工具,可以快速而可靠地设置服务器和服务,从而极大地提高了开发和运维的效率。

    18 天前

相关推荐

    暂无文章