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