JS渲染十萬數據列表

nemo 發布于2019-08-23 18:26 / 2516人閱讀

摘要：直入正題假設有十萬條數據的列表要展示，該如何優化如果直接上，不管你是一條一條插入，還是先存入再一次性插入，白屏時間都在，瀏覽器應該是合并了更新操作，如果不做優化，并不會分批渲染。

直入正題：假設有十萬條數據的列表要展示，該如何優化？
如果直接上，不管你是一條一條插入，還是先存入fragment再一次性插入，白屏時間都在6s+，瀏覽器應該是合并了dom更新操作，如果不做優化，并不會分批渲染。
注意：測試所用的item結構是極其簡單的，一旦渲染的item是復雜結構那么渲染的時間倍增

item.innerHTML =

${text}

測試;

優化一，分批渲染requestAnimationFrame
requestAnimationFrame和setTimeout的區別就不多復述了，網上一大把。先渲染一部分，然后執行循環邏輯。但是這個部分到底是多少，需要自己調試了，我寫的是300，但不一定適用。

    const totalFn = () => {
      window.requestAnimationFrame(() => {
        if (i <= data.length) {
          computedHeight(data.slice(i, i + 300)); // 執行插入dom操作
          i += 300;
          totalFn();
        } else {
          root.style.height = max + "px"
        }
      })
    }
    totalFn();

這樣能做到秒開，無長時間白屏。

but,如果只是這樣就回答的太簡單了點，可能面試官還希望更深入的解答，比如我十萬條數據就算能秒加載，但是渲染復雜邏輯，說不定會卡卡的，因為頁面元素太多了。在不考慮分頁的情況下，如何進一步優化。

優化二，只渲染可視區范圍內的dom(只提供思路了)

這塊涉及的交互就略復雜了，首先為了保證和一次性加載出來的效果一致，比如有滾動慣性,需要計算總高度。
簡單的玩法，每一個item是同樣的高度，那么計算高度就很簡單了，但是如果每個item的高度不同，那么要就需要隱藏計算（把dom插入隱藏域，而且需要采用優化一的手段，不然會卡），但是那樣又會導致整個計算過程過于漫長，需要尋找到最適合的點。
得到高度后，綁定scroll事件，根據scrollTop的值，動態計算展示哪一塊內容，為了保證位置，還需要在首部填充空白塊占位。
仍然可能存在的問題，比如scroll觸發的時機，scroll在ios下是不能做到實時觸發的，比如在慣性滾動過程中，觸發不了scroll事件，可能會導致部分白屏（暫時沒有想到如何解決），如果用iscroll.js,不知道能不能
模擬到原生的效果。

GPU云服務器云服務器 js數據渲染插件采用js渲染數據 js渲染數據抽取 js 數據列表

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/105234.html

vueTable大數據展示優化

摘要：懶加載方式常見的有淘寶一屏用元素占據一定的高度，然后再去拉圖片數據。但這種方式還是需要元素占位，淘寶一頁的數據量其實不算大，因為它結合了分頁。背景 showImg(https://segmentfault.com/img/bVbhSVh?w=1606&h=440);大數據項目根據用戶輸入代碼查詢數據，用戶的代碼不可控（比如select from db limit 5000），有可能...

JasinYip 2019-08-23 12:15 評論0 收藏0
Puppeteer前端自動化測試實踐

摘要：本篇內容將記錄并介紹使用進行自動化網頁測試，并依靠約定來避免反復修改測試用例的方案?？偨Y根據以上的功能劃分，我們很好的將一整個應用拆分成各個測試單元進行單元測試。本篇內容將記錄并介紹使用Puppeteer進行自動化網頁測試，并依靠約定來避免反復修改測試用例的方案。主要解決頁面眾多時，修改代碼導致的牽連錯誤無法被發現的運行時問題。文章首發于個人博客。對前端感興趣希望一起討論的可以加我v...

Jensen 2019-08-23 15:20 評論0 收藏0
Angular 2.x+ 臟檢查機制理解

摘要：策略減少檢測次數當輸入屬性不變時，可以跳過整個變更檢測子樹?，F在當執行更改檢測時，它將從上到下進行。并且一旦更改檢測運行結束，它將恢復整個樹的狀態。 Angular 2.x+ 臟檢查機制理解目前幾種主流的前端框架都已經實現雙向綁定特性，但實現的方法各有不同：發布者-訂閱者模式（backbone.js）臟值檢查（angular.js）數據劫持 + 發布者-訂閱者模式（vue.j...

W4n9Hu1 2019-08-20 16:51 評論0 收藏0
梵高油畫用深度卷積神經網絡迭代十萬次是什么效果？

摘要：迭代次，重復執行三次重復計算了三次，使用相同的圖片，相同的卷積神經網絡模型，相同的迭代次數次，卻得到了區別明顯的三張結果圖。推測原因由于卷積神經網絡中的若干層，實際是對圖像進行了均值處理，導致了邊緣細節的丟失。作為一個脫離了低級趣味的碼農，春節假期閑來無事，決定做一些有意思的事情打發時間，碰巧看到這篇論文： A neural style of convolutional neural ne...

Ethan815 2019-04-25 18:07 評論0 收藏0
不得不聊聊的react--入門篇

摘要：一誕生的性能瓶頸，主要有以下原因。注意組件類的第一個字母必須大寫，否則會報錯。組件并不是真實的節點，而是存在于內存之中的一種數據結構，叫做虛擬。此外，還提供兩種特殊狀態的處理函數。不會隨著時間改變可能不是。本文為學習筆記，適合入門的童鞋，如有錯誤，請多多指教。一、react誕生 Web app的性能瓶頸，主要有以下原因。（1）Web基于DOM，而DOM很慢。瀏覽器打開網頁時，需要...

lidashuang 2019-08-19 18:04 評論0 收藏0