前言####
無(wú)限下拉加載后會(huì)大數(shù)據(jù)量展現(xiàn)導(dǎo)致的性能問(wèn)題,一個(gè)常見(jiàn)的方法在諸多C端都有使用,一句話說(shuō)就是"只渲染所需的元素",只不過(guò)在web端情形更為復(fù)雜點(diǎn).
簡(jiǎn)介####
web端不像安卓可重寫(xiě)滾動(dòng)條,所以在web端即使使用該優(yōu)化方法也要考慮盡可能的去使用原生的滾動(dòng)條和視圖區(qū)內(nèi)正常的排版
可以看下幾個(gè)區(qū)的圖會(huì)比較清晰:
為什么需要pre區(qū),簡(jiǎn)單講下:如果沒(méi)有preview區(qū),需要滾動(dòng)即時(shí)渲染會(huì)卡頓,所以可視情況更改preview區(qū)域
滾動(dòng)條####
視圖區(qū)看起來(lái)會(huì)復(fù)雜點(diǎn),先分析下滾動(dòng)條,滾動(dòng)條要用原生,那么布局必然要填充視圖區(qū)的ContentHeight
----ContentHeight:
總是可以由渲染區(qū)內(nèi)子元素事件獲得
----填充方法:
填充absolute-line:將一個(gè)absolute元素扔到最下方即可
填充empty-box:empty-box處于pre上下2塊區(qū)間,替換原本內(nèi)容高度即可
滾動(dòng)條這邊,暫時(shí)看來(lái)2種方法都沒(méi)什么問(wèn)題,再結(jié)合視圖區(qū)看看哪種合適
視圖區(qū)####
基于滾動(dòng)條給出的2種方法,我們一一分析:
----absolute-line:
如果使用了這種方法,意味著沒(méi)有empty-box去填充,也就意味著自身必須也是absolute:top:npx才能使自己處于渲染區(qū)內(nèi)
顯然這種情況每次滾動(dòng)需要改變一車(chē)的DOM的top,看起來(lái)不那么好~所以暫時(shí)代碼也沒(méi)實(shí)現(xiàn)
----empty-box:
同樣的,依然要實(shí)現(xiàn)渲染區(qū)的定位問(wèn)題
簡(jiǎn)單列下式子:
某個(gè)渲染元素所在定位 : anyTop = topEmptyBoxHeight + beforeRealHeight
盒子總高 : ContentHeight = topEmptyBoxHeight + RealHeight + bottomEmptyBoxHeight
流程 : 滾動(dòng) + 渲染 -->滾動(dòng)條位置 + 高度改變-->更改2個(gè)empty-box的高度 + 顯隱盒子
因?yàn)殇秩舅栀Y源基本是一致的(不考慮reflow),相比上一種方法,這里只更改了上下2個(gè)emptyBox的高度顯然資源消耗會(huì)小的多.
結(jié)尾####
好像由于web端的限制..可選擇的范圍更小,解題更加簡(jiǎn)單了,哈哈哈~
TODO:還可繼續(xù)優(yōu)化顆粒度的問(wèn)題
