js效能最佳化 如何更快速載入你的JavaScript頁面

來源:互聯網
上載者:User

確保代碼盡量簡潔

  不要什麼都依賴JavaScript。不要編寫重複性的指令碼。要把JavaScript當作糖果工具,只是起到美化作用。別給你的網站添加大量的JavaScript代碼。只有必要的時候用一下。只有確實能改善使用者體驗的時候用一下。

  盡量減少DOM訪問

  使用JavaScript訪問DOM元素很容易,代碼更容易閱讀,但是速度很慢。下面介紹幾個要點:限制使用JavaScript來修飾網頁布局,把針對訪問元素的引用緩衝起來。有時,當你的網站依賴大量的DOM改動時,就應該考慮限制你的標記。這是改用HTML5、捨棄那些原來的XHTML和HTML4的一個充分理由。你可以查看DOM元素的數量,只要在Firebug外掛程式的控制台中輸入:document.getElementsByTagName('*').length。

  壓縮代碼

  要提供經過壓縮的JavaScript頁面,最有效辦法就是先用JavaScript壓縮公用程式對你的代碼壓縮一下,這種壓縮公用程式可以壓縮變數和參數名稱,然後提供因而獲得的代碼,使用了gzip壓縮。

  是的,我沒有壓縮我的main.js,但你要檢查有沒有未經壓縮的任何jQuery外掛程式,別忘了壓縮。下面我列出了壓縮方面的幾個方案。

  ◆ YUI壓縮公用程式(jQueryTeam Dev就使用它),初學者指南

(http://www.slideshare.net/nzakas/extreme-JavaScript-compression-with-yui-compressor)、第二指南 (http://vilimpoc.org/research/js-speedup/)和官方網站(http://developer.yahoo.com/yui/compressor/)。

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

  ◆ 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——GoogleAjax,關於更多庫的資訊請參閱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分析工具(Google Analytics)來獲得統計資料。這很好。現在看一下你把你的跟蹤代碼放在哪裡。是放在頭部分?還是說它使用document.write?然後,如果你沒有使用Google分析工具非同步跟蹤代碼,那也只能怪你自己。

  這就是Google分析工具非同步跟蹤代碼的樣子。我們必須承認,它使用DOM,而不是使用document.write,這可能更適合你。它可以在網頁裝入之前檢測到其中一些事件,這非常重要。現在想一想這種情況,你的網頁甚至還沒有裝入,所有使用者都關閉了網頁。已找到瞭解決頁面瀏覽量錯失的辦法。

複製代碼 代碼如下:var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXX-XX']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/JavaScript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

  沒有使用Google分析工具?這不是問題,今天的分析工具供應商大多允許你使用非同步跟蹤。

  Ajax最佳化

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

  緩衝你的ajax

  先看一下你的代碼。你的ajax可以緩衝嗎?是的,它依賴資料,但是你的ajax請求大多應該可以緩衝。在jQuery中,你的請求在預設情況下已被緩衝,不包括script和jsonp資料類型。

  針對Ajax請求使用GET

  POST類型請求要發送兩個TCP資料包(先發送標題,然後發送資料)。GET類型請求只需要發送一個資料包(這可能取決於你的cookie數量)。所以,當你的URL長度不到2K,你又想請求一些資料時,不妨使用GET。

  使用ySlow

  說到效能,ySlow既簡單,又極其有效。它可以對你的網站進行評分,顯示哪些方面需要改正,以及應關注哪些方面。

  另外支一招:把你的JavaScript打包成PNG檔案

  設想一下:把你的JS和CSS添加到圖片的末尾,然後用CSS來裁切,通過一次HTTP請求來獲得應用程式中所需的所有資訊。

  我最近找到了這個方法。它基本上把你的JavaScript/css資料打包成PNG檔案。之後,你可以拆包,只要使用畫布API的getImageData()。此外,它非常高效。你可以在不縮小資料的情況下,多壓縮35%左右。而且是無損壓縮!我得指出,對比較龐大的指令碼來說,在圖片指向畫布、讀取像素的過程中,你會覺得有“一段”裝入時間。
英文原文:http://www.1stwebdesigner.com/design/load-JavaScript-faster/

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.