摘要:后來沒有想到合適的解決方案,臨時(shí)渲染少量數(shù)據(jù)解決了。線程瀏覽器內(nèi)分線程渲染線程事件觸發(fā)線程等。知道了這一點(diǎn),我們就可以想辦法解決它渲染大量數(shù)據(jù)。比之前一下子渲染幾千條數(shù)據(jù)導(dǎo)致渲染引擎卡頓甚至停滯強(qiáng)多啦。
簡介
事情的由來是這樣紫的,目前我負(fù)責(zé)公司內(nèi)部的核心業(yè)務(wù)Gis天眼系統(tǒng)開發(fā),遇到一個(gè)問題就是:后端返回幾千條數(shù)據(jù)導(dǎo)致瀏覽器渲染失敗,瀏覽器幾乎是停滯狀態(tài)。后來沒有想到合適的解決方案,臨時(shí)渲染少量數(shù)據(jù)解決了。我記得清清楚楚,我已經(jīng)看過關(guān)于這樣的問題怎么解決,可惜我沒有使用,原因是學(xué)而不思,看而不用。后來由于家里有些事情,我請假回家休假休息了一段時(shí)間。回來之后開了一次會議,說我同事 實(shí)現(xiàn)了一個(gè)上述問題,用到了js線程。然后我就針對此問題開始了二次思考。就有了本文。
JS線程瀏覽器內(nèi)分js線程、GUI渲染線程、事件觸發(fā)線程、等。大家都知道JS是單線程,但是問題來了,單線程如何實(shí)現(xiàn)異步,比如說我們經(jīng)常使用的Ajax是怎么實(shí)現(xiàn)的呢?當(dāng)你真正了解JS的Event Loop你就會明白!哦:原來如此。這里我就對線程進(jìn)行拋磚引玉,如果想深入學(xué)習(xí)可以看一下這篇文章:
10分鐘理解JS引擎的執(zhí)行機(jī)制
渲染大量數(shù)據(jù)肯定會涉及到GUI渲染線程與js線程。如下簡單的代碼:
//js代碼 var app=document.getElementById("app"); var Fragment=document.createDocumentFragment(); for(var i=0;i<100;i++){ var span=document.createElement("span"); span.innerHTML = i; app.appendChild(span); } //開發(fā)項(xiàng)目時(shí),肯定不會這么操作dom。這里只是一個(gè)例子
從上面代碼可以分析、每次for循環(huán)使用dom進(jìn)行渲染。瀏覽器是怎么渲染的呢?JS線程是單線程,它如果執(zhí)行js線程,GUI渲染線程肯定會等候,這樣一來渲染大量數(shù)據(jù)就會造成頁面卡頓,甚至停滯、奔潰。頁面顯示效果就是一下子這些dom節(jié)點(diǎn)全部渲染出來。知道了這一點(diǎn),我們就可以想辦法解決它(渲染大量數(shù)據(jù))。
初探代碼執(zhí)行方式如下代碼:
console.log(1); setTimeout(function(){ console.log(2); },100); console.log(3);
大家肯定會說這個(gè)很簡單,輸出1 3 2。我想說的是大家看JS的Event Loop了嗎?看了肯定知道其原理。
首先判斷JS是同步還是異步,同步就進(jìn)入主進(jìn)程,異步就進(jìn)入event table
異步任務(wù)在event table中注冊函數(shù),當(dāng)滿足觸發(fā)條件后,被推入event queue
同步任務(wù)進(jìn)入主線程后一直執(zhí)行,直到主線程空閑時(shí),才會去event queue中查看是否有可執(zhí)行的異步任務(wù),如果有就推入主進(jìn)程中。
第一版本我使用了遞歸調(diào)用實(shí)現(xiàn)如下代碼:
var app=document.getElementById("app"); var j=1; /** * 渲染方式 * * @number {number} 數(shù)量 * */ function showDom(number){ console.log("渲染"+(j++)+"次"); for(var i=0;i500){ setTimeout(function(){ showDom(500); init(count-500); },200); }else{ showDom(count); } } init(4000);
可以看出利用上述方式可以簡單輕松實(shí)現(xiàn)渲染大量數(shù)據(jù),給用戶的感覺是,當(dāng)前數(shù)據(jù)很多,我需要一步一步渲染。比之前一下子渲染幾千條數(shù)據(jù)導(dǎo)致GUI渲染引擎卡頓、甚至停滯強(qiáng)多啦。
第二版本接下來我又參考書籍使用了下面的代碼。
/** * 分時(shí)函數(shù) * @ary {Arry} 數(shù)據(jù) * @callback {Function} 回掉函數(shù),一個(gè)參數(shù),當(dāng)前數(shù)據(jù)項(xiàng) * @count {Number} 數(shù)量 * * */ function timeChunk(ary,callback,count){ var objTs=Object.prototype.toString,//檢測類型 t;//定時(shí)器 if(objTs.call(ary)!=="[object Array]"){ return console.warn(ary+"---》應(yīng)該是Arry類型"); } if(objTs.call(callback)!=="[object Function]"){ return console.warn(callback+"---》應(yīng)該是回掉函數(shù)"); } if(objTs.call(count)!=="[object Number]"){ return console.warn(count+"---》應(yīng)該是Number類型"); } //開始執(zhí)行函數(shù) function start(){ for(var i=0;i參考demo demo1 渲染大量數(shù)據(jù)
總結(jié)通過上述方案我們也要提高用戶體驗(yàn)度,讓用戶覺得數(shù)據(jù)多正在努力加載中。如果一次性appendChild內(nèi)容很多渲染引擎會卡死。通過定時(shí)器逐個(gè)appendChild則會提高性能。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/94055.html
摘要:后來沒有想到合適的解決方案,臨時(shí)渲染少量數(shù)據(jù)解決了。線程瀏覽器內(nèi)分線程渲染線程事件觸發(fā)線程等。知道了這一點(diǎn),我們就可以想辦法解決它渲染大量數(shù)據(jù)。比之前一下子渲染幾千條數(shù)據(jù)導(dǎo)致渲染引擎卡頓甚至停滯強(qiáng)多啦。 簡介 事情的由來是這樣紫的,目前我負(fù)責(zé)公司內(nèi)部的核心業(yè)務(wù)Gis天眼系統(tǒng)開發(fā),遇到一個(gè)問題就是:后端返回幾千條數(shù)據(jù)導(dǎo)致瀏覽器渲染失敗,瀏覽器幾乎是停滯狀態(tài)。后來沒有想到合適的解決方案,臨...
摘要:后來沒有想到合適的解決方案,臨時(shí)渲染少量數(shù)據(jù)解決了。線程瀏覽器內(nèi)分線程渲染線程事件觸發(fā)線程等。知道了這一點(diǎn),我們就可以想辦法解決它渲染大量數(shù)據(jù)。比之前一下子渲染幾千條數(shù)據(jù)導(dǎo)致渲染引擎卡頓甚至停滯強(qiáng)多啦。 簡介 事情的由來是這樣紫的,目前我負(fù)責(zé)公司內(nèi)部的核心業(yè)務(wù)Gis天眼系統(tǒng)開發(fā),遇到一個(gè)問題就是:后端返回幾千條數(shù)據(jù)導(dǎo)致瀏覽器渲染失敗,瀏覽器幾乎是停滯狀態(tài)。后來沒有想到合適的解決方案,臨...
摘要:所以前端工程師不僅僅是寫好頁面和做好兼容性。對前端工程師的技術(shù)能力也會帶來考驗(yàn)。這里想要說的是,如果使用了,使用了服務(wù)端渲染,對于前端工程師的個(gè)人素質(zhì)要求會比較高,因?yàn)樾枰幚砗芏喾?wù)端的問題。 背景 我們團(tuán)隊(duì)有個(gè)項(xiàng)目由于開發(fā)時(shí)間較長,且是前后端雜糅的開發(fā)方式,維護(hù)成本很高,在線上暴露的問題很多。而且因?yàn)閷恿斯疽话俣鄺l產(chǎn)品線,每天都會接到大量的客訴和產(chǎn)品線反饋的問題。2017年11...
摘要:純前端開發(fā)主要是針對靜態(tài)頁面。自主權(quán)最大,正常是使用進(jìn)行輔助開發(fā),上線等。大致原因使用是為了和端的保持同步。四總結(jié)對于比較正式的項(xiàng)目,前端技術(shù)選型策略一定是產(chǎn)品收益最大化,用戶在首位。 對于前端團(tuán)隊(duì),可以實(shí)現(xiàn)企業(yè)受益最大化要點(diǎn)。 一、技術(shù)選型的策略 1、保證產(chǎn)品質(zhì)量 (1)功能穩(wěn)?。壕W(wǎng)頁不白屏,不錯(cuò)位,不卡死;操作正常;數(shù)據(jù)精準(zhǔn)。 (2)體驗(yàn)優(yōu)秀:加載體驗(yàn),交互體驗(yàn),視覺體驗(yàn),無障礙訪...
摘要:基本概念的基本概念十分簡單一個(gè)模板數(shù)據(jù)和傳統(tǒng)的字符串模板拼接非常相似例如我們有一個(gè)列表該列表展示一組新聞理想中的狀態(tài)如下新聞新聞新聞新聞新聞如果數(shù)據(jù)是異步獲取的我們可以利用循環(huán)拼接字符串來實(shí)現(xiàn)內(nèi)部的多個(gè)然后再追加到中但是更像是如下的樣子偽代 基本概念 ejs的基本概念十分簡單,一個(gè)html = 模板 + 數(shù)據(jù),和傳統(tǒng)的php字符串模板拼接非常相似. 例如我們有一個(gè)列表該列表展示一組新聞...
閱讀 1109·2021-10-14 09:43
閱讀 1159·2021-10-11 11:07
閱讀 3118·2021-08-18 10:23
閱讀 1495·2019-08-29 16:18
閱讀 1010·2019-08-28 18:21
閱讀 1480·2019-08-26 12:12
閱讀 3767·2019-08-26 10:11
閱讀 2508·2019-08-23 18:04