提高JavaScript執(zhí)行效率的23個(gè)實(shí)用技巧
本文向大家分享23種JavaScript提高執(zhí)行效率的小技巧、最佳實(shí)踐等非常實(shí)用的內(nèi)容。當(dāng)然JavaScript的實(shí)用技巧不止這些,還有很多即好玩又能提高程序運(yùn)行效率的技巧,以后我們會(huì)繼續(xù)分享給大家。
文中所提供的代碼片段都已經(jīng)過(guò)最新版的Chrome 30測(cè)試,該瀏覽器使用V8 JavaScript引擎(V8 3.20.17.15)。
1.使用邏輯符號(hào)&&或者||進(jìn)行條件判斷
var foo = 10; foo == 10 && doSomething(); // 如果 foo == 10 則執(zhí)行 doSomething(); foo == 5 || doSomething(); // 如果 foo != 5 則執(zhí)行doSomething();
“||”也可以用來(lái)設(shè)置函數(shù)參數(shù)的默認(rèn)值
Function doSomething(arg1){
Arg1 = arg1 || 10; // 如果 arg1為設(shè)置那么 Arg1=10
}
2.使用map()方法來(lái)遍歷數(shù)組
var squares = [1,2,3,4].map(function (val) {
return val * val;
});
// 運(yùn)行結(jié)果為 [1, 4, 9, 16]
3.舍入小數(shù)位數(shù)
var num =2.443242342; num = num.toFixed(4); // 保留四位小數(shù)位 2.4432
4.浮點(diǎn)數(shù)問(wèn)題
0.1 + 0.2 === 0.3 // is false 9007199254740992 + 1 // = 9007199254740992 9007199254740992 + 2 // = 9007199254740994
0.1+0.2等于0.30000000000000004,為什么會(huì)發(fā)生這種情況?根據(jù)IEEE754標(biāo)準(zhǔn),你需要知道的是所有JavaScript數(shù)字在64位二進(jìn)制內(nèi)的都表示浮點(diǎn)數(shù)。開發(fā)者可以使用toFixed()和toPrecision()方法來(lái)解決這個(gè)問(wèn)題。
5.使用for-in loop檢查遍歷對(duì)象屬性
下面這段代碼主要是為了避免遍歷對(duì)象屬性。
for (var name in object) {
if (object.hasOwnProperty(name)) {
// 執(zhí)行代碼
}
}
6.逗號(hào)操作符
var a = 0; var b = ( a++, 99 ); console.log(a); // a 為 1 console.log(b); // b 為 99
7.計(jì)算或查詢緩存變量
在使用jQuery選擇器的情況下,開發(fā)者可以緩存DOM元素
var navright = document.querySelector('#right');
var navleft = document.querySelector('#left');
var navup = document.querySelector('#up');
var navdown = document.querySelector('#down');
8.在將參數(shù)傳遞到isFinite()之前進(jìn)行驗(yàn)證
isFinite(0/0) ; // false
isFinite("foo"); // false
isFinite("10"); // true
isFinite(10); // true
isFinite(undifined); // false
isFinite(); // false
isFinite(null); // true !!!
9.在數(shù)組中避免負(fù)向索引
var numbersArray = [1,2,3,4,5];
var from = numbersArray.indexOf("foo") ; // from is equal to -1
numbersArray.splice(from,2); // will return [5]
確保參數(shù)傳遞到indexOf()方法里是非負(fù)向的。
10.(使用JSON)序列化和反序列化
var person = {name :'Saad', age : 26, department : {ID : 15, name : "R&D"} };
var stringFromPerson = JSON.stringify(person);
/* stringFromPerson is equal to "{"name":"Saad","age":26,"department":{"ID":15,"name":"R&D"}}" */
var personFromString = JSON.parse(stringFromPerson);
/* personFromString is equal to person object */
11.避免使用eval()或Function構(gòu)造函數(shù)
eval()和Function構(gòu)造函數(shù)被稱為腳本引擎,每次執(zhí)行它們的時(shí)候都必須把源碼轉(zhuǎn)換成可執(zhí)行的代碼,這是非常昂貴的操作。
var func1 = new Function(functionCode); var func2 = eval(functionCode);
12.避免使用with()方法
如果在全局區(qū)域里使用with()插入變量,那么,萬(wàn)一有一個(gè)變量名字和它名字一樣,就很容易混淆和重寫。
13.避免在數(shù)組里使用for-in loop
而不是這樣用:
var sum = 0;
for (var i in arrayNumbers) {
sum += arrayNumbers[i];
}
這樣會(huì)更好:
var sum = 0;
for (var i = 0, len = arrayNumbers.length; i < len; i++) {
sum += arrayNumbers[i];
}
因?yàn)閕和len是循環(huán)中的第一個(gè)語(yǔ)句,所以每次實(shí)例化都會(huì)執(zhí)行一次,這樣執(zhí)行起來(lái)就會(huì)比下面這個(gè)更快:
for (var i = 0; i < arrayNumbers.length; i++)
為什么?數(shù)組長(zhǎng)度arraynNumbers在每次loop迭代時(shí)都會(huì)被重新計(jì)算。
14.不要向setTimeout()和setInterval()方法里傳遞字符串
如果在這兩個(gè)方法里傳遞字符串,那么字符串會(huì)像eval那樣重新計(jì)算,這樣速度就會(huì)變慢,而不是這樣使用:
setInterval('doSomethingPeriodically()', 1000);
setTimeOut('doSomethingAfterFiveSeconds()', 5000);
相反,應(yīng)該這樣用:
setInterval(doSomethingPeriodically, 1000); setTimeOut(doSomethingAfterFiveSeconds, 5000);
15.使用switch/case語(yǔ)句代替較長(zhǎng)的if/else語(yǔ)句
如果有超過(guò)2個(gè)以上的case,那么使用switch/case速度會(huì)快很多,而且代碼看起來(lái)更加優(yōu)雅。
16.遇到數(shù)值范圍時(shí),可以選用switch/casne
function getCategory(age) {
var category = "";
switch (true) {
case isNaN(age):
category = "not an age";
break;
case (age >= 50):
category = "Old";
break;
case (age <= 20):
category = "Baby";
break;
default:
category = "Young";
break;
};
return category;
}
getCategory(5); // 返回 "Baby"
17.創(chuàng)建一個(gè)對(duì)象,該對(duì)象的屬性是一個(gè)給定的對(duì)象
可以編寫一個(gè)這樣的函數(shù),創(chuàng)建一個(gè)對(duì)象,該對(duì)象屬性是一個(gè)給定的對(duì)象,好比這樣:
function clone(object) {
function OneShotConstructor(){};
OneShotConstructor.prototype= object;
return new OneShotConstructor();
}
clone(Array).prototype ; // []
18.一個(gè)HTML escaper函數(shù)
function escapeHTML(text) {
var replacements= {"<": "<", ">": ">","&": "&", "\"": """};
return text.replace(/[<>&"]/g, function(character) {
return replacements[character];
});
}
19.在一個(gè)loop里避免使用try-catch-finally
try-catch-finally在當(dāng)前范圍里運(yùn)行時(shí)會(huì)創(chuàng)建一個(gè)新的變量,在執(zhí)行catch時(shí),捕獲異常對(duì)象會(huì)賦值給變量。
不要這樣使用:
var object = ['foo', 'bar'], i;
for (i = 0, len = object.length; i <len; i++) {
try {
// 執(zhí)行代碼,如果出錯(cuò)將被捕獲
}
catch (e) {
// 獲取錯(cuò)誤,并執(zhí)行代碼
}
}
應(yīng)該這樣使用:
var object = ['foo', 'bar'], i;
try {
for (i = 0, len = object.length; i <len; i++) {
// 執(zhí)行代碼,如果出錯(cuò)將被捕獲
}
}
catch (e) {
// 獲取錯(cuò)誤,并執(zhí)行代碼
}
20.給XMLHttpRequests設(shè)置timeouts
如果一個(gè)XHR需要花費(fèi)太長(zhǎng)時(shí)間,你可以終止鏈接(例如網(wǎng)絡(luò)問(wèn)題),通過(guò)給XHR使用setTimeout()解決。
var xhr = new XMLHttpRequest ();
xhr.onreadystatechange = function () {
if (this.readyState == 4) {
clearTimeout(timeout);
// 執(zhí)行代碼
}
}
var timeout = setTimeout( function () {
xhr.abort(); // call error callback
}, 60*1000 /* 設(shè)置1分鐘后執(zhí)行*/ );
xhr.open('GET', url, true);
xhr.send();
此外,通常你應(yīng)該完全避免同步Ajax調(diào)用。
21.處理WebSocket超時(shí)
一般來(lái)說(shuō),當(dāng)創(chuàng)建一個(gè)WebSocket鏈接時(shí),服務(wù)器可能在閑置30秒后鏈接超時(shí),在閑置一段時(shí)間后,防火墻也可能會(huì)鏈接超時(shí)。
為了解決這種超時(shí)問(wèn)題,你可以定期地向服務(wù)器發(fā)送空信息,在代碼里添加兩個(gè)函數(shù):一個(gè)函數(shù)用來(lái)保持鏈接一直是活的,另一個(gè)用來(lái)取消鏈接是活的,使用這種方法,你將控制超時(shí)問(wèn)題。
添加一個(gè)timeID……
var timerID = 0;
function keepAlive() {
var timeout = 15000;
if (webSocket.readyState == webSocket.OPEN) {
webSocket.send('');
}
timerId = setTimeout(keepAlive, timeout);
}
function cancelKeepAlive() {
if (timerId) {
cancelTimeout(timerId);
}
}
keepAlive()方法應(yīng)該添加在WebSocket鏈接方法onOpen()的末端,cancelKeepAlive()方法放在onClose()方法下面。
22.記住,最原始的操作要比函數(shù)調(diào)用快
對(duì)于簡(jiǎn)單的任務(wù),最好使用基本操作方式來(lái)實(shí)現(xiàn),而不是使用函數(shù)調(diào)用實(shí)現(xiàn)。
例如
var min = Math.min(a,b); A.push(v);
基本操作方式:
var min = a < b ? a b; A[A.length] = v;
23.編碼時(shí)注意代碼的美觀、可讀
JavaScript是一門非常好的語(yǔ)言,尤其對(duì)于前端工程師來(lái)說(shuō),JavaScript執(zhí)行效率也非常重要。
我們?cè)诰帉慗avaScript程序時(shí)注意一些小細(xì)節(jié),掌握一些常用的實(shí)用小技巧往往會(huì)使程序更簡(jiǎn)捷,程序執(zhí)行效率更高
相關(guān)文章
JavaScript中this關(guān)鍵詞的使用技巧、工作原理以及注意事項(xiàng)
在JavaScript中,this 的概念比較復(fù)雜。除了在面向?qū)ο缶幊讨?,this 還是隨處可用的。這篇文章介紹了this 的工作原理,它會(huì)造成什么樣的問(wèn)題以及this 的相關(guān)例子。2014-05-05
Next.js項(xiàng)目實(shí)戰(zhàn)踩坑指南(筆記)
這篇文章主要介紹了Next.js項(xiàng)目實(shí)戰(zhàn)踩坑指南(小結(jié)),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11
如何用JavaScript實(shí)現(xiàn)動(dòng)態(tài)修改CSS樣式表
如何用JavaScript實(shí)現(xiàn)動(dòng)態(tài)修改CSS樣式表?下面小編就為大家?guī)?lái)一篇JavaScript實(shí)現(xiàn)動(dòng)態(tài)修改CSS樣式表的方法。希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2016-05-05
BetterScroll 在移動(dòng)端滾動(dòng)場(chǎng)景的應(yīng)用
BetterScroll 是一款重點(diǎn)解決移動(dòng)端各種滾動(dòng)場(chǎng)景需求的開源插件( GitHub地址 ),非常不錯(cuò),下面腳本之家小編給大家分享BetterScroll 在移動(dòng)端滾動(dòng)場(chǎng)景的應(yīng)用,一起看看吧2017-09-09
JavaScript實(shí)現(xiàn)仿Clock ISO時(shí)鐘
這篇文章給大家分享了JavaScript實(shí)現(xiàn)仿Clock ISO時(shí)鐘的方法以及實(shí)例代碼,有興趣的朋友參考學(xué)習(xí)下下。2018-06-06
JavaScript操作 url 中 search 部分方法函數(shù)
這篇文章主要介紹了JavaScript操作 url 中 search 部分方法函數(shù)的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06

