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

時(shí)間：2020-10-27 15:20:19 JavaScript 我要投稿

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

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

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

　　Javascript自身執(zhí)行效率

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

　　1、全局導(dǎo)入

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

　　//1、作為參數(shù)傳入模塊

　　(function(window,$){

　　var xxx = window.xxx;

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

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

　　})(window,jQuery);

　　//2、暫存到局部變量

　　function(){

　　var doc = document;

　　var global = window.global;

　　}

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

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

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

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

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

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

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

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

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

　　var f = (function(){

　　var a = {name:"var3"};

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

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

　　//****其它變量

　　//***一些運(yùn)算

　　var res = function(){

　　alert(a.name);

　　}

　　return res;

　　})();

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

　　var f = (function(){

　　var a = {name:"var3"};

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

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

　　//****其它變量

　　//***一些運(yùn)算

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

　　b = c = null;

　　var res = function(){

　　alert(a.name);

　　}

　　return res;

　　})();

　　Js操作dom的效率

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

　　1、減少reflow

　　什么是reflow?

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

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

　　2、減少reflow的方法

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

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

　　修改多個(gè)樣式屬性時(shí)定義class類代替多次修改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);

　　}

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

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

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

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

　　4、使用事件委托

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

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

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

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

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

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

　　$("p").slideToggle();

　　});

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

　　參數(shù) 描述

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

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

　　data 可選。規(guī)定傳遞到函數(shù)的額外數(shù)據(jù)。

　　function 必需。規(guī)定當(dāng)事件發(fā)生時(shí)運(yùn)行的函數(shù)。