資訊專欄INFORMATION COLUMN
摘要：直入正題假設(shè)有十萬條數(shù)據(jù)的列表要展示，該如何優(yōu)化如果直接上，不管你是一條一條插入，還是先存入再一次性插入，白屏?xí)r間都在，瀏覽器應(yīng)該是合并了更新操作，如果不做優(yōu)化，并不會分批渲染。
直入正題：假設(shè)有十萬條數(shù)據(jù)的列表要展示，該如何優(yōu)化？
如果直接上，不管你是一條一條插入，還是先存入fragment再一次性插入，白屏?xí)r間都在6s+，瀏覽器應(yīng)該是合并了dom更新操作，如果不做優(yōu)化，并不會分批渲染。
注意：測試所用的item結(jié)構(gòu)是極其簡單的，一旦渲染的item是復(fù)雜結(jié)構(gòu)那么渲染的時間倍增
item.innerHTML =
${text}
測試;優(yōu)化一，分批渲染requestAnimationFrame
requestAnimationFrame和setTimeout的區(qū)別就不多復(fù)述了，網(wǎng)上一大把。先渲染一部分，然后執(zhí)行循環(huán)邏輯。但是這個部分到底是多少，需要自己調(diào)試了，我寫的是300，但不一定適用。
const totalFn = () => {
window.requestAnimationFrame(() => {
if (i <= data.length) {
computedHeight(data.slice(i, i + 300)); // 執(zhí)行插入dom操作
i += 300;
totalFn();
} else {
root.style.height = max + "px"
}
})
}
totalFn();
這樣能做到秒開，無長時間白屏。
but,如果只是這樣就回答的太簡單了點，可能面試官還希望更深入的解答，比如我十萬條數(shù)據(jù)就算能秒加載，但是渲染復(fù)雜邏輯，說不定會卡卡的，因為頁面元素太多了。在不考慮分頁的情況下，如何進(jìn)一步優(yōu)化。
優(yōu)化二，只渲染可視區(qū)范圍內(nèi)的dom(只提供思路了)
這塊涉及的交互就略復(fù)雜了，首先為了保證和一次性加載出來的效果一致，比如有滾動慣性,需要計算總高度。
簡單的玩法，每一個item是同樣的高度，那么計算高度就很簡單了，但是如果每個item的高度不同，那么要就需要隱藏計算（把dom插入隱藏域，而且需要采用優(yōu)化一的手段，不然會卡），但是那樣又會導(dǎo)致整個計算過程過于漫長，需要尋找到最適合的點。
得到高度后，綁定scroll事件，根據(jù)scrollTop的值，動態(tài)計算展示哪一塊內(nèi)容，為了保證位置，還需要在首部填充空白塊占位。
仍然可能存在的問題，比如scroll觸發(fā)的時機(jī)，scroll在ios下是不能做到實時觸發(fā)的，比如在慣性滾動過程中，觸發(fā)不了scroll事件，可能會導(dǎo)致部分白屏（暫時沒有想到如何解決），如果用iscroll.js,不知道能不能
模擬到原生的效果。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/105234.html
摘要：懶加載方式常見的有淘寶一屏用元素占據(jù)一定的高度，然后再去拉圖片數(shù)據(jù)。但這種方式還是需要元素占位，淘寶一頁的數(shù)據(jù)量其實不算大，因為它結(jié)合了分頁。 背景 showImg(https://segmentfault.com/img/bVbhSVh?w=1606&h=440);大數(shù)據(jù)項目根據(jù)用戶輸入代碼查詢數(shù)據(jù)，用戶的代碼不可控（比如select from db limit 5000），有可能...
摘要：本篇內(nèi)容將記錄并介紹使用進(jìn)行自動化網(wǎng)頁測試，并依靠約定來避免反復(fù)修改測試用例的方案?？偨Y(jié)根據(jù)以上的功能劃分，我們很好的將一整個應(yīng)用拆分成各個測試單元進(jìn)行單元測試。 本篇內(nèi)容將記錄并介紹使用Puppeteer進(jìn)行自動化網(wǎng)頁測試，并依靠約定來避免反復(fù)修改測試用例的方案。主要解決頁面眾多時，修改代碼導(dǎo)致的牽連錯誤無法被發(fā)現(xiàn)的運(yùn)行時問題。文章首發(fā)于個人博客。對前端感興趣希望一起討論的可以加我v...
摘要：策略減少檢測次數(shù)當(dāng)輸入屬性不變時，可以跳過整個變更檢測子樹。現(xiàn)在當(dāng)執(zhí)行更改檢測時，它將從上到下進(jìn)行。并且一旦更改檢測運(yùn)行結(jié)束，它將恢復(fù)整個樹的狀態(tài)。 Angular 2.x+ 臟檢查機(jī)制理解 目前幾種主流的前端框架都已經(jīng)實現(xiàn)雙向綁定特性，但實現(xiàn)的方法各有不同： 發(fā)布者-訂閱者模式（backbone.js） 臟值檢查（angular.js） 數(shù)據(jù)劫持 + 發(fā)布者-訂閱者模式（vue.j...
摘要：迭代次，重復(fù)執(zhí)行三次重復(fù)計算了三次，使用相同的圖片，相同的卷積神經(jīng)網(wǎng)絡(luò)模型，相同的迭代次數(shù)次，卻得到了區(qū)別明顯的三張結(jié)果圖。推測原因由于卷積神經(jīng)網(wǎng)絡(luò)中的若干層，實際是對圖像進(jìn)行了均值處理，導(dǎo)致了邊緣細(xì)節(jié)的丟失。 作為一個脫離了低級趣味的碼農(nóng)，春節(jié)假期閑來無事，決定做一些有意思的事情打發(fā)時間，碰巧看到這篇論文： A neural style of convolutional neural ne...
摘要：一誕生的性能瓶頸，主要有以下原因。注意組件類的第一個字母必須大寫，否則會報錯。組件并不是真實的節(jié)點，而是存在于內(nèi)存之中的一種數(shù)據(jù)結(jié)構(gòu)，叫做虛擬。此外，還提供兩種特殊狀態(tài)的處理函數(shù)。不會隨著時間改變可能不是。 本文為學(xué)習(xí)筆記，適合入門的童鞋，如有錯誤，請多多指教。 一、react誕生 Web app的性能瓶頸，主要有以下原因。 （1）Web基于DOM，而DOM很慢。瀏覽器打開網(wǎng)頁時，需要...
閱讀 3576·2023-04-25 14:20
閱讀 1203·2021-09-10 10:51
閱讀 1157·2019-08-30 15:53
閱讀 466·2019-08-30 15:43
閱讀 2320·2019-08-30 14:13
閱讀 2798·2019-08-30 12:45
閱讀 1209·2019-08-29 16:18
閱讀 1169·2019-08-29 16:12
