1. 從用戶角度而言即寡，優(yōu)化能夠讓頁面加載得更快、對用戶的操作響應(yīng)得更及時袜刷，能夠給用戶提供更為友好的體驗聪富。
2. 從服務(wù)商角度而言，優(yōu)化能夠減少頁面請求數(shù)著蟹、或者減小請求所占帶寬墩蔓，能夠節(jié)省可觀的資源。
h5的優(yōu)化
1.減少多余的dom節(jié)點嵌套
2.標(biāo)簽的語義化使用草则，比如標(biāo)題就用h1-h6钢拧，圖文列表用figure figcaption，頭部用 header炕横，底部footer源内，導(dǎo)航nav，側(cè)邊菜單欄 aside份殿，文章用article膜钓，模塊用section等
3.使用數(shù)據(jù)緩存，sessionStorage卿嘲，localStorage颂斜，離線緩存，indexedDB本地數(shù)據(jù)庫
4.頁面SEO的優(yōu)化：title拾枣、keyword沃疮、description，圖片的alt梅肤，a標(biāo)簽的title
圖片的優(yōu)化
1.減小圖片的的大小司蔬，小圖標(biāo)使用svg,png，背景圖片用jpg
2.雪碧圖的使用姨蝴，減少對服務(wù)器的請求次數(shù)
3.圖片預(yù)加載
4.字體圖標(biāo)的使用（阿里巴巴字體圖標(biāo)庫IconFont）
css優(yōu)化
1.壓縮image
使用雪花圖
使用雪花圖 www.spritecow.com/
使用矢量圖
使用矢量圖字體 fontawesome.dashgame.com/
使用阿里矢量圖庫 www.iconfont.cn/
使用矢量圖轉(zhuǎn)成字體 icomoon.io/
使用base64轉(zhuǎn)換
使用網(wǎng)站壓縮
使用無損壓縮 tinypng.com/
png轉(zhuǎn)換webp zhitu.isux.us/
合理使用格式圖片
jpg有損壓縮俊啼，壓縮率搞，不支持透明
png支持透明左医，瀏覽器兼容好
webp壓縮程度更好授帕，在ios webview有兼容性問題
svg矢量圖，代碼內(nèi)嵌浮梢，相對于較小跛十，圖片樣式相對簡單的場景
function checkWebp() {
try{
return (document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0);
}catch(err) {
return false;
}
}
$(document).ready(function() {
var webp_good = checkWebp();
if(webp_good == false) {
$('img').each(function() {
var src = $(this).attr('src');
if(typeof src != 'undefined') {
src = src.replace('/format,webp', '/format,jpg'); //將webp格式轉(zhuǎn)換成jpg格式
$(this).attr('src', src);
}
var original = $(this).attr('original'); //針對用了懶加載的情況
if(typeof original != 'undefined') {
original = original.replace('/format,webp', '/format,jpg'); //將webp格式轉(zhuǎn)換成jpg格式
$(this).attr('original', original);
}
})
}
})
2.易維護(hù)：少用ID， !important秕硝，多用class
3.樣式用外部樣式芥映，最好不要用行間樣式，內(nèi)嵌樣式
4.選擇器的層級最好不要超過4層，減少層級可減少渲染速度
5.可讀性：類名的命名規(guī)范
6.可擴(kuò)展性：css的整體設(shè)計屏轰，公用的樣式抽取颊郎，減少冗余的，重復(fù)的樣式
7.樣式的引入放在頭部
8 避免使用CSS表達(dá)式
9.優(yōu)化CSS Sprite 圖片格式
10.圖像映射
11行內(nèi)圖片（Base64編碼）
12不要用HTML縮放圖片
13用小的可緩存的favicon.ico（P.S. 收藏夾圖標(biāo)）
14
js優(yōu)化
1.打包js
2.減少全局變量霎苗，全局方法的定義
3.減少閉包的使用姆吭，避免多層循環(huán)的嵌套
4.減少dom節(jié)點的事件綁定 訪問
5.刪除多余的代碼，公用方法的抽取
6.減少http請求次數(shù)
7.js的引用放在底部
8.去除重復(fù)腳本
9.行為與頁面分離：js最好寫在外部文件
10.js的延遲加載 deffer
11 盡量使用css3動替代js動畫
12 設(shè)計模式
13把腳本放在底部
14
用戶體驗的優(yōu)化
1.加載頁面唁盏，請求接口的loading
2.頁面的平滑滾動内狸，顏色的漸變，適當(dāng)?shù)膭赢?br>
3.減少操作次數(shù)厘擂，減少表單輸入
4.優(yōu)化頁面加載的速度昆淡，緩存的合理使用，預(yù)加載的使用
5.操作圖標(biāo)的易讀性刽严，比如說
個人中心的icon
菜單的icon
6.符合用戶的行為昂灵，比如說菜單的點擊放在屏幕的右邊
7.搜索引擎的優(yōu)化能夠提升用戶的訪問量
一、頁面級優(yōu)化
1. 減少 HTTP請求數(shù)
這條策略基本上所有前端人都知道舞萄，而且也是最重要最有效的眨补。都說要減少 HTTP請求，那請求多了到底會怎么樣呢 ?首先倒脓，每個請求都是有成本的撑螺，既包含時間成本也包含資源成本。一個完整的請求都需要經(jīng)過 DNS尋址崎弃、與服務(wù)器建立連接甘晤、發(fā)送數(shù)據(jù)、等待服務(wù)器響應(yīng)饲做、接收數(shù)據(jù)這樣一個 “漫長” 而復(fù)雜的過程线婚。時間成本就是用戶需要看到或者 “感受” 到這個資源是必須要等待這個過程結(jié)束的，資源上由于每個請求都需要攜帶數(shù)據(jù)艇炎，因此每個請求都需要占用帶寬酌伊。另外腾窝，由于瀏覽器進(jìn)行并發(fā)請求的請求數(shù)是有上限的 (具體參見此處 )缀踪，因此請求數(shù)多了以后，瀏覽器需要分批進(jìn)行請求虹脯，因此會增加用戶的等待時間驴娃，會給用戶造成站點速度慢這樣一個印象，即使可能用戶能看到的第一屏的資源都已經(jīng)請求完了循集，但是瀏覽器的進(jìn)度條會一直存在唇敞。
減少 HTTP請求數(shù)的主要途徑包括：
(1). 從設(shè)計實現(xiàn)層面簡化頁面
如果你的頁面像百度首頁一樣簡單，那么接下來的規(guī)則基本上都用不著了。保持頁面簡潔疆柔、減少資源的使用時最直接的咒精。如果不是這樣，你的頁面需要華麗的皮膚旷档，則繼續(xù)閱讀下面的內(nèi)容模叙。
(2). 合理設(shè)置 HTTP緩存
緩存的力量是強大的，恰當(dāng)?shù)木彺嬖O(shè)置可以大大的減少 HTTP請求鞋屈。以有啊首頁為例范咨，當(dāng)瀏覽器沒有緩存的時候訪問一共會發(fā)出 78個請求，共 600多 K數(shù)據(jù) (如圖 1.1)厂庇，而當(dāng)?shù)诙卧L問即瀏覽器已緩存之后訪問則僅有 10個請求渠啊，共 20多 K數(shù)據(jù) (如圖 1.2)。 (這里需要說明的是权旷，如果直接 F5刷新頁面的話效果是不一樣的替蛉，這種情況下請求數(shù)還是一樣，不過被緩存資源的請求服務(wù)器是 304響應(yīng)拄氯，只有 Header沒有Body 灭返，可以節(jié)省帶寬 )
怎樣才算合理設(shè)置 ?原則很簡單，能緩存越多越好坤邪，能緩存越久越好熙含。例如，很少變化的圖片資源可以直接通過 HTTP Header中的Expires設(shè)置一個很長的過期頭 ;變化不頻繁而又可能會變的資源可以使用 Last-Modifed來做請求驗證艇纺。盡可能的讓資源能夠在緩存中待得更久怎静。關(guān)于 HTTP緩存的具體設(shè)置和原理此處就不再詳述了，有興趣的可以參考下列文章：
HTTP1.1協(xié)議中關(guān)于緩存策略的描述
Fiddler HTTP Performance中關(guān)于緩存的介紹
(3). 資源合并與壓縮
如果可以的話黔衡，盡可能的將外部的腳本蚓聘、樣式進(jìn)行合并，多個合為一個盟劫。另外夜牡， CSS、 Javascript侣签、Image 都可以用相應(yīng)的工具進(jìn)行壓縮塘装，壓縮后往往能省下不少空間。
(4). CSS Sprites
合并 CSS圖片影所，減少請求數(shù)的又一個好辦法蹦肴。
(5). Inline Images
使用 data: URL scheme的方式將圖片嵌入到頁面或 CSS中，如果不考慮資源管理上的問題的話猴娩，不失為一個好辦法款青。如果是嵌入頁面的話換來的是增大了頁面的體積，而且無法利用瀏覽器緩存辐啄。使用在 CSS中的圖片則更為理想一些扛施。
(6). Lazy Load Images（自己對這一塊的內(nèi)容還是不了解）
這條策略實際上并不一定能減少 HTTP請求數(shù)，但是卻能在某些條件下或者頁面剛加載時減少 HTTP請求數(shù)。對于圖片而言，在頁面剛加載的時候可以只加載第一屏，當(dāng)用戶繼續(xù)往后滾屏的時候才加載后續(xù)的圖片腰吟。這樣一來，假如用戶只對第一屏的內(nèi)容感興趣時徙瓶，那剩余的圖片請求就都節(jié)省了毛雇。曾經(jīng)的做法是在加載的時候把第一屏之后的圖片地址緩存在 Textarea標(biāo)簽中，待用戶往下滾屏的時候才 “惰性” 加載侦镇。
2. 將外部腳本置底（將腳本內(nèi)容在頁面信息內(nèi)容加載后再加載）
前文有談到灵疮，瀏覽器是可以并發(fā)請求的，這一特點使得其能夠更快的加載資源壳繁，然而外鏈腳本在加載時卻會阻塞其他資源震捣，例如在腳本加載完成之前，它后面的圖片闹炉、樣式以及其他腳本都處于阻塞狀態(tài)蒿赢，直到腳本加載完成后才會開始加載。如果將腳本放在比較靠前的位置渣触，則會影響整個頁面的加載速度從而影響用戶體驗羡棵。解決這一問題的方法有很多，而最簡單可依賴的方法就是將腳本盡可能的往后挪嗅钻，減少對并發(fā)下載的影響皂冰。
3. 異步執(zhí)行 inline腳本(其實原理和上面是一樣，保證腳本在頁面內(nèi)容后面加載养篓。)
inline腳本對性能的影響與外部腳本相比秃流，是有過之而無不及。首頁柳弄，與外部腳本一樣舶胀， inline腳本在執(zhí)行的時候一樣會阻塞并發(fā)請求，除此之外碧注，由于瀏覽器在頁面處理方面是單線程的嚣伐，當(dāng) inline腳本在頁面渲染之前執(zhí)行時，頁面的渲染工作則會被推遲应闯。簡而言之纤控， inline腳本在執(zhí)行的時候挂捻，頁面處于空白狀態(tài)碉纺。鑒于以上兩點原因，建議將執(zhí)行時間較長的 inline腳本異步執(zhí)行，異步的方式有很多種骨田，例如使用 script元素的defer 屬性(存在兼容性問題和其他一些問題耿导，例如不能使用 document.write)、使用setTimeout 态贤，此外舱呻，在HTML5中引入了 Web Workers的機制，恰恰可以解決此類問題悠汽。
4. Lazy Load Javascript（只有在需要加載的時候加載箱吕，在一般情況下并不加載信息內(nèi)容。）
隨著 Javascript框架的流行柿冲，越來越多的站點也使用起了框架茬高。不過，一個框架往往包括了很多的功能實現(xiàn)假抄，這些功能并不是每一個頁面都需要的怎栽，如果下載了不需要的腳本則算得上是一種資源浪費 -既浪費了帶寬又浪費了執(zhí)行花費的時間。目前的做法大概有兩種宿饱，一種是為那些流量特別大的頁面專門定制一個專用的 mini版框架熏瞄，另一種則是 Lazy Load。YUI 則使用了第二種方式谬以，在 YUI的實現(xiàn)中强饮，最初只加載核心模塊，其他模塊可以等到需要使用的時候才加載为黎。
5. 將 CSS放在 HEAD中
如果將 CSS放在其他地方比如 BODY中胡陪，則瀏覽器有可能還未下載和解析到 CSS就已經(jīng)開始渲染頁面了，這就導(dǎo)致頁面由無 CSS狀態(tài)跳轉(zhuǎn)到 CSS狀態(tài)碍舍，用戶體驗比較糟糕柠座。除此之外，有些瀏覽器會在 CSS下載完成后才開始渲染頁面片橡，如果 CSS放在靠下的位置則會導(dǎo)致瀏覽器將渲染時間推遲妈经。
6. 異步請求 Callback（就是將一些行為樣式提取出來，慢慢的加載信息的內(nèi)容）
在某些頁面中可能存在這樣一種需求捧书，需要使用 script標(biāo)簽來異步的請求數(shù)據(jù)吹泡。類似：
Javascript:
/Callback 函數(shù)/
function myCallback(info){
//do something here
}
HTML:
cb返回的內(nèi)容 :
myCallback('Hello world!');
像以上這種方式直接在頁面上寫 <script>對頁面的性能也是有影響的，即增加了頁面首次加載的負(fù)擔(dān)经瓷，推遲了 DOMLoaded和window.onload 事件的觸發(fā)時機爆哑。如果時效性允許的話，可以考慮在 DOMLoaded事件觸發(fā)的時候加載舆吮，或者使用 setTimeout方式來靈活的控制加載的時機揭朝。
7. 減少不必要的 HTTP跳轉(zhuǎn)
對于以目錄形式訪問的 HTTP鏈接队贱，很多人都會忽略鏈接最后是否帶 ’/'，假如你的服務(wù)器對此是區(qū)別對待的話潭袱，那么你也需要注意柱嫌，這其中很可能隱藏了 301跳轉(zhuǎn)，增加了多余請求屯换。具體參見下圖编丘，其中第一個鏈接是以無 ’/'結(jié)尾的方式訪問的，于是服務(wù)器有了一次跳轉(zhuǎn)彤悔。
8. 避免重復(fù)的資源請求
這種情況主要是由于疏忽或頁面由多個模塊拼接而成嘉抓，然后每個模塊中請求了同樣的資源時，會導(dǎo)致資源的重復(fù)請求
移動端
5.1 保證所有組件都小于25K
這個限制是因為iPhone不能緩存大于25K的組件晕窑，注意這里指的是未壓縮的大小掌眠。這就是為什么縮減內(nèi)容本身也很重要，因為單純的gzip可能不夠幕屹。
5.2 把組件打包到一個復(fù)合文檔里
把各個組件打包成一個像有附件的電子郵件一樣的復(fù)合文檔里蓝丙，可以用一個HTTP請求獲取多個組件（記住一點：HTTP請求是代價高昂的）。用這種方式的時候望拖，要先檢查用戶代理是否支持（iPhone就不支持）渺尘。
6 cookie
6.1 給Cookie減肥
使用cookie的原因有很多，比如授權(quán)和個性化说敏。HTTP頭中cookie信息在web服務(wù)器和瀏覽器之間交換鸥跟。重要的是保證cookie盡可能的小，以最小化對用戶響應(yīng)時間的影響盔沫。
清除不必要的cookie
保證cookie盡可能小医咨，以最小化對用戶響應(yīng)時間的影響
注意給cookie設(shè)置合適的域級別，以免影響其它子域
設(shè)置合適的有效期架诞，更早的有效期或者none可以更快的刪除cookie拟淮，提高用戶響應(yīng)時間
6.2 把組件放在不含cookie的域下
當(dāng)瀏覽器發(fā)送對靜態(tài)圖像的請求時，cookie也會一起發(fā)送谴忧，而服務(wù)器根本不需要這些cookie很泊。所以它們只會造成沒有意義的網(wǎng)絡(luò)通信量，應(yīng)該確保對靜態(tài)組件的請求不含cookie沾谓∥欤可以創(chuàng)建一個子域，把所有的靜態(tài)組件都部署在那兒均驶。
如果域名是www.example.org昏兆，可以把靜態(tài)組件部署到static.example.org。然而妇穴，如果已經(jīng)在頂級域example.org或者www.example.org設(shè)置了cookie爬虱，那么所有對static.example.org的請求都會含有這些cookie隶债。這時候可以再買一個新域名，把所有的靜態(tài)組件部署上去饮潦，并保持這個新域名不含cookie燃异。Yahoo!用的是yimg.com携狭，YouTube是ytimg.com继蜡，Amazon是images-amazon.com等等。
把靜態(tài)組件部署在不含cookie的域下還有一個好處是有些代理可能會拒絕緩存帶cookie的組件逛腿。有一點需要注意：如果不知道應(yīng)該用example.org還是www.example.org作為主頁稀并，可以考慮一下cookie的影響。省略www的話单默，就只能把cookie寫到*.example.org碘举，所以因為性能原因最好用www子域，并且把cookie寫到這個子域下搁廓。
服務(wù)器
7.1 Gzip組件
??前端工程師可以想辦法明顯地縮短通過網(wǎng)絡(luò)傳輸HTTP請求和響應(yīng)的時間引颈。毫無疑問，終端用戶的帶寬速度境蜕，網(wǎng)絡(luò)服務(wù)商蝙场，對等交換點的距離等等，都是開發(fā)團(tuán)隊所無法控制的粱年。但還有別的能夠影響響應(yīng)時間的因素售滤，壓縮可以通過減少HTTP響應(yīng)的大小來縮短響應(yīng)時間。
從HTTP/1.1開始台诗，web客戶端就有了支持壓縮的Accept-Encoding HTTP請求頭完箩。
??如果web服務(wù)器看到這個請求頭，它就會用客戶端列出的一種方式來壓縮響應(yīng)拉队。web服務(wù)器通過Content-Encoding相應(yīng)頭來通知客戶端弊知。
??盡可能多地用gzip壓縮能夠給頁面減肥，這也是提升用戶體驗最簡單的方法粱快。
7.2 避免圖片src屬性為空
Image with empty string src屬性是空字符串的圖片很常見吉捶，主要以兩種形式出現(xiàn)：
straight HTML
JavaScript
var img = new Image(); img.src = “”;
這兩種形式都會引起相同的問題：瀏覽器會向服務(wù)器發(fā)送另一個請求。
?
7.3 配置ETags
??實體標(biāo)簽（ETags）皆尔，是服務(wù)器和瀏覽器用來決定瀏覽器緩存中組件與源服務(wù)器中的組件是否匹配的一種機制（“實體”也就是組件：圖片呐舔，腳本，樣式表等等）慷蠕。添加ETags可以提供一種實體驗證機制珊拼，比最后修改日期更加靈活。一個ETag是一個字符串流炕，作為一個組件某一具體版本的唯一標(biāo)識符澎现。唯一的格式約束是字符串必須用引號括起來仅胞，源服務(wù)器用相應(yīng)頭中的ETag來指定組件的ETag：
??然后，如果瀏覽器必須驗證一個組件剑辫，它用If-None-Match請求頭來把ETag傳回源服務(wù)器干旧。如果ETags匹配成功，會返回一個304狀態(tài)碼妹蔽，這樣就減少了12195個字節(jié)的響應(yīng)體椎眯。
GET /i/yahoo.gif HTTP/1.1
Host: us.yimg.com
If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT
If-None-Match: "10c24bc-4ab-457e1c1f"
HTTP/1.1 304 Not Modified
7.4 對Ajax用GET請求
??郵箱團(tuán)隊發(fā)現(xiàn)使用XMLHttpRequest時，瀏覽器的POST請求是通過一個兩步的過程來實現(xiàn)的：先發(fā)送HTTP頭胳岂，在發(fā)送數(shù)據(jù)编整。所以最好用GET請求，它只需要發(fā)送一個TCP報文（除非cookie特別多）乳丰。IE的URL長度最大值是2K掌测，所以如果要發(fā)送的數(shù)據(jù)超過2K就無法使用GET了。
POST請求的一個有趣的副作用是實際上沒有發(fā)送任何數(shù)據(jù)产园，就像GET請求一樣汞斧。正如HTTP說明文檔中描述的，GET請求是用來檢索信息的什燕。所以它的語義只是用GET請求來請求數(shù)據(jù)粘勒，而不是用來發(fā)送需要存儲到服務(wù)器的數(shù)據(jù)。
7.5 盡早清空緩沖區(qū)
?當(dāng)用戶請求一個頁面時秋冰，服務(wù)器需要用大約200到500毫秒來組裝HTML頁面仲义，在這期間，瀏覽器閑等著數(shù)據(jù)到達(dá)剑勾。PHP中有一個flush()函數(shù)埃撵，允許給瀏覽器發(fā)送一部分已經(jīng)準(zhǔn)備完畢的HTML響應(yīng)，以便瀏覽器可以在后臺準(zhǔn)備剩余部分的同時開始獲取組件虽另，好處主要體現(xiàn)在很忙的后臺或者很“輕”的前端頁面上（P.S. 也就是說暂刘，響應(yīng)時耗主要在后臺方面時最能體現(xiàn)優(yōu)勢）。
??較理想的清空緩沖區(qū)的位置是HEAD后面捂刺，因為HTML的HEAD部分通常更容易生成谣拣，并且允許引入任何CSS和JavaScript文件，這樣就可以讓瀏覽器在后臺還在處理的時候就開始并行獲取組件族展。
例如：
?<br />... <br /> </head><br /> <?php flush(); ?><br /> <body><br /> ... <br />
復(fù)制代碼
?
7.6 使用CDN（內(nèi)容分發(fā)網(wǎng)絡(luò)）
??用戶與服務(wù)器的物理距離對響應(yīng)時間也有影響森缠。把內(nèi)容部署在多個地理位置分散的服務(wù)器上能讓用戶更快地載入頁面。但具體要怎么做呢仪缸？
??實現(xiàn)內(nèi)容在地理位置上分散的第一步是：不要嘗試去重新設(shè)計你的web應(yīng)用程序來適應(yīng)分布式結(jié)構(gòu)贵涵。這取決于應(yīng)用程序，改變結(jié)構(gòu)可能包括一些讓人望而生畏的任務(wù)，比如同步會話狀態(tài)和跨服務(wù)器復(fù)制數(shù)據(jù)庫事務(wù)（翻譯可能不準(zhǔn)確）宾茂〈陕恚縮短用戶和內(nèi)容之間距離的提議可能被推遲，或者根本不可能通過跨晴，就是因為這個難題欧聘。
??記住終端用戶80%到90%的響應(yīng)時間都花在下載頁面組件上了：圖片，樣式端盆，腳本怀骤，F(xiàn)lash等等，這是業(yè)績黃金法則爱谁。最好先分散靜態(tài)內(nèi)容晒喷，而不是一開始就重新設(shè)計應(yīng)用程序結(jié)構(gòu)孝偎。這不僅能夠大大減少響應(yīng)時間访敌，還更容易表現(xiàn)出CDN的功勞。
??內(nèi)容分發(fā)網(wǎng)絡(luò)（CDN）是一組分散在不同地理位置的web服務(wù)器衣盾，用來給用戶更高效地發(fā)送內(nèi)容寺旺。典型地，選擇用來發(fā)送內(nèi)容的服務(wù)器是基于網(wǎng)絡(luò)距離的衡量標(biāo)準(zhǔn)的势决。例如：選跳數(shù)（hop）最少的或者響應(yīng)時間最快的服務(wù)器阻塑。
7.7 添上Expires或者Cache-Control HTTP頭
這條規(guī)則有兩個方面：
對于靜態(tài)組件：通過設(shè)置一個遙遠(yuǎn)的將來時間作為Expires來實現(xiàn)永不失效
多余動態(tài)組件：用合適的Cache-ControlHTTP頭來讓瀏覽器進(jìn)行條件性的請求
??網(wǎng)頁設(shè)計越來越豐富，這意味著頁面里有更多的腳本果复，圖片和Flash陈莽。站點的新訪客可能還是不得不提交幾個HTTP請求，但通過使用有效期能讓組件變得可緩存虽抄，這避免了在接下來的瀏覽過程中不必要的HTTP請求走搁。有效期HTTP頭通常被用在圖片上，但它們應(yīng)該用在所有組件上迈窟，包括腳本私植、樣式和Flash組件。
??瀏覽器（和代理）用緩存來減少HTTP請求的數(shù)目和大小车酣，讓頁面能夠更快加載曲稼。web服務(wù)器通過有效期HTTP響應(yīng)頭來告訴客戶端，頁面的各個組件應(yīng)該被緩存多久湖员。用一個遙遠(yuǎn)的將來時間做有效期贫悄，告訴瀏覽器這個響應(yīng)在2010年4月15日前不會改變。
如果你用的是Apache服務(wù)器娘摔，用ExpiresDefault指令來設(shè)置相對于當(dāng)前日期的有效期窄坦。下面的例子設(shè)置了從請求時間起10年的有效期：
ExpiresDefault "access plus 10 years"
7.8 減少dns查詢
域名系統(tǒng)建立了主機名和IP地址間的映射，就像電話簿上人名和號碼的映射一樣。當(dāng)你在瀏覽器輸入www.shanghai70.com的時候嫡丙，瀏覽器就會聯(lián)系DNS解析器返回服務(wù)器的IP地址拴袭。DNS是有成本的，它需要20到120毫秒去查找給定主機名的IP地址曙博。在DNS查找完成之前拥刻，瀏覽器無法從主機名下載任何東西。
??DNS查找被緩存起來更高效父泳，由用戶的ISP（網(wǎng)絡(luò)服務(wù)提供商）或者本地網(wǎng)絡(luò)存在一個特殊的緩存服務(wù)器上般哼，但還可以緩存在個人用戶的計算機上。DNS信息被保存在操作系統(tǒng)的DNS cache(微軟Windows上的”DNS客戶端服務(wù)”)里惠窄。大多數(shù)瀏覽器有獨立于操作系統(tǒng)的自己的cache蒸眠。只要瀏覽器在自己的cache里還保留著這條記錄，它就不會向操作系統(tǒng)查詢DNS杆融。
??IE默認(rèn)緩存DNS查找30分鐘楞卡，寫在DnsCacheTimeout注冊表設(shè)置中。Firefox緩存1分鐘脾歇，可以用network.dnsCacheExpiration配置項設(shè)置蒋腮。(Fasterfox把緩存時間改成了1小時 P.S. Fasterfox是FF的一個提速插件)
??如果客戶端的DNS cache是空的（包括瀏覽器的和操作系統(tǒng)的），DNS查找數(shù)等于頁面上不同的主機名數(shù)藕各，包括頁面URL池摧，圖片，腳本文件激况，樣式表作彤，F(xiàn)lash對象等等組件中的主機名，減少不同的主機名就可以減少DNS查找乌逐。
??減少不同主機名的數(shù)量同時也減少了頁面能夠并行下載的組件數(shù)量竭讳，避免DNS查找削減了響應(yīng)時間，而減少并行下載數(shù)量卻增加了響應(yīng)時間黔帕。我的原則是把組件分散在2到4個主機名下代咸，這是同時減少DNS查找和允許高并發(fā)下載的折中方案。
7.9 避免重定向
重定向用301和302狀態(tài)碼成黄，下面是一個有301狀態(tài)碼的HTTP頭
HTTP/1.1 301 Moved Permanently Location: example.com/newuri Content-Type: text/html
瀏覽器會自動跳轉(zhuǎn)到Location域指明的URL呐芥。重定向需要的所有信息都在HTTP頭部，而響應(yīng)體一般是空的奋岁。其實額外的HTTP頭思瘟，比如Expires和Cache-Control也表示重定向。除此之外還有別的跳轉(zhuǎn)方式：refresh元標(biāo)簽和JavaScript闻伶，但如果你必須得做重定向滨攻，最好用標(biāo)準(zhǔn)的3xxHTTP狀態(tài)碼，主要是為了讓返回按鈕能正常使用。
??牢記重定向會拖慢用戶體驗光绕，在用戶和HTML文檔之間插入重定向會延遲頁面上的所有東西女嘲，頁面無法渲染，組件也無法開始下載诞帐，直到HTML文檔被送達(dá)瀏覽器欣尼。
??有一種常見的極其浪費資源的重定向，而且web開發(fā)人員一般都意識不到這一點停蕉，就是URL尾部缺少一個斜線的時候愕鼓。例如，跳轉(zhuǎn)到www.shanghai70.com/a會返回一個重定向到www.shanghai70.com/b的301響應(yīng)（注意添在尾部的斜線）慧起。在Apache中可以用Alias菇晃，mod_rewrite或者DirectorySlash指令來取消不必要的重定向。
??重定向最常見的用途是把舊站點連接到新的站點蚓挤，還可以連接同一站點的不同部分磺送，針對用戶的不同情況（瀏覽器類型，用戶帳號類型等等）做一些處理屈尼。用重定向來連接兩個網(wǎng)站是最簡單的册着，只需要少量的額外代碼拴孤。雖然在這些時候使用重定向減少了開發(fā)人員的開發(fā)復(fù)雜度脾歧，但降低了用戶體驗。一種替代方案是用Alias和mod_rewrite演熟，前提是兩個代碼路徑都在相同的服務(wù)器上鞭执。如果是因為域名變化而使用了重定向，就可以創(chuàng)建一條CNAME（創(chuàng)建一個指向另一個域名的DNS記錄作為別名）結(jié)合Alias或者mod_rewrite指令芒粹。
7.10 Json格式傳輸
在客戶端和服務(wù)器端進(jìn)行數(shù)據(jù)通信的時候兄纺，我們盡量采用json格式進(jìn)行數(shù)據(jù)傳輸
json格式的數(shù)據(jù)，能夠清晰明了的展示出數(shù)據(jù)結(jié)構(gòu)化漆，而且也方便我們獲取的操作
相對于很早以前的xml格式傳輸估脆，json格式的數(shù)據(jù)更加輕量級
客戶端和服務(wù)器端都支持json格式數(shù)據(jù)的處理，處理起來非常的方便
https://juejin.im/post/5cf61ed3e51d4555fd20a2f3 如何快速提升 JSON.stringify() 的性能座云？
https://juejin.im/post/5e8b094a6fb9a03c300f8b25 微前端在企業(yè)級應(yīng)用中的實踐
https://juejin.im/post/5e0fef935188253a624a6a72 《CSS揭秘》實用技巧總結(jié)
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html疙赠， 登錄分享是調(diào)用了微信公眾號js-sdk
