探尋Javascript執行效率問(wèn)題

　　作為開(kāi)發(fā)人員，Web頁(yè)面加載或刷新的速度對其網(wǎng)站至關(guān)重要。下面YJBYS小編將帶大家一起探尋Javascript執行效率問(wèn)題，歡迎大家閱讀查看!

　　開(kāi)發(fā)人員在各種瀏覽器中調試JavaScript的方法要少得多。比如，在Mozilla Firefox中，可以使用Firebug調試JavaScript，但仍然不能調整很多性能問(wèn)題，如瀏覽器呈現消耗時(shí)間。

　　Javascript是一門(mén)非常靈活的語(yǔ)言，我們可以隨心所欲的書(shū)寫(xiě)各種風(fēng)格的代碼，不同風(fēng)格的代碼也必然也會(huì )導致執行效率的差異，開(kāi)發(fā)過(guò)程中零零散散地接觸到許多提高代碼性能的方法，整理一下平時(shí)比較常見(jiàn)并且容易規避的問(wèn)題

　　Javascript自身執行效率

　　Javascript中的作用域鏈、閉包、原型繼承、eval等特性，在提供各種神奇功能的同時(shí)也帶來(lái)了各種效率問(wèn)題，用之不慎就會(huì )導致執行效率低下。

　　1、全局導入

　　我們在編碼過(guò)程中多多少少會(huì )使用到一些全局變量(window,document,自定義全局變量等等)，了解javascript作用域鏈的人都知道，在局部作用域中訪(fǎng)問(wèn)全局變量需要一層一層遍歷整個(gè)作用域鏈直至頂級作用域，而局部變量的訪(fǎng)問(wèn)效率則會(huì )更快更高，因此在局部作用域中高頻率使用一些全局對象時(shí)可以將其導入到局部作用域中，例如：

　　//1、作為參數傳入模塊

　　(function(window,$){

　　var xxx = window.xxx;

　　$("#xxx1").xxx();

　　$("#xxx2").xxx();

　　})(window,jQuery);

　　//2、暫存到局部變量

　　function(){

　　var doc = document;

　　var global = window.global;

　　}

　　2、eval以及類(lèi)eval問(wèn)題

　　我們都知道eval可以將一段字符串當做js代碼來(lái)執行處理，據說(shuō)使用eval執行的代碼比不使用eval的代碼慢100倍以上(具體效率我沒(méi)有測試，有興趣同學(xué)可以測試一下)

　　JavaScript 代碼在執行前會(huì )進(jìn)行類(lèi)似“預編譯”的操作：首先會(huì )創(chuàng )建一個(gè)當前執行環(huán)境下的活動(dòng)對象，并將那些用 var 申明的變量設置為活動(dòng)對象的屬性，但是此時(shí)這些變量的賦值都是 undefined，并將那些以 function 定義的函數也添加為活動(dòng)對象的屬性，而且它們的值正是函數的定義。但是，如果你使用了“eval”，則“eval”中的代碼(實(shí)際上為字符串)無(wú)法預先識別其上下文，無(wú)法被提前解析和優(yōu)化，即無(wú)法進(jìn)行預編譯的操作。所以，其性能也會(huì )大幅度降低

　　其實(shí)現在大家一般都很少會(huì )用eval了，這里我想說(shuō)的是兩個(gè)類(lèi)eval的場(chǎng)景(new Function{},setTimeout,setInterver)

　　setTimtout("alert(1)",1000);

　　setInterver("alert(1)",1000);

　　(new Function("alert(1)"))();

　　上述幾種類(lèi)型代碼執行效率都會(huì )比較低，因此建議直接傳入匿名方法、或者方法的引用給setTimeout方法

　　3、閉包結束后釋放掉不再被引用的變量

　　var f = (function(){

　　var a = {name:"var3"};

　　var b = ["var1","var2"];

　　var c = document.getElementByTagName("li");

　　//****其它變量

　　//***一些運算

　　var res = function(){

　　alert(a.name);

　　}

　　return res;

　　})();

　　上述代碼中變量f的返回值是由一個(gè)立即執行函數構成的閉包中返回的方法res，該變量保留了對于這個(gè)閉包中所有變量(a,b,c等)的引用，因此這兩個(gè)變量會(huì )一直駐留在內存空間中,尤其是對于dom元素的引用對內存的消耗會(huì )很大，而我們在res中只使用到了a變量的值，因此，在閉包返回前我們可以將其它變量釋放

　　var f = (function(){

　　var a = {name:"var3"};

　　var b = ["var1","var2"];

　　var c = document.getElementByTagName("li");

　　//****其它變量

　　//***一些運算

　　//閉包返回前釋放掉不再使用的變量

　　b = c = null;

　　var res = function(){

　　alert(a.name);

　　}

　　return res;

　　})();

　　Js操作dom的效率

　　在web開(kāi)發(fā)過(guò)程中，前端執行效率的瓶頸往往都是在dom操作上面，dom操作是一件很耗性能的事情，如何才能在dom操作過(guò)程中盡量節約性能呢?

　　1、減少reflow

　　什么是reflow?

　　當 DOM 元素的屬性發(fā)生變化 (如 color) 時(shí), 瀏覽器會(huì )通知 render 重新描繪相應的元素, 此過(guò)程稱(chēng)為 repaint。

　　如果該次變化涉及元素布局 (如 width), 瀏覽器則拋棄原有屬性, 重新計算并把結果傳遞給 render 以重新描繪頁(yè)面元素, 此過(guò)程稱(chēng)為 reflow。

　　2、減少reflow的方法

　　先將元素從document中刪除，完成修改后再把元素放回原來(lái)的位置(當對某元素及其子元素進(jìn)行大量reflow操作時(shí)，1,2兩種方法效果才會(huì )比較明顯)

　　將元素的display設置為”none”，完成修改后再把display修改為原來(lái)的值

　　修改多個(gè)樣式屬性時(shí)定義class類(lèi)代替多次修改style屬性(for certain同學(xué)推薦)

　　大量添加元素到頁(yè)面時(shí)使用documentFragment

　　例如

　　for(var i=0;i<100:i++){

　　var child = docuemnt.createElement("li");

　　child.innerHtml = "child";

　　document.getElementById("parent").appendChild(child);

　　}

　　當代碼中需要多次訪(fǎng)問(wèn)元素的狀態(tài)信息，在狀態(tài)不變的情況下我們可以將其暫存到變量中，這樣可以避免多次訪(fǎng)問(wèn)dom帶來(lái)內存的開(kāi)銷(xiāo)，典型的例子就是：

　　查找dom元素時(shí)盡量避免大面積遍歷頁(yè)面元素，盡量使用精準選擇器，或者指定上下文以縮小查找范圍，以jquery為例

　　少用模糊匹配的選擇器：例如$("[name*='_fix']")，多用諸如id以及逐步縮小范圍的復合選擇器$("li.active")等

　　指定上下文：例如$("#parent .class")，$(".class",$el)等

　　4、使用事件委托

　　使用場(chǎng)景：一個(gè)有大量記錄的列表，每條記錄都需要綁定點(diǎn)擊事件，在鼠標點(diǎn)擊后實(shí)現某些功能，我們通常的做法是給每條記錄都綁定監聽(tīng)事件，這種做法會(huì )導致頁(yè)面會(huì )有大量的事件監測器，效率比較低下。

　　基本原理：我們都知道dom規范中事件是會(huì )冒泡的，也就是說(shuō)在不主動(dòng)阻止事件冒泡的情況下任何一個(gè)元素的事件都會(huì )按照dom樹(shù)的結構逐級冒泡至頂端。而event對象中也提供了event.target(IE下是srcElement)指向事件源，因此我們即使在父級元素上監聽(tīng)該事件也可以找到觸發(fā)該事件的最原始的元素，這就是委托的基本原理。廢話(huà)不多說(shuō)，上示例

　　根據上面介紹的監聽(tīng)事件的原理我們來(lái)改寫(xiě)一下

　　當然，我們不必每次都做事件源的判斷工作，可以將其抽象一下交給工具類(lèi)來(lái)完成。jquery中的delegate()方法就實(shí)現了該功能

　　語(yǔ)法是這樣的$(selector).delegate(childSelector,event,data,function)，例如：

　　$("div").delegate("button","click",function(){

　　$("p").slideToggle();

　　});

　　參數說(shuō)明(引自w3school)

　　參數 描述

　　childSelector 必需。規定要附加事件處理程序的一個(gè)或多個(gè)子元素。

　　event 必需。規定附加到元素的一個(gè)或多個(gè)事件。由空格分隔多個(gè)事件值。必須是有效的事件。

　　data 可選。規定傳遞到函數的額外數據。

　　function 必需。規定當事件發(fā)生時(shí)運行的函數。

　　Tips:事件委托還有一個(gè)好處就是，即使在事件綁定之后動(dòng)態(tài)添加的元素上觸發(fā)的事件同樣可以監聽(tīng)到哦，這樣就不用在每次動(dòng)態(tài)加入元素到頁(yè)面后都為其綁定事件了

【探尋Javascript執行效率問(wèn)題】相關(guān)文章：

在Java中執行JavaScript代碼07-14

對javascript的理解08-08

常用的JavaScript模式09-22

Javascript的this用法簡(jiǎn)述08-15

JavaScript學(xué)習筆記08-24

JavaScript 基礎教學(xué)09-29

JavaScript的課堂講解09-03

JavaScript常用方法匯總10-25

JavaScript數組常用方法介紹09-04

JavaScript中的with關(guān)鍵字07-24