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

資訊專欄INFORMATION COLUMN

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

daydream / 3481人閱讀

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

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

相關(guān)文章

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

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

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

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

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

    摘要:所以前端工程師不僅僅是寫好頁面和做好兼容性。對前端工程師的技術(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...

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

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

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

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

    wangym 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<