要做性能優(yōu)化，首先我們得知道用戶(hù)從開(kāi)始訪(fǎng)問(wèn)站點(diǎn)到看結(jié)果的這一段時(shí)間到底后花在了哪些地方。這就設(shè)計(jì)到一個(gè)經(jīng)典問(wèn)題。在游覽器輸入地址按下回車(chē)鍵之后到用戶(hù)看到結(jié)果經(jīng)歷了哪些過(guò)程，這里簡(jiǎn)單說(shuō)一下大的幾個(gè)過(guò)程。（假設(shè)是輸入的一個(gè)域名而非IP）

• 1.通過(guò)DNS解析獲得網(wǎng)址的對(duì)應(yīng)IP地址
• 2.瀏覽器拿到IP地址與遠(yuǎn)程web服務(wù)器 通過(guò)TCP三次握手協(xié)商來(lái)建立一個(gè) TCP/IP 連接
• 3.瀏覽器 通過(guò)HTTP接發(fā)送請(qǐng)求
• 4.服務(wù)器處理并響應(yīng)請(qǐng)求
• 5.游覽器接收服務(wù)端響應(yīng)得到資源
• 6.游覽器渲染頁(yè)面及發(fā)起異步請(qǐng)求

時(shí)間畫(huà)哪兒

• 1. DNS 解析時(shí)間
• 2. 建立TCP/IP連接時(shí)間
• 3. http請(qǐng)求及響應(yīng)時(shí)間
• 4. 服務(wù)端響應(yīng)時(shí)間
• 5. 游覽器渲染頁(yè)面時(shí)間

一、DNS部分

減少DNS查找

二、HTTP部分

image.png

從京東首頁(yè)請(qǐng)求資源我們可以看出在沒(méi)有緩存的情況，也就是用戶(hù)第一次訪(fǎng)問(wèn)網(wǎng)站首頁(yè)，總共花費(fèi)了2.18s，其中第一個(gè)請(qǐng)求是第一個(gè)請(qǐng)求為 download html file. 只花了128ms
在《高性能網(wǎng)站建設(shè)指南》一書(shū)提到過(guò)一個(gè)性能黃金法則：

只有10%-20%的最終用戶(hù)響應(yīng)時(shí)間花在了下周html文件上， 其余時(shí)間花在了下載頁(yè)面所有組件上面(圖片文件，css文件， js文件等)

減少HTTP請(qǐng)求的方法

• 1. css Sprites
• 2. 內(nèi)聯(lián)圖片（data: RUL）eg: base64
• 3. 合并腳本和樣式表
• 4. 添加Expires 頭： 使用緩存來(lái)減少http請(qǐng)求的數(shù)量，并且減小http響應(yīng)的大小。(后面詳述)

加速下載頁(yè)面組件(靜態(tài)資源)

• 1. 使用CDN(內(nèi)容發(fā)布網(wǎng)絡(luò))：一組分布在不同地理位置的web服務(wù)器。 根據(jù)訪(fǎng)問(wèn)這的地區(qū)，選擇網(wǎng)絡(luò)階躍數(shù)最小的服務(wù)器或最短響應(yīng)時(shí)間的服務(wù)器

減少HTTP響應(yīng)的大小(資源下載時(shí)間)

• 1. 壓縮：gzip（請(qǐng)求：Accept-Encoding: gzip, deflate響應(yīng)：gzip）、 壓縮(html, css, js, image, video等靜態(tài)文件)
• 2. 緩存(協(xié)商緩存)

三、游覽器渲染部分(頁(yè)面逐步呈現(xiàn)原則)

• 1.將腳本放在html底部：

原因：

• a.通常游覽器會(huì)并行下載組件(并行數(shù)量每個(gè)游覽器的數(shù)量不同)，但是下載腳本時(shí)并行下載會(huì)被阻塞掉，因?yàn)閖s可以修改頁(yè)面內(nèi)容。因此游覽器會(huì)等待，以確保頁(yè)面能夠恰當(dāng)布局。
• b. 保證腳本能夠順序執(zhí)行。 如果并行下載在后面小的腳本可能會(huì)先下載完成，先執(zhí)行
  使用延遲 DEFER之后即告訴游覽器我不會(huì)改變腳本，但是兼容性不好， 不建議使用。

• 2.將樣式表放在頂部
• 3.使用外部js和css

原因：

• a. 可以緩存
• b. 可以重用

• 4.精簡(jiǎn)HTML，css，js。 書(shū)寫(xiě)高性能的代碼，避免從復(fù)、無(wú)用的代碼 (這一塊又是龐大的話(huà)題另外在詳述)