1.盡可能減少HTTP請求數(shù)看成；
http請求的定義：從客戶端到服務(wù)器端的請求消息君编。包括消息首航中，對資源的請求方法川慌，資源的標(biāo)識符及使用的協(xié)議吃嘿。
http請求的菜鳥概論：
當(dāng)你在網(wǎng)頁中看到的文字，圖片都是你從服務(wù)器獲取的梦重，每一個內(nèi)容的獲取兑燥，都是一個http的請求;每一個內(nèi)容(如文字、圖片琴拧、js降瞳、css)的獲取，就是一個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)容是一個時間值乳讥，值就是資源在本地的過期時間柱查、存在本地。在本地緩存階段云石，找到一個對應(yīng)的資源值唉工，當(dāng)前時間還沒超過資源的過期時間，就直接使用這一個資源汹忠，不會發(fā)送 HTTP 請求淋硝。
cache-control：是http協(xié)議中常用的頭部之一，顧名思義宽菜，他是負(fù)責(zé)控制頁面的緩存機制谣膳，如果該頭部指示緩存，緩存的內(nèi)容也會存在本地铅乡，操作流程和expire相似继谚，但也有不同的地方，cache-control有更多的選項阵幸，而且也有更多的處理方式花履。
.如果要對文件添加cache可以通過apache的mod_expire模塊
.如果是對網(wǎng)頁的緩存就是通過在頁面中添加meta標(biāo)簽實現(xiàn)
4.啟用Gzip壓縮；
將資源在服務(wù)端口先進(jìn)行壓縮處理減小體積挚赊，然后在瀏覽器上在解壓縮解釋執(zhí)行臭挽！
·把文件先壓縮，再傳輸
·流程：原始79--本地壓縮--服務(wù)器端對已經(jīng)壓縮的再壓縮-
·優(yōu)點：提升文件傳輸速度咬腕；（在服務(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á)式計算的結(jié)果雕崩。css的屬性值是由js計算出來的,用了該屬性,頁面顯示縮放/滾動，鼠標(biāo)移動,都會對其值進(jìn)行重新計算,這樣會嚴(yán)重影響瀏覽器效率
我們可以通過expression把Javascript腳本寫放在css文件中融撞，通過它來實現(xiàn)一些很方便的功能與效果盼铁。
例如:
myDiv{
position:absolute;
left:expression(document.body.offsetWidth-180+"px");
top:expression(document.body.offsetHeight--80+"px");
}
8.將JS和CSS都放在外部文件中；
JS,CSS都放在外部的文件中尝偎，單獨提取的好處
：提高了JS和CSS的復(fù)用性饶火；
：減少了頁面的體積；
：提高了JS和CSS的可維護(hù)性
缺點：增加請求數(shù)致扯，可通過緩存優(yōu)化
js放在內(nèi)部的優(yōu)點
：減少了頁面的請求數(shù)肤寝；
：提升了頁面的渲染速度
css和js寫在頁面的情況：
.只應(yīng)用于一個頁面
.不經(jīng)常被訪問
.腳本和樣式很少（少于20行）
9.減少DNS查詢；
DNS查找過程：域名對應(yīng)到一個IP地址抖僵，然后通過DNS查找找到IP對應(yīng)的網(wǎng)址鲤看，然后才訪問到 解決：緩存
·底層行為
·定義：訪問網(wǎng)址，打開之前耍群，轉(zhuǎn)換機制（ip地址）义桂，對應(yīng)網(wǎng)址；
·時間：20ms最少世吨；
·如果同時很多查找過程澡刹，會影響速度呻征；因此需要瀏覽器的緩存耘婚；
·IE30m，ff60s陆赋，chrome60s沐祷，
·緩存長：減少dns重復(fù)查找，節(jié)省時間攒岛；
·緩存短：及時檢測服務(wù)器的變化赖临，保證正確性；
多域和單域
多域：
不同資源放在不同的ip
單域：
所有資源放在一個IP
10.壓縮JS和CSS灾锯；
去除不必要的空白符兢榨、格式符、注釋符；簡寫方法名吵聪、參數(shù)名凌那，壓縮JS腳本
建議小伙伴們：在正式上線項目前，將 JavaScript 和 CSS 都進(jìn)行壓縮吟逝，使線上版本是最輕量級的帽蝶，大幅提升網(wǎng)站性能。
11.避免重定向块攒；
301：被移動到另外位置（永久重定向）使搜索引擎智能
302：頁面被找到励稳，但不在原始位置（臨時重定向）先到舊地址，再到新地址
重定向：重新請求下載資源囱井，增加了http請求
對搜索引擎而言：301 是智能的驹尼；302 找舊地址，再跳新地址
12.移除重復(fù)的腳本琅绅；
顧名思義扶欣，可以減少文件的大小，另外千扶，就是可以避免出現(xiàn)未知的問題料祠！
13.配置實體標(biāo)簽（ETags）；
配置實體標(biāo)簽（ETag：Entity Tag澎羞，屬于HTTP協(xié)議髓绽，受Web服務(wù)的支持！使用一種標(biāo)志表示一種資源是否做了修改妆绞，可以減少服務(wù)器的響應(yīng)顺呕，詳細(xì)點就是：瀏覽器想服務(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)
