如果是JS文件限制了你的頁面加載速度,不用再擔心了

經常聽到客戶問這樣的問題:你們幫我看看我的網站怎麼打開那麼慢啊,是不是中毒了?

然後我們就去測試他的網站,發現問題簡單的很:每個網頁的開頭有着不計其數的外聯文件。樣式表還好,最多的不外乎幾十K。可怕的是JS文件,這些個企業的負責人都不是IT專業人員,兼職管理企業的網站,喜歡迎合領導搞些特效什麼的,又不知道優化。什麼JQUERY,特效,驗證等等,全都羅列在head裏,林林總總快一千k了。

今天說說給他們做優化的那些簡單的手段吧。

一、給JS文件減肥。

有的人爲了給網站增加炫目效果,往往會使用一些JS效果代碼,這在上個世紀似乎還很流行,對於現在來說,最好在用戶體驗確實需要的情況下,使用這些東西。至於希望給自己的JS文件減肥的童鞋,網上的工具裏有很多,在百度一搜就會有應用,功能很全。把一個已經完善的JS文件進行壓縮是主流網站的一個慣性動作,因爲壓縮量確實很可觀。以下是幾個比較好的壓縮工具:

YUI壓縮工具 (http://developer.yahoo.com/yui/compressor/)
Dean Edwards Packer (http://dean.edwards.name/packer/)
JSMin (http://crockford.com/JavaScript/jsmin)

二、儘量減少DOM訪問

使用JavaScript訪問DOM元素很容易,代碼更容易閱讀,但是速度很慢。下面介紹幾個要點:限制使用JavaScript來修飾網頁佈局,把針對訪問元素的引用緩存起來。有時,當你的網站依賴大量的DOM改動時,就應該考慮限制你的標記。這是改用HTML5、捨棄那些原來的XHTML和HTML4的一個充分理由。

三、使用適當的CDN

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

四、把不着急用的JS文件放到頁面的底部

當更多地考慮用戶對網站的速度體驗時,在頁面底部裝入JS文件是一個非常好的做法。易用性和用戶放在首位,JavaScript放在末位。對於追求技術的很多前端人員來說,這似乎很難接受,但也應該有所準備,有些用戶會禁用JavaScript。

五、在頭部以異步方式裝入JS

爲了統計網站的各種信息,我們通常會藉助網上提供的免費統計功能,比如cnzz的統計,比如google分析,比如百度統計,關鍵的是,好多統計爲了保證統計效果,可能會建議用戶將統計代碼放在頁面的頭部。如果用戶選擇這麼做,可能會在統計代碼請求數據不穩定時給他的網站用戶帶來非常不好的體驗。不過,目前大部分統計服務都允許你以異步方式載入放在頭部的JS文件,在很大程度上解決了這一問題。

六、把你的JavaScript打包成PNG文件

這個辦法是最近在網上看到老外的一種做法,思維很特別,還沒有嘗試過,有興趣的朋友可以嘗試一下。具體是這樣:把你的JS和CSS添加到圖片的末尾,然後用CSS來裁切,通過一次HTTP請求來獲得應用程序中所需的所有信息,它把你的JavaScript/css數據打包成PNG文件,然後你還可以拆包,只要使用畫布API的getImageData()。這種方法效率非常高,可以在不縮小數據的情況下,多壓縮35%左右。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章