前端性能優化----yahoo軍規

1.減小http請求

2.使用cdn內容分發網絡

3 添加 Expire/Cache-Control 頭：

expire頭的內容是一個時間值，值就是資源在本地的過時時間、存在本地。在本地緩存階段，找到一個對應的資源值，當前時間還沒超過資源的過時時間，就直接使用這一個資源，不會發送 HTTP 請求。
cache-control：是http協議中經常使用的頭部之一，顧名思義，他是負責控制頁面的緩存機制，若是該頭部指示緩存，緩存的內容也會存在本地，操做流程和expire類似，但也有不一樣的地方，cache-control有更多的選項，並且也有更多的處理方式。

4 使用Gzip壓縮

將資源在服務端口先進行壓縮處理減少體積，而後在瀏覽器上在解壓縮解釋執行！
·把文件先壓縮，再傳輸
Gzip支持壓縮文本數據，包括：HTML,PHP,JS,CSS,XML,TXT等等。
·流程：原始79--本地壓縮--服務器端對已經壓縮的再壓縮-
·優勢：提高文件傳輸速度；（在服務器端配置）
Gzip壓縮
服務端配置Gzip壓縮怎麼作呢？有沒有知道的
去看看運維命令就知道了，有gzip壓縮命令的

5.把css放在頁面最上面。層疊樣式表單。

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

6.將script標籤放在頁面底部

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

7.避免使用css expression,即CSS表達式

CSS屬性後面能夠是一段Javascript表達式，CSS屬性的值等於Javascript表達式計算的結果。

咱們能夠經過expression把Javascript腳本寫放在css文件中，經過它來實現一些很方便的功能與效果。
例如:
#myDiv{ position:absolute; left:expression(document.body.offsetWidth-180+"px"); top:expression(document.body.offsetHeight--80+"px"); }0
她會將本身的屬性（固有屬性和自定義屬性）與JavaScript結合起來一塊兒使用，這樣會比較佔資源，影響瀏覽器的性能影響用戶的使用體驗度！
不加css expression的緣由:1頁面顯示和縮放;2頁面滾動;3鼠標滾動時候都會從新進行計算

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

將JavaScript和CSS都放在外部的文件中，單獨提取的好處
1：提升了JS和CSS的複用性；
2：減小了頁面的體積；
3：提升了JS和CSS的可維護性
js放在內部的優勢
1：減小了頁面的請求數；
2：提高了頁面的渲染速度
css和js寫在頁面的狀況：
1.只應用於一個頁面
2.不常常被訪問
3.腳本和樣式不多（少於20行）

9.減小DNS查詢：

10. 最小化 JavaScript 和 CSS：

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

11.避免重定向

重定向：從新請求下載資源，增長了http請求
301：請求的頁面被移動到另外位置（永久重定向）使搜索引擎智能,不須要從舊地址到新地址，刪除舊地址，直接到新地址
302：頁面被找到，但不在原始位置（臨時重定向）先到舊地址，再到新地址

12.避免重定向

移除重複的腳本能夠減小文件的大小，另外，就是能夠避免出現未知的問題！

13使用entity tag(實體標籤)

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

14.使AJAX緩存

在不加載網頁的狀況下，是客戶端與服務器進行交換數據
post:每次都執行，不被緩存
get:同一地址不重複執行，能夠被緩存

附錄：