資訊專欄INFORMATION COLUMN
摘要：后來沒有想到合適的解決方案，臨時渲染少量數據解決了。線程瀏覽器內分線程渲染線程事件觸發(fā)線程等。知道了這一點，我們就可以想辦法解決它渲染大量數據。比之前一下子渲染幾千條數據導致渲染引擎卡頓甚至停滯強多啦。
簡介
事情的由來是這樣紫的，目前我負責公司內部的核心業(yè)務Gis天眼系統(tǒng)開發(fā)，遇到一個問題就是：后端返回幾千條數據導致瀏覽器渲染失敗，瀏覽器幾乎是停滯狀態(tài)。后來沒有想到合適的解決方案，臨時渲染少量數據解決了。我記得清清楚楚，我已經看過關于這樣的問題怎么解決，可惜我沒有使用，原因是學而不思，看而不用。后來由于家里有些事情，我請假回家休假休息了一段時間。回來之后開了一次會議，說我同事 實現了一個上述問題，用到了js線程。然后我就針對此問題開始了二次思考。就有了本文。
JS線程瀏覽器內分js線程、GUI渲染線程、事件觸發(fā)線程、等。大家都知道JS是單線程，但是問題來了，單線程如何實現異步，比如說我們經常使用的Ajax是怎么實現的呢？當你真正了解JS的Event Loop你就會明白！哦：原來如此。這里我就對線程進行拋磚引玉，如果想深入學習可以看一下這篇文章：
10分鐘理解JS引擎的執(zhí)行機制
渲染大量數據肯定會涉及到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ā)項目時，肯定不會這么操作dom。這里只是一個例子
從上面代碼可以分析、每次for循環(huán)使用dom進行渲染。瀏覽器是怎么渲染的呢？JS線程是單線程，它如果執(zhí)行js線程，GUI渲染線程肯定會等候，這樣一來渲染大量數據就會造成頁面卡頓，甚至停滯、奔潰。頁面顯示效果就是一下子這些dom節(jié)點全部渲染出來。知道了這一點，我們就可以想辦法解決它（渲染大量數據）。
初探代碼執(zhí)行方式如下代碼：
console.log(1);
setTimeout(function(){
console.log(2);
},100);
console.log(3);
大家肯定會說這個很簡單，輸出1 3 2。我想說的是大家看JS的Event Loop了嗎？看了肯定知道其原理。
首先判斷JS是同步還是異步,同步就進入主進程,異步就進入event table
異步任務在event table中注冊函數,當滿足觸發(fā)條件后,被推入event queue
同步任務進入主線程后一直執(zhí)行,直到主線程空閑時,才會去event queue中查看是否有可執(zhí)行的異步任務,如果有就推入主進程中。
第一版本我使用了遞歸調用實現如下代碼：
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類型");
}
//開始執(zhí)行函數
function start(){
for(var i=0;i
參考demo
demo1 渲染大量數據
總結
通過上述方案我們也要提高用戶體驗度，讓用戶覺得數據多正在努力加載中。如果一次性appendChild內容很多渲染引擎會卡死。通過定時器逐個appendChild則會提高性能。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115988.html
摘要：后來沒有想到合適的解決方案，臨時渲染少量數據解決了。線程瀏覽器內分線程渲染線程事件觸發(fā)線程等。知道了這一點，我們就可以想辦法解決它渲染大量數據。比之前一下子渲染幾千條數據導致渲染引擎卡頓甚至停滯強多啦。 簡介 事情的由來是這樣紫的，目前我負責公司內部的核心業(yè)務Gis天眼系統(tǒng)開發(fā)，遇到一個問題就是：后端返回幾千條數據導致瀏覽器渲染失敗，瀏覽器幾乎是停滯狀態(tài)。后來沒有想到合適的解決方案，臨...
摘要：后來沒有想到合適的解決方案，臨時渲染少量數據解決了。線程瀏覽器內分線程渲染線程事件觸發(fā)線程等。知道了這一點，我們就可以想辦法解決它渲染大量數據。比之前一下子渲染幾千條數據導致渲染引擎卡頓甚至停滯強多啦。 簡介 事情的由來是這樣紫的，目前我負責公司內部的核心業(yè)務Gis天眼系統(tǒng)開發(fā)，遇到一個問題就是：后端返回幾千條數據導致瀏覽器渲染失敗，瀏覽器幾乎是停滯狀態(tài)。后來沒有想到合適的解決方案，臨...
摘要：所以前端工程師不僅僅是寫好頁面和做好兼容性。對前端工程師的技術能力也會帶來考驗。這里想要說的是，如果使用了，使用了服務端渲染，對于前端工程師的個人素質要求會比較高，因為需要處理很多服務端的問題。 背景 我們團隊有個項目由于開發(fā)時間較長，且是前后端雜糅的開發(fā)方式，維護成本很高，在線上暴露的問題很多。而且因為對接了公司一百多條產品線，每天都會接到大量的客訴和產品線反饋的問題。2017年11...
摘要：純前端開發(fā)主要是針對靜態(tài)頁面。自主權最大，正常是使用進行輔助開發(fā)，上線等。大致原因使用是為了和端的保持同步。四總結對于比較正式的項目，前端技術選型策略一定是產品收益最大化，用戶在首位。 對于前端團隊，可以實現企業(yè)受益最大化要點。 一、技術選型的策略 1、保證產品質量 （1）功能穩(wěn)健：網頁不白屏，不錯位，不卡死；操作正常；數據精準。 （2）體驗優(yōu)秀：加載體驗，交互體驗，視覺體驗，無障礙訪...
閱讀 2692·2023-04-25 19:13
閱讀 4010·2021-09-22 15:34
閱讀 3053·2019-08-30 14:23
閱讀 1461·2019-08-29 17:17
閱讀 1603·2019-08-29 16:05
閱讀 1537·2019-08-29 13:26
閱讀 1217·2019-08-29 13:19
閱讀 553·2019-08-29 13:16
