日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
JavaScript執(zhí)行效率小結(jié)

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

10年積累的成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先制作網(wǎng)站后付款的網(wǎng)站建設(shè)流程，更有翠屏免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

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è)作用域鏈直至***作用域，而局部變量的訪問(wèn)效率則會(huì)更快更高，因此在局部作用域中高頻率使用一些全局對(duì)象時(shí)可以將其導(dǎo)入到局部作用域中，例如：

 
 
 
    
  
  
  
  1. //1、作為參數(shù)傳入模塊 
    2. 
  
  
  
  2.  (function(window,$){ 
    3. 
  
  
  
  3.      var xxx = window.xxx; 
    4. 
  
  
  
  4.      $("#xxx1").xxx(); 
    5. 
  
  
  
  5.      $("#xxx2").xxx(); 
    6. 
  
  
  
  6.  })(window,jQuery); 
    7. 
  
  
  
  7.   
    8. 
  
  
  
  8.  //2、暫存到局部變量 
    9. 
  
  
  
  9.  function(){ 
    10. 
  
  
  
  10.     var doc = document; 
    11. 
  
  
  
  11.     var global = window.global; 
    12. 
  
  
  
  12. }
    13.

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)

 
 
 
    
  
  
  
  1. setTimtout("alert(1)",1000); 
    2. 
  
  
  
  2. 
  
  
  
  3. setInterver("alert(1)",1000); 
    4. 
  
  
  
  4. 
  
  
  
  5. (new Function("alert(1)"))();
    6.

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

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

 
 
 
    
  
  
  
  1. var f = (function(){ 
    2. 
  
  
  
  2.     var a = {name:"var3"}; 
    3. 
  
  
  
  3.     var b = ["var1","var2"]; 
    4. 
  
  
  
  4.     var c = document.getElementByTagName("li"); 
    5. 
  
  
  
  5.     //****其它變量 
    6. 
  
  
  
  6.     //***一些運(yùn)算 
    7. 
  
  
  
  7.     var res = function(){ 
    8. 
  
  
  
  8.         alert(a.name); 
    9. 
  
  
  
  9.     } 
    10. 
  
  
  
  10.     return res; 
    11. 
  
  
  
  11. })()
    12.

上述代碼中變量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變量的值，因此，在閉包返回前我們可以將其它變量釋放

 
 
 
    
  
  
  
  1. var f = (function(){ 
    2. 
  
  
  
  2.     var a = {name:"var3"}; 
    3. 
  
  
  
  3.     var b = ["var1","var2"]; 
    4. 
  
  
  
  4.     var c = document.getElementByTagName("li"); 
    5. 
  
  
  
  5.     //****其它變量 
    6. 
  
  
  
  6.     //***一些運(yùn)算 
    7. 
  
  
  
  7.     //閉包返回前釋放掉不再使用的變量 
    8. 
  
  
  
  8.     b = c = null; 
    9. 
  
  
  
  9.     var res = function(){ 
    10. 
  
  
  
  10.         alert(a.name); 
    11. 
  
  
  
  11.         } 
    12. 
  
  
  
  12.     return res; 
    13. 
  
  
  
  13. })()
    14.

Js操作dom的效率

在web開發(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。

減少reflow的方法

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

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

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

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

例如

 
 
 
    
  
  
  
  1. for(var i=0;i<100:i++){ 
    2. 
  
  
  
  2.     var child = docuemnt.createElement("li"); 
    3. 
  
  
  
  3.     child.innerHtml = "child"; 
    4. 
  
  
  
  4.     document.getElementById("parent").appendChild(child); 
    5. 
  
  
  
  5. }
    6.

上述代碼會(huì)多次操作dom，效率比較低，可以改為下面的形式 創(chuàng)建documentFragment，將所有元素加入到docuemntFragment不會(huì)改變dom結(jié)構(gòu)，***將其添加到頁(yè)面，只進(jìn)行了一次reflow

 
 
 
    
  
  
  
  1. var frag = document.createDocumentFragment(); 
    2. 
  
  
  
  2. for(var i=0;i<100:i++){ 
    3. 
  
  
  
  3.         var child = docuemnt.createElement("li"); 
    4. 
  
  
  
  4.         child.innerHtml = "child"; 
    5. 
  
  
  
  5.     frag.appendChild(child); 
    6. 
  
  
  
  6. } 
    7. 
  
  
  
  7. document.getElementById("parent").appendChild(frag);
    8.

2、暫存dom狀態(tài)信息

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

 
 
 
    
  
  
  
  1. var lis = document.getElementByTagName("li"); 
    2. 
  
  
  
  2. for(var i=1;i
  
  
  
  3.     //*** 
    4. 
  
  
  
  4. } 
    5. 
  
  
  
  5. 上述方式會(huì)在每一次循環(huán)都去訪問(wèn)dom元素，我們可以簡(jiǎn)單將代碼優(yōu)化如下 
    6. 
  
  
  
  6. var lis = document.getElementByTagName("li"); 
    7. 
  
  
  
  7. for(var i=1,j=lis.length ;i
  
  
  
  8.     //*** 
    9. 
  
  
  
  9. }
    10.

3、縮小選擇器的查找范圍

查找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)聽事件，這種做法會(huì)導(dǎo)致頁(yè)面會(huì)有大量的事件監(jiān)聽器，效率比較低下。

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

 
 
 
    
  
  
  
  1. $("ul li").bind("click",function(){ 
    2. 
  
  
  
  2.     alert($(this).attr("data")); 
    3. 
  
  
  
  3. })
    4.

上述寫法其實(shí)是給所有的li元素都綁定了click事件來(lái)監(jiān)聽鼠標(biāo)點(diǎn)擊每一個(gè)元素的事件，這樣頁(yè)面上會(huì)有大量的事件監(jiān)聽器。

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

 
 
 
    
  
  
  
  1. $("ul").bind("click",function(e){ 
    2. 
  
  
  
  2.     if(e.target.nodeName.toLowerCase() ==="li"){ 
    3. 
  
  
  
  3.         alert($(e.target).attr("data")); 
    4. 
  
  
  
  4.     } 
    5. 
  
  
  
  5. })
    6.

這樣一來(lái)，我們就可以只添加一個(gè)事件監(jiān)聽器去捕獲所有l(wèi)i上觸發(fā)的事件，并做出相應(yīng)的操作。

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

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

 
 
 
    
  
  
  
  1. $("div").delegate("button","click",function(){ 
    2. 
  
  
  
  2.   $("p").slideToggle(); 
    3. 
  
  
  
  3. });
    4.

參數(shù)說(shuō)明

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

必需。規(guī)定附加到元素的一個(gè)或多個(gè)事件。由空格分隔多個(gè)事件值。必須是有效的事件。
data 可選。規(guī)定傳遞到函數(shù)的額外數(shù)據(jù)。
function 必需。規(guī)定當(dāng)事件發(fā)生時(shí)運(yùn)行的函數(shù)。

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


網(wǎng)站題目：JavaScript執(zhí)行效率小結(jié)
文章出自：http://m.5511xx.com/article/cdjcgjg.html