settimeout(() =>countofrender += 1;
loop();
} function
loop()
} loop();
}, 0)
原理：渲染大資料時，合理使用createdocumentfragment和requestanimationframe，將操作切分為一小段一小段執行。
documentfragment：
是乙個虛擬的dom列表，可以儲存待處理的xml片段（el元素），因為他不在真實的dom結構中，所以對它所做的操作不會觸發瀏覽器的回流，只會在他插入dom的時候觸發一次而已。
上面把多個動態生成的div插入到了虛擬節點裡，在最後完成之後只做了一次插入，這樣就只會觸發一次回流。
但是在數量太多的時候，哪怕是一次插入，也會因為瀏覽器渲染不過來導致失去響應，這時候就需要增加一定的時間間隔，可以使用settimeout，也可以使用乙個api------requestanimationframe
requestanimationframe()
1.方法是為了動畫 專門使用的api，在通常的動畫中會定義乙個定時器來幾秒幾秒的發生變化，但是為了效能和更加方便，它提供了這個可以在1秒鐘執行大約60次(≈16.7ms)**的api。
而且會把這一刻所有的dom操作快取起來，在一次回流重繪中完成操作，它的每次呼叫並不是指定時間的，而是跟緊瀏覽器的重新整理頻率，所以可以做到：在瀏覽器的重新整理頻率時進行回流，保證效能效率。
當頁面不是啟用狀態的情況下，這個函式將會停止**，進行暫停來節省cpu操作。啟用時再繼續。
在元素隱藏時不會進行重繪回流。
2.它的返回值為乙個long的識別符號，和settimeout一樣，可以呼叫cancelanimationframe()傳入這個識別符號來取消這個**。
使用這個可以在瀏覽器下一次』重新整理』的時候執行指定的**，在這裡來插入這多個節點。
使用這樣可以大批量插入很多資料 頁面也不會失去響應卡住，可以保證比較好的效能
前端處理上萬條資料的優化
最近碰到一面試題給了乙個請求介面，沒有分頁，一共一萬條資料，並且讓前端渲染在頁面上，這個場景一般在實際應用場景不多見，一般後端都會設定分頁查詢，但是面試官考的就是前端對於大量資料的處理能力。看本文之前不妨思考下，如果讓你做，你會怎麼處理呢？先給出 吧！列表資料搜尋 var search method...
sqlserver 如何瞬間執行上萬條資料
核心的內容是 使用自定義表型別 第一步 建立儲存過程p t1declareinfo upload new 引數 t1declareinfo uploadpnsn param 型別 t1declareinfo uploadpnsn t1agentid param 型別 varchar 50 說明 引數...
前端渲染幾十萬條資料不卡頓
渲染大資料時,合理使用createdocumentfragment和requestanimationframe,將操作分為一小段執行.用來建立乙個虛擬的節點物件,或者說說是用來建立文件碎片節點,可以包含各種型別的節點,在建立之初是空的.建立的節點不屬於文件樹,繼承的parentnode屬性總是nul...