網站性能優化之yahoo軍規

前言

互聯網高速發展當今,用戶對快速訪問網頁需求愈來愈高，作爲網站建設者，如何提升網站性能，成爲煊赫一時的問題，本課程讓你清楚影響網站性能的緣由，從而避免不利於網站性能的因素，藉助Yslow工具快速找到問題所在，提升網站性能，讓提升網站性能、快速訪問網站不在是夢想。
yahoo軍規

一共有35條，這次講解其中的14條。

正文

1、儘量減小HTTP請求數

http請求的定義：從客戶端到服務器端的請求消息。包括消息首航中，對資源的請求方法，資源的標識符及使用的協議。
http請求的菜鳥概論：
當你在網頁中看到的文字，圖片都是你從服務器獲取的，每個內容的獲取，都是一個http的請求;每個內容(如文字、圖片、js、css)的獲取，就是一個http請求；
如何優化請求：文字，圖片合併，js合併，css合併；

2、使用CDN（內容分發網絡）

1. 在沒有使用CDN時，須要通過較多的節點才能訪問到目的地。
2. 使用了CDN時，CDN服務器複製多個副本在你附近，這時候你訪問時通過CDN服務器找到最佳節點訪問目的地，固然這要購買CDN服務器，用金錢買性能

CDN:經過在網絡放置節點服務器，他是一個智能虛擬網絡，會根據數據流量，速度，負載量，訪問最近的節點
做用：解決網絡擁擠，提升網絡相應速度。

3、添加Expire/Cache-Control頭

expire頭的內容是一個時間值，值就是資源在本地的過時時間、存在本地。在本地緩存階段，找到一個對應的資源值，當前時間還沒超過資源的過時時間，就直接使用這一個資源，不會發送 HTTP 請求。
cache-control：是http協議中經常使用的頭部之一，顧名思義，他是負責控制頁面的緩存機制，若是該頭部指示緩存，緩存的內容也會存在本地，操做流程和expire類似，但也有不一樣的地方，cache-control有更多的選項，並且也有更多的處理方式。
簡單說，就是使用瀏覽器的緩存功能，將訪問數據緩存，在訪問一樣內容時直接將緩存取出，相對的傳輸的數據變少，起到提升訪問速度的效果。

4、啓用Gzip壓縮

Gzip支持壓縮文本數據，包括：HTML,PHP,JS,CSS,XML,TXT等等。

GZIP最先由Jean-loup Gailly和Mark Adler建立，用於UNIX系統的文件壓縮。後綴爲.gz的文件，它們就是GZIP格式的。現今已經成爲Internet 上使用很是廣泛的一種數據壓縮格式，或者說一種文件格式。HTTP協議上的GZIP編碼是一種用來改進WEB應用程序性能的技術。大流量的WEB站點經常使用GZIP壓縮技術來讓用戶感覺更快的速度。這通常是指WWW服務器中安裝的一個功能，通常對純文本內容可壓縮到原大小的40％.這樣傳輸就快了。

使用Gzip：

• 把文件先壓縮，再傳輸
• 流程：原始79--本地壓縮--服務器端對已經壓縮的再壓縮-
• 優勢：提高文件傳輸速度；（在服務器端配置）

5、將CSS放在頁面最上面

css（層疊樣式表）：後面的樣式會覆蓋前面的，級別高的樣式會覆蓋級別低的樣式。
先加載css，放在頭部提升渲染性能，避免頁面空白或者重繪。
IE：css放body底部，IE禁止了網頁內容的順序顯示，低網速狀況下致使空白
FF：不阻止顯示，但會致使閃爍重繪

6、將Script放在頁面最下面

瀏覽器渲染順序

將script標籤放在頁面底部
可讓頁面內容優先呈現出來，而非先暴露script的bug
將Script放在頁面的最下面，由於瀏覽器加載和解釋網頁的順序是從左到右從上到下的，若是JavaScript代碼有死循環的問題，網頁多是空白一片的，若是放在頁面的最下面即便如此，頁面也能展示出來，固然這個問題最好避免！

7、避免在CSS中使用Expressions

避免使用css expression,即CSS表達式
(所謂css expression就是css的屬性值是由js計算出來的,用了該屬性,鼠標移動,滾動都會對其值進行從新計算),這樣會嚴重影響瀏覽器效率
由於CSS表達式在頁面顯示、縮放、滾動或鼠標移動等狀況時，都會瀏覽器進行大量的運算，嚴重影響瀏覽器性能，且這並不是是必須的。

8、將JavaScript和CSS都放在外部文件中

JS,CSS都放在外部的文件中，單獨提取的好處
1 提升了JS和CSS的複用性；
2 減小了頁面的體積；
3 提升了JS和CSS的可維護性
缺點：增長請求數，可經過緩存優化

放在內部的優勢
1 減小了頁面的請求數；
2 提高了頁面的渲染速度
只應用於一個頁面時，不常訪問時，腳本和樣式不多的時候（20行如下時），寫在頁面裏

9、減小DNS查詢

減小DNS查詢：
·底層行爲
·定義：訪問網址，打開以前，轉換機制（ip地址），對應網址；
·時間：20ms最少；
·若是同時不少查找過程，會影響速度；所以須要瀏覽器的緩存；
·IE30m，ff60s，chrome60s，
緩存長：
減小dns重複查找，節省時間；
緩存短：
及時檢測服務器的變化，保證正確性；
多域和單域：

10、壓縮JavaScript和Css

1 去除沒必要要的空白符、格式符、註釋符。
2 簡寫方法名、參數名，壓縮JS腳本。使用工具壓縮 JavaScript 和 CSS

11、避免重定向

定義：原始請求被從新轉到了其餘請求
重定向狀態碼
301：被移動到另外位置（永久重定向）使搜索引擎智能,不須要從舊地址到新地址，刪除舊地址，直接到新地址
302：頁面被找到，但不在原始位置（臨時重定向）先到舊地址，再到新地址
重定向增長瀏覽器服務器往返次數 儘可能減小Http請求 因此儘可能避免重定向

12、移除重複的腳本

能夠減小文件的大小，另外，就是能夠避免出現未知的問題！

十3、配置實體標籤（ETag）

使用特殊的字符串 來標識某個請求的資源版本
使用一種標誌表示一種資源是否作了修改，能夠減小服務器的響應，
詳細點就是：瀏覽器想服務器要某種資源，服務器一看，判斷出了這種資源已經給過瀏覽器了，而且在服務器端的也沒有變化，因此瀏覽器可使用他自身就有的，而後告訴瀏覽器，瀏覽器回到自身找找，找到啦就用了，這樣瀏覽器和服務器之間會有對話不過不用服務器再重複的給瀏覽器資源了！

十4、使用AJAX緩存

使AJAX緩存
get :同一地址不重複執行，能夠被緩存，不然返回304;
post:每次都執行，不會被緩存，每次都會傳送到服務器那裏，通常返回200；

YSlow插件（首先得安裝firebug插件）

YSlow（基於瀏覽器執行），在firefork下執行的最好
對網站進行分析，給出優化報告