最近我分配到了一個(gè)非常有趣的任務(wù)：在前端顯示 1GB 文件和 200 萬(wàn)行數(shù)據(jù)，并實(shí)現(xiàn)過(guò)濾，在這篇文章中，我將分享我是如何完成這個(gè)任務(wù)的。

背景

我曾經(jīng)創(chuàng)建了一個(gè)簡(jiǎn)單的 React 應(yīng)用程序。這個(gè)應(yīng)用程序從服務(wù)器加載一些數(shù)據(jù)，并呈現(xiàn)在幾個(gè)表格中。在成功演示了 React 應(yīng)用程序后，客戶(hù)授權(quán)我訪(fǎng)問(wèn)生產(chǎn)數(shù)據(jù)。然后，有趣的事情發(fā)生了。當(dāng)我將應(yīng)用程序從開(kāi)發(fā) API 連接到生產(chǎn)環(huán)境并重新加載頁(yè)面時(shí)，看到了類(lèi)似“顯示此網(wǎng)頁(yè)時(shí)出現(xiàn)問(wèn)題”的錯(cuò)誤。經(jīng)過(guò)調(diào)試，我發(fā)現(xiàn)生產(chǎn)服務(wù)器的 JSON 文件大小約為 500MB(而不是從開(kāi)發(fā)服務(wù)器的 2 到 5 MB)。

最新的需求是：

1.JSON 文件最大可達(dá)到 1 GB。

2. 后端不會(huì)進(jìn)行分頁(yè)——只能接受這個(gè)事實(shí)。

首先，我嘗試了 react virtualized，一個(gè) React 組件，可以通過(guò)虛擬渲染有效地渲染大型列表。

但幾天后又出現(xiàn)了新的需求：

3.“標(biāo)準(zhǔn)的瀏覽器搜索(Ctrl/Cmd + F)功能無(wú)法正常工作，必須修復(fù)這個(gè)問(wèn)題！”

虛擬列表背后的主要思想是只渲染可見(jiàn)的內(nèi)容。因此，如果用戶(hù)在搜索框中輸入一些東西，那么瀏覽器只會(huì)搜索虛擬列表的可見(jiàn)部分。

下圖演示了瀏覽器是如何搜索虛擬列表的。請(qǐng)注意，滾動(dòng)后出現(xiàn)的記錄(虛擬列表進(jìn)行了重新渲染)沒(méi)有高亮顯示，盡管包含了要搜索的值“@”。

搜索框

我決定創(chuàng)建一個(gè)具有類(lèi)似默認(rèn)瀏覽器搜索功能的自定義搜索框，但可以搜索所有的 200 萬(wàn)條記錄。

對(duì)大量數(shù)據(jù)進(jìn)行過(guò)濾操作會(huì)導(dǎo)致“堆內(nèi)存不足”。截至 2018 年 4 月，我沒(méi)有找到任何提供內(nèi)置搜索 / 過(guò)濾功能的 React 虛擬列表實(shí)現(xiàn)。

經(jīng)過(guò)幾個(gè)小時(shí)的谷歌搜索和在 Stack Overflow 網(wǎng)站上提問(wèn)之后，我想到了 Web Worker，并使用了Simple Web Worker 庫(kù)。這個(gè)方法的主要思想是將一個(gè)大數(shù)組拆分成更小的部分，并使用 Web Worker 異步處理每個(gè)部分。

找到最佳的塊長(zhǎng)度是很有必要的。塊的長(zhǎng)度越短搜索速度就越慢，但長(zhǎng)度越長(zhǎng)，在低配置設(shè)備上出現(xiàn)“堆內(nèi)存不足”的可能性就越大。在我的例子中，根據(jù)實(shí)驗(yàn)結(jié)果，3000 是最佳長(zhǎng)度。

華麗制勝

下圖演示了自定義搜索框。在發(fā)生滾動(dòng)后，高亮顯示不會(huì)消失，用戶(hù)可以通過(guò)箭頭按鍵在行和表之間導(dǎo)航。是的，過(guò)濾數(shù)據(jù)確實(shí)需要一些時(shí)間，但它可以處理比之前更多的信息。為簡(jiǎn)單起見(jiàn)，數(shù)組只包含了 9000 個(gè)項(xiàng)，但可以隨意添加，不過(guò)過(guò)濾時(shí)間也會(huì)隨之增加(過(guò)濾 200 萬(wàn)行可能需要 5-7 分鐘)。

這種方法幫助我解決了幾個(gè)問(wèn)題：

• 過(guò)濾大量數(shù)據(jù)而不會(huì)導(dǎo)致瀏覽器崩潰。在我的例子中，文件的最大大小約為 1GB，最多有約 200 萬(wàn)行數(shù)據(jù)。
• 創(chuàng)建一個(gè)搜索框，提供與原生瀏覽器搜索類(lèi)似的 UX，可以搜索所有 200 萬(wàn)行數(shù)據(jù)。

你可以在這里找到應(yīng)用程序的源代碼：

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

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

解決方案簡(jiǎn)短描述

這個(gè) React 應(yīng)用程序包含 3 個(gè)組件：

• App.js——應(yīng)用程序的主要組件；
• SearchBox.js——實(shí)現(xiàn)搜索框功能的組件，使用箭頭按鍵導(dǎo)航搜索結(jié)果；
• TablesViews.js——渲染結(jié)果表格的組件，它演示了如何在表格之間實(shí)現(xiàn) SearchBox 導(dǎo)航。

英文原文：

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

總結(jié)

以上是生活随笔為你收集整理的js json过滤_如何在浏览器不崩溃的情况下过滤 200 万行数据？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。