前端开发中如何高效渲染大数据量

这篇具有很好参考价值的文章主要介绍了前端开发中如何高效渲染大数据量。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

我们是袋鼠云数栈 UED 团队,致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神,探索前端道路,为社区积累并传播经验价值。

本文作者:琉易 liuxianyu.cn

  在日常工作中,较少的能遇到一次性往页面中插入大量数据的场景,数栈的离线开发(以下简称离线)产品中,就有类似的场景。本文将分享一个实际场景中的前端开发思路,实现高效的数据渲染,提升页面性能和用户体验。

一、场景介绍

  在离线的数据开发模块,用户可以在 sql 编辑器中编写 sql,再通过 整段运行/分段运行 来执行 sql。在点击 整段运行 后,运行成功日志打印后到展示结果的过程中,有一段时间页面很卡顿,主要表现为编辑器编写卡顿。

前端开发中如何高效渲染大数据量

二、性能问题

  我们是在解决 sql 最大运行行数 问题时,发现了上述需要进行性能优化的场景。
先来梳理下当前代码的设计逻辑:
前端开发中如何高效渲染大数据量

  • 前端将选中的 sql 传递给服务端,服务端返回一个调度运行的 jobId;
  • 前端接着以该 jobId 轮询服务端,查询任务的执行状态;
  • 当轮询到任务已完成时,选中的 sql 中如果有查询语句,服务端则会按 select 语句的顺序返回一个 sqlId 的数组集合;
  • 前端基于 n 个 sqlId 的集合,并发 n 个 selectData 的请求;
  • 所有的 selectData 请求完成后渲染数据;

为了保证结果最终的展示顺序和 select 语句顺序一致,我们为单纯的 sqlIdList 循环方法加上了 Promise.allsettled 的方法,使得 n 个 selectData 的请求顺序和 select 语句顺序一致。

前端开发中如何高效渲染大数据量

  由上述逻辑可以看出,问题可能出现在如果选中的 sql 中有大量 select 语句的话,会在「整段运行」完成后大批量请求 selectData 接口,再等待所有 selectData 请求完成后,集中进行渲染。此时,就会出现一次性往页面中插入大量数据的场景。那么,我们怎么解决上述问题呢?

三、解决思路

  可以看出,上述逻辑主要有两个问题:

  • 1、大批量请求 selectData 接口;
  • 2、集中性数据渲染。

1、任务分组

  依旧通过 Promise.allsettled 拿到所有 selectData 接口返回的结果,将原先集中渲染看作是一个大任务,我们将任务拆分成单个的 selectData 结果渲染任务;再根据实际情况,对单个任务进行分组,比如两个一组,渲染完一组再渲染下一组。
拆分完任务,就涉及到了任务的优先级问题,优先级决定了哪个任务先执行。这里采用最原始的“抢占式轮转”,按 sqlIdList 的顺序保留编辑器中的 sql 顺序。

Promise.allSettled(promiseList).then((results = []) => {
    const renderOnce = 2; // 每组渲染的结果 tab 数量
    const loop = (idx) => {
        if (promiseList.length <= idx) return;
        results.slice(idx, idx + renderOnce).forEach((item, idx) => {
            if (item.status === 'fulfilled') {
                handleResultData(item?.value || {}, sqlIdList[idx]?.sqlId);
            } else {
                console.error(
                    'selectExecResultDataList Promise.allSettled rejected',
                    item.reason
                );
            }
        });
        setTimeout(() => {
            loop(idx + renderOnce);
        }, 100);
    };
    loop(0);
});

2、请求分组 + 任务分组

  问题1 中的大批量请求 selectData 接口,也是一个突破点。我们可以将请求进行分组,每次以固定数量的 sqlId 去请求 selectData 接口,比如每组请求 6 个 sqlId 的结果,当前组的请求全部结束后再进行渲染;为了保证效果最优,这里也引入任务分组的思路。

const requestOnce = 6; // 每组请求的数量
// 将一维数组转换成二维数组
const sqlIdList2D = convertTo2DArray(sqlIdList, requestOnce);
const idx2D = 0; // sqlIdList2D 的索引

const requestLoop = (index) => {
    if (!sqlIdList2D[index]) return;
    const promiseList = sqlIdList2D[index].map((item) =>
        selectExecResultData(item?.sqlId)
                                              );
    Promise.allSettled(promiseList)
        .then((results = []) => {
            const renderOnce = 2; // 每组渲染的结果 tab 数量

            const loop = (idx) => {
                if (promiseList.length <= idx) return;
                results.slice(idx, idx + renderOnce).forEach((item, idx) => {
                    if (item.status === 'fulfilled') {
                        handleResultData(item?.value || {}, sqlIdList[idx]?.sqlId);
                    } else {
                        console.error(
                            'selectExecResultDataList Promise.allSettled rejected',
                            item.reason
                        );
                    }
                });
                setTimeout(() => {
                    loop(idx + renderOnce);
                }, 100);
            };
            loop(0);
        })
        .finally(() => {
            requestLoop(index + 1);
        });
};
requestLoop(idx2D);

3、请求分组

  上一种方案的代码写出来太难以理解了,属于上午写,下午忘的逻辑,注释也不好写,不利于维护。基于实际情况,我们尝试下仅对请求作分组处理,看看效果。

const requestOnce = 3; // 每组请求的数量
// 将一维数组转换成二维数组
const sqlIdList2D = convertTo2DArray(sqlIdList, requestOnce);
const idx2D = 0; // sqlIdList2D 的索引

const requestLoop = (index) => {
    if (!sqlIdList2D[index]) return;
    const promiseList = sqlIdList2D[index].map((item) =>
        selectExecResultData(item?.sqlId)
                                              );
    Promise.allSettled(promiseList)
        .then((results = []) => {
            results.forEach((item, idx) => {
                if (item.status === 'fulfilled') {
                    handleResultData(item?.value || {}, sqlIdList[idx]?.sqlId);
                } else {
                    console.error(
                        'selectExecResultDataList Promise.allSettled rejected',
                        item.reason
                    );
                }
            });
        })
        .finally(() => {
            requestLoop(index + 1);
        });
};
requestLoop(idx2D);

前端开发中如何高效渲染大数据量

四、思路理解

1、解决大数据量渲染的问题,常见方法有:时间分片、虚拟列表等;
2、解决同步阻塞的问题,常见方法有:任务分解、异步等;
3、如果某个任务执行时间较长的话,从优化的角度,我们通常会考虑将该任务分解成一系列的子任务。

  在任务分组一节,我们将 setTimeout 的时间间隔设置为 100ms,也就是我认为最快在 100ms 内能完成渲染;但假设不到 100ms 就完成了渲染,那么就需要白白等待一段时间,这是没有必要的。这时可以考虑window.requestAnimationFrame 方法。

- setTimeout(() => {
+ window.requestAnimationFrame(() => {
      loop(idx + renderOnce);
- }, 100);
+ });

  第三节的请求分组,实际上达到了渲染任务分组的效果。本文更多的是提供一个解决思路,上述方式也是基于对时间分片的理解实践。

五、写在最后

  在软件开发中,性能优化是一个重要的方面,但并不是唯一追求,往往还需要考虑多个因素,包括功能需求、可维护性、安全性等等。根据具体情况,综合使用多种技术和策略,以找到最佳的解决方案。


最后

欢迎关注【袋鼠云数栈UED团队】~
袋鼠云数栈UED团队持续为广大开发者分享技术成果,相继参与开源了欢迎star文章来源地址https://www.toymoban.com/news/detail-700381.html

  • 大数据分布式任务调度系统——Taier
  • 轻量级的 Web IDE UI 框架——Molecule
  • 针对大数据领域的 SQL Parser 项目——dt-sql-parser
  • 袋鼠云数栈前端团队代码评审工程实践文档——code-review-practices
  • 一个速度更快、配置更灵活、使用更简单的模块打包器——ko

到了这里,关于前端开发中如何高效渲染大数据量的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 解决前端性能问题:如何优化大量数据渲染和复杂交互?

    ✨✨祝屏幕前的小伙伴们每天都有好运相伴左右,一定要天天开心!✨✨  🎈🎈作者主页: 喔的嘛呀🎈🎈 目录 引言 一、分页加载数据 二、虚拟滚动 三、懒加载 四、数据缓存 五、减少重绘和回流 六、优化图片和资源: 七、合并压缩文件 八、使用Web Workers  在前端开发

    2024年03月10日
    浏览(65)
  • 袋鼠云春季生长大会最新议程来啦!4月20日我们云上见

    如今,数字经济正逐步走向深化应用、规范发展、普惠共享的新阶段,数字经济与实体经济深度融合、基础软件国产化替代成为数字时代主潮流。数字工具如何让千行百业共同实现韧性生长? 「 2023 袋鼠云春季生长大会」乘风而起,带来数实融合趋势下的产品焕新升级剖析、

    2023年04月17日
    浏览(85)
  • 袋鼠云产品功能更新报告06期|数栈产品功能升级,做产品我们是认真的!

    2023年已过半,袋鼠云开发团队和产品团队对数栈产品本身以及客户反馈的问题和痛点进行了持续性的更新和优化,包括对 EasyMR 监控告警功能的更新,以及对离线开发平台表生命周期逻辑的优化等,力求满足不同行业用户的更多需求,为用户带来极致的产品使用体验。 以下为

    2024年02月15日
    浏览(42)
  • 一份配置轻松搞定表单渲染,配置式表单渲染器在袋鼠云的实现思路与实践

    前段时间,袋鼠云离线开发产品接到改造数据同步表单的需求。 一方面,数据同步模块的代码可读性和可维护性较差,导致在数据同步模块开发新功能和定位问题的效率很低。另一方面,整体规划上,希望在对接新的数据源时,可以不再关心表单渲染相关问题,从数据源中心

    2024年02月08日
    浏览(51)
  • 袋鼠云产品功能更新报告07期|智能、高效、安全,一个都不能少!

    欢迎来到袋鼠云07期产品功能更新报告!在瞬息万变的市场环境中,袋鼠云始终将客户需求和反馈置于优化工作的核心位置,本期也针对性地推出了一系列实用性强的功能优化,以满足客户日益增长的业务需求。 以下为袋鼠云产品功能更新报告07期内容,更多探索,请继续阅

    2024年02月08日
    浏览(47)
  • 性能优化之-更高效的数据渲染

    前言:中心思想还是让请求的资源得到更快响应的方法,比如压缩资源,减少数据量的大小,缓存数据以减少请求数量,http/2让网络传输变得更快这些,下面就让我们来看看浏览器是如何解析这些数据,最终又是如何将他们渲染在屏幕上的?在数据量不变的情况下还有哪些可

    2024年02月09日
    浏览(46)
  • 如何构建新一代实时湖仓?袋鼠云基于数据湖的探索升级之路

    在之前的实时湖仓系列文章中,我们已经介绍了实时湖仓对于当前企业数字化转型的重要性,实时湖仓的功能架构设计,以及实时计算和数据湖结合的应用场景。 在本篇文章中,将介绍袋鼠云数栈在构建实时湖仓系统上的探索与落地实践,及未来规划。 数栈作为一个数据开

    2024年02月05日
    浏览(75)
  • 前端如何安全的渲染HTML字符串?

    在现代的Web 应用中,动态生成和渲染 HTML 字符串是很常见的需求。然而,不正确地渲染HTML字符串可能会导致安全漏洞,例如跨站脚本攻击(XSS)。为了确保应用的安全性,我们需要采取一些措施来在安全的环境下渲染HTML字符串。本文将介绍一些安全渲染 HTML 字符串的最佳实

    2024年02月12日
    浏览(46)
  • 掌握前端框架,打造高效的开发流程

    在当今互联网时代,前端开发已经成为了一项非常重要的技能。随着互联网的快速发展,前端技术也在不断演进和更新。为了提高开发效率和代码质量,掌握前端框架已经成为了必备的技能之一。本文将介绍如何通过掌握前端框架,打造高效的开发流程,并通过一个实际案例

    2024年02月11日
    浏览(58)
  • 前端组件开发指南:构建可复用、高效的用户界面

    在现代Web开发中,前端组件扮演着重要的角色。它们是构建用户界面的基本构建块,能够使开发人员更高效地开发、测试和维护代码。本文将带您深入了解前端组件的概念、优势以及如何使用常见的前端框架构建可复用的组件。 前端组件是一种封装了HTML、CSS和JavaScript代码的

    2024年02月16日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包