1.盡可能減少HTTP請求數(shù)；
http請求的定義：從客戶端到服務(wù)器端的請求消息。包括消息首航中，對資源的請求方法，資源的標(biāo)識符及使用的協(xié)議。
http請求的菜鳥概論：
當(dāng)你在網(wǎng)頁中看到的文字，圖片都是你從服務(wù)器獲取的，每一個(gè)內(nèi)容的獲取，都是一個(gè)http的請求;每一個(gè)內(nèi)容(如文字、圖片、js、css)的獲取，就是一個(gè)http請求；
·如何優(yōu)化請求：文字，圖片合并，js合并，css合并；
2.使用CDN（內(nèi)容分發(fā)網(wǎng)絡(luò)Content Delivery Network）；
什么是CDN？
內(nèi)容分發(fā)網(wǎng)絡(luò)。意思是盡可能避開互聯(lián)網(wǎng)上有可能影響數(shù)據(jù)傳輸速度和穩(wěn)定性的瓶頸和環(huán)節(jié)，使內(nèi)容傳輸?shù)母?、更穩(wěn)定。
（在離你最近的地方，放置一臺性能好鏈接順暢的副本服務(wù)器，讓你能夠以最近的距離，最快的速度獲取內(nèi)容。）
3.添加Expire/Cache-Control頭；
expire頭的內(nèi)容是一個(gè)時(shí)間值，值就是資源在本地的過期時(shí)間、存在本地。在本地緩存階段，找到一個(gè)對應(yīng)的資源值，當(dāng)前時(shí)間還沒超過資源的過期時(shí)間，就直接使用這一個(gè)資源，不會發(fā)送 HTTP 請求。
cache-control：是http協(xié)議中常用的頭部之一，顧名思義，他是負(fù)責(zé)控制頁面的緩存機(jī)制，如果該頭部指示緩存，緩存的內(nèi)容也會存在本地，操作流程和expire相似，但也有不同的地方，cache-control有更多的選項(xiàng)，而且也有更多的處理方式。
.如果要對文件添加cache可以通過apache的mod_expire模塊
.如果是對網(wǎng)頁的緩存就是通過在頁面中添加meta標(biāo)簽實(shí)現(xiàn)
4.啟用Gzip壓縮；
將資源在服務(wù)端口先進(jìn)行壓縮處理減小體積，然后在瀏覽器上在解壓縮解釋執(zhí)行！
·把文件先壓縮，再傳輸
·流程：原始79--本地壓縮--服務(wù)器端對已經(jīng)壓縮的再壓縮-
·優(yōu)點(diǎn)：提升文件傳輸速度；（在服務(wù)器端配置）
5.將CSS放在頁面最上面；
IE：css放body底部，IE禁止了網(wǎng)頁內(nèi)容的順序顯示，低網(wǎng)速情況下導(dǎo)致空白
FF：不阻止顯示，但會導(dǎo)致閃爍重繪
解決：先加載css，放頭部<head>提高渲染性能，避免頁面空白或者重繪
6.將Script放在頁面最下面；
DOM的加載順序,首先是讀取HTML,head,meta,title,style,link,script,body,div,img,
為什么要把JavaScript腳本放在最下面
防止在js死循環(huán)中，讀不到下面的樣式，網(wǎng)頁可能是空白一片
7.避免在CSS中使用Expressions（CSS表達(dá)式）;
CSS屬性后面可以是一段Javascript表達(dá)式，CSS屬性的值等于Javascript表達(dá)式計(jì)算的結(jié)果。css的屬性值是由js計(jì)算出來的,用了該屬性,頁面顯示縮放/滾動，鼠標(biāo)移動,都會對其值進(jìn)行重新計(jì)算,這樣會嚴(yán)重影響瀏覽器效率
我們可以通過expression把Javascript腳本寫放在css文件中，通過它來實(shí)現(xiàn)一些很方便的功能與效果。
例如:
myDiv{
position:absolute;
left:expression(document.body.offsetWidth-180+"px");
top:expression(document.body.offsetHeight--80+"px");
}
8.將JS和CSS都放在外部文件中；
JS,CSS都放在外部的文件中，單獨(dú)提取的好處
：提高了JS和CSS的復(fù)用性；
：減少了頁面的體積；
：提高了JS和CSS的可維護(hù)性
缺點(diǎn)：增加請求數(shù)，可通過緩存優(yōu)化
js放在內(nèi)部的優(yōu)點(diǎn)
：減少了頁面的請求數(shù)；
：提升了頁面的渲染速度
css和js寫在頁面的情況：
.只應(yīng)用于一個(gè)頁面
.不經(jīng)常被訪問
.腳本和樣式很少（少于20行）
9.減少DNS查詢；
DNS查找過程：域名對應(yīng)到一個(gè)IP地址，然后通過DNS查找找到IP對應(yīng)的網(wǎng)址，然后才訪問到 解決：緩存
·底層行為
·定義：訪問網(wǎng)址，打開之前，轉(zhuǎn)換機(jī)制（ip地址），對應(yīng)網(wǎng)址；
·時(shí)間：20ms最少；
·如果同時(shí)很多查找過程，會影響速度；因此需要瀏覽器的緩存；
·IE30m，ff60s，chrome60s，
·緩存長：減少dns重復(fù)查找，節(jié)省時(shí)間；
·緩存短：及時(shí)檢測服務(wù)器的變化，保證正確性；
多域和單域
多域：
不同資源放在不同的ip
單域：
所有資源放在一個(gè)IP
10.壓縮JS和CSS；
去除不必要的空白符、格式符、注釋符；簡寫方法名、參數(shù)名，壓縮JS腳本
建議小伙伴們：在正式上線項(xiàng)目前，將 JavaScript 和 CSS 都進(jìn)行壓縮，使線上版本是最輕量級的，大幅提升網(wǎng)站性能。
11.避免重定向；
301：被移動到另外位置（永久重定向）使搜索引擎智能
302：頁面被找到，但不在原始位置（臨時(shí)重定向）先到舊地址，再到新地址
重定向：重新請求下載資源，增加了http請求
對搜索引擎而言：301 是智能的；302 找舊地址，再跳新地址
12.移除重復(fù)的腳本；
顧名思義，可以減少文件的大小，另外，就是可以避免出現(xiàn)未知的問題！
13.配置實(shí)體標(biāo)簽（ETags）；
配置實(shí)體標(biāo)簽（ETag：Entity Tag，屬于HTTP協(xié)議，受Web服務(wù)的支持！使用一種標(biāo)志表示一種資源是否做了修改，可以減少服務(wù)器的響應(yīng)，詳細(xì)點(diǎn)就是：瀏覽器想服務(wù)器要某種資源，服務(wù)器一看，判斷出了這種資源已經(jīng)給過瀏覽器了，并且在服務(wù)器端的也沒有變化，所以瀏覽器可以使用他自身就有的，然后告訴瀏覽器，瀏覽器回到自身找找，找到啦就用了，這樣瀏覽器和服務(wù)器之間會有對話不過不用服務(wù)器再重復(fù)的給瀏覽器資源了！）
14.使用Ajax緩存
Asynchronous Javascript and XML 異步的JavaScript和XML
post每次執(zhí)行，不被緩存，get 同一地址不重復(fù)執(zhí)行，可以被緩存
作者： focuspe
鏈接：http://www.imooc.com/article/13242
來源：慕課網(wǎng)
