本文主要和大家分享PHP提升網站效能的細節,希望能幫助大家。
第一條、盡可能的減少 HTTP 的請求數 (Make Fewer HTTP Requests )
http請求是要開銷的,想辦法減少請求數自然可以提高網頁速度。常用的方法,合併css,js(將一個頁面中的css和js檔案分別合併)以及 Image maps和css sprites等。當然或許將css,js檔案拆分多個是因為css結構,共用等方面的考量。阿里巴巴中文站當時的做法是開發時依然分開開發,然後在後台對js,css進行合併,這樣對於瀏覽器來說依然是一個請求,但是開發時仍然能還原成多個,方便管理和重複引用。 yahoo甚至建議將首頁的css和js 直接寫在頁面檔案裡面,而不是外部引用。因為首頁的訪問量太大了,這麼做也可以減少兩個請求數。而事實上國內的許多門戶都是這麼做的。
而css sprites是指只用將頁面上的背景圖合併成一張,然後透過css的background-position屬性定義不過的值來取他的背景。淘寶和阿里巴巴中文站目前都是這樣做的。有興趣的可以看下淘寶和阿里巴巴的背景圖。
http://www.csssprites.com/ 這是一個工具網站,它可以自動將你上傳的圖片合併並給予對應的background-position座標。並將結果以png和gif的格式輸出。
第二條、使用CDN(內容分發網路): Use a Content Delivery Network
說實話,對於CDN這一塊自己並不是很了解,簡單地講,透過在現有的Internet中增加一層新的網路架構,將網站的內容發佈到最接近用戶的cache伺服器內,透過DNS負載平衡的技術,判斷用戶來源就近訪問cache伺服器取得所需的內容,杭州的用戶訪問近杭州伺服器上的內容,北京的訪問近北京伺服器上的內容。這樣可以有效減少資料在網路上傳輸的時間,提高速度。更詳細內容大家可以參考百度百科上對於CDN的解釋。 Yahoo!把靜態內容分佈到CDN減少了使用者影響時間20%或更多。
第三條、 添加Expire/Cache-Control 頭:Add an Expires Header
現在越來越多的圖片,腳本,css,flash被嵌入到頁面中,當我們訪問他們的時候勢必會做許多次的http請求。其實我們可以透過設定Expires header 來快取這些檔案。 Expire其實就是透過header封包來指定特定類型的檔案在覽器中的快取時間。大多數的圖片,flash在發布後都是不需要經常修改的,做了緩存以後這樣瀏覽器以後就不需要再從伺服器下載這些文件而是而直接從緩存中讀取,這樣再次訪問頁面的速度會大大加快。一個典型的HTTP 1.1協定傳回的頭資訊:
HTTP/1.1 200 OK Date: Fri, 30 Oct 1998 13:19:41 GMT Server: Apache/1.3.3 (Unix) Cache-Control: max-age=3600, must-revalidate Expires: Fri, 30 Oct 1998 14:19:41 GMT Last-Modified: Mon, 29 Jun 1998 02:28:12 GMT ETag: “3e86-410-3596fbbc” Content-Length: 1040 Content-Type: text/html
其中透過伺服器端腳本設定Cache-Control和Expires可以完成。
如,在php中設定30天後過期
<!--pHeader("Cache-Control: must-revalidate"); $offset = 60 * 60 * 24 * 30; $ExpStr = "Expires: " . gmdate("D, d M Y H:i:s", time() + $offset) . " GMT"; Header($ExpStr);-->
也可以透過設定伺服器本身完成,這些偶就不是很清楚了,呵呵。想了解跟多的朋友可以參考http://www.web-caching.com/
就我了解,目前阿里巴巴中文站的Expires過期時間是30天。不過期間也有過問題,特別是對於腳本過期時間的設定還是應該仔細考慮下,不然相應的腳本功能更新後客戶端可能要過很長一段時間才能「感知」到這樣的變化。以前做[suggest專案] 的時候就遇到這個問題。所以,哪些應該緩存,哪些不該緩存還是該仔細斟酌一番。
第四條、啟用Gzip壓縮:Gzip Components
Gzip的想法就是把檔案先在伺服器端壓縮,然後再傳輸。這樣可以顯著減少檔案傳輸的大小。傳輸完畢後瀏覽器會 重新對壓縮過的內容進行解壓縮,並執行。目前的瀏覽器都能「良好」支援 gzip。不只瀏覽器可以識別,各大「爬蟲」也同樣可以識別,各位seoer可以放下心了。而且gzip的壓縮比例非常大,一般壓縮率為85%,就是 說伺服器端100K的頁面可以壓縮到25K左右再傳送到客戶端。具體的Gzip壓縮原理大家可以參考csdn上的《gzip壓縮演算法》 這篇文章。雅虎特別強調, 所有的文字內容都應該被gzip壓縮: html (php), js, css, xml, txt… 這一點我們網站做得不錯,是一個A。以前我們的首頁也不是A,因為首頁還有很多廣告代碼投放的js,這些廣告代碼擁有者的網站的js沒有經過gzip壓縮,也會拖累我們網站。
以上三點大多屬於伺服器端的內容,本人也是粗淺地了解而已。說得不對的地方有待各位指正。
第五條、把css放在頁面最上面 ( Put Stylesheets at the Top)
將css放在頁面最上面,這是為什麼?因為 ie,firefox等瀏覽器在css全部傳輸完全之前不會去渲染任何的東西。理由誠如小馬哥說得那麼簡單。 css,全名為Cascading Style Sheets (層疊樣式表單)。層疊即意義這後面的css可以覆蓋前面的css,級別高的css可以覆蓋級別低的css。在[css之! important] 這篇文章的最下面曾經簡單地提到過這層級關係,這裡我們只需要知道css可以被覆蓋的。既然前面的可以被覆蓋,瀏覽器在他完全加載完畢之後再去渲染無疑也是合情合理的很多瀏覽器下,如IE,把樣式表放在頁面的底部的問題在於它禁止了網頁內容的順序顯示。瀏覽器阻止顯示以免重畫頁面元素,那使用者只能看到空白頁了。 Firefox不會阻止顯示,但這意味著當樣式表下載後,有些頁面元素可能需要重畫,這導致閃爍問題。所以我們應該盡快讓css載入完畢
順著這層意思,如果我們再細究的話,其實還有可以優化的地方。例如本站上麵包含的兩個css文件,<link rel=“stylesheet” rev=“stylesheet” href=“http://www.space007.com/themes/google/style/google.css” type=“text /css” media=“screen” /> 和
第六條、將script放在頁面最下面(Put Scripts at the Bottom )
將腳本放在頁面最下面的目的有那麼兩點:
1、 因為防止script腳本的執行封鎖頁面的下載。在頁面loading的過程中,瀏覽器讀到js執行語句的時候一定會把它全部解釋完畢後在會接下來讀下 面的內容。不信你可以寫一個js死循環看看頁面下面的東西還會不會出來。 (setTimeout 和setInterval的執行有點類似於多線程,在相應的回應時間之前也會繼續下面的內容渲染。)瀏覽器這麼做的邏輯是因為js隨時可能執行location.href或是其他可能完全中斷此頁面過程的函數,即如此,當然得等他執行完畢之後再加載咯。所以放在頁面最後,可以有效減少頁面可視元素的載入時間。
2、腳本引起的第二個問題是它阻塞並行下載數量。 HTTP/1.1規格建議瀏覽器每個主機的平行下載數不超過2個(IE只能為2個,其他瀏覽器如ff等都是預設為2個,不過新出的ie8可以達6個) 。因此如果您把圖像檔案分佈到多台機器的話,您可以達到超過2個的並行下載。但是當腳本檔案下載時,瀏覽器不會啟動其他的並行下載。
當然對各個網站來說,把腳本都放到頁面底部載入的可行性還是值得商榷的。就比如阿里巴巴中文站的頁面。很多地方有內聯的js,頁面的顯示嚴重依賴於此,我承認這和無侵入腳本的理念相差甚遠,但是很多「歷史遺留問題」卻不是那麼容易解決的。
第七條、避免在CSS中使用Expressions (Avoid CSS Expressions )
不過這樣就多了兩層無意義的嵌套,肯定不好。還需要一個更好的方法。
第八條、把javascript和css都放到外部檔案 (Make JavaScript and CSS External )
這一點我想還是很容易理解的。不只從效能優化上會這麼做,用程式碼易於維護的角度看也應該這麼做。把css和js寫在頁面內容可以減少2次請求,但也增加了頁面的大小。如果已經對css和js做了緩存,那也就沒有2次多餘的http請求了。當然,我在前面也說過,有些特殊的頁面開發人員還是會選擇內聯 的css和js檔案。
第九條、減少DNS查詢(Reduce DNS Lookups)
在Internet上網域名稱與IP位址之間是一一對應的,網域名稱(kuqin.com)很好記,但計算機不認識,計算機之間的「相認」還要轉成ip位址。在網路 上每台電腦都對應有一個獨立的ip位址。在網域名稱和ip位址之間的轉換工作稱為網域解析,也稱為DNS查詢。一次DNS的解析過程會消耗20-120毫秒的 時間,在dns查詢結束之前,瀏覽器不會下載該網域下的任何東西。所以減少dns查詢的時間可以加快頁面的載入速度。 yahoo的建議一個頁面所包含的域 名數盡量控制在2-4個。這就需要對頁面整體有一個很好的規劃。目前我們這點做的不好,很多打點的廣告投放系統拖累了我們。
第十個、壓縮 JavaScript 和 CSS (Minify JavaScript )
壓縮js和css的左右很顯然,減少頁面位元組數。容量小頁面載入速度自然也就快。而且壓縮除了減少體積以外還可以起到一定的保護左右。這點我們做得很好。常用的壓縮工具有JsMin、YUI compressor等。另外像是http://dean.edwards.name/packer/也提供了一個非常方便的線上壓縮工具給我們。你可以在jQuery的網頁看到壓縮過的js檔案和沒有壓縮過的js檔案的容量差異:
當然,壓縮帶來的一個弊端就是程式碼的可讀性沒了。相信很多做前端的朋友都遇到過這個問題:看Google的效果很酷,可是去看他的源代碼卻是一大堆 擠在一起的字符,連函數名都是替換過的,汗死!自己的程式碼也這樣豈不是對維護非常不方便。所有阿里巴巴中文站目前採用的做法是在js和css發布的時候在 伺服器端進行壓縮。這樣在我們很方便地維護自己的程式碼。
第十一條、避免重定向(Avoid Redirects )
不久前在ieblog上看到《Internet Explorer and Connection Limits》這篇文章,例如當你輸入http:/ /www.enet.com.cn/eschool/ 的時候伺服器會自動產生一個301伺服器轉向http://www.enet.com.cn/eschool/ ,你看瀏覽器的網址列就能看出來。這種重定向自然也是需要消耗時間的。當然這只是一個例子,發生重定向的原因還有很多,但是不變的是每增加一次重定向就會增加一次web請求,所以因該盡量減少。
第十二條、移除重複的腳本 (Remove Duplicate Scripts )
這點我想不說也知道,不僅是從效能考慮,程式碼規範上看也是這樣。但不得不承認,很多時候我們會因為圖一時之快而加上一些或許是重複的程式碼。或許一個統一的css框架和js框架可以比較好的解決我們的問題。小豬的觀點很對,不只是要做到不重複,更是要做到可重複使用。
第十三條、設定實體標籤(ETags) (Configure ETags )
這點我也不懂,呵呵。在inforQ上找到一篇解釋得比較詳細的說明《使用ETags減少Web應用頻寬和負載》,有興趣的同學可以去看看。
第十四條、讓 AJAX 快取 (Make Ajax Cacheable )
ajax還要去快取?做ajax請求的時候往往還要增加一個時間戳來避免他快取。 It’s important to remember that “asynchronous” does not imply “instantaneous”.(記住“非同步”不是“瞬間”這一點很重要)。記住,即使AJAX是動態產生的而且只對一個用戶起作用,他們依然可以被緩 存。
相關推薦:
#以上是PHP提升網站效能的細節的詳細內容。更多資訊請關注PHP中文網其他相關文章!