性能優(yōu)化的根本目的：

==>要思考的是用戶使用網(wǎng)站的體驗(yàn)如何叫潦，而不是我們可以節(jié)省多少字節(jié)沧侥，只有準(zhǔn)確感知用戶的感受，我們才有必要談毫秒科乎、字節(jié)和請(qǐng)求數(shù)量等問(wèn)題。

針對(duì)優(yōu)化注意事項(xiàng)：

==>1. 防止過(guò)早優(yōu)化：沒(méi)必要在剛開(kāi)始階段就對(duì)一個(gè)細(xì)節(jié)進(jìn)行放大型的優(yōu)化贼急，因?yàn)檫@樣的成本很高茅茂，除了代碼可讀性方面的東西，甚至還可能會(huì)引入更多的bug太抓，所以空闲，針對(duì)這個(gè)問(wèn)題，我們可以在上線和運(yùn)營(yíng)的時(shí)候進(jìn)行監(jiān)控走敌，當(dāng)快暴露到問(wèn)題的時(shí)候碴倾，進(jìn)行整體優(yōu)化。

==>2. 本末倒置的關(guān)注：網(wǎng)站內(nèi)容是最重要的，應(yīng)該查看頁(yè)面的每個(gè)部分跌榔，看是否滿足網(wǎng)站頁(yè)面的主要目的异雁，暫時(shí)不需要將額外的注意力全部放到一些不關(guān)乎本質(zhì)的東西上。

對(duì)于性能的分析：

==>1. 使用瀏覽器的性能分析工具矫户，得到性能分析圖表片迅，最著名的就是反向火焰圖表残邀，針對(duì)瀏覽器的加載和渲染一目了然皆辽。

==>2. 投入使用之前缺乏壓力測(cè)試和性能測(cè)試

性能優(yōu)化（從用戶輸入網(wǎng)址到客戶端展現(xiàn)，一步一步優(yōu)化）

1. 輸入網(wǎng)址 ==> 告訴瀏覽器你要去哪里
2. 瀏覽器查找DNS ==> 網(wǎng)絡(luò)世界是IP地址的世界芥挣，DNS就是ip地址的別名驱闷。從本地DNS到最頂級(jí)DNS一步一步的網(wǎng)上爬，直到命中需要訪問(wèn)的IP地址
a. DNS預(yù)解析 使用CDN緩存空免，加快解析CDN尋找到目標(biāo)地址（dns-prefetch）

3. 客戶端和服務(wù)器建立連接 ==>建立TCP的安全通道空另，3次握手
a. CDN加速 使用內(nèi)容分發(fā)網(wǎng)絡(luò)，讓用戶更快的獲取到所要內(nèi)容
b. 啟用壓縮 在http協(xié)議中蹋砚，使用類似Gzip壓縮的方案（對(duì)服務(wù)器資源不足的時(shí)候進(jìn)行權(quán)衡）
c. 使用HTTP/2協(xié)議 http2.0針對(duì)1.0優(yōu)化了很多東西扼菠，包括異步連接復(fù)用，頭壓縮等等坝咐，使傳輸更快

4. 瀏覽器發(fā)送http請(qǐng)求 ==> 默認(rèn)長(zhǎng)連接（復(fù)用一個(gè)tcp通道循榆，短連接：每次連接完就銷毀）
a. 減少http請(qǐng)求 每個(gè)請(qǐng)求從創(chuàng)建到銷毀都會(huì)消耗很多資源和時(shí)間，減少請(qǐng)求就可以相對(duì)來(lái)說(shuō)更快展示內(nèi)容
- 1). 壓縮合并js文件以及css文件
- 2）. 針對(duì)圖片墨坚，可將圖片進(jìn)行合并然后下載秧饮，通過(guò)css Sprites切割展示（控制大小，太大的話反而適得其反）
b. 使用http緩存 緩存原則：越多越好泽篮，越久越好盗尸。讓客戶端發(fā)送更少請(qǐng)求，直接從本地獲取帽撑，加快性能泼各。
c. 減少cookie請(qǐng)求 針對(duì)非必要數(shù)據(jù)（靜態(tài)資源）請(qǐng)求，進(jìn)行跨域隔離亏拉，減少傳輸內(nèi)容大小扣蜻。
d. 預(yù)加載請(qǐng)求 針對(duì)一些業(yè)務(wù)中場(chǎng)景可預(yù)加載的內(nèi)容，提前加載专筷，在之后的用戶操作中更少的請(qǐng)求弱贼，更快的響應(yīng)
e. 選擇get和post 在http定義的時(shí)候，get本質(zhì)上就是獲取數(shù)據(jù)磷蛹，post是發(fā)送數(shù)據(jù)的吮旅。get可以在一個(gè)TCP報(bào)文完成請(qǐng)求，但是post先發(fā)header，再發(fā)送數(shù)據(jù)庇勃。so檬嘀，考慮好請(qǐng)求選型。
f. 緩存方案選型 遞進(jìn)式緩存更新（防止一次性丟失大量緩存责嚷，導(dǎo)致負(fù)載驟多）

5. 服務(wù)器響應(yīng)請(qǐng)求 ==> tomcat鸳兽、IIS等服務(wù)器通過(guò)本地映射文件關(guān)系找到地址或者通過(guò)數(shù)據(jù)庫(kù)查找到數(shù)據(jù)，處理完成返回給瀏覽器
a. 后端框架選型
==> 更快的響應(yīng)罕拂，前端更快的操作揍异。
b. 數(shù)據(jù)庫(kù)選型和優(yōu)化 /

6. 瀏覽器接受響應(yīng) ==> 瀏覽器根據(jù)報(bào)文頭里面的數(shù)據(jù)進(jìn)行不同的響應(yīng)處理
a. 解耦第三方依賴 越多的第三方的不確定因素，會(huì)導(dǎo)致web的不穩(wěn)定性和不確定性
b. 避免404資源 請(qǐng)求資源不到浪費(fèi)了從請(qǐng)求到接受的所有資源

7. 瀏覽器渲染順序
==>a.HTML解析開(kāi)始構(gòu)建dom樹(shù)
b.外部腳本和樣式表加載完畢
- a). 盡快加載css爆班，首先將CSSOM對(duì)象渲染出來(lái)衷掷，然后進(jìn)行頁(yè)面渲染，否則導(dǎo)致頁(yè)面閃屏柿菩，用戶體驗(yàn)差
- b). css選擇器是從右往左解析的戚嗅，so類似#test a {color: #444},css解析器會(huì)查找所有a標(biāo)簽的祖先節(jié)點(diǎn)，所以效率不是那么高
- c). 在css的媒介查詢中枢舶，最好不要直接和任何css規(guī)則直接相關(guān)懦胞。最好寫到link標(biāo)簽中，告訴瀏覽器凉泄，只有在這個(gè)媒介下躏尉，加載指定這個(gè)css
c.腳本在文檔內(nèi)解析并執(zhí)行
- a）. 按需加載腳本，例如現(xiàn)在的webpack就可以打包和按需加載js腳本
- b）. 將腳本標(biāo)記為異步旧困，不阻塞頁(yè)面渲染醇份，獲得最佳啟動(dòng)，保證無(wú)關(guān)主要的腳本不會(huì)阻塞頁(yè)
- c). 慎重選型框架和類庫(kù)吼具，避免只是用類庫(kù)和框架的一個(gè)功能或者函數(shù)僚纷，而引用整個(gè)文件。
d.HTML DOM完全構(gòu)造起來(lái)
- a). DOM 的多個(gè)讀操作（或多個(gè)寫操作）拗盒，應(yīng)該放在一起怖竭。原則：統(tǒng)一讀、統(tǒng)一寫陡蝇。
e.圖片和外部?jī)?nèi)容加載
- a). 對(duì)多媒體內(nèi)容進(jìn)行適當(dāng)優(yōu)化痊臭，包括恰當(dāng)使用文件格式，文件處理登夫、漸進(jìn)式渲染等
= b). 避免空的src广匙，空的src仍然會(huì)發(fā)送請(qǐng)求到服務(wù)器
- c). 避免在html內(nèi)容中縮放圖片，如果你需要使用小圖恼策，則直接使用小圖
f.網(wǎng)頁(yè)完成加載
- a). 服務(wù)端渲染鸦致，特別針對(duì)首屏加載很重要的網(wǎng)站，可以考慮這個(gè)方案。后端渲染結(jié)束分唾，前端接管展示抗碰。
a）針對(duì)首屏展示優(yōu)化
- 1）. 圖片懶加載 針對(duì)展示只加載第一屏，等用戶進(jìn)行滾動(dòng)的時(shí)候再進(jìn)行加載绽乔。如果用戶對(duì)下面內(nèi)容不感興趣弧蝇，那么節(jié)省的請(qǐng)求。
b）javascript優(yōu)化
- 1）. 減少對(duì)dom節(jié)點(diǎn)的查詢折砸，因?yàn)槊看味紩?huì)重新去索引這個(gè)集合或者元素看疗。或者查詢一次緩存起來(lái)鞍爱，以待接下來(lái)使用
- 2）. 進(jìn)行js操作DOM的時(shí)候鹃觉，考慮清楚頁(yè)面的重繪和重排专酗，因?yàn)檫@些操作相對(duì)來(lái)說(shuō)十分損耗性能的睹逃。
- 3）. 避免使用eval和Function構(gòu)造，因?yàn)榻馕銎鲿?huì)將這些內(nèi)容先轉(zhuǎn)換成可執(zhí)行代碼祷肯，然后再進(jìn)行接下去的操作沉填。
- 4）. 減少作用域鏈的查找，如果一個(gè)閉包函數(shù)使用到全局作用域的數(shù)據(jù)佑笋，那么每次局部作用域都會(huì)一層一層爬到最高作用域取得數(shù)據(jù)翼闹。
- 5）. 數(shù)據(jù)訪問(wèn)，對(duì)非引用類型數(shù)據(jù)訪問(wèn)和局部變量的訪問(wèn)是最快的蒋纬。所以如果對(duì)引用類型的成員（對(duì)象的屬性或者數(shù)組的成員）訪問(wèn)超過(guò)一次猎荠，則緩存
- 6）. 將前端可能會(huì)使用的一些算法函數(shù)寫的更優(yōu)化，在時(shí)間和空間復(fù)雜度上尋找到一個(gè)最優(yōu)方案蜀备。
- 7）. 去除重復(fù)加載同一模塊腳本
- 8）. 智能事件處理关摇，比如在一個(gè)div下有10個(gè)按鈕，可以在冒泡過(guò)程中捕獲這個(gè)事件源碾阁，然后注冊(cè)
c） css優(yōu)化
-1）. 刪除無(wú)用規(guī)則
- 2）. 內(nèi)聯(lián)關(guān)鍵CSS
- 3）. 避免@imports和Base64
- 4）. 啟用高性價(jià)比屬性(如opacity over rgba())
- 5）. 避免重復(fù)性工作
- 6）. 不要一條條地改變樣式输虱，而要通過(guò)改變class，或者csstext屬性脂凶，一次性地改變樣式宪睹。
- 7）. 可將元素設(shè)為display: none（需要1次重排和重繪），然后N次操作蚕钦，最后恢復(fù)顯示
-8）. position屬性為absolute或fixed的元素亭病，重排的開(kāi)銷會(huì)比較小，因?yàn)椴挥每紤]它對(duì)其他元素的影響嘶居。
d） 圖片優(yōu)化（網(wǎng)絡(luò)請(qǐng)求中80%都是靜態(tài)資源的請(qǐng)求）
- 1). 圖片正確格式的選擇
- 2). 圖片尺寸的選擇罪帖，在低分辨率等狀況下考慮降級(jí)處理（考慮響應(yīng)式圖片）
- 3). 使用正確的工具進(jìn)行優(yōu)化（有損壓縮、無(wú)損壓縮）
- 4). 能用css處理和代理的，優(yōu)先考慮css實(shí)現(xiàn)（陰影胸蛛，濾鏡等）
-5). 正確使用data url污茵，比如說(shuō)多地使用的地方，不建議data url葬项，可考慮緩存
- 6). 考慮圖片的懶加載和元素可見(jiàn)加載方案
- 7). 圖片的預(yù)加載泞当，在正確的合理的設(shè)計(jì)節(jié)點(diǎn)進(jìn)行圖片的預(yù)加載
所有性能優(yōu)化總結(jié)為三個(gè)層面優(yōu)化：物理層面的優(yōu)化，設(shè)計(jì)層面的優(yōu)化民珍，代碼層面的優(yōu)化

注：設(shè)計(jì)層優(yōu)化最主要的核心：衡量如何花費(fèi)最少代價(jià)實(shí)現(xiàn)頁(yè)面功能

注：HTTP/2（超文本傳輸協(xié)議第2版襟士，最初命名為HTTP 2.0）：
是HTTP協(xié)議的的第二個(gè)主要版本，HTTP/2的目標(biāo)包括異步連接復(fù)用嚷量，頭壓縮和請(qǐng)求反饋管線化并保留與HTTP 1.1的完全語(yǔ)義兼容陋桂。Google Chrome、Mozilla Firefox蝶溶、Microsoft Edge和Opera已支持HTTP/2嗜历，并默認(rèn)啟用。Internet Explorer自IE 11開(kāi)始支持HTTP/2抖所，但僅限于Windows 10 Beta梨州，并默認(rèn)情況激活。

學(xué)習(xí)前端的同學(xué)注意了Ｌ镌１┙场！
學(xué)習(xí)過(guò)程中遇到什么問(wèn)題或者想獲取學(xué)習(xí)資源的話傻粘，歡迎加入前端學(xué)習(xí)交流群461593224每窖，我們一起學(xué)前端！