首页 小编推荐正文
金鱼图片,如安在浏览器不溃散的情况下过滤 200 万行数据?,川藏线

作不戴套者 | Filip Ra蔡乙嘉的女朋友kowski

译者 | 阿拉丁

最近我分配到了一个十分风趣的使命:在前端显现 1GB 文件和 200 万行数据,并完结过滤,在这篇文章中,我将共享我是怎么完结这个王一碗小笨笨使命的。

金鱼图片,如安在浏览器不溃散的情况下过滤 200 万行数据?,川藏线

背 景

我从前创立了一个简略的 React 使用程序。这个使用程序从效劳器加载一些数据,并呈现在几个表格中。在成功葛铁德演示了 React西檬之家 使用程序后,客户授权我拜访出产数据学生搞基。然金鱼图片,如安在浏览器不溃散的情况下过滤 200 万行数据?,川藏线后,风趣的工作发作了。当我将使用程序从开发 API 连接到出产环境并从头加载页面时蛯名里菜,看到了相似艶美“显现此网页时呈现问题”的过错。经过调试,我发现出产效劳器的 JSON 文件巨细约为 500MB(而不是从开发效劳器的 2 到 5 MB)。叶选廉倒了

最新的需求是:

首要,我尝试了 react virtualized,一个 React 组件,能够经过虚拟烘托有金鱼图片,如安在浏览器不溃散的情况下过滤 200 万行数据?,川藏线效地烘托大型列表。

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

金鱼图片,如安在浏览器不溃散的情况下过滤 200 万行数据?,川藏线
艳堂しほり 金鱼图片,如安在浏览器不溃散的情况下过滤 200 万行数据?,川藏线

虚拟列表背面的首要思维是只烘托可见的内容。因而,假如用户在查找框中输入一些东西,那么浏览器只会查找虚拟列表的可见部分。

下图演示了浏览器是怎么查找虚拟列表的。请注意,翻滚后呈现的记载(虚拟列表进行了从头烘托)没有高亮显现,虽然包括了要查找的值“@”。

查找框

我决议创立一个具有相似默许浏览器查找功用的自定义查找框,但能够查找一切的 200 万条记载。

对很多数据进行过滤操作会导致“堆内存不足”。到 2018 年 4 月,我没有找到任何供给内置查找 / 过滤功用的 React 虚拟列表完结。

经过几个小时的谷歌查找和在 Stack Overflow 网站上发问之后,我想到了 Web Worker,并运用了 Simple Web Worker 库。这个办法的首要思维是将一个大数组拆分红更小的部分,并运用天津市天气预报15天 Web Worker 异步处理每个部分。

找到最佳的块长度是很有必要的。块的长度越短查找速度就越慢,但长度嘉年华思晴大王相片越长,在低装备设备上呈现“堆内存不足”的或许性就越大。在我的比如中,依据试验成果,3000 是最佳长度。

富丽取胜

下图演示了妈妈鲁自定义查找框。在发作翻滚后,高亮显现不会消失,用户能够经过箭头按键内行和表之间导航。是的,过滤数据的确需求一些时刻,但它能够处理比之前更多的信息。为简略起见,数组只包括了 9000 个项,但能够道德6080随意添加,不过过滤时刻也会随之添加(过滤 200 万行或许需求 5-7 分钟)。

这种办法协助我处理了几个问题:

你能够在这里找到使用董卿的老公和孩子相片程序的源代码:

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

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

处理方案简略描绘

这个 React 使用程序包括 3 个组件:

英文原文

https://blog.uptech.team/https-medium-com-oleksii-kryvonosov-how-to-filter-1gb-json-on-the-frontend-a幼女在线观看nd-not-crash-the-browser-ff59e异界基本法beb1baa

周芷兰再生人陈明道怎么造假 谷歌 开发
金鱼图片,如安在浏览器不溃散的情况下过滤 200 万行数据?,川藏线 声明:该文观念仅代表作者自己,搜狐号系信息发布渠道,搜狐仅供给信息存储空间效劳。
版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。