摘要：
網站快要上線了，但是網站打開速度很慢怎麼辦？這裏介紹一下對網頁進行優化的方法和技巧，加快網頁瀏覽速度，讓網頁速度飛起來
測試網頁性能工具
⑴Page Speed：
是開源 Firefox/Firebug 插件。網站管理員和網絡開發人員可以使用 Page Speed 來評估他們網頁的性能，並獲得有關如何改進性能的建議。
⑵yslow：
YSlow可以對網站的頁面進行分析，並告訴你爲了提高網站性能，如何基於某些規則而進行優化。
安裝方法：
安裝：直接在firefox組件查找，安裝即可
使用方法：
1）
這裏是如何解釋的顏色代碼分數：
· 高優先級。這些建議代表了最大的潛在的性能贏得。你應該首先解決這些項目。
· 中等優先級。這些建議可能代表較小的勝或更多的工作來實現。您應該解決這些項目的未來。
· 工作罰款或低優先級。如果顯示建議，作爲與“+”號表示，他們很可能代表未成年人勝。您應該只關注這些項目後，你處理的優先級較高的的。
· 只有信息的消息。無論這些項目不適用此頁或有一個問題，在運行測試。
關於它的使用更詳細的資料參考：http://code.google.com/intl/zh-CN/speed/page-speed/docs/using_firefox.html
2）
視圖顯示了等級爲網頁的成績單。整個字母等級爲頁面顯示在頂部隨着全面數值的表現。這個頁面是基於22可分級的高性能網頁的規則(見性能規則)。這些規則是列在按重要性的順序,從最重要不重要。從 A 級到 F 級，A 級爲最高。更詳細的使用方法參考：http://www.yslow.net/show.php?tid=123
網站性能最佳慣例和規則
網站優化的原則是什麼呢？這裏推薦雅虎的23條網站優化軍規
雅虎的卓越性能團隊已經確定了23個軍規：
1. 減少HTTP請求次數
合併圖片、CSS、JS，改進首次訪問用戶等待時間。
2. 使用CDN
就近緩存==>智能路由==>負載均衡==>WSA全站動態加速
3. 避免空的src和href
當link標籤的href屬性爲空、script標籤的src屬性爲空的時候，瀏覽器渲染的時候會把當前頁面的URL作爲它們的屬性值，從而把頁面的內容加載進來作爲它們的值。測試
4. 爲文件頭指定Expires
使內容具有緩存性。避免了接下來的頁面訪問中不必要的HTTP請求。
5. 使用gzip壓縮內容
壓縮任何一個文本類型的響應，包括XML和JSON，都是值得的。舊文章
6. 把CSS放到頂部
7. 把JS放到底部
防止js加載對之後資源造成阻塞。
8. 避免使用CSS表達式
9. 將CSS和JS放到外部文件中
目的是緩存，但有時候爲了減少請求，也會直接寫到頁面裏，需根據PV和IP的比例權衡。
10. 權衡DNS查找次數
減少主機名可以節省響應時間。但同時，需要注意，減少主機會減少頁面中並行下載的數量。
IE瀏覽器在同一時刻只能從同一域名下載兩個文件。當在一個頁面顯示多張圖片時，IE 用戶的圖片下載速度就會受到影響。所以新浪會搞N個二級域名來放圖片。
11. 精簡CSS和JS
12. 避免跳轉
同域：注意避免反斜槓 “/” 的跳轉；
跨域：使用Alias或者mod_rewirte建立CNAME（保存域名與域名之間關係的DNS記錄）
13. 刪除重複的JS和CSS
重複調用腳本，除了增加額外的HTTP請求外，多次運算也會浪費時間。在IE和Firefox中不管腳本是否可緩存，它們都存在重複運算JavaScript的問題。
14. 配置ETags
它用來判斷瀏覽器緩存裏的元素是否和原來服務器上的一致。比last-modified date更具有彈性，例如某個文件在1秒內修改了10次，Etag可以綜合Inode(文件的索引節點(inode)數)，MTime(修改時間)和Size來精準的進行判斷，避開UNIX記錄MTime只能精確到秒的問題。 服務器集羣使用，可取後兩個參數。使用ETags減少Web應用帶寬和負載
15. 可緩存的AJAX
“異步”並不意味着“即時”：Ajax並不能保證用戶不會在等待異步的JavaScript和XML響應上花費時間。
16. 使用GET來完成AJAX請求
當使用XMLHttpRequest時，瀏覽器中的POST方法是一個“兩步走”的過程：首先發送文件頭，然後才發送數據。因此使用GET獲取數據時更加有意義。
17. 減少DOM元素數量
是否存在一個是更貼切的標籤可以使用？人生不僅僅是DIV+CSS
18. 避免404
有些站點把404錯誤響應頁面改爲“你是不是要找***”，這雖然改進了用戶體驗但是同樣也會浪費服務器資源（如數據庫等）。最糟糕的情況是指向外部 JavaScript的鏈接出現問題並返回404代碼。首先，這種加載會破壞並行加載；其次瀏覽器會把試圖在返回的404響應內容中找到可能有用的部分當作JavaScript代碼來執行。
19. 減少Cookie的大小
20. 使用無cookie的域
比如圖片 CSS 等，Yahoo! 的靜態文件都在 yimg.com 上，客戶端請求靜態文件的時候，減少了 Cookie 的反覆傳輸對主域名 (yahoo.com) 的影響。
21. 不要使用濾鏡
png24的在IE6半透明那種東西，別亂使，淡定的切成PNG8+jpg
22. 不要在HTML中縮放圖片
23. 縮小favicon.ico並緩存
影響我的網站速度的因素
測試幾個主網頁總結出影響我的網頁速度的幾個因素：
一級因素：
①啓動壓縮
②瀏覽器緩存
二級因素：
①提供壓縮後的圖片
找到原因下面就好辦了，對症下藥，下面將一個個解決。
解決辦法：
-
開啓壓縮功能----gzip技術：文本頁面(htm/css/js)啓用gzip壓縮後，一般可以壓縮70%左右.
在 apache2.x 版本以上，需開啓Deflate 模塊。事實上，Apache2.x系列已經內置了這這個模塊，因此，只需要安裝時打開即可： 當然當時編譯的時候沒有打開，現在單獨編譯這個兩個模塊：mod_deflate模塊
編譯mod_deflate模塊
1 |
cd
/root/httpd-2.2.3/modules/filters |
2 |
3 |
/usr/local/apache/bin/apxs
-i -a -c mod_deflate.c //編譯 |
4 |
5 |
/usr/local/apache/bin/apachectl
restart //重啓apche |
查看phpinfo
編輯httpd.conf
添加下面這段話：
<ifmodule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/plain text/css application/x-httpd-php application/x-javascript
DeflateCompressionLevel 9
SetOutputFilter DEFLATE
#DeflateFilterNote Input instream
#DeflateFilterNote Output outstream
#DeflateFilterNote Ratio ratio
#LogFormat '"%r" %{outstream}n/%{instream}n (%{ratio}n%%)' deflate
#CustomLog logs/deflate_log.log deflate
</ifmodule>
第一句：是支持壓縮的文件格式
第二句：是壓縮的等級，這裏是最高等級
第三句：對所有站點進行壓縮
更加詳細的學習可以參考apache的官方手冊：http://httpd.apache.org/docs/2.0/mod/mod_deflate.html
測試gzip安裝是否成功：
下面二個測試網站,可以測試是否使用了gzip
http://www.whatsmyip.org/mod_gzip_test/
http://www.gidnetwork.com/tools/gzip-test.php
2.開啓瀏覽器緩存：
-
php header函數-----網頁的緩存
-
這裏使用php的header函數實現網頁緩存
01 |
//開啓瀏覽器緩存 |
02 |
03 |
if (($src_uri = realpath( $_GET["uri"]
)) === false) { |
04 |
05 |
/*
The file does not exist */ |
06 |
07 |
header( "HTTP/1.1
404 Not Found" ); |
08 |
09 |
echo( "<html><body><h1>HTTP
404 - Not Found</h1></body></html>" ); |
10 |
11 |
exit; |
12 |
13 |
} |
14 |
15 |
/* |
16 |
17 |
*
Set the HTTP response headers that will |
18 |
19 |
*
tell the client to cache the resource. |
20 |
21 |
*/ |
22 |
23 |
$file_last_modified = filemtime( $src_uri ); |
24 |
25 |
header( "Last-Modified:
" . date( "r", $file_last_modified )
); |
26 |
27 |
$max_age =
7 * 24 * 60 * 60; //
7 days |
28 |
29 |
$expires = $file_last_modified + $max_age; |
30 |
31 |
header( "Expires:
" . date( "r", $expires )
); |
32 |
33 |
$etag = dechex( $file_last_modified ); |
34 |
35 |
header( "ETag:
" . $etag ); |
36 |
37 |
$cache_control = "must-revalidate,
proxy-revalidate, max-age=" . $max_age . ",
s-maxage=" . $max_age; |
38 |
39 |
header( "Cache-Control:
" . $cache_control ); |
1 |
************************************** |
1 |
部分解釋： |
1 |
Last-Modified：瀏覽器第一次訪問的標識符，作爲以後是否訪問過的一個重要標誌 |
1 |
Etag：關於web資源的一個標識符，如斷點下載，作爲以後是否訪問過的標誌 |
1 |
Cache-Control：指定請求和響應遵循的緩存機制。在請求消息或響應消息中設置Cache-Control並不會修改另一個消息處理過程中的緩存處理過程。 |
1 |
請求時的緩存指令包括no-cache、no-store、max-age、max-stale、min-fresh、only-if-cached， |
1 |
響應消息中的指令包括public、private、no-cache、no-store、no-transform、must-revalidate、proxy-revalidate、max-age。 |
1 |
各個消息中的指令含義如下：
Public指示響應可被任何緩存區緩存。 Private指示對於單個用戶的整個或部分響應消息，不能被共享緩存處理。 |
1 |
這允許服務器僅僅描述當用戶的部分響應消息，此響應消息對於其他用戶的請求無效。
no-cache指示請求或響應消息不能緩存 no-store用於防止重要的信息被無意的發佈。 |
1 |
在請求消息中發送將使得請求和響應消息都不使用緩存。
max-age指示客戶機可以接收生存期不大於指定時間（以秒爲單位）的響應。 |
1 |
min-fresh指示客戶機可以接收響應時間小於當前時間加上指定時間的響應。
max-stale指示客戶機可以接收超出超時期間的響應消息。 |
1 |
如果指定max-stale消息的值，那麼客戶機可以接收超出超時期指定值之內的響應消息 |
-
Apache模塊mod_expires=======對圖像等資源的資源的緩存
-
由於php的header函數只能緩存網頁中的文本，但是圖像，css，js資源等不能緩存，這裏使用mod_expires模塊對圖片資源進行緩存
官方對mod_expires的說明；
這個模塊控制服務器應答時的Expires頭內容和Cache-Control頭的max-age指令。有效期(expiration date)可以設置爲相對於源文件的最後修改時刻或者客戶端的訪問時刻。
這些HTTP頭向客戶端表明了文檔的有效性和持久性。如果有緩存，文檔就可以從緩存(除已經過期)而不是從服務器讀取。接着，客戶端考察緩存中的副本，看看是否過期或者失效，以決定是否必須從服務器獲得更新，官方手冊：http://www.phpchina.com/manual/apache/mod/mod_expires.html
編譯mod_expires模塊：
Cd /root/httpd-2.2.3/modules/metadata
/usr/local/apache/bin/apxs -i -a -c mod_expires.c //編譯
編輯httpd.conf配置：添加下面內容
<IfModule mod_expires.c>
ExpiresActive on
ExpiresDefault "access plus 1 month"
ExpiresByType text/html "access plus 1 months"
ExpiresByType text/css "access plus 1 months"
ExpiresByType image/gif "access plus 1 months"
ExpiresByType image/jpeg "access plus 1 months"
ExpiresByType image/jpg "access plus 1 months"
ExpiresByType image/png "access plus 1 months"
EXpiresByType application/x-shockwave-flash "access plus 1 months"
EXpiresByType application/x-javascript "access plus 1 months"
ExpiresByType video/x-flv "access plus 1 months"
</IfModule>
解釋：第一句--開啓服務
第二句--默認時間是一個月
在下面是關於各種類型的資源的緩存時間設置
====================================
另外還有一種使用：mod_cache的緩存方式，這個不僅支持http本地緩存，還支持hhtp代理緩存，
使用方法：
編譯mod_cache,mod_mem_cache,mod_disk_cache 模塊
Cd /root/httpd-2.2.3/modules/cache
/usr/local/apache/bin/apxs -i -a -c mod_cache.c cache_util.c cache_cache.c cache_storage.c cache_pqueue.c cache_hash.c //編譯
/usr/local/apache/bin/apxs -i -a -c mod_mem_cache.c //編譯
/usr/local/apache/bin/apxs -i -a -c mod_disk_cache.c //編譯
編輯httpd.conf文件
添加：
<IfModule mod_cache.c>
#內存緩存
<IfModule mod_mem_cache.c>
CacheEnable mem /usr/local/apache/htdocs/Mobile/share
MCacheSize 4096
MCacheRemovalAlgorithm LRU
MCacheMaxObjectCount 100
MCacheMinObjectSize 1
MCacheMaxObjectSize 2048
CacheMaxExpire 864000
CacheDefaultExpire 86400
#CacheDisable /php
</IfModule>
#硬盤緩存
<IfModule mod_disk_cache.c>
CacheRoot /home/zhangy/cachetest
#CacheSize 256
CacheEnable disk /
CacheDirLevels 4
#CacheMaxFileSize 64000
#CacheMinFileSize 1
#CacheGcDaily 23:59
CacheDirLength 3
</IfModule>
</IfModule>
/usr/local/apache/bin/apachectl restart //重啓apche
關於參數說明和更多的學習參考：http://blog.51yip.com/apachenginx/898.html
3.提供壓縮後圖片
對圖片進行縮放處理以及其他效果處理，
這裏不使用GD類庫，使用ImageMagick來實現圖片的壓縮等等功能
之前我寫過一篇文章：《PHP：ImageMagick完美代替GB類庫處理圖像》，可以參考這篇文章
--------------------------------------------------------------------------------------
完成上面幾部，這次打開自己的網站看看，是不是飛起來了呢。。。。。。。。。。。