javascript引擎長時間獨占線程造成卡頓的解決方案
Javascript 引擎的單線程特性使得在處理一個較大的循環(huán)遍歷時會長時間獨占線程,導(dǎo)致其它事件(例如用戶操作)無法及時響應(yīng),嚴重時造成卡頓甚至是假死現(xiàn)象。為解決上述問題,一種可行機制是將大的循環(huán)拆分成若干小的循環(huán)片段分片執(zhí)行,使得Javascript 引擎有時機在各段之間插入執(zhí)行其它事情,從而有效改善性能體驗
Ansync.js
function Ansync (totalCount, segmentCount, workCallback, returnCallback)
{
var num_of_item_for_each_segment = segmentCount;
var num_of_segment = Math.ceil(totalCount / num_of_item_for_each_segment);
var count_of_segment = 0;
var timer;
var start, end;
this.process = function(scope, timeout)
{
if (scope != undefined)
{
workCallback = workCallback.bind(scope);
returnCallback = returnCallback ? returnCallback.bind(scope) : undefined;
}
if (count_of_segment == num_of_segment)
{
clearTimeout(timer);
if (returnCallback != undefined)
returnCallback();
}
else
{
start = count_of_segment * num_of_item_for_each_segment;
end = Math.min(totalCount, (count_of_segment + 1) * num_of_item_for_each_segment);
if (num_of_segment == 1)//needn't create timer
{
workCallback(start, end);
count_of_segment = 1;
this.process();
}
else
{
timer = setTimeout(function ansyncTimeout(){
if (workCallback(start, end)) //finish process if function returns true
{
count_of_segment = num_of_segment;
}
else
{
count_of_segment++;
}
this.scope.process();
}.bind({scope: this}),timeout == undefined ? Ansync.TimeOut : timeout);
}
}
}
}
Ansync.TimeOut = 5;
方法很簡單,但是很實用,有相同項目需求的小伙伴參考下吧
- jsp搜索引擎
- javascript 多種搜索引擎集成的頁面實現(xiàn)代碼
- 為JavaScript提供睡眠功能(sleep) 自編譯JS引擎
- silverlight線程與基于事件驅(qū)動javascript引擎(實現(xiàn)軌跡回放功能)
- javascript模版引擎-tmpl的bug修復(fù)與性能優(yōu)化分析
- js動畫(animate)簡單引擎代碼示例
- 瀏覽器的JavaScript引擎的識別方法
- javascript輕量級模板引擎juicer使用指南
- Powershell小技巧之使用Jint引擎在PowerShell中執(zhí)行Javascript函數(shù)
- 基于jQuery的JavaScript模版引擎JsRender使用指南
- 教你使用javascript簡單寫一個頁面模板引擎
- js如何判斷訪問是來自搜索引擎(蜘蛛人)還是直接訪問
- 黑帽seo劫持程序,js劫持搜索引擎代碼
- 寫給小白的JavaScript引擎指南
相關(guān)文章
整理Javascript基礎(chǔ)語法學(xué)習(xí)筆記
整理Javascript基礎(chǔ)語法學(xué)習(xí)筆記,之前一系列的文章是跟我學(xué)習(xí)Javascript,本文就是進一步學(xué)習(xí)javascript基礎(chǔ)語法,希望大家繼續(xù)關(guān)注2015-11-11webpack的 rquire.context用法實現(xiàn)工程自動化的方法
這篇文章主要介紹了webpack的 rquire.context用法實現(xiàn)工程自動化的方法,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02javascript的console.log()用法小結(jié)
console.log 原先是 Firefox 的 專利 ,嚴格說是安裝了 Firebugs 之后的 Firefox 所獨有的調(diào)試 絕招2012-05-05