性能黃金法則
　　只有10%–20%的較終用戶時(shí)間花在了下載HTML文檔上，其余的80%~90%的時(shí)間花在了下載頁(yè)面中的所有組件上。
　　關(guān)注前端可以很好的提高整體性能
　　改進(jìn)前段通常只需要較少的時(shí)間和資源
　　規(guī)則1 減少HTTP請(qǐng)求
　　由于上面的”性能黃金法則”，我們必須減少用戶下載html文檔的時(shí)間，較基本的一個(gè)方法是必須減少http請(qǐng)求，包括image，css和js文件。
　　規(guī)則2 使用CDN
　　什么是CDN?
　　一組分布在多個(gè)不同地理位置的Web服務(wù)器用于更有效的向用戶發(fā)布內(nèi)容。
　　如果應(yīng)用程序的web服務(wù)器離用戶更近，則1個(gè)http請(qǐng)求的響應(yīng)時(shí)間將縮短;如果組件web服務(wù)器離用戶更近，則多個(gè)http請(qǐng)求的響應(yīng)時(shí)間將縮短。
　　同時(shí)，我們需要關(guān)注CDN Cache.例如修改了某個(gè)js文件，需要及時(shí)清除CDN Cache,甚至?xí)霈F(xiàn)不同步的情況。
　　規(guī)則3 添加Expires頭
　　Expires: Thu, 15 Apr 2010 20:00:00 GMT
　　Cache-Control: max-age=315360000
　　Expires的局限：需要服務(wù)器和客戶端的時(shí)鐘嚴(yán)格同步，所以我們可以使用cache-control來(lái)控制。
　　@import 規(guī)則必須放在所有其他規(guī)則之前，而且會(huì)導(dǎo)致組件下載的無(wú)序性
　　規(guī)則5 將樣式表放在頂部
　　這個(gè)規(guī)則其實(shí)并不影響性能，但是卻關(guān)乎用戶的體驗(yàn)。
　　如果樣式表放在頂部，那么在下列三種情況下，瀏覽器會(huì)出現(xiàn)白屏
　　1、在新窗口中打開(kāi)
　　2、重新加載
　　3、作為主頁(yè)
　　@import 規(guī)則必須放在所有其他規(guī)則之前，而且會(huì)導(dǎo)致組件下載的無(wú)序性。
　　規(guī)則6 將腳本放在底部
　　規(guī)則7 避免CSS表達(dá)式
　　規(guī)則8 使用外部的Javascript和CSS
　　頁(yè)面中盡量使用外部的js和css文件，雖然會(huì)帶來(lái)額外的http請(qǐng)求訪問(wèn)時(shí)間，但是因?yàn)榫彺鏅C(jī)制會(huì)節(jié)省后期訪問(wèn)時(shí)http的請(qǐng)求。
　　特殊情況：主頁(yè)。在主頁(yè)中盡量將js和css寫(xiě)在頁(yè)面中，這樣會(huì)節(jié)省主頁(yè)的訪問(wèn)時(shí)間。
　　兩全其美的方式
　　1、加載后下載
　　在主頁(yè)加載外幣之后，動(dòng)態(tài)加載js和css文件。例如我們的loadJs和loadCss方法。
　　2、動(dòng)態(tài)內(nèi)聯(lián)
　　可以使用例如cookie的方法，如果js加載過(guò)，則寫(xiě)入cookie一個(gè)值;動(dòng)態(tài)檢測(cè)cookie的值，如果不存在則加載，如果存在則跳出加載過(guò)程。
　　規(guī)則9 減少DNS查找
　　DNS查找可以被緩存起來(lái)以提高性能，通過(guò)Keep-Alive和較少的域名來(lái)減少DNS查找。
　　規(guī)則10 精簡(jiǎn)Javascript
　　精簡(jiǎn)：從代碼中移除不必要的字符以減少其大小，進(jìn)而改善加載時(shí)間。移除所有的注釋和不必要的空白字符
　　混淆：除了精簡(jiǎn)，還將函數(shù)和變量的名字轉(zhuǎn)換為更短的字符串。
　　規(guī)則11 避免重定向
　　在下列幾種情況下可能會(huì)發(fā)生
　　1. 缺少結(jié)尾的斜線
　　2. 連接網(wǎng)站
　　3. 跟蹤內(nèi)部流量
　　4. 跟蹤出站流量
　　5. 美化URL
　　規(guī)則12 移除重復(fù)的腳本
　　規(guī)則13 配置Etag(Entity Tag)
　　Etag是Web服務(wù)器和瀏覽器用于確認(rèn)緩存組件的有效性的一種機(jī)制,是 標(biāo)識(shí)了一個(gè)組件的一個(gè)特定版本的字符串.
　　GET /i/yahoo.gif HTTP1.1
　　Host: us.yimg.com
　　HTTP 1.1 200 OK
　　Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT
　　Etag: “a531782d768ca1:dcc”
　　Content-Length：1195
　　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: “a531782d768ca1:dcc”
　　HTTP 1.1 304 Not Modified
　　問(wèn)題：通常使用組件的某些屬性來(lái)構(gòu)造它，這些屬性對(duì)以特定的、寄宿了網(wǎng)站服務(wù)器來(lái)說(shuō)是 的。另一臺(tái)不同的服務(wù)器發(fā)起請(qǐng)求，是不會(huì)匹配的。
　　規(guī)則14 使Ajax可緩存
　　被動(dòng)請(qǐng)求(Passive Request)
　　主動(dòng)請(qǐng)求(Acitve Request)
　　筆者舉了一個(gè)yahoo! mail的例子,當(dāng)用戶登錄的時(shí)候，主動(dòng)的ajax請(qǐng)求前三封郵件的內(nèi)容并緩存起來(lái)，這種做法稱作主動(dòng)請(qǐng)求.