最近我分配到了一個非常有趣的任務：在前端顯示 1GB 文件和 200 萬行數據，并實現過濾，在這篇文章中，我將分享我是如何完成這個任務的。

背景

我曾經創建了一個簡單的 React 應用程序。這個應用程序從服務器加載一些數據，并呈現在幾個表格中。在成功演示了 React 應用程序后，客戶授權我訪問生產數據。然后，有趣的事情發生了。當我將應用程序從開發 API 連接到生產環境并重新加載頁面時，看到了類似“顯示此網頁時出現問題”的錯誤。經過調試，我發現生產服務器的 JSON 文件大小約為 500MB(而不是從開發服務器的 2 到 5 MB)。

最新的需求是：

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

2. 后端不會進行分頁——只能接受這個事實。

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

但幾天后又出現了新的需求：

3.“標準的瀏覽器搜索(Ctrl/Cmd + F)功能無法正常工作，必須修復這個問題！”

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

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

搜索框

我決定創建一個具有類似默認瀏覽器搜索功能的自定義搜索框，但可以搜索所有的 200 萬條記錄。

對大量數據進行過濾操作會導致“堆內存不足”。截至 2018 年 4 月，我沒有找到任何提供內置搜索 / 過濾功能的 React 虛擬列表實現。

經過幾個小時的谷歌搜索和在 Stack Overflow 網站上提問之后，我想到了 Web Worker，并使用了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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。