如果是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%左右。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM