javascript引擎長時間獨(dú)占線程造成卡頓的解決方案
Javascript 引擎的單線程特性使得在處理一個較大的循環(huán)遍歷時會長時間獨(dú)占線程,導(dǎo)致其它事件(例如用戶操作)無法及時響應(yīng),嚴(yán)重時造成卡頓甚至是假死現(xiàn)象。為解決上述問題,一種可行機(jī)制是將大的循環(huán)拆分成若干小的循環(huán)片段分片執(zhí)行,使得Javascript 引擎有時機(jī)在各段之間插入執(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)文章
微信小程序的數(shù)據(jù)存儲與Django等服務(wù)發(fā)送請求?講解
這篇文章主要為大家介紹了微信小程序的數(shù)據(jù)存儲與Django等服務(wù)發(fā)送請求講解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-04-04
JS 通過系統(tǒng)時間限定動態(tài)添加 select option的實例代碼
這篇文章主要介紹了JS 通過系統(tǒng)時間限定 動態(tài)添加 select option的實例代碼,非常不錯具有參考借鑒價值,需要的朋友可以參考下2016-06-06
關(guān)于JavaScript實現(xiàn)動畫時動畫抖動的原因與解決方法
最近在使用JS動畫做一些練習(xí)的時候我發(fā)現(xiàn)在動畫執(zhí)行時間內(nèi)快速移開鼠標(biāo)時會出現(xiàn)動畫因鼠標(biāo)移動過快從而導(dǎo)致代碼沖突讓畫面抖動的bug,這篇文章主要給大家介紹了關(guān)于JavaScript實現(xiàn)動畫時動畫抖動的原因與解決方法,需要的朋友可以參考下2022-06-06
淺析JS中常用類型轉(zhuǎn)換及運(yùn)算符表達(dá)式
這篇文章主要介紹了關(guān)于JS中涉及的常用類型轉(zhuǎn)換及運(yùn)算符表達(dá)式 ,包括js中常用類型轉(zhuǎn)換,及常用的運(yùn)算符表達(dá)式,需要的朋友可以參考下2017-07-07
js合并兩個數(shù)組生成合并后的key:value數(shù)組
這篇文章主要是介紹了js將兩個數(shù)組合并為類json方式,需要的朋友可以參考下2018-05-05

