渲染大量數據我是這樣操作的

daydream 發布于2019-08-22 16:06 / 3474人閱讀

摘要：后來沒有想到合適的解決方案，臨時渲染少量數據解決了。線程瀏覽器內分線程渲染線程事件觸發線程等。知道了這一點，我們就可以想辦法解決它渲染大量數據。比之前一下子渲染幾千條數據導致渲染引擎卡頓甚至停滯強多啦。

簡介

事情的由來是這樣紫的，目前我負責公司內部的核心業務Gis天眼系統開發，遇到一個問題就是：后端返回幾千條數據導致瀏覽器渲染失敗，瀏覽器幾乎是停滯狀態。后來沒有想到合適的解決方案，臨時渲染少量數據解決了。我記得清清楚楚，我已經看過關于這樣的問題怎么解決，可惜我沒有使用，原因是學而不思，看而不用。后來由于家里有些事情，我請假回家休假休息了一段時間。回來之后開了一次會議，說我同事實現了一個上述問題，用到了js線程。然后我就針對此問題開始了二次思考。就有了本文。

JS線程

瀏覽器內分js線程、GUI渲染線程、事件觸發線程、等。大家都知道JS是單線程，但是問題來了，單線程如何實現異步，比如說我們經常使用的Ajax是怎么實現的呢？當你真正了解JS的Event Loop你就會明白！哦：原來如此。這里我就對線程進行拋磚引玉，如果想深入學習可以看一下這篇文章：
10分鐘理解JS引擎的執行機制

如何渲染大數據

渲染大量數據肯定會涉及到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);
}
//開發項目時，肯定不會這么操作dom。這里只是一個例子

從上面代碼可以分析、每次for循環使用dom進行渲染。瀏覽器是怎么渲染的呢？JS線程是單線程，它如果執行js線程，GUI渲染線程肯定會等候，這樣一來渲染大量數據就會造成頁面卡頓，甚至停滯、奔潰。頁面顯示效果就是一下子這些dom節點全部渲染出來。知道了這一點，我們就可以想辦法解決它（渲染大量數據）。

初探代碼執行方式

如下代碼：

console.log(1);
setTimeout(function(){
    console.log(2);
},100);
console.log(3);

大家肯定會說這個很簡單，輸出1 3 2。我想說的是大家看JS的Event Loop了嗎？看了肯定知道其原理。

首先判斷JS是同步還是異步,同步就進入主進程,異步就進入event table

異步任務在event table中注冊函數,當滿足觸發條件后,被推入event queue

同步任務進入主線程后一直執行,直到主線程空閑時,才會去event queue中查看是否有可執行的異步任務,如果有就推入主進程中。

第一版本

我使用了遞歸調用實現如下代碼：

var app=document.getElementById("app");

var j=1;
/**
 * 渲染方式
 * 
 * @number {number} 數量
 * */
function showDom(number){
    console.log("渲染"+(j++)+"次");
    for(var i=0;i500){
        setTimeout(function(){
            showDom(500);
            init(count-500);
        },200);
    }else{
        showDom(count);
    }
}

init(4000);

可以看出利用上述方式可以簡單輕松實現渲染大量數據，給用戶的感覺是，當前數據很多，我需要一步一步渲染。比之前一下子渲染幾千條數據導致GUI渲染引擎卡頓、甚至停滯強多啦。

第二版本

接下來我又參考書籍使用了下面的代碼。

/**
 * 分時函數
 * @ary {Arry} 數據
 * @callback {Function} 回掉函數，一個參數，當前數據項
 * @count {Number} 數量
 * 
 * */
function timeChunk(ary,callback,count){
    var objTs=Object.prototype.toString,//檢測類型
    t;//定時器
    if(objTs.call(ary)!=="[object Array]"){
        return console.warn(ary+"---》應該是Arry類型");
    }
    if(objTs.call(callback)!=="[object Function]"){
        return console.warn(callback+"---》應該是回掉函數");
    }
    if(objTs.call(count)!=="[object Number]"){
        return console.warn(count+"---》應該是Number類型");
    }
    //開始執行函數    
    function start(){
        for(var i=0;i
參考demo
demo1 渲染大量數據
總結
通過上述方案我們也要提高用戶體驗度，讓用戶覺得數據多正在努力加載中。如果一次性appendChild內容很多渲染引擎會卡死。通過定時器逐個appendChild則會提高性能。

GPU云服務器云服務器大量的數據大量數據的統計數據倉庫是從大量的數據比如這樣的

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94055.html

渲染大量數據我是這樣操作的

摘要：后來沒有想到合適的解決方案，臨時渲染少量數據解決了。線程瀏覽器內分線程渲染線程事件觸發線程等。知道了這一點，我們就可以想辦法解決它渲染大量數據。比之前一下子渲染幾千條數據導致渲染引擎卡頓甚至停滯強多啦。簡介事情的由來是這樣紫的，目前我負責公司內部的核心業務Gis天眼系統開發，遇到一個問題就是：后端返回幾千條數據導致瀏覽器渲染失敗，瀏覽器幾乎是停滯狀態。后來沒有想到合適的解決方案，臨...

ThreeWords 2019-08-30 14:23 評論0 收藏0
渲染大量數據我是這樣操作的

摘要：后來沒有想到合適的解決方案，臨時渲染少量數據解決了。線程瀏覽器內分線程渲染線程事件觸發線程等。知道了這一點，我們就可以想辦法解決它渲染大量數據。比之前一下子渲染幾千條數據導致渲染引擎卡頓甚至停滯強多啦。簡介事情的由來是這樣紫的，目前我負責公司內部的核心業務Gis天眼系統開發，遇到一個問題就是：后端返回幾千條數據導致瀏覽器渲染失敗，瀏覽器幾乎是停滯狀態。后來沒有想到合適的解決方案，臨...

instein 2019-08-02 10:09 評論0 收藏0
我是如何使用React+Redux構建大型應用的

摘要：所以前端工程師不僅僅是寫好頁面和做好兼容性。對前端工程師的技術能力也會帶來考驗。這里想要說的是，如果使用了，使用了服務端渲染，對于前端工程師的個人素質要求會比較高，因為需要處理很多服務端的問題。背景我們團隊有個項目由于開發時間較長，且是前后端雜糅的開發方式，維護成本很高，在線上暴露的問題很多。而且因為對接了公司一百多條產品線，每天都會接到大量的客訴和產品線反饋的問題。2017年11...

canopus4u 2019-08-22 13:46 評論0 收藏0
方案設計--如何看待前端框架選型 ?

摘要：純前端開發主要是針對靜態頁面。自主權最大，正常是使用進行輔助開發，上線等。大致原因使用是為了和端的保持同步。四總結對于比較正式的項目，前端技術選型策略一定是產品收益最大化，用戶在首位。對于前端團隊，可以實現企業受益最大化要點。一、技術選型的策略 1、保證產品質量（1）功能穩健：網頁不白屏，不錯位，不卡死；操作正常；數據精準。（2）體驗優秀：加載體驗，交互體驗，視覺體驗，無障礙訪...

gnehc 2019-08-23 18:13 評論0 收藏0
EJS學習指南

摘要：基本概念的基本概念十分簡單一個模板數據和傳統的字符串模板拼接非常相似例如我們有一個列表該列表展示一組新聞理想中的狀態如下新聞新聞新聞新聞新聞如果數據是異步獲取的我們可以利用循環拼接字符串來實現內部的多個然后再追加到中但是更像是如下的樣子偽代基本概念 ejs的基本概念十分簡單,一個html = 模板 + 數據,和傳統的php字符串模板拼接非常相似. 例如我們有一個列表該列表展示一組新聞...

wangym 2019-08-02 11:55 評論0 收藏0