性能

Js在性能方面有多要注意的地方：

• 避免全局查找

Js性能優(yōu)化最重要的就是注意全局查找，因?yàn)樽饔糜虻牟檎沂窍日揖植孔饔糜蛟跊](méi)有找到之后在去上一級(jí)作用域查找直到全局作用域，所以全局作用域查找的性能消耗肯定要比本函數(shù)局部作用域的消耗大。舉個(gè)例子：

function setInnerHtml(){var divDom=doucument.getElementsByTagName(“div”);for(var i=0,len=divDom.lemgth;i<len;i++){ divDom.innerHTML=doucument.getElementByid(“dom”).innerHtml+I; } }

?

這段代碼循環(huán)調(diào)用了doucument.getElementByid(“dom”)，而在循環(huán)外只執(zhí)行了一次doucument所以沒(méi)必要將doucument賦值局部變量，而是把循環(huán)里面的賦值為局部變量，每次循環(huán)就不用再去查找全局的doucument對(duì)象。

function setInnerHtml(){var domhtml= doucument.getElementByid(“dom”).innerHtml;var divDom=doucument.getElementsByTagName(“div”); for(var i=0,len=divDom.lemgth;i<len;i++){ divDom.innerHTML= domhtml +I; } }

?

原則就是當(dāng)要多次調(diào)用全局對(duì)象的時(shí)候特別在循環(huán)中，最后將全局對(duì)象賦值到局部變量中，當(dāng)然這種在幾十次的調(diào)用上性能差異不會(huì)很明顯，但作為一個(gè)程序員既然有性能優(yōu)化的寫(xiě)法還是盡量去做。

• 避免with語(yǔ)句

現(xiàn)在基本不會(huì)用到這個(gè)語(yǔ)句了，就不多說(shuō)。

• 避免不必要的屬性查找

簡(jiǎn)單說(shuō)就是變量存值，調(diào)用這個(gè)變量的性能消耗是最小的，而對(duì)象的屬性的取值的性能消耗相對(duì)多一些。比如：

var query=window.location.href.subtring(window.location.href.indexOf(“?”));

?

這段代碼有6次屬性查找效率特別不好，最好改為：

var url=window.loaction.href;var query=url.substring(url.indexOf(“?”));

?

這樣優(yōu)化就效率提高了很多。

• 優(yōu)化循環(huán)

1)???????? 減值迭代：大多數(shù)循環(huán)都是從0開(kāi)始增加循環(huán)，在很多情況下從最大值減值循環(huán)效率更高。

2)???????? 簡(jiǎn)化終止條件：由于每次循環(huán)都會(huì)去判斷終止條件，所以簡(jiǎn)化終止條件也可以提高循環(huán)效率。

3)???????? 簡(jiǎn)化循環(huán)體：循環(huán)體是執(zhí)行最多的，所以要保證循環(huán)體的優(yōu)化。

• 避免解析js代碼字符串

在js代碼中解析js代碼字符串時(shí)必須重新啟動(dòng)一個(gè)解析器來(lái)解析代碼，這樣造成比較大的性能消耗，所以盡量避免比如eval函數(shù)，function構(gòu)造js代碼字

符串函數(shù)，setTimeout傳字符串的情況。

• 原生方法較快，盡量用原生方法。
• Switch語(yǔ)句較快。
• 位運(yùn)算符較快。

? ? ?2. 代碼規(guī)范

• 代碼注釋：

1)???????? 函數(shù)和方法：在每個(gè)函數(shù)或方法都應(yīng)該包含注釋說(shuō)明函數(shù)的功能，輸入輸出。

2)???????? 復(fù)雜的算法：在復(fù)雜的算法中要加入注釋，好讓人理解算法的邏輯思路。

3)???????? Hack：兼容性代碼上也要加入注釋說(shuō)明。

4)???????? 大段代碼：用于完成單個(gè)任務(wù)的多行代碼應(yīng)該在前面放一個(gè)描述任務(wù)的注釋

• 解耦HTML/JavaScript

Html是結(jié)構(gòu)成，js是行為層，他們天生需要交互，我們?cè)趯?xiě)代碼的時(shí)候應(yīng)該盡量讓html和js的關(guān)聯(lián)度減小，有些方法會(huì)讓他們的過(guò)于緊密的耦合，比如：js在html頁(yè)面中script標(biāo)簽中聲明js代碼、在html標(biāo)簽中綁定onclick事件、在js改寫(xiě)html代碼都會(huì)造成html和js過(guò)于緊密的耦合。

Html呈現(xiàn)應(yīng)該盡可能和js保持分離，當(dāng)js用于插入數(shù)據(jù)時(shí)，盡量不要直接插入標(biāo)記，一般可以在頁(yè)面中直接包含并隱藏標(biāo)記，然后等到整個(gè)頁(yè)面渲染好之后，就可以用js顯示該標(biāo)記。

將html和js解耦可以在調(diào)試過(guò)程中節(jié)省時(shí)間，更加容易確定錯(cuò)誤的來(lái)源，也減輕維護(hù)難度。

• 解耦css/JavaScript

JavaScript和css也是非常緊密相關(guān)的，js經(jīng)常對(duì)頁(yè)面的樣式做動(dòng)態(tài)修改。為了讓他們的耦合更松散，可以通過(guò)js修改對(duì)應(yīng)的class樣式類(lèi)。

• 解耦應(yīng)用邏輯/事件處理程序

在實(shí)際開(kāi)發(fā)中我們經(jīng)常在一個(gè)事件函數(shù)出來(lái)將要處理的所有代碼都放在這個(gè)事件中，例如：

function handleKeyPress(event){event=EventUtil.getTarget(event);if(event.keyCode===13){var target=EventUtil.getTarget(event); var value=5*parseInt(target.value); if(value>10){ document.getElementById(“error-msg”).style.display=”block”; } } }

?

這里就是把邏輯處理代碼和事件處理代碼放到一起，這樣會(huì)讓調(diào)試不好調(diào)試，維護(hù)難度變高，而且要是突然修改要新增加一個(gè)事件做同樣類(lèi)似的邏輯處理，那就要復(fù)制一份邏輯處理代碼到另一個(gè)事件函數(shù)中。較好的方法是將應(yīng)用邏輯和事件處理程序分離開(kāi)。例如：

function validateValue(value){value=5*parseInt(value);if(value>10){document.getElementById(“error-msg”).style.display=”block”; } } function handleKeyPress(event){ event=EventUtil.getEvent(event); if(event.keyCode===13){ var target=EventUtil.getTarget(event); validateValue(target.value); } }

?

這樣事件處理和邏輯處理就分離開(kāi)了，這樣做有幾個(gè)好處，可以讓你更容易更改觸發(fā)特定過(guò)程的事件，其次可以在不附加到事件的情況下測(cè)試代碼，使其更易創(chuàng)建單元測(cè)試或是自動(dòng)化應(yīng)用流程。

事件和應(yīng)用邏輯之間的松散耦合的幾條原則：

勿將event對(duì)象傳給其他方法；只傳來(lái)著event對(duì)象中所需要的數(shù)據(jù)；

任何可以在應(yīng)用層面的動(dòng)作都應(yīng)該可以在不執(zhí)行任何時(shí)間處理程序的情況下能正常運(yùn)行。

任何時(shí)間處理程序都應(yīng)該處理事件，然后將處理轉(zhuǎn)交給應(yīng)用邏輯。

• 避免全局變量

這樣會(huì)讓腳本執(zhí)行一致和可維護(hù)，最多創(chuàng)建一個(gè)全局變量。類(lèi)似jQuery一樣，所以方法屬性都在$對(duì)象當(dāng)中，避免對(duì)全局變量造成過(guò)多的污染。

• 盡量使用常量

數(shù)據(jù)和使用它的邏輯進(jìn)行分離要注意一下幾點(diǎn)：

?重復(fù)值

用戶(hù)界面字符串

?url

任意可能會(huì)更改的值

• 其他優(yōu)化

多變量聲明時(shí)用一條語(yǔ)句逗號(hào)隔開(kāi)聲明

對(duì)dom的操作的優(yōu)化

對(duì)dom進(jìn)行html代碼插入盡量在最后一次添加到dom對(duì)象中。

innerHTML的效率要比appendChild的效率高，以為innerHTML會(huì)創(chuàng)建一個(gè)HTML解析器，然后使用內(nèi)部的DOM調(diào)用來(lái)創(chuàng)建DOM結(jié)構(gòu)，而非基于JavaScript的DOM調(diào)用，由于內(nèi)部方法是編譯好的而非解釋執(zhí)行，所以執(zhí)行快的多。

使用事件委托減少綁定的事件數(shù)量。

盡量少用到返回HTMLCollection語(yǔ)句。

轉(zhuǎn)載于:https://www.cnblogs.com/kongpeng/p/6500419.html

總結(jié)

以上是生活随笔為你收集整理的JavaScript代码规范和性能整理的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。