title: Web性能優(yōu)化
date: 2018-11-03 16:46:40
tags: [JavaScript]
categories: JavaScript
1. 瀏覽器會(huì)查看是否有緩存
除了html文件外盡量使用緩存。具體可見我的博客。
2. DNS查詢
減少 DNS 查詢，即盡量把所有的資源放在一個(gè)網(wǎng)站，這樣的話只需要請(qǐng)求一個(gè)網(wǎng)站就可以下載所有的資源。
3. 建立TCP連接
- TCP 連接復(fù)用，在 HTTP 協(xié)議里面加一個(gè)請(qǐng)求頭：keep-alive，即第一次 TCP 連接建立以后不斷開連接，第二次請(qǐng)求時(shí)復(fù)用上一次的連接。
- 如果使用的是 http/2.0 ，它的連接復(fù)用率是更高的，即多路復(fù)用
4. 發(fā)送HTTP請(qǐng)求 后臺(tái)處理
- 減少 cookie 體積，使用CDN也可以減少 cookie 體積，因?yàn)镃DN沒有cookie，盡量使用CDN去獲取靜態(tài)資源，就可以達(dá)到減少cookie的目的
- Cache-Control，加上這個(gè)響應(yīng)頭。如果資源已被緩存，直接就不發(fā)請(qǐng)求
- 合并文件也可以減少http請(qǐng)求，比如將多個(gè)js文件合并成一個(gè)
-
同時(shí)發(fā)送多個(gè)請(qǐng)求，比如瀏覽器會(huì)自動(dòng)同時(shí)下載 css 和 js 文件（同時(shí)下載的文件數(shù)量和瀏覽器有關(guān)），比如 IE 可以一個(gè)域名下的文件同時(shí)下載4個(gè)，那么如果有8個(gè)文件，我們就可以放在兩個(gè)域名下。
這就和我們的第二點(diǎn)矛盾了，那么如何權(quán)衡呢？
權(quán)衡域名數(shù)量：
如果文件很少，比如只有兩三個(gè)文件，那么就放在一個(gè)域名下就好了。
如果文件很多，比如10個(gè)css和10個(gè)js，如果都放在一個(gè)域名下，雖然 DNS 查詢次數(shù)少了，但文件的下載需要排隊(duì)，這樣的情況下更好的方式是增加域名數(shù)量（一般通過 CDN 來增加域名數(shù)量），減少下載文件的排隊(duì)時(shí)間，從而減少了請(qǐng)求的時(shí)間 。
5. 前端接收響應(yīng)
- 響應(yīng)頭ETag。如果服務(wù)器發(fā)現(xiàn)你的文件是最新的，它就不會(huì)給你發(fā)響應(yīng)體，只給你發(fā)一個(gè)304，客戶端就不會(huì)再重新下載文件了，直接使用上一次下載的文件。
-
gzip壓縮。在服務(wù)器用gzip壓縮文件，只要能壓縮，它就會(huì)把文件打包一下再發(fā)給瀏覽器，這樣文件大小會(huì)大幅減小，瀏覽器拿到gzip包（打包后的文件后綴是.gz）以后，再打開壓縮包進(jìn)行解析
但是gzip也有缺點(diǎn)，瀏覽器解壓gzip會(huì)耗費(fèi)性能，所以這里也需要權(quán)衡：
如果文件大小只有幾Kb，那就沒必要壓縮了，如果文件比較大的話，gzip壓縮后的優(yōu)化效果是很顯著的。
6. 響應(yīng)接收完成 得到HTML文件
7. 瀏覽器解析文件，查看DOCTYPE選擇以什么方式解析網(wǎng)頁
DOCTYPE不能寫錯(cuò)，也不能不寫，如果不寫，瀏覽器會(huì)先用各種解析方式預(yù)讀一下，最后選擇一個(gè)看起來正確的方式正式解析，這樣時(shí)間也浪費(fèi)了，渲染方式還有可能是錯(cuò)的。
8. 逐行解析HTML
9. 標(biāo)簽渲染
現(xiàn)代瀏覽器渲染標(biāo)簽一般有兩種方式：
- 看到一個(gè)標(biāo)簽，立刻在頁面中渲染該標(biāo)簽，之后解析完 css 文件后再重新渲染一次（比如IE）
- 看到一個(gè)標(biāo)簽，記在DOM樹中，等所有CSS下載完畢再來渲染該標(biāo)簽（比如Chrome）
這一部分非要優(yōu)化的話，那就是盡量減少標(biāo)簽數(shù)量，不過其實(shí)影響不大。
10. 并行下載CSS文件
- 開始下載CSS文件
- 繼續(xù)往下看還有沒有CSS，如果有，同時(shí)下載第二個(gè)CSS
- 一個(gè)域名最多同時(shí)下載 4-8個(gè) CSS文件（IE 4個(gè)，Chrome 8個(gè)，具體數(shù)量由瀏覽器而定）
- 注意：CSS文件下載是并行的，解析是串行的
在Chrome中，CSS文件會(huì)阻塞HTML渲染，即第9步所說，需要下載完所有的css文件才會(huì)開始渲染頁面。 - 優(yōu)化：CSS文件優(yōu)化，可以使用gzip，可以合并CSS文件，如果文件數(shù)量多，也可以增加域名數(shù)量（即使用CDN）
11. 并行下載JS文件，串行解析
-
JS一定會(huì)阻塞HTML的渲染，即如果有一個(gè)
<script>標(biāo)簽在<h1>的上面，JS文件下載完以后才會(huì)開始解析<h1> - 和CSS文件一樣，可以使用這三個(gè)方法來優(yōu)化：gzip、CDN 以及 合并文件。
- JS文件放在body最后，css放在head里。
- 原理：
- CSS和JS大部分時(shí)候都會(huì)阻塞瀏覽器對(duì)頁面的渲染，所以理論上我們應(yīng)該把所有阻塞渲染的東西都放在HTML的后面。
- 但是在Chrome里，CSS就算放到最后，在沒有下載完CSS之前它也不會(huì)去渲染頁面，因此我們干脆把CSS放在最前面，讓瀏覽器早一點(diǎn)去下載CSS。
- 而JS放到后面是因?yàn)椋?strong>先把界面展示給用戶，在用戶移動(dòng)鼠標(biāo)做操作的這段時(shí)間里再去下載JS，這樣體驗(yàn)更好。
另外JS放在后面可以獲取到節(jié)點(diǎn)，如果放在最前面，頁面還沒有渲染完，是獲取不到任何節(jié)點(diǎn)的，放后面也不用專門監(jiān)聽onload事件了。
12. 其他優(yōu)化技巧
使用CDN
- 什么是CDN：Content Delivery Network 內(nèi)容分發(fā)網(wǎng)絡(luò)。
把一個(gè)很遠(yuǎn)的資源分布到全國(球)各地，讓全國(球)各地的用戶訪問都很快。 - 原理：如果服務(wù)器距離用戶很遠(yuǎn)，訪問服務(wù)器的時(shí)間就會(huì)增加，最佳優(yōu)化方法就是使用CDN。
比如用戶訪問谷歌，直接訪問美國的服務(wù)器就會(huì)很慢，但是CDN可以通過DNS查詢，給用戶動(dòng)態(tài)的返回一個(gè)最近的服務(wù)器IP地址，從而減少用戶與服務(wù)器的物理距離，減少請(qǐng)求和響應(yīng)的時(shí)間。 - 作用：增加并發(fā)下載數(shù)；解除光速的限制。
延遲加載&預(yù)加載
懶加載，如果一頁的內(nèi)容有很長，可以優(yōu)先下載解析第一屏的內(nèi)容，剩下的內(nèi)容當(dāng)用戶滾動(dòng)到時(shí)再顯示。用戶沒有看到的地方先不加載，還可以節(jié)省流量。
預(yù)加載，當(dāng)用戶還沒有抵達(dá)下一頁時(shí)，先提前下載好內(nèi)容，當(dāng)用戶想要跳轉(zhuǎn)到下一頁時(shí)就會(huì)非常的快。
Audits測(cè)試
在Chrome的控制臺(tái)，點(diǎn)擊Audits，點(diǎn)擊Run audits即可。
