欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript腳本性能優(yōu)化注意事項

 更新時間:2008年11月18日 11:24:38   作者:  
本文總結(jié)了我在JavaScript編程中所找到的提高JavaScript運行性能的一些方法,其實這些經(jīng)驗都基于幾條原則
循環(huán)是很常用的一個控制結(jié)構(gòu),大部分東西要依靠它來完成,在JavaScript中,我們可以使用for(;;),while(),for(in)三種循環(huán),事實上,這三種循環(huán)中for(in)的效率極差,因為他需要查詢散列鍵,只要可以就應(yīng)該盡量少用。for(;;)和while循環(huán)的性能應(yīng)該說基本(平時使用時)等價。
  而事實上,如何使用這兩個循環(huán),則有很大講究。我在測試中有些很有意思的情況,見附錄。最后得出的結(jié)論是:
  如果是循環(huán)變量遞增或遞減,不要單獨對循環(huán)變量賦值,應(yīng)該在它最后一次讀取的時候使用嵌套的++或—操作符。
  如果要與數(shù)組的長度作比較,應(yīng)該事先把數(shù)組的length屬性放入一個局部變量中,減少查詢次數(shù)。
  局部變量和全局變量
  局部變量的速度要比全局變量的訪問速度更快,因為全局變量其實是全局對象的成員,而局部變量是放在函數(shù)的棧當(dāng)中的。
  不使用Eval
  使用eval相當(dāng)于在運行時再次調(diào)用解釋引擎對內(nèi)容進行運行,需要消耗大量時間。這時候使用JavaScript所支持的閉包可以實現(xiàn)函數(shù)模版(關(guān)于閉包的內(nèi)容請參考函數(shù)式編程的有關(guān)內(nèi)容)
  減少對象查找
  因為JavaScript的解釋性,所以a.b.c.d.e,需要進行至少4次查詢操作,先檢查a再檢查a中的b,再檢查b中的c,如此往下。所以如果這樣的表達式重復(fù)出現(xiàn),只要可能,應(yīng)該盡量少出現(xiàn)這樣的表達式,可以利用局部變量,把它放入一個臨時的地方進行查詢。
  這一點可以和循環(huán)結(jié)合起來,因為我們常常要根據(jù)字符串、數(shù)組的長度進行循環(huán),而通常這個長度是不變的,比如每次查詢a.length,就要額外進行一個操作,而預(yù)先把var len=a.length,則就少了一次查詢。
  字符串連接
  如果是追加字符串,最好使用s+=anotherStr操作,而不是要使用s=s+anotherStr。
  如果要連接多個字符串,應(yīng)該少使用+=,如
  s+=a;s+=b;s+=c;
  應(yīng)該寫成
  s+=a + b + c;
  而如果是收集字符串,比如多次對同一個字符串進行+=操作的話,最好使用一個緩存。怎么用呢?使用JavaScript數(shù)組來收集,最后使用join方法連接起來,如下
  var buf = new Array();for(var i = 0; i < 100; i++){ buf.push(i.toString());}var all = buf.join("");
  類型轉(zhuǎn)換
  類型轉(zhuǎn)換是大家常犯的錯誤,因為JavaScript是動態(tài)類型語言,你不能指定變量的類型。
  1. 把數(shù)字轉(zhuǎn)換成字符串,應(yīng)用"" + 1,雖然看起來比較丑一點,但事實上這個效率是最高的,性能上來說:
  ("" +) > String() > .toString() > new String()
  這條其實和下面的“直接量”有點類似,盡量使用編譯時就能使用的內(nèi)部操作要比運行時使用的用戶操作要快。
  String()屬于內(nèi)部函數(shù),所以速度很快,而.toString()要查詢原型中的函數(shù),所以速度遜色一些,new String()用于返回一個精確的副本。
  2. 浮點數(shù)轉(zhuǎn)換成整型,這個更容易出錯,很多人喜歡使用parseInt(),其實parseInt()是用于將字符串轉(zhuǎn)換成數(shù)字,而不是浮點數(shù)和整型之間的轉(zhuǎn)換,我們應(yīng)該使用Math.floor()或者Math.round()。
  另外,和第二節(jié)的對象查找中的問題不一樣,Math是內(nèi)部對象,所以Math.floor()其實并沒有多少查詢方法和調(diào)用的時間,速度是最快的。
  3. 對于自定義的對象,如果定義了toString()方法來進行類型轉(zhuǎn)換的話,推薦顯式調(diào)用toString(),因為內(nèi)部的操作在嘗試所有可能性之后,會嘗試對象的toString()方法嘗試能否轉(zhuǎn)化為String,所以直接調(diào)用這個方法效率會更高。
  使用直接量
  其實這個影響倒比較小,可以忽略。什么叫使用直接量,比如,JavaScript支持使用[param,param,param,...]來直接表達一個數(shù)組,以往我們都使用new Array(param,param,...),使用前者是引擎直接解釋的,后者要調(diào)用一個Array內(nèi)部構(gòu)造器,所以要略微快一點點。
  同樣,var foo = {}的方式也比var foo = new Object();快,var reg = /../;要比var reg=new RegExp()快。
  字符串遍歷操作
  對字符串進行循環(huán)操作,譬如替換、查找,應(yīng)使用正則表達式,因為本身JavaScript的循環(huán)速度就比較慢,而正則表達式的操作是用C寫成的語言的API,性能很好。
  高級對象
  自定義高級對象和Date、RegExp對象在構(gòu)造時都會消耗大量時間。如果可以復(fù)用,應(yīng)采用緩存的方式。
  DOM相關(guān)
  插入HTML
  很多人喜歡在JavaScript中使用document.write來給頁面生成內(nèi)容。事實上這樣的效率較低,如果需要直接插入HTML,可以找一個容器元素,比如指定一個div或者span,并設(shè)置他們的innerHTML來將自己的HTML代碼插入到頁面中。
  對象查詢
  使用[“”]查詢要比.items()更快,這和前面的減少對象查找的思路是一樣的,調(diào)用.items()增加了一次查詢和函數(shù)的調(diào)用。
  創(chuàng)建DOM節(jié)點
  通常我們可能會使用字符串直接寫HTML來創(chuàng)建節(jié)點,其實這樣做
  無法保證代碼的有效性
  字符串操作效率低
  所以應(yīng)該是用document.createElement()方法,而如果文檔中存在現(xiàn)成的樣板節(jié)點,應(yīng)該是用cloneNode()方法,因為使用createElement()方法之后,你需要設(shè)置多次元素的屬性,使用cloneNode()則可以減少屬性的設(shè)置次數(shù)——同樣如果需要創(chuàng)建很多元素,應(yīng)該先準(zhǔn)備一個樣板節(jié)點。
  定時器
  如果針對的是不斷運行的代碼,不應(yīng)該使用setTimeout,而應(yīng)該是用setInterval。setTimeout每次要重新設(shè)置一個定時器。
  其他
  腳本引擎
  據(jù)我測試Microsoft的JScript的效率較Mozilla的Spidermonkey要差很多,無論是執(zhí)行速度還是內(nèi)存管理上,因為JScript現(xiàn)在基本也不更新了。但SpiderMonkey不能使用ActiveXObject
  文件優(yōu)化
  文件優(yōu)化也是一個很有效的手段,刪除所有的空格和注釋,把代碼放入一行內(nèi),可以加快下載的速度,注意,是下載的速度而不是解析的速度,如果是本地,注釋和空格并不會影響解釋和執(zhí)行速度。
  總結(jié)
  本文總結(jié)了我在JavaScript編程中所找到的提高JavaScript運行性能的一些方法,其實這些經(jīng)驗都基于幾條原則:
  直接拿手頭現(xiàn)成的東西比較快,如局部變量比全局變量快,直接量比運行時構(gòu)造對象快等等。
  盡可能少地減少執(zhí)行次數(shù),比如先緩存需要多次查詢的。
  盡可能使用語言內(nèi)置的功能,比如串鏈接。
  盡可能使用系統(tǒng)提供的API,因為這些API是編譯好的二進制代碼,執(zhí)行效率很高
  同時,一些基本的算法上的優(yōu)化,同樣可以用在JavaScript中,比如運算結(jié)構(gòu)的調(diào)整,這里就不再贅述了。但是由于JavaScript是解釋型的,一般不會在運行時對字節(jié)碼進行優(yōu)化,所以這些優(yōu)化仍然是很重要的。
  當(dāng)然,其實這里的一些技巧同樣使用在其他的一些解釋型語言中,大家也可以進行參考。

相關(guān)文章

  • TypeScript接口和類型的區(qū)別小結(jié)

    TypeScript接口和類型的區(qū)別小結(jié)

    在 TypeScript 中,有兩種主要的定義自定義類型的方式,接口和類型,盡管它們在外觀上可能相似,但它們之間有一些關(guān)鍵的區(qū)別,本文就詳細的介紹一下,感興趣的可以了解下
    2023-05-05
  • JS實現(xiàn)頁面進入和返回定位到具體位置

    JS實現(xiàn)頁面進入和返回定位到具體位置

    其實瀏覽器也自帶了返回的功能,也就是說,自帶了返回定位的功能,返回定位到具體位置有兩種方法,下面通過場景分析給大家詳細講解,需要的的朋友參考下
    2016-12-12
  • Javascript模塊化機制實現(xiàn)原理詳解

    Javascript模塊化機制實現(xiàn)原理詳解

    這篇文章主要介紹了Javascript模塊化機制實現(xiàn)原理詳解,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2020-04-04
  • js 按照指定間隔 向字符串中插入隨機字符串的實現(xiàn)代碼

    js 按照指定間隔 向字符串中插入隨機字符串的實現(xiàn)代碼

    看到論壇有人問,覺得有意思,就試著寫了一下。
    2010-03-03
  • JavaScript原型式繼承實現(xiàn)方法

    JavaScript原型式繼承實現(xiàn)方法

    這篇文章主要介紹了JavaScript原型式繼承實現(xiàn)方法,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2019-11-11
  • js中獲取鍵盤事件的簡單實現(xiàn)方法

    js中獲取鍵盤事件的簡單實現(xiàn)方法

    下面小編就為大家?guī)硪黄猨s中獲取鍵盤事件的簡單實現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-10-10
  • 一文詳解CORS與預(yù)檢請求

    一文詳解CORS與預(yù)檢請求

    這篇文章主要介紹了CORS與預(yù)檢請求,CORS是一套規(guī)范,指導(dǎo)瀏覽器和服務(wù)器之間如何進行跨域資源共享,當(dāng)發(fā)送跨域請求時,瀏覽器會先發(fā)送一個OPTIONS方法的預(yù)檢請求。文中介紹的非常詳細,需要的同學(xué)可以參考一下
    2023-04-04
  • js通過keyCode值判斷單擊鍵盤上某個鍵,然后觸發(fā)指定的事件方法

    js通過keyCode值判斷單擊鍵盤上某個鍵,然后觸發(fā)指定的事件方法

    下面小編就為大家?guī)硪黄猨s通過keyCode值判斷單擊鍵盤上某個鍵,然后觸發(fā)指定的事件方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-02-02
  • 關(guān)于數(shù)據(jù)與后端進行交流匹配(點亮星星)

    關(guān)于數(shù)據(jù)與后端進行交流匹配(點亮星星)

    這篇文章主要介紹了關(guān)于數(shù)據(jù)與后端進行交流匹配(點亮星星) 的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下
    2016-08-08
  • 微信小程序?qū)崿F(xiàn)YDUI的ScrollTab組件

    微信小程序?qū)崿F(xiàn)YDUI的ScrollTab組件

    這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)YDUI的ScrollTab組件,滾動選項卡效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2018-02-02

最新評論