很久沒寫技術方面的東西,是因為在做了一段時間的技術以后我越發發現,學什么技術或者技術應該鉆研到什么層次真的不是最重要的,最重要的是解決問題的方法和能力。所以以后如果再寫技術類的文章,定要少些技術細節,多一些方法和思路,今天就給大家介紹幾個提高頁面裝載時間的方法,都是我在工作當中實踐出來的經驗。
首先給大家列出幾個阻礙loadtime提高的因素,有不足的歡迎補充:
1、頁面大小;
2、頁面連接數;
3、服務器抗壓能力;
4、網絡狀況(包括帶寬和網段等因素);
一、頁面大小
頁面大小是指頁面內容的字節數。
在同等網絡環境下,頁面越小自然下載時間越快,所以在合理范圍內減少頁面大小是可以優化下載速度的。而頁面大小主要是由HTML的代碼量來決定的(當然也可能包括一些css或者js的代碼,不過主體還是HTML代碼),要想減小頁面的大小,就得根據W3C的標準來優化HTML代碼結構,去除一些垃圾無意義的代碼,前2年轟轟烈烈的web重構大致就是這個意思。如果你對web標準或者web重構不了解,可以去google一下這方面的內容,不過國內很多學習者對web重構的理解有偏差,單一地認為是用div+css取代table布局,這種觀點就不必去理會了。
二、頁面連接數
頁面連接數是指瀏覽器從服務器上下載完當前頁面以及其所需資源的過程中向服務器發出的請求次數。
舉個例子,一個頁面文件當中包括一張圖片、一個外聯的css文件和一個外聯的js文件,那么完全下載完這個頁面所需要對服務器發送的請求就是4個(當前頁面html、圖片、css和js各占一個連接數),該頁面的連接數也就是4個。
服務器處理連接數是需要耗費資源和時間的,所以多次少取不如少次多取。
就好比方說你和你五個哥們一起去買車票,總共只有一個售票窗口,是6個人排隊各買各的快還是一個人排隊買6個人的快呢?答案很明顯。
所以降低頁面連接數是非常有必要并且非常有效的辦法。
那么如果來降低頁面連接數呢?這里有一些技巧,比如寫css需要用到背景圖片的時候,能用一張解決問題的絕不用兩張,甚至最好不用圖片,我本人就非常喜歡無圖片的綠色環保的css代碼。
還有就是能統一到一個文件里面的盡量統一到一個文件里面,比如js文件和css文件都沒有必要外聯,都可以吐到一個相應的html代碼中間,讓服務器一次性發送給瀏覽器,這樣的好處有很多:首先可以減少頁面連接數,其次可以避免由于網絡問題造成的頁面裸奔現象(沒有css修飾的頁面就是裸奔)和js功能函數沒load完造成頁面功能不完整的現象。
看到這里,有的哥們可能會問,把js和css代碼都寫在一個頁面里面豈不是很不好維護么?web標準不是崇尚結構和表現分離,結構與行為分離么?然也,web標準確實是對的。但是把js和css代碼與HTML搞在一起只是給瀏覽器看的,有很多的方法可以做到頁面生成之前css、js和HTML都是完全分離的,而生成的頁面卻是三者的綜合體。比如apache的頁面拼裝功能,或者smarty中的模版嵌套功能等。
另外,設置瀏覽器的頁面緩存也是一個不錯的辦法,能非常有效地降低頁面連接數,提高頁面加載速度。當然這只是針對那些實時性不強的網站來說。
三、服務器抗壓能力
服務器抗壓能力通常指的是服務器所能承受的最大訪問人數。
這是一個硬件指標,不過也可以通過對軟件和頁面的優化來提高服務器的抗壓能力。
這里的服務器主要包括兩項,一個是http的服務器(apache或者iis),還有一個是數據庫服務器。
這是所說的優化主要是有效減少服務器的連接數、提高程序執行效率,比如靜態化頁面或者使用緩存可以減少數據庫的壓力,減少頁面連接數可以減少http服務器的壓力等。還可以通過安裝一些軟件或者模塊來達到這個目的,比如zend的php加速引擎,以及apc等。
四、網絡狀況
網絡狀況指的是用戶當前的網絡環境。
比如是撥號用戶還是寬帶用戶,帶寬是512k還是1M等等,這些硬件指標就像通向你電腦的管道,管道越大,相同時間內下載的東西就越多,速度自然就越快了。
當然這個因素不是網站開發者可以去控制的。
以上就是我總結出來的幾個提高頁面loadtime的方法,有什么不足的地方還希望大家能補充一下,多多益善。
Yahoo 性能組寫了13條, 全面些, 算是給你的補充
1. 減少 HTTP 請求
2. 使用 CDN
3. 為網頁元素添加 Expires Header
4. 支持 Gzip
5. 把 CSS 放在網頁頂部
6. 把活動的腳本文件移到底部
7. CSS中避免使用Expression語句
8. 使用外部 javascript. 和 CSS 文件
9. 減少 DNS 查表時間
10. 最小化 javascript
11. 避免網頁跳轉
12. 刪除重復的腳本
13 .配置Etag
新聞熱點
疑難解答