最近我分配到了乙個非常有趣的任務：在前端顯示1gb檔案和200萬行資料，並實現過濾，在這篇文章中，我將分享我是如何完成這個任務的。
最新的需求是：
1.json檔案最大可達到1 gb。
2.後端不會進行分頁——只能接受這個事實。
首先，我嘗試了react virtualized，乙個react元件，可以通過虛擬渲染有效地渲染大型列表。
但幾天後又出現了新的需求：
3.「標準的瀏覽器搜尋（ctrl/cmd + f）功能無法正常工作，必須修復這個問題！」
虛擬列表背後的主要思想是只渲染可見的內容。因此，如果使用者在搜尋框中輸入一些東西，那麼瀏覽器只會搜尋虛擬列表的可見部分。
下圖演示了瀏覽器是如何搜尋虛擬列表的。請注意，滾動後出現的記錄（虛擬列表進行了重新渲染）沒有高亮顯示，儘管包含了要搜尋的值「@」。
我決定建立乙個具有類似預設瀏覽器搜尋功能的自定義搜尋框，但可以搜尋所有的200萬條記錄。
對大量資料進行過濾操作會導致「堆記憶體不足」。截至2023年4月，我沒有找到任何提供內建搜尋/過濾功能的react虛擬列表實現。
經過幾個小時的谷歌搜尋和在stack overflow**上提問之後，我想到了web worker，並使用了****** web worker庫。這個方法的主要思想是將乙個大陣列拆分成更小的部分，並使用web worker非同步處理每個部分。
找到最佳的塊長度是很有必要的。塊的長度越短搜尋速度就越慢，但長度越長，在低配置裝置上出現「堆記憶體不足」的可能性就越大。在我的例子中，根據實驗結果，3000是最佳長度。
這種方法幫助我解決了幾個問題：
你可以在這裡找到應用程式的源**：
演示：這個react應用程式包含3個元件：
searchbox.js——實現搜尋框功能的元件，使用箭頭按鍵導航搜尋結果；
tablesviews.js——渲染結果**的元件，它演示了如何在**之間實現searchbox導航。
英文原文：
如何在不解除安裝Revit外掛程式的情況下禁用外掛程式？
如何在不解除安裝revit外掛程式的情況下禁用某個外掛程式？這個問題對於revit開發的朋友，不是問題，但對於revit的終端使用者，可能就無從下手。解決此問題的答案就是禁用外掛程式的.addin檔案。revit的外掛程式註冊方式之一就是通過.addin檔案，我們叫manifest file。檔案會...
伺服器在不聯網的情況下如何對時
伺服器在不聯網的情況下如何對時 可能是由於伺服器的元器件老化，伺服器時間總有誤差，先是每天慢一分鐘，現在是每天快一分鐘。又不能聯到外網上同時間，手工修改比較麻煩，把幾台伺服器都改一遍，沒有個把小時下不來。不改的話，誤差太大。一兩分鐘還行，五分十分就說不過去了。總不能這樣下去。1 寫一過批處理 p e...
非同步載入的JS如何在chrome瀏覽器斷點除錯？
我們常常利用chrome強大的控制台sources下面進行 斷點除錯，但是通過 getscript等非同步載入js的方式在sources裡面就是找不到，那如何進行debug斷點除錯呢？這是我們用sources斷點除錯的例項圖 圖中我們可以看到，在index.js中我們通過 getscript引入te...