JavaScript性能優化篇js優化

時間  2019-11-11
標籤 javascript 性能 優化 欄目 JavaScript 简体版
原文   原文鏈接

JavaScript性能優化篇js優化

 

隨着Ajax愈來愈廣泛,Ajax引用的規模愈來愈大,Javascript代碼的性能愈來愈顯得重要,我想這就是一個很典型的例子,上面那段代碼由於會被頻繁使用,因此纔有了此優化的過程,我在本文中將指出一些重要的規則,介紹如何使用你的JavaScript、使用哪些工具以及你將從中獲得什麼好處.html

確保代碼儘可能簡潔

不要什麼都依賴JavaScript。不要編寫重複性的腳本。要把JavaScript看成糖果工具，只是起到美化做用。別給你的網站添加大量的JavaScript代碼。只有必要的時候用一下。只有確實能改善用戶體驗的時候用一下。jquery


儘可能減小DOM訪問ajax

使用JavaScript訪問DOM元素很容易，代碼更容易閱讀，可是速度很慢。下面介紹幾個要點：限制使用JavaScript來修飾網頁佈局，把針對訪問元素的引用緩存起來。有時，當你的網站依賴大量的DOM改動時，就應該考慮限制你的標記。這是改用HTML五、捨棄那些原來的XHTML和 HTML4的一個充分理由。你能夠查看DOM元素的數量，只要在Firebug插件的控制檯中輸入:document.getElementsByTagName('*').length。正則表達式

壓縮代碼

要提供通過壓縮的JavaScript頁面，最有效的辦法就是先用JavaScript壓縮工具對你的代碼壓縮一下，這種壓縮工具能夠壓縮變量和參數名稱，而後提供於是得到的代碼，使用了gzip壓縮。算法

是的，我沒有壓縮個人main.js，但你要檢查有沒有未經壓縮的任何jQuery插件，別忘了壓縮。下面我列出了壓縮方面的幾個方案。編程

◆ YUI壓縮工具(個人最愛，jQuery開發團隊就使用它)，初學者指南(http://www.slideshare.net/nzakas /extreme-JavaScript-compression-with-yui-compressor)、第二指南 (http://vilimpoc.org/research/js-speedup/)和官方網站(http: //developer.yahoo.com/yui/compressor/)。json

◆ Dean Edwards Packer(http://dean.edwards.name/packer/)api

◆ JSMin(http://crockford.com/JavaScript/jsmin)數組

GZip壓縮：其背後的想法是，縮短在瀏覽器和服務器之間傳送數據的時間。縮短期後，你獲得標題是Accept-Encoding: gzip,deflate的一個文件。不過這種壓縮方法有一些缺點。它在服務器端和客戶端都要佔用處理器資源(以便壓縮和解壓縮)，還要佔用磁盤空間。瀏覽器

避免eval()：雖然有時eval()會在時間方面帶來一些效率，但使用它絕對是錯誤的作法。eval()致使你的代碼看起來更髒，並且會逃過大多數壓縮工具的壓縮。

加快JavaScript裝入速度的工具:Lab.js

有許多出色的工具能夠加快JavaScript裝入的速度。值得一提的一款工具是Lab.js。

藉助LAB.js(裝入和阻止JavaScript),你就能夠並行裝入JavaScript文件,加快總的裝入過程,此外,你還能夠爲須要裝入的腳本設置某個順序，那樣就能確保依賴關係的完整性。此外，開發者聲稱其網站上的速度提高了2倍。

使用適當的CDN

如今許多網頁使用內容分發網絡(CDN)。它能夠改進你的緩存機制，由於每一個人均可以使用它。它還能爲你節省一些帶寬。你很容易使用ping檢測或使用Firebug調試那些服務器，以便搞清能夠從哪些方面加快數據的速度。選擇CDN時，要照顧到你網站那些訪客的位置。記得儘量使用公共存儲庫。

面向jQuery的幾個CDN方案:

◆ http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js——谷歌Ajax，關於更多庫的信息請參閱http://code.google.com/apis/libraries /devguide.html#Libraries。

◆ http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js——微軟的CDN

http://code.jquery.com/jquery-1.4.2.min.js——Edgecast (mt)。

網頁末尾裝入JavaScript

若是你關注用戶，用戶因互聯網鏈接速度慢而沒有離開你的網頁，這是一個很是好的作法。易用性和用戶放在首位，JavaScript放在末位。這也許很痛苦，可是你應該有所準備，有些用戶會禁用JavaScript。能夠在頭部分放置須要裝入的一些JavaScript，可是前提是它以異步方式裝入。

異步裝入跟蹤代碼

這一點很是重要。咱們大多數人使用谷歌分析工具(Google Analytics)來得到統計數據。這很好。如今看一下你把你的跟蹤代碼放在哪裏。是放在頭部分?仍是說它使用document.write?而後，若是你沒有使用谷歌分析工具異步跟蹤代碼，那也只能怪你本身。

這就是谷歌分析工具異步跟蹤代碼的樣子,咱們必須認可，它使用DOM，而不是使用document.write，這可能更適合你。它能夠在網頁裝入以前檢測到其中一些事件，這很是重要。如今想想這種狀況，你的網頁甚至尚未裝入,全部用戶都關閉了網頁,已找到了解決頁面瀏覽量錯失的辦法,代碼以下:

 
  1. var _gaq = _gaq || [];  
  2. 　_gaq.push(['_setAccount', 'UA-XXXXXXX-XX']);  
  3. 　_gaq.push(['_trackPageview']);  
  4. 　(function() {  
  5. 　var ga = document.createElement('script'); ga.type = 'text/JavaScript'; ga.async = true;  
  6. 　ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';  
  7. 　var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);  
  8. 　})();  

沒有使用谷歌分析工具?這不是問題，今天的分析工具提供商大多容許你使用異步跟蹤。

Ajax優化

Ajax請求對你網站的性能有重大影響。下面我介紹關於Ajax優化的幾個要點。

緩存你的ajax

先看一下你的代碼。你的ajax能夠緩存嗎?是的，它依賴數據，可是你的ajax請求大多應該能夠緩存。在jQuery中，你的請求在默認狀況下已被緩存，不包括script和jsonp數據類型。

針對Ajax請求使用GET

POST類型請求要發送兩個TCP數據包(先發送標題，而後發送數據)。GET類型請求只須要發送一個數據包(這可能取決於你的cookie數量)。因此，當你的URL長度不到2K，你又想請求一些數據時，不妨使用GET。

使用ySlow

語言層次方面

循環

循環是很經常使用的一個控制結構，大部分東西要依靠它來完成，在JavaScript中，咱們可使用for(;;),while(),for(in)三種循環，事實上，這三種循環中for(in)的效率極差，由於他須要查詢散列鍵，只要能夠就應該儘可能少用。for(;;)和while循環的性能應該說基本（平時使用時）等價。

而事實上，如何使用這兩個循環，則有很大講究。我在測試中有些頗有意思的狀況，見附錄。最後得出的結論是：若是是循環變量遞增或遞減，不要單獨對循環變量賦值，應該在它最後一次讀取的時候使用嵌套的++或--操做符。若是要與數組的長度做比較，應該事先把數組的length屬性放入一個局部變量中，減小查詢次數。

舉例，假設arr是一個數組,最佳的遍歷元素方式爲:

for(var i=0, len = arr.length;i0;i--){...}局部變量和全局變量

局部變量的速度要比全局變量的訪問速度更快，由於全局變量實際上是全局對象的成員，而局部變量是放在函數的棧當中的。

不使用Eval

使用eval至關於在運行時再次調用解釋引擎對內容進行運行，須要消耗大量時間。這時候使用JavaScript所支持的閉包能夠實現函數模版（關於閉包的內容請參考函數式編程的有關內容）

減小對象查找

由於JavaScript的解釋性，因此a.b.c.d.e，須要進行至少4次查詢操做，先檢查a再檢查a中的b，再檢查b中的c，如此往下。因此若是這樣的表達式重複出現，只要可能，應該儘可能少出現這樣的表達式，能夠利用局部變量，把它放入一個臨時的地方進行查詢。

這一點能夠和循環結合起來，由於咱們經常要根據字符串、數組的長度進行循環，而一般這個長度是不變的，好比每次查詢a.length，就要額外進行一個操做，而預先把var len=a.length，則就少了一次查詢。

字符串鏈接

若是是追加字符串，最好使用s+=anotherStr操做，而不是要使用s=s+anotherStr。

若是要鏈接多個字符串，應該少使用+=，如:s+=a;s+=b;s+=c;應該寫成:s+=a + b + c；

而若是是收集字符串，好比屢次對同一個字符串進行+=操做的話，最好使用一個緩存。怎麼用呢？使用JavaScript數組來收集，最後使用join方法鏈接起來，以下:

 
  1. var buf = new Array();for(var i = 0; i < 100; i++){ buf.push(i.toString());}var all = buf.join("");  

類型轉換

類型轉換是你們常犯的錯誤，由於JavaScript是動態類型語言，你不能指定變量的類型。

1.把數字轉換成字符串，應用"" + 1，雖然看起來比較醜一點，但事實上這個效率是最高的，性能上來講:

 
  1. ("" + ) > String() > .toString() > new String()  

這條其實和下面的「直接量」有點相似，儘可能使用編譯時就能使用的內部操做要比運行時使用的用戶操做要快。

String()屬於內部函數，因此速度很快，而.toString()要查詢原型中的函數，因此速度遜色一些，new String()用於返回一個精確的副本。

2.浮點數轉換成整型，這個更容易出錯，不少人喜歡使用parseInt()，其實parseInt()是用於將字符串轉換成數字，而不是浮點數和整型之間的轉換，咱們應該使用Math.floor()或者Math.round()。

另外，和第二節的對象查找中的問題不同，Math是內部對象，因此Math.floor()其實並無多少查詢方法和調用的時間，速度是最快的。

3.對於自定義的對象，若是定義了toString()方法來進行類型轉換的話，推薦顯式調用toString()，由於內部的操做在嘗試全部可能性以後，會嘗試對象的toString()方法嘗試可否轉化爲String，因此直接調用這個方法效率會更高

使用直接量

其實這個影響倒比較小，能夠忽略。什麼叫使用直接量，好比，JavaScript支持使用[param,param,param,...]來直接表達一個數組，以往咱們都使用new Array(param,param,...)，使用前者是引擎直接解釋的，後者要調用一個Array內部構造器，因此要略微快一點點。

一樣，代碼以下:

 
  1. var foo = {}的方式也比var foo = new Object();快，var reg = /../;要比var reg=new RegExp()快。  

字符串遍歷操做

對字符串進行循環操做，譬如替換、查找，應使用正則表達式，由於自己JavaScript的循環速度就比較慢，而正則表達式的操做是用C寫成的語言的API，性能很好。

高級對象

自定義高級對象和Date、RegExp對象在構造時都會消耗大量時間。若是能夠複用，應採用緩存的方式。

DOM相關

插入HTML

不少人喜歡在JavaScript中使用document.write來給頁面生成內容。事實上這樣的效率較低，若是須要直接插入HTML，能夠找一個容器元素，好比指定一個div或者span，並設置他們的innerHTML來將本身的HTML代碼插入到頁面中。

對象查詢

使用[""]查詢要比.items()更快，這和前面的減小對象查找的思路是同樣的，調用.items()增長了一次查詢和函數的調用。

建立DOM節點

一般咱們可能會使用字符串直接寫HTML來建立節點，其實這樣作

沒法保證代碼的有效性

字符串操做效率低

因此應該是用document.createElement()方法，而若是文檔中存在現成的樣板節點，應該是用cloneNode()方法，由於使用createElement()方法以後，你須要設置屢次元素的屬性，使用cloneNode()則能夠減小屬性的設置次數——一樣若是須要建立不少元素，應該先準備一個樣板節點。

定時器

若是針對的是不斷運行的代碼，不該該使用setTimeout，而應該是用setInterval。setTimeout每次要從新設置一個定時器。

其餘

腳本引擎

據我測試Microsoft的JScript的效率較Mozilla的Spidermonkey要差不少，不管是執行速度仍是內存管理上，由於JScript如今基本也不更新了。但SpiderMonkey不能使用ActiveXObject
文件優化

文件優化也是一個頗有效的手段，刪除全部的空格和註釋，把代碼放入一行內，能夠加快下載的速度，注意，是下載的速度而不是解析的速度，若是是本地，註釋和空格並不會影響解釋和執行速度。

實例,最初的代碼,代碼以下:

 
  1. var s = [x1,x2,.....];  
  2. var t = [y1,y2,.....].  
  3. //s和t的長度對應，大約2700個元素。  
  4. function String.prototype.s2c(){  
  5. var k='';  
  6. for(var i=0;i<this.length;i++)  
  7. k+=(s.indexOf(this.charAt(i))==-1)?this.charAt(i):t.charAt(s.indexOf(this.charAt(i)))  
  8. return k;  
  9. }  

這段代碼爲:把String中在s數組出現的字符用t中相應位置的字符替換,這種方法能夠用在繁簡轉換上。String的長度不小，通常爲一篇blog文章的長度。

第一次優化:把k變成數組，由於字符串相加沒有Array.join的內存效率好,代碼以下:

 
  1. function String.prototype.s2c(){  
  2. var k=[];  
  3. for(var i=0;i<this.length;i++)  
  4. k.push((s.indexOf(this.charAt(i))==-1)?this.charAt(i):t.charAt(s.indexOf(this.charAt(i))));  
  5. return k.join('');  
  6. }  

效率提升很多。

第二次優化:減小循環內的運算次數,代碼以下:

 
  1. function String.prototype.s2c(){  
  2. var k=[];  
  3. for(var i=0;i<this.length;i++) {  
  4.     var thisC = this.charAt(i);  
  5.     k.push((s.indexOf(thisC)==-1)?thisC:t.charAt(s.indexOf(thisC)));  
  6. }  
  7. return k.join('');  
  8. }  

這一次把三次this.charAt(i)調用變成了一次調用，效率也有所提升。

第三次優化:把數組的indexOf改爲HashMap查找方式，修改循環裏面的this.length

先建立HashMap,代碼以下:

 
  1. var sMap = {},tMap={};  
  2.     for(var i=0;i<s.length;i++) {  
  3.         var sChar = s.charAt(i);  
  4.         var tChar = t.charAt(i);  
  5.         sMap[sChar ] = tChar;  
  6.         tMap[tChar] = sChar;  
  7.     }  

而後修改代碼,代碼以下:

 
  1. function String.prototype.s2c(){  
  2. var k=[];  
  3. var len = this.length;  
  4. for(var i=0;i<len;i++) {  
  5.     var thisC = this.charAt(i);  
  6.     k[i] = sMap[thisC] || thisC;  
  7. }  
  8. return k.join('');  
  9. }  

這一次改進性能也會有比較好的提高,最後一次優化：改進數組訪問的性能,把原字符串split成數組,而後在一個數組上操做,代碼以下:

 
  1. function String.prototype.s2c(){  
  2. var len = this.length;  
  3. var k=this.split('');  
  4. for(var i=0;i<len;i++) {  
  5.     var thisC = this[i];  
  6.     var to = sMap(thisC);  
  7.     to?k[i]=to:''; //這裏有一個小技巧，這個技巧致使當sMap裏沒有thisC的映射時下面能夠少一次賦值運算  
  8. }  
  9. return k.join('');  
  10. }  

在JavaScript編程中所找到的提升JavaScript運行性能的一些方法，其實這些經驗都基於幾條原則：

直接拿手頭現成的東西比較快,如局部變量比全局變量快，直接量比運行時構造對象快等等,儘量少地減小執行次數,好比先緩存須要屢次查詢的,儘量使用語言內置的功能,好比串連接,儘量使用系統提供的API,由於這些API是編譯好的二進制代碼,執行效率很高,同時,一些基本的算法上的優化,一樣能夠用在JavaScript中,好比運算結構的調整,這裏就再也不贅述了,可是因爲JavaScript是解釋型的,通常不會在運行時對字節碼進行優化,因此這些優化仍然是很重要的.

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程