前言
創(chuàng)新互聯(lián)長期為近1000家客戶提供的網(wǎng)站建設(shè)服務(wù),團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年,關(guān)注不同地域、不同群體,并針對不同對象提供差異化的產(chǎn)品和服務(wù);打造開放共贏平臺,與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為三穗企業(yè)提供專業(yè)的成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)、外貿(mào)營銷網(wǎng)站建設(shè),三穗網(wǎng)站改版等技術(shù)服務(wù)。擁有十多年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。在實(shí)際工作中,我們很少會遇到一次性需要向頁面中插入數(shù)十萬條數(shù)據(jù)的情況,但是為了豐富我們的知識體系,我們有必要了解并清楚當(dāng)遇到大量數(shù)據(jù)時,如何才能在不卡主頁面的情況下渲染數(shù)據(jù),以及其中背后的原理。
最粗暴的做法(一次性渲染)
<ul?id="container"></ul> 復(fù)制代碼 //?記錄任務(wù)開始時間 let?now?=?Date.now(); //?插入十萬條數(shù)據(jù) const?total?=?100000; //?獲取容器 let?ul?=?document.getElementById('container'); //?將數(shù)據(jù)插入容器中 for?(let?i?=?0;?i?<?total;?i++)?{ ?let?li?=?document.createElement('li'); ?li.innerText?=?~~(Math.random()?*?total) ?ul.appendChild(li); } console.log('JS運(yùn)行時間:',Date.now()?-?now); setTimeout(()=>{ ?console.log('總運(yùn)行時間:',Date.now()?-?now); },0) //?print:?JS運(yùn)行時間:?187 //?print:?總運(yùn)行時間:?2844 復(fù)制代碼
我們對十萬條記錄進(jìn)行循環(huán)操作,JS的運(yùn)行時間為187ms,還是蠻快的,但是最終渲染完成后的總時間確是2844ms。
簡單說明一下,為何兩次console.log的結(jié)果時間差異巨大,并且是如何簡單來統(tǒng)計(jì)JS運(yùn)行時間和總渲染時間:
在 JS 的Event Loop中,當(dāng)JS引擎所管理的執(zhí)行棧中的事件以及所有微任務(wù)事件全部執(zhí)行完后,才會觸發(fā)渲染線程對頁面進(jìn)行渲染
第一個console.log的觸發(fā)時間是在頁面進(jìn)行渲染之前,此時得到的間隔時間為JS運(yùn)行所需要的時間
第二個console.log是放到 setTimeout 中的,它的觸發(fā)時間是在渲染完成,在下一次Event Loop中執(zhí)行的
關(guān)于Event Loop的詳細(xì)內(nèi)容請參見這篇文章-->
依照兩次console.log的結(jié)果,可以得出結(jié)論:
對于大量數(shù)據(jù)渲染的時候,JS運(yùn)算并不是性能的瓶頸,性能的瓶頸主要在于渲染階段
使用定時器
從上面的例子,我們已經(jīng)知道,頁面的卡頓是由于同時渲染大量DOM所引起的,所以我們考慮將渲染過程分批進(jìn)行
在這里,我們使用setTimeout來實(shí)現(xiàn)分批渲染
<ul?id="container"></ul> 復(fù)制代碼 //需要插入的容器 let?ul?=?document.getElementById('container'); //?插入十萬條數(shù)據(jù) let?total?=?100000; //?一次插入?20?條 let?once?=?20; //總頁數(shù) let?page?=?total/once //每條記錄的索引 let?index?=?0; //循環(huán)加載數(shù)據(jù) function?loop(curTotal,curIndex){ ?if(curTotal?<=?0){ ?return?false; ?} ?//每頁多少條 ?let?pageCount?=?Math.min(curTotal?,?once); ?setTimeout(()=>{ ?for(let?i?=?0;?i?<?pageCount;?i++){ ?let?li?=?document.createElement('li'); ?li.innerText?=?curIndex?+?i?+?'?:?'?+?~~(Math.random()?*?total) ?ul.appendChild(li) ?} ?loop(curTotal?-?pageCount,curIndex?+?pageCount) ?},0) } loop(total,index); 復(fù)制代碼
用一個gif圖來看一下效果
我們可以看到,頁面加載的時間已經(jīng)非??炝?,每次刷新時可以很快的看到第一屏的所有數(shù)據(jù),但是當(dāng)我們快速滾動頁面的時候,會發(fā)現(xiàn)頁面出現(xiàn)閃屏或白屏的現(xiàn)象
為什么會出現(xiàn)閃屏現(xiàn)象呢
首先,理清一些概念。FPS表示的是每秒鐘畫面更新次數(shù)。我們平時所看到的連續(xù)畫面都是由一幅幅靜止畫面組成的,每幅畫面稱為一幀,F(xiàn)PS是描述幀變化速度的物理量。
大多數(shù)電腦顯示器的刷新頻率是60Hz,大概相當(dāng)于每秒鐘重繪60次,F(xiàn)PS為60frame/s,為這個值的設(shè)定受屏幕分辨率、屏幕尺寸和顯卡的影響。
因此,當(dāng)你對著電腦屏幕什么也不做的情況下,大多顯示器也會以每秒60次的頻率正在不斷的更新屏幕上的圖像。
為什么你感覺不到這個變化?
那是因?yàn)槿说难劬τ幸曈X停留效應(yīng),即前一副畫面留在大腦的印象還沒消失,緊接著后一副畫面就跟上來了, 這中間只間隔了16.7ms(1000/60≈16.7),所以會讓你誤以為屏幕上的圖像是靜止不動的。
而屏幕給你的這種感覺是對的,試想一下,如果刷新頻率變成1次/秒,屏幕上的圖像就會出現(xiàn)嚴(yán)重的閃爍, 這樣就很容易引起眼睛疲勞、酸痛和頭暈?zāi)垦5劝Y狀。
大多數(shù)瀏覽器都會對重繪操作加以限制,不超過顯示器的重繪頻率,因?yàn)榧词钩^那個頻率用戶體驗(yàn)也不會有提升。 因此,最平滑動畫的最佳循環(huán)間隔是1000ms/60,約等于16.6ms。
直觀感受,不同幀率的體驗(yàn):
幀率能夠達(dá)到 50 ~ 60 FPS 的動畫將會相當(dāng)流暢,讓人倍感舒適;
幀率在 30 ~ 50 FPS 之間的動畫,因各人敏感程度不同,舒適度因人而異;
幀率在 30 FPS 以下的動畫,讓人感覺到明顯的卡頓和不適感;
幀率波動很大的動畫,亦會使人感覺到卡頓。
簡單聊一下 setTimeout 和閃屏現(xiàn)象
setTimeout的執(zhí)行時間并不是確定的。在JS中,setTimeout任務(wù)被放進(jìn)事件隊(duì)列中,只有主線程執(zhí)行完才會去檢查事件隊(duì)列中的任務(wù)是否需要執(zhí)行,因此setTimeout的實(shí)際執(zhí)行時間可能會比其設(shè)定的時間晚一些。
刷新頻率受屏幕分辨率和屏幕尺寸的影響,因此不同設(shè)備的刷新頻率可能會不同,而setTimeout只能設(shè)置一個固定時間間隔,這個時間不一定和屏幕的刷新時間相同。
以上兩種情況都會導(dǎo)致setTimeout的執(zhí)行步調(diào)和屏幕的刷新步調(diào)不一致。
在setTimeout中對dom進(jìn)行操作,必須要等到屏幕下次繪制時才能更新到屏幕上,如果兩者步調(diào)不一致,就可能導(dǎo)致中間某一幀的操作被跨越過去,而直接更新下一幀的元素,從而導(dǎo)致丟幀現(xiàn)象。
使用 requestAnimationFrame
與setTimeout相比,requestAnimationFrame大的優(yōu)勢是由系統(tǒng)來決定回調(diào)函數(shù)的執(zhí)行時機(jī)。
如果屏幕刷新率是60Hz,那么回調(diào)函數(shù)就每16.7ms被執(zhí)行一次,如果刷新率是75Hz,那么這個時間間隔就變成了1000/75=13.3ms,換句話說就是,requestAnimationFrame的步伐跟著系統(tǒng)的刷新步伐走。它能保證回調(diào)函數(shù)在屏幕每一次的刷新間隔中只被執(zhí)行一次,這樣就不會引起丟幀現(xiàn)象。
我們使用requestAnimationFrame來進(jìn)行分批渲染:
<ul?id="container"></ul> 復(fù)制代碼 //需要插入的容器 let?ul?=?document.getElementById('container'); //?插入十萬條數(shù)據(jù) let?total?=?100000; //?一次插入?20?條 let?once?=?20; //總頁數(shù) let?page?=?total/once //每條記錄的索引 let?index?=?0; //循環(huán)加載數(shù)據(jù) function?loop(curTotal,curIndex){ ?if(curTotal?<=?0){ ?return?false; ?} ?//每頁多少條 ?let?pageCount?=?Math.min(curTotal?,?once); ?window.requestAnimationFrame(function(){ ?for(let?i?=?0;?i?<?pageCount;?i++){ ?let?li?=?document.createElement('li'); ?li.innerText?=?curIndex?+?i?+?'?:?'?+?~~(Math.random()?*?total) ?ul.appendChild(li) ?} ?loop(curTotal?-?pageCount,curIndex?+?pageCount) ?}) } loop(total,index); 復(fù)制代碼
看下效果
我們可以看到,頁面加載的速度很快,并且滾動的時候,也很流暢沒有出現(xiàn)閃爍丟幀的現(xiàn)象。
這就結(jié)束了么,還可以再優(yōu)化么?
當(dāng)然~~
使用 DocumentFragment
先解釋一下什么是 DocumentFragment ,文獻(xiàn)引用自MDN
DocumentFragment,文檔片段接口,表示一個沒有父級文件的最小文檔對象。它被作為一個輕量版的Document使用,用于存儲已排好版的或尚未打理好格式的XML片段。大的區(qū)別是因?yàn)镈ocumentFragment不是真實(shí)DOM樹的一部分,它的變化不會觸發(fā)DOM樹的(重新渲染) ,且不會導(dǎo)致性能等問題。
可以使用document.createDocumentFragment方法或者構(gòu)造函數(shù)來創(chuàng)建一個空的DocumentFragment
從MDN的說明中,我們得知DocumentFragments是DOM節(jié)點(diǎn),但并不是DOM樹的一部分,可以認(rèn)為是存在內(nèi)存中的,所以將子元素插入到文檔片段時不會引起頁面回流。
最后修改代碼如下:
<ul?id="container"></ul> 復(fù)制代碼 //需要插入的容器 let?ul?=?document.getElementById('container'); //?插入十萬條數(shù)據(jù) let?total?=?100000; //?一次插入?20?條 let?once?=?20; //總頁數(shù) let?page?=?total/once //每條記錄的索引 let?index?=?0; //循環(huán)加載數(shù)據(jù) function?loop(curTotal,curIndex){ ?if(curTotal?<=?0){ ?return?false; ?} ?//每頁多少條 ?let?pageCount?=?Math.min(curTotal?,?once); ?window.requestAnimationFrame(function(){ ?let?fragment?=?document.createDocumentFragment(); ?for(let?i?=?0;?i?<?pageCount;?i++){ ?let?li?=?document.createElement('li'); ?li.innerText?=?curIndex?+?i?+?'?:?'?+?~~(Math.random()?*?total) ?fragment.appendChild(li) ?} ?ul.appendChild(fragment) ?loop(curTotal?-?pageCount,curIndex?+?pageCount) ?}) } loop(total,index); 復(fù)制代碼
最后
本文更多的是提供一個思路,通過時間分片的方式來同時加載大量簡單DOM。對于復(fù)雜DOM的情況,一般會用到虛擬列表的方式來實(shí)現(xiàn),關(guān)于這一問題,會持續(xù)整理,敬請期待。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn,海內(nèi)外云服務(wù)器15元起步,三天無理由+7*72小時售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢,專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
本文標(biāo)題:「中高級前端」高性能渲染十萬條數(shù)據(jù)(時間分片)-創(chuàng)新互聯(lián)
網(wǎng)頁路徑:http://bm7419.com/article14/dcosge.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站收錄、商城網(wǎng)站、標(biāo)簽優(yōu)化、品牌網(wǎng)站設(shè)計(jì)、做網(wǎng)站、網(wǎng)站內(nèi)鏈
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)