js 性能優(yōu)化之快速響應的用戶界面
用于執(zhí)行JavaScript和更新用戶界面的進程通常被稱為“瀏覽器UI線程”。JavaScript和用戶界面更新在同一個進程中運行，因此一次只能處理一件事情。
·任何JavaScript任務都不應當執(zhí)行超過100毫秒，過長的運行時間導致UI更新出現(xiàn)明顯延遲，從而會影響用戶體驗。
·瀏覽器有兩類限制JavaScript任務的運行時間的機制，調(diào)用棧大小限制（即記錄自腳本開始以來執(zhí)行的語句的數(shù)量）和長時間運行腳本限制（記錄腳本執(zhí)行的總時長，超時的時候會有彈框提示用戶[chrome沒有單獨的程云霞腳本限制，替代做法是依賴其通用奔潰檢測系統(tǒng)來處理此類問題]）。
一些優(yōu)化JavaScript任務時間的常見做法：
①使定時器讓出時間片段
1.使用定時器處理數(shù)組。當處理過程不須同步，數(shù)據(jù)不須按順序處理時。即可考慮用定時器分解任務。
如：
function processArray(items,process,callback){
var todo = items.concat();
setTimeout(function(){
process(todo.shift());
if(todo.length > 0){
setTimeout(arguments.callee,25);
} else {
callback(items);
}
},25);
}
var items = [1,2,3];
function output(value){
console.log(value);
}
processArray(items,outputValue,function(){
console.log('finished output!')
});
②分割任務
如果一個函數(shù)的運行時間過長，那么可以把它拆分為一系列能在較短時間內(nèi)完成的子函數(shù)。
如：
function multistep(steps,args,callback){
var tasks = steps.concat();
setTimeout(function(){
var task = tasks.shift();
task.apply(null,args||[]);
if(tasks.length > 0){
setTimeout(arguments.callee,25);
} else {
callback();
}
},25);
}
function saveDocument(id){
var tasks = [open,write,close];
multistep(tasks,[id],function(){
console.log('finished!');
})
}
③記錄代碼的運行時間
有時每次只執(zhí)行一個任務的效率不高，且在兩次之間產(chǎn)生25ms的延遲就更不好了。所以可以添加時間檢測機制來改進processArray()方法。
如：
function timeProcessArray(items,process,callback){
var todo = items.concat();
setTimeout(function(){
var start = +new Date();
do{
process(todo.shift());
}while(todo.length > 0 &&(+new Date() - start < 50)) ;
if(todo.length > 0){
setTimeout(arguments.callee,25);
} else {
callback(items);
}
},25);
}
注意，定時器雖然可以提高性能，但是過度使用會適得其反。需要控制web應用中的使用數(shù)量。
④使用Worker
Web Worker是新版瀏覽器支持的特性，它允許在UI線程外部執(zhí)行JavaScript代碼，從而避免鎖定UI。
參考資料：http://www.alloyteam.com/2015/11/deep-in-web-worker/
備注：
個人覺得，Worker的缺陷還是太多了。用不起來，而且要慎用。
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
相關文章
這篇文章主要介紹了微信小程序搜索功能(附：小程序前端+PHP后端)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
今天做了群友發(fā)的一個鏈接, 關于js 的一些題目的. 這樣的題目常常有很多陷阱在里面,等著別人去踩. 很不幸,灑家踩了, 還蠻悲劇.2010-12-12
下面小編就為大家?guī)硪黄狫S中正則表達式只有3種匹配模式(沒有單行模式)詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
這篇文章主要介紹了通過jQuery學習js類型判斷的技巧，下面和小編一起來學習一下吧2019-05-05
這篇文章主要為大家詳細介紹了js實現(xiàn)數(shù)字變動效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
這篇文章是JavaScript插件化開發(fā)系列教程的第五篇，還是著重于實戰(zhàn)，通過具體的實例來學習jQuery的方式如何開發(fā)插件，有相同需求的小伙伴來參考下吧。2015-02-02
詳解JS中統(tǒng)計函數(shù)執(zhí)行次數(shù)與執(zhí)行時間
這篇文章給大家分享了JS中統(tǒng)計函數(shù)執(zhí)行次數(shù)與執(zhí)行時間的相關知識點內(nèi)容，有興趣的朋友們分享下。2018-09-09
javascript實現(xiàn)文字圖片上下滾動的具體實例
這篇文章介紹了在JS中文字圖片上下滾動的實現(xiàn)代碼，需要的朋友可以參考一下2013-06-06
iframe子頁面調(diào)用父頁面js函數(shù)及iframe父頁面調(diào)用子頁面js函數(shù)在實際項目中都是很實用的，下面有個不錯的示例，感興趣的朋友可以了解下2013-11-11![無阻塞加載腳本分析[全]](http://img.jbzj.com/images/xgimg/bcimg9.png)
script標簽的阻塞行為會對頁面性能產(chǎn)生負面影響，大多數(shù)瀏覽器在下載或執(zhí)行腳本的同時，會阻塞下載位于它之后的資源，也會阻塞渲染位于它之后的元素。2011-01-01