当前位置:首页 > 技术文章 > 正文内容

手把手教你如何在浏览器不崩溃的情况下过滤上百万行数据

zonemu18小时前技术文章1



最近我分配到了一个非常有趣的任务:在前端显示 1GB 文件和 200 万行数据,并实现过滤,在这篇文章中,我将分享我是如何完成这个任务的。

背景

我曾经创建了一个简单的 React 应用程序。这个应用程序从服务器加载一些数据,并呈现在几个表格中。在成功演示了 React 应用程序后,客户授权我访问生产数据。然后,有趣的事情发生了。当我将应用程序从开发 API 连接到生产环境并重新加载页面时,看到了类似“显示此网页时出现问题”的错误。经过调试,我发现生产服务器的 JSON 文件大小约为 500MB(而不是从开发服务器的 2 到 5 MB)。

最新的需求是:

1.JSON 文件最大可达到 1 GB。

  1. 后端不会进行分页——只能接受这个事实。

首先,我尝试了 react virtualized,一个 React 组件,可以通过虚拟渲染有效地渲染大型列表:

https://blog.logrocket.com/rendering-large-lists-with-react-virtualized-82741907a6b3

但几天后又出现了新的需求:

3.“标准的浏览器搜索(Ctrl/Cmd + F)功能无法正常工作,必须修复这个问题!”

虚拟列表背后的主要思想是只渲染可见的内容。因此,如果用户在搜索框中输入一些东西,那么浏览器只会搜索虚拟列表的可见部分。

下图演示了浏览器是如何搜索虚拟列表的。请注意,滚动后出现的记录(虚拟列表进行了重新渲染)没有高亮显示,尽管包含了要搜索的值“@”。(由于微信后台限制,动图不能超过2M,所以图片压缩之后有些模糊,原图可到原文中看)

搜索框

我决定创建一个具有类似默认浏览器搜索功能的自定义搜索框,但可以搜索所有的 200 万条记录。

对大量数据进行过滤操作会导致“堆内存不足”。截至 2018 年 4 月,我没有找到任何提供内置搜索 / 过滤功能的 React 虚拟列表实现。

经过几个小时的谷歌搜索和在 Stack Overflow 网站上提问之后,我想到了 Web Worker,并使用了 Simple Web Worker 库(
https://github.com/israelss/simple-web-worker)。这个方法的主要思想是将一个大数组拆分成更小的部分,并使用 Web Worker 异步处理每个部分。

找到最佳的块长度是很有必要的。块的长度越短搜索速度就越慢,但长度越长,在低配置设备上出现“堆内存不足”的可能性就越大。在我的例子中,根据实验结果,3000 是最佳长度。

华丽制胜

下图演示了自定义搜索框。在发生滚动后,高亮显示不会消失,用户可以通过箭头按键在行和表之间导航。是的,过滤数据确实需要一些时间,但它可以处理比之前更多的信息。为简单起见,数组只包含了 9000 个项,但可以随意添加,不过过滤时间也会随之增加(过滤 200 万行可能需要 5-7 分钟)。


这种方法帮助我解决了几个问题:

  • 过滤大量数据而不会导致浏览器崩溃。在我的例子中,文件的最大大小约为 1GB,最多有约 200 万行数据。
  • 创建一个搜索框,提供与原生浏览器搜索类似的 UX,可以搜索所有 200 万行数据。

你可以在这里找到应用程序的源代码:

https://github.com/uptechteam/react-filter-demo

演示:
https://uptechteam.github.io/react-filter-demo/

解决方案简短描述

这个 React 应用程序包含 3 个组件:

  • App.js——应用程序的主要组件;
  • SearchBox.js——实现搜索框功能的组件,使用箭头按键导航搜索结果;
  • TablesViews.js——渲染结果表格的组件,它演示了如何在表格之间实现 SearchBox 导航。

英文原文:

https://blog.uptech.team/https-medium-com-oleksii-kryvonosov-how-to-filter-1gb-json-on-the-frontend-and-not-crash-the-browser-ff59ebeb1baa

相关文章

最美 Linux 发行版之争还在继续,Elementary OS 0.3 发布 0.3 Freya 更新

对于个人终端消费者而言,Linux 发行版们依然希望通过 UI 革新来吸引他们的注意。除了 Ubuntu 这样综合能力强的选手,偏重界面的发行版里,前有 OpenSUSE,后有 Linux Mint,...

Win+Ubuntu缝合怪:第三方开发者推出“Wubuntu”Linux发行版

IT之家 2 月 26 日消息,一位第三方开发者推出了一款名为“Wubuntu”的缝合怪 Linux 发行版,系统本身基于 Ubuntu,但界面为微软 Windows 11 风格,甚至存在微软 Win...

Vue3 如何实现父子组件传值?(vue父子组件传值props)

在Vue 3中,要实现父子组件传值效果主要通过props和emit两种机制来实现,下面我们就来详细介绍一下这两种机制。父组件向子组件传值propsprops是Vue组件的一种机制,主要的作用就是实现从...

Vue3开发极简入门(16):祖孙组件间通信之provide&inject

前文说了Vue的组件间关系,有父子、爷孙、其他关系。例如之前的Father、Son是父子关系,App与Son就是爷孙关系。而props的Son,与emits的Son,就是其他关系。前文的props是父...

Vue3,父组件子组件传值,provide(提供)和inject(注入)传值

父组件向子组件传值父子组件传递数据时,通常使用的是props和emit,父向子传递使用props,子向父传递使用emit。子组件接收3种方式// 1、简单接收 props:["title...

面试官:聊聊你知道的Vue与React的区别

最近面到很多大公司的时候,小编都会碰到一个很尴尬的问题,很多大公司的技术栈都是React,但是小编学的是Vue,其实从本质上来说两者都是比较优秀的前端框架,所以有些面试官会问到Vue和React的区别...