如何建設一個高性能網站

以下知識收集自互聯網:僅供自己或者大家查閱使用,請勿轉載!!!


Web 應用性能優化黃金法則:先優化前端程序 (front-end) 的性能,因爲80% 或以上的最終用戶響應時間的花費所在。


1. 減少 HTTP 請求次數
80%的最終用戶響應時間花在前端程序上,而其大部分時間則花在各種頁面元素, 如圖片、 樣式表、 腳本和 Flash 等的下載上。 減少頁面元素將會減少 HTTP 請求次數,是快速顯示頁面的關鍵所在。 一種減少頁面元素個數的方法是簡化頁面設計。 但是否存在其他方式,能做到既有豐富內容,又能獲得快速響應時間呢?可以參考以下一些技術: Image maps 組合多個圖片到一張圖片中。總文件大小變化不大,但減少了 HTTP 請求次數從而加快了頁面顯示速度。 該方式只適合圖片連續的情況;同時座標的定義是煩人又容易出錯的工作。 CSS Sprites 是更好的方法。它可以將頁面中的圖片組合到單個文件中,並使用 CSS 的 background-p_w_picpath 和 background-position 屬性來顯示所需的部分圖片。 Inline p_w_picpaths 使用 data: URL scheme 來在頁面中內嵌圖片。這將增大 HTML文件的大小。組合 inline p_w_picpaths 到你的(緩存)樣式表是既能較少 HTTP 請求, 又能避免加大 HTML 文件大小的方法。 Combined files 通過組合多個腳本文件到單一文件來減少 HTTP 請求次數。樣式表也可採用類似方法處理。 這個方法雖然簡單,但沒有得到大規模的使用。  美國網站平均每個頁面有 7 個Js文件和 2 個樣式表。當頁面之間腳本和樣式表變化很大時,該方式將遇到很大的挑戰,但如果做到的話,將能加快響應時間。 減少 HTTP 請求次數是性能優化的起點。這對提高首次訪問的效率起到很重要的作用。 Tenni Theurer 的文章 Browser Cache Usage – Exposed!描述,40-60% 的日常訪問是首次訪問,因此爲首次訪問者加快頁面訪問速度是用戶體驗的關 鍵。


2. 使用 CDN(Content Delivery Network, 內容分發網絡 )

用戶離 web server 的遠近對響應時間也有很大影響。從用戶角度看,把內容部署到多個地理位置分散的服務器上將有效提高頁面加載速度。

作爲實現內容地理分佈的第一步,不要試圖重構 web 應用以適應分佈架構。 改變架構將導致多個週期性任務,如同步 session 狀態,在多個 server 之間複製數據庫數據。 這樣縮短用戶與內容距離的嘗試可能被應用架構改版所延遲,或阻止。 我們還記得 80-90%的最終用戶響應時間花在下載頁面中的各種元素上,如圖片文件、 樣式表、 腳本和 Flash 等。 與其花在重構系統這個困難的任務上,還不如先分佈靜態內容。 這不僅能大大減少響應時間,而且由於 CDN 的存在,分佈靜態內容非常容易實現。 CDN 是地理上分佈的 web server 的集合,用於更高效地發佈內容。 通常基於網絡遠近來選擇給具體用戶服務的 web server。 一些大型網站擁有自己的 CDN,但是使用如 Akamai Technologies, Mirror Image Internet, 或 Limelight Networks 等 CDN 服務提供商的服務將是划算的。 在 Yahoo!把靜態內容分佈到 CDN 減少了用戶影響時間 20%或更多。切換到 CDN 的代碼修改工作是很容易的,但能達到提高網站的速度。


3. 增加 Expires Header
網頁內容正變得越來越豐富,這意味着更多的腳本文件、樣式表、圖片和 Flash。 首次訪問者將不得不面臨多次 HTTP 請求,但通過使用 Expires header, 您可以在客戶端緩存這些元素。這在後續訪問中避免了不必要的 HTTP 請求。 Expires header 最常用於圖片文件,但是它也適用於腳本文件、樣式表和 Flash。 瀏覽器(和代理)使用緩存來減少 HTTP 請求的次數和大小,使得網頁快速裝載。 Web server 通過 Expires header 告訴客戶端一個元素可以緩存的時間長度。 如果服務器是 Apache 的話,可以使用 ExpiresDefault 基於當期日期來設置過期日期,如: ExpiresDefault “access plus 10 years” 設置過期時間爲從請求時間開始計算的 10 年。 請記住,如果使用超長的過期時間,則當內容改變時,您必須修改文件名稱。 在 Yahoo!我們經常把改名作爲 release 的一個步驟:版本號內嵌在文件名中,如 yahoo_2.0.6.js。


4. 壓縮頁面元素
通過壓縮 HTTP 響應內容可減少頁面響應時間。從 HTTP/1.1 開始,web 客戶端在 HTTP 請求中通過 Accept-Encoding 頭來表明支持的壓縮類型,如:Accept-Encoding: gzip, deflate. 如果 Web server 檢查到 Accept-Encoding 頭,會使用客戶端支持的方法來壓縮 HTTP 響應,會設置 Content-Encoding 頭,如:Content-Encoding: gzip。 Gzip 是目前最流行及有效的壓縮方法。 其他的方式如 deflate,但它效果較差, 也不夠流行。通過 Gzip,內容一般可減少 70%。如果是 Apache,在 1.3 版本下需 使用 mod_gzip 模塊,而在 2.x 版本下,則需使用 mod_deflate。 Web server 根據文件類型來決定是否壓縮。 大部分網站對 HTML 文件進行壓縮。 但對腳本文件和樣式表進行壓縮也是值得的。實際上,對包括 XML 和 JSON 在內的任務文本信息進行壓縮都是值得的。 圖像文件和 PDF 文件不應該被壓縮,因爲它們本身就是壓縮格式保存的。對它們進行壓縮,不但浪費 CPU,而且還可能增加文件的大小。 因此,對儘量多的文件類型進行壓縮是一種減少頁面大小和提高用戶體驗的有效方法。


5. 把css放在head上
我們發現把樣式表移到 HEAD 部分可以提高界面加載速度,因此這使得頁面元素可以順序顯示。 在很多瀏覽器下,如 IE,把樣式表放在 document 的底部的問題在於它禁止了網頁內容的順序顯示。 瀏覽器阻止顯示以免重畫頁面元素,那用戶只能看到空白頁。Firefox 不會阻止顯示,但這意味着當樣式表下載後,有些頁面元素可能需要重畫,這導致閃爍問題。 HTML 規範明確要求樣式表被定義在 HEAD 中,因此,爲避免空白屏幕或閃爍問題, 最好的方法是遵循 HTML 規範,把樣式表放在 HEAD 中。


6. 把js文件放在底部
與樣式文件一樣,我們需要注意腳本文件的位置。 我們需儘量把它們放在頁面的底部,這樣一方面能順序顯示,另方面可達到最大的並行下載。 瀏覽器會阻塞顯示直到樣式表下載完畢,因此我們需要把樣式表放在 HEAD 部分。 而對於腳本來說,腳本後面內容的順序顯示將被阻塞,因此把腳本儘量放在底 部意味着更多內容能被快速顯示。 腳本引起的第二個問題是它阻塞並行下載數量。HTTP/1.1 規範建議瀏覽器每個主機的並行下載數不超過 2 個。 因此如果您把圖像文件分佈到多臺機器的話,您

可以達到超過 2 個的並行下載。 但是當腳本文件下載時,瀏覽器不會啓動其他的並行下載,甚至其他主機的下載也不啓動。 在某些情況下,不是很容易就能把腳本移到底部的。如,腳本使用 document.write 方法來插入頁面內容。 同時可能還存在域的問題。 不過在很多情 況下,還是有一些方法的。 一個備選方法是使用延遲腳本(deferred script)。DEFER 屬性表明腳本未包 含 document.write,指示瀏覽器刻繼續顯示。不幸的是,Firefox 不支持 DEFER 屬性。 IE 中,腳本可能被延遲執行,但不一定得到需要的長時間延遲。 在 不過從另外角度來說,如果腳本能被延遲執行,那它就可以被放在底部了。


7. 避免 CSS 表達式
CSS 表達式是功能強大的(同時也是危險的)用於動態設置 CSS 屬性的方式。IE, 從版本 5 開始支持 CSS 表達式。

如 backgourd-color: expression((newDate()).getHours()%2?”#B8D4FF”:”#F08A00”),即背景色每個小時切換一 次。 CSS 表達式的問題是其執行次數超過大部分人的期望。 不僅頁面顯示和 resize 時 計算表達式,而且當頁面滾屏,甚至當鼠標在頁面上移動時都會重新計算表達 式。 一種減少CSS 表達式執行次數的方法是一次性表達式,即當第一次執行時就以明確的數值代替表達式。如果必須動態設置的話,可使用事件處理函數代替。如果您必須使用 CSS 表達式的話,請記住它們可能被執行上千次,從而影響頁面性能。


8. 把 JavaScript和 CSS 放到外部文件中

上述很多性能優化法則都基於外部文件進行優化。 現在,我們必須問一個問題: JavaScript 和 CSS 應該包括在外部文件,還是在頁面文件中? 在現實世界中,使用外部文件會加快頁面顯示速度,因爲外部文件會被瀏覽器緩存。如果內置 JavaScript 和 CSS 在頁面中雖然會減少 HTTP 請求次數,但增大了頁面的大小。 另外一方面,使用外部文件,會被瀏覽器緩存,則頁面大小會減 小,同時又不增加 HTTP 請求次數。 因此,一般來說,外部文件是更可行的方式。 唯一的例外是內嵌方式對主頁更有 效,如 Yahoo!和 My Yahoo!都使用內嵌方式。一般來說,在一個 session 中,主 頁訪問此時較少,因此內嵌方式可以取得更快的用戶響應時間。


9. 減少 DNS 查詢次數
DNS 用於映射主機名和 IP 地址,一般一次解析需要 20~120 毫秒。 爲了達到更高的性能,DNS 解析通常被多級別地緩存,如由 ISP 或局域網維護的 caching server,本地機器操作系統的緩存(如 windows 上的 DNS Client Service), 瀏覽器的缺省 DNS 緩存時間爲 30 分鐘,Firefox 的缺省緩衝時間是 1 分鐘。 IE 減少主機名可減少 DNS 查詢的次數,但可能造成並行下載數的減少。避免 DNS 查 詢可減少響應時間,而減少並行下載數可能增加響應時間。 一個可行的折中是把內容分佈到至少 2 個,最多 4 個不同的主機名上。


10. 最小化 JavaScript代碼

最小化 JavaScript 代碼指在 JS 代碼中刪除不必要的字符,從而降低下載時間。 兩個流行的工具是 JSMin 和 YUI Compressor。它通過刪除註釋和空格來減少源碼大小,同時它還可以對代碼進行混淆處理。 作爲混淆的一部分,函數名和變量名被替換成短的字符串,這使得代碼更緊湊,同時也更難讀,使其難於被反向工程。Dojo Compressor (ShrinkSafe)是最常見的混淆工具。 最小化是安全的、直白的過程,而混淆則更復雜,而且容易產生問題。從對美國 10 大網站的調查來看,通過最小化,文件可減少 21%,而混淆則可減少 25%。 除了最小化外部腳本文件外,內嵌的腳本代碼也應該被最小化。 即使腳本根據法則 4 被壓縮後傳輸,最小化腳本可減少文件大小 5%甚至更高。


11. 避免重定向
重定向功能是通過 301 和 302 這兩個 HTTP 狀態碼完成的,如: HTTP/1.1 301 Moved Permanently Location:http://example.com/newuri Content-Type: text/html 瀏覽器自動重定向請求到 Location 指定的 URL 上,重定向的主要問題是降低了用戶體驗。 一種最耗費資源、經常發生而很容易被忽視的重定向是 URL 的最後缺少/,如訪 問 http://astrology.yahoo.com/astrology 將被重定向到 http://astrology.yahoo.com/astrology/。在 Apache 下,可以通過 Alias,mod_rewrite 或 DirectorySlash 等方式來解決該問題。


12. 刪除重複的腳本文件
在一個頁面中包含重複的 JS 腳本文件會影響性能,即它會建立不必要的 HTTP 請求和額外的 JS 執行。 不必要的 HTTP 請求發生在 IE 下,而 Firefox 不會產生多餘的 HTTP 請求。 額外的 JS 執行,不管在 IE 下,還是在 Firefox 下,都會發生。 一個避免重複的腳本文件的方式是使用模板系統來建立腳本管理模塊。 除了防止重複的腳本文件外,該模塊還可以實現依賴性檢查和增加版本號到腳本文件名中,從而實現超長的過期時間。


13. 配置 ETags
ETags 是用於確定瀏覽器緩存中元素是否與 Webserver 中的元素相匹配的機制, 它是比 last-modified date 更靈活的元素驗證機制。ETag 是用於唯一表示元素版本的字符串,它需被包括在引號中。Web server 首先在 response 中指定 ETag: HTTP/1.1 200 OK < 03:03:59 2006 Dec 12> 10c24bc-4ab-457e1c1f”Content-Length: 12195 後來,如果瀏覽器需要驗證某元素,它使用 If-None-Match 頭回傳 ETag 給 Web server,如果 ETag 匹配,則服務器返回 304 代碼,從而節省了下載時間: GET /i/yahoo.gif  HTTP/1.1  Host: us.yimg.com <03:03:59 2006 Dec 12> 10c24bc-4ab-457e1c1f”HTTP/1.1 304 Not Modified ETags 的問題在於它們是基於服務器唯一性的某些屬性構造的,如 Apache1.3 和 2.x,其格式是 inode-size-timestamp,而在 IIS5.0 和 6.0 下,其格式是 Filetimestamp:ChangeNumber。這樣同一個元素在不同的 web server 上,其 ETag 是不一樣的。這樣在多 Web server 的環境下,瀏覽器先從 server1 請求某元素,後來向 server2 驗證該元素,由於 ETag 不同,所以緩存失效,必須重新下載。

因此,如果您未用到 ETags 系統提供的靈活的驗證機制,最好刪除 ETag。刪除 ETag 會減少 http response 及後續請求的 HTTP 頭的大小。在 Apache 下,只要在配置文件中設置 FileETag none 即可。


14. 緩存 Ajax
性能優化法則同樣適用於 web 2.0 應用。提高 Ajax 的性能最重要的方式是使其 response 可緩存,就象“法則 3 增加 Expires Header”討論的那樣。以下其他法則同樣適用於 Ajax,當然法則 3 是最有效的方式

參考博客:http://blog.csdn.net/aalansehaiyang52/article/details/8712102

   

   以上是前端開發人員需要注意的14個前端優化法則,但是以上法則主要在改善用戶等待時間,無需修改後臺代碼。很多技巧都是我們平常開發時需要注意的,別在開發的時候採用最好的後臺架構,但是卻無法獲得最好的用戶體驗。如果設計一個應對高訪問和高併發的網站,我們應該如何從架構來方面提高網站的性能:


第一步:物理分離webserver和數據庫

最開始,由於某些想法,於是在互聯網上搭建了一個網站,這個時候甚至有可能主機都是租借的,但由於這篇文章我們只關注架構的演變歷程,因此就假設這個時候已經是託管了一臺主機,並且有一定的帶寬了,這個時候由於網站具備了一定的特色,吸引了部分人訪問,逐漸你發現系統的壓力越來越高,響應速度越來越慢,而這個時候比較明顯的是數據庫和應用互相影響,應用出問題了,數據庫也很容易出現問題,而數據庫出問題的時候,應用也容易出問題,於是進入了第一步演變階段:將應用和數據庫從物理上分離,變成了兩臺機器,這個時候技術上沒有什麼新的要求,但你發現確實起到效果了,系統又恢復到以前的響應速度了,並且支撐住了更高的流量,並且不會因爲數據庫和應用形成互相的影響。


第二步:增加頁面緩存
好景不長,隨着訪問的人越來越多,你發現響應速度又開始變慢了,查找原因,發現是訪問數據庫的操作太多,導致數據連接競爭激烈,所以響應變慢,但數據庫連接又不能開太多,否則數據庫機器壓力會很高,因此考慮採用緩存機制來減少數據庫連接資源的競爭和對數據庫讀的壓力,這個時候首先也許會選擇採用squid等類似的機制來將系統中相對靜態的頁面(例如一兩天纔會有更新的頁面)進行緩存(當然,也可以採用將頁面靜態化的方案),這樣程序上可以不做修改,就能夠很好的減少對webserver的壓力以及減少數據庫連接資源的競爭,OK,於是開始採用squid來做相對靜態的頁面的緩存。

這一步涉及到了這些知識體系:
前端頁面緩存技術,例如squid,如想用好的話還得深入掌握下squid的實現方式以及緩存的失效算法等。

關於頁面緩存採用的技術:

ehcache: http://ahuaxuan.iteye.com/blog/128458

oscache: http://www.blogjava.net/SIDNEY/archive/2006/01/12/27783.html


架構演變第三步:增加頁面片段緩存
增加了squid做緩存後,整體系統的速度確實是提升了,webserver的壓力也開始下降了,但隨着訪問量的增加,發現系統又開始變的有些慢了,在嚐到了squid之類的動態緩存帶來的好處後,開始想能不能讓現在那些動態頁面裏相對靜態的部分也緩存起來呢,因此考慮採用類似ESI之類的頁面片段緩存策略,OK,於是開始採用ESI來做動態頁面中相對靜態的片段部分的緩存。

頁面片段緩存技術,例如ESI等,想用好的話同樣需要掌握ESI的實現方式等;


第四步:數據緩存
在採用ESI之類的技術再次提高了系統的緩存效果後,系統的壓力確實進一步降低了,但同樣,隨着訪問量的增加,系統還是開始變慢,經過查找,可能會發現系統中存在一些重複獲取數據信息的地方,像獲取用戶信息等,這個時候開始考慮是不是可以將這些數據信息也緩存起來呢,於是將這些數據緩存到本地內存,改變完畢後,完全符合預期,系統的響應速度又恢復了,數據庫的壓力也再度降低了不少。緩存技術,包括像Map數據結構、緩存算法、所選用的框架本身的實現機制等。


第五步:增加webserver
好景不長,發現隨着系統訪問量的再度增加,webserver機器的壓力在高峯期會上升到比較高,這個時候開始考慮增加一臺webserver,這也是爲了同時解決可用性的問題,避免單臺的webserver down機的話就沒法使用了,在做了這些考慮後,決定增加一臺webserver,增加一臺webserver時,會碰到一些問題,典型的有:
1、如何讓訪問分配到這兩臺機器上,這個時候通常會考慮的方案是Apache自帶的負載均衡方案,或LVS這類的軟件負載均衡方案;
2、如何保持狀態信息的同步,例如用戶session等,這個時候會考慮的方案有寫入數據庫、寫入存儲、cookie或同步session信息等機制等;
3、如何保持數據緩存信息的同步,例如之前緩存的用戶數據等,這個時候通常會考慮的機制有緩存同步或分佈式緩存;
4、如何讓上傳文件這些類似的功能繼續正常,這個時候通常會考慮的機制是使用共享文件系統或存儲等;
在解決了這些問題後,終於是把webserver增加爲了兩臺,系統終於是又恢復到了以往的速度。

負載均衡技術(包括但不限於硬件負載均衡、軟件負載均衡、負載算法、linux轉發協議、所選用的技術的實現細節等)、主備技術(包括但不限於ARP欺騙、linuxheart-beat等)、狀態信息或緩存同步技術(包括但不限於Cookie技術、UDP協議、狀態信息廣播、所選用的緩存同步技術的實現細節等)、共享文件技術(包括但不限於NFS等)、存儲技術(包括但不限於存儲設備等)。


第六步:分庫
享受了一段時間的系統訪問量高速增長的幸福後,發現系統又開始變慢了,這次又是什麼狀況呢,經過查找,發現數據庫寫入、更新的這些操作的部分數據庫連接的資源競爭非常激烈,導致了系統變慢,這下怎麼辦呢,此時可選的方案有數據庫集羣和分庫策略,集羣方面像有些數據庫支持的並不是很好,因此分庫會成爲比較普遍的策略,分庫也就意味着要對原有程序進行修改,一通修改實現分庫後,不錯,目標達到了,系統恢復甚至速度比以前還快了。

這一步更多的是需要從業務上做合理的劃分,以實現分庫,具體技術細節上沒有其他的要求;
但同時隨着數據量的增大和分庫的進行,在數據庫的設計、調優以及維護上需要做的更好,因此對這些方面的技術還是提出了很高的要求的。


第七步:分表、DAL和分佈式緩存
隨着系統的不斷運行,數據量開始大幅度增長,這個時候發現分庫後查詢仍然會有些慢,於是按照分庫的思想開始做分表的工作,當然,這不可避免的會需要對程序進行一些修改,也許在這個時候就會發現應用自己要關心分庫分表的規則等,還是有些複雜的,於是萌生能否增加一個通用的框架來實現分庫分表的數據訪問,這個在ebay的架構中對應的就是DAL,這個演變的過程相對而言需要花費較長的時間,當然,也有可能這個通用的框架會等到分表做完後纔開始做,同時,在這個階段可能會發現之前的緩存同步方案出現問題,因爲數據量太大,導致現在不太可能將緩存存在本地,然後同步的方式,需要採用分佈式緩存方案了,於是,又是一通考察和折磨,終於是將大量的數據緩存轉移到分佈式緩存上了。

分表更多的同樣是業務上的劃分,技術上涉及到的會有動態hash算法、consistenthash算法等;
DAL涉及到比較多的複雜技術,例如數據庫連接的管理(超時、異常)、數據庫操作的控制(超時、異常)、分庫分表規則的封裝等;


第九步:數據讀寫分離和廉價存儲方案
突然有一天,發現這個完美的時代也要結束了,數據庫的噩夢又一次出現在眼前了,由於添加的webserver太多了,導致數據庫連接的資源還是不夠用,而這個時候又已經分庫分表了,開始分析數據庫的壓力狀況,可能會發現數據庫的讀寫比很高,這個時候通常會想到數據讀寫分離的方案,當然,這個方案要實現並不容易,另外,可能會發現一些數據存儲在數據庫上有些浪費,或者說過於佔用數據庫資源,因此在這個階段可能會形成的架構演變是實現數據讀寫分離,同時編寫一些更爲廉價的存儲方案,例如BigTable這種。


第十步:進入大型分佈式應用時代和廉價服務器羣夢想時代
經過上面這個漫長而痛苦的過程,終於是再度迎來了完美的時代,不斷的增加webserver就可以支撐越來越高的訪問量了,對於大型網站而言,人氣的重要毋庸置疑,隨着人氣的越來越高,各種各樣的功能需求也開始爆發性的增長,這個時候突然發現,原來部署在webserver上的那個web應用已經非常龐大了,當多個團隊都開始對其進行改動時,可真是相當的不方便,複用性也相當糟糕,基本是每個團隊都做了或多或少重複的事情,而且部署和維護也是相當的麻煩,因爲龐大的應用包在N臺機器上覆制、啓動都需要耗費不少的時間,出問題的時候也不是很好查,另外一個更糟糕的狀況是很有可能會出現某個應用上的bug就導致了全站都不可用,還有其他的像調優不好操作(因爲機器上部署的應用什麼都要做,根本就無法進行針對性的調優)等因素,根據這樣的分析,開始痛下決心,將系統根據職責進行拆分,於是一個大型的分佈式應用就誕生了,通常,這個步驟需要耗費相當長的時間,因爲會碰到很多的挑戰:
1、拆成分佈式後需要提供一個高性能、穩定的通信框架,並且需要支持多種不同的通信和遠程調用方式;
2、將一個龐大的應用拆分需要耗費很長的時間,需要進行業務的整理和系統依賴關係的控制等;
3、如何運維(依賴管理、運行狀況管理、錯誤追蹤、調優、監控和報警等)好這個龐大的分佈式應用。
經過這一步,差不多系統的架構進入相對穩定的階段,同時也能開始採用大量的廉價機器來支撐着巨大的訪問量和數據量,結合這套架構以及這麼多次演變過程吸取的經驗來採用其他各種各樣的方法來支撐着越來越高的訪問量。

參考博客:

http://blog.csdn.net/aalansehaiyang52/article/details/6635675

關於網站大數據儲存可以參見如下博客

http://blog.csdn.net/aalansehaiyang52/article/details/7061378

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章