成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

渲染大量數(shù)據(jù)我是這樣操作的

instein / 1242人閱讀

摘要:后來(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ù)

渲染大量數(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

相關(guān)文章

  • 渲染大量數(shù)據(jù)我是這樣操作

    摘要:后來(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)有想到合適的解決方案,臨...

    ThreeWords 評(píng)論0 收藏0
  • 渲染大量數(shù)據(jù)我是這樣操作

    摘要:后來(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)有想到合適的解決方案,臨...

    daydream 評(píng)論0 收藏0
  • 我是如何使用React+Redux構(gòu)建大型應(yīng)用

    摘要:所以前端工程師不僅僅是寫(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...

    canopus4u 評(píng)論0 收藏0
  • 方案設(shè)計(jì)--如何看待前端框架選型 ?

    摘要:純前端開(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ú)障礙訪...

    gnehc 評(píng)論0 收藏0
  • EJS學(xué)習(xí)指南

    摘要:基本概念的基本概念十分簡(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è)列表該列表展示一組新聞...

    wangym 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

instein

|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<