一、（http請(qǐng)求）關(guān)鍵渲染路徑優(yōu)化
@1 盡可能使用HTTP2.0
@2 開(kāi)啟TCP通道的長(zhǎng)連接
Connection:keep-alive@3 開(kāi)啟服務(wù)器端的GZIP壓縮：「讓每一次返回的資源大小壓縮40%+」
@4 對(duì)不經(jīng)常更新的數(shù)據(jù)做數(shù)據(jù)緩存
@5 對(duì)于靜態(tài)資源文件設(shè)置強(qiáng)緩存和協(xié)商緩存:目的是保證第二次及以后加載頁(yè)面更快
-
@6 合理使用圖片base64：
需要基于webpack自己編譯BASE64「不要自己手動(dòng)寫B(tài)ASE64，因?yàn)榇a太惡了」
零散的小圖片一般可以base64
如果這個(gè)圖片很大，并且還很重要（不能延遲加載），如果想盡各種辦法加載還是慢轻要，不妨使用BASE64
-
@7 不同的資源分服務(wù)器部署:
- 將原本放在一個(gè)服務(wù)器上的項(xiàng)目資源，分給多個(gè)服務(wù)器：web服務(wù)器、數(shù)據(jù)服務(wù)器黔帕、圖片/音視頻服務(wù)器、第三方服務(wù)器...
- ==優(yōu)勢(shì)==：資源合理利用蹈丸、減輕服務(wù)器壓力成黄、提高服務(wù)器處理能力、提高HTTP請(qǐng)求的并發(fā)數(shù)(每個(gè)服務(wù)器HTTP請(qǐng)求并發(fā)上限是5-7個(gè))
- ==弊端==：增加了DNS解析的次數(shù)逻杖，所以在這個(gè)基礎(chǔ)上奋岁，我們使用DNS Prefetch預(yù)解析
- ==DNS Prefetch的原理==：利用link的異步性，讓GUI渲染的同時(shí)荸百，也去預(yù)先解析DNS(dns-prefetch)闻伶，后面再獲取資源的時(shí)候，直接把DNS緩存的信息拿出來(lái)用即可...
-
@8減少因操作DOM而產(chǎn)生的重排和重繪:
==放棄直接操作DOM==：我們主攻操作數(shù)據(jù)够话，把操作DOM的事情交給vue/react框架來(lái)完成「框架內(nèi)部做了很多操作DOM的優(yōu)化」：虛擬DOM->DOM DIFF->渲染差異內(nèi)容
==讀寫分離蓝翰，利用瀏覽器的渲染隊(duì)列機(jī)制==:我們操作DOM的樣式進(jìn)行“「集中修改樣式」”
==動(dòng)態(tài)創(chuàng)建多個(gè)DOM節(jié)點(diǎn)時(shí)==：我們基于文檔碎片或者模板字符串，實(shí)現(xiàn)批量增加
==基于transform修改元素的樣式==：不會(huì)引發(fā)重排
==盡量操作脫離普通文檔流的節(jié)點(diǎn)==:這樣節(jié)點(diǎn)位置或大小改變女嘲，只會(huì)把這一層中的節(jié)點(diǎn)重新Layout霎箍，雖然也引發(fā)了重排，但是總比所有節(jié)點(diǎn)都重新計(jì)算位置強(qiáng)...
-
關(guān)于html/CSS的優(yōu)化
- @9 link導(dǎo)入樣式放在HEAD中：讓GUI渲染DOM TREE的同時(shí)澡为，也去請(qǐng)求CSS資源漂坏，這樣等到DOM TREE完成，可能CSS資源已經(jīng)拿回來(lái)了
- @10 script標(biāo)簽盡可能放到最后：
- 對(duì)于script標(biāo)簽來(lái)講，盡可能放在頁(yè)面末尾導(dǎo)入顶别，如果非要放在前面導(dǎo)入谷徙，需要加async/defer，避免對(duì)GUI阻塞
- @11 合理使用css樣式引入方式：
- 如果樣式資源比較少驯绎，直接內(nèi)嵌式即可完慧，減少一次HTTP請(qǐng)求；如果內(nèi)容多剩失，則合并到一個(gè)css中屈尼，使用外鏈?zhǔn)絣ink導(dǎo)入；堅(jiān)決不用@import導(dǎo)入式拴孤，因?yàn)樗麜?huì)阻塞GUI渲染Ｆ⑵纭！
- @12 減少HTML嵌套的層級(jí)演熟、使用語(yǔ)義化標(biāo)簽
- @13CSS選擇器前綴不要過(guò)長(zhǎng)「CSS選擇器的渲染方向：右->左」
- @14 避免使用CSS的表達(dá)式{expression}
二鞭执、頁(yè)面打開(kāi)速度優(yōu)化
- @1 圖片懶加載：
- 第一次渲染頁(yè)面不去加載真實(shí)圖片(頁(yè)面中基于默認(rèn)圖占位)：減少了HTTP請(qǐng)求次數(shù)、不占用HTTP并發(fā)資源芒粹、第一次加載頁(yè)面也無(wú)需渲染圖片... 讓頁(yè)面第一次加載更快
- @2 音視頻資源一定要做延遲加載和播放Ｐ址摹！化漆！
- @3 骨架屏：
==服務(wù)器骨架屏(SSR渲染)==：頁(yè)面首屏需要展示的結(jié)構(gòu)估脆、樣式、數(shù)據(jù)等都由服務(wù)器處理好座云，第一次加載頁(yè)面疙赠，只要獲取到內(nèi)容，直接渲染即可(真實(shí)數(shù)據(jù)也有了) -> 前提服務(wù)器抗壓能力需要好
==前端骨架屏==：渲染之前的Loading效果疙教；在真實(shí)內(nèi)容沒(méi)有渲染出來(lái)之前，先把架子搭起來(lái)伞租，用一些灰色的框框占位贞谓，給用戶正在加載的友好效果...
- @4 減少HTTP的請(qǐng)求次數(shù)和大小：「因?yàn)镠TTP的并發(fā)性、TCP的三握四揮葵诈、網(wǎng)絡(luò)通道可能會(huì)被阻塞等眾多原因裸弦，決定了HTTP請(qǐng)求次數(shù)越少越好」
==CSS和JS資源各合并為一個(gè)==：「如果一個(gè)文件過(guò)大，第一次加載頁(yè)面不需要這么多東西作喘，我們也可以切割成多個(gè)理疙，但是第一次只加載一個(gè)必須用到的，其余的都動(dòng)態(tài)異步加載」
==使用CSS Sprite(精靈圖)技術(shù)==：泞坦，多張圖片合并為一個(gè)
==文件要壓縮==：圖片資源在保證清晰度的前提下窖贤，盡可能壓縮
==使用字體圖標(biāo)/SVG(矢量圖)代替位圖(jpg/png/gif...)==
- @5 做數(shù)據(jù)的分頁(yè)加載、異步加載、下拉加載...
三赃梧、運(yùn)行時(shí)代碼優(yōu)化
-
@1 事件委托：
- 「優(yōu)勢(shì)：減少堆棧內(nèi)存的開(kāi)辟滤蝠、可以給動(dòng)態(tài)創(chuàng)建的元素做事件綁定...提高了整體性能」
@2 合理使用閉包：「閉包會(huì)產(chǎn)生不釋放的棧內(nèi)存」
@3 避免內(nèi)存泄漏： -> javascript高級(jí)程序設(shè)計(jì)第三版
@4 禁止出現(xiàn)死遞歸、死循環(huán)：（因?yàn)闀?huì)導(dǎo)致棧溢出）授嘀、禁止出現(xiàn)死循環(huán)（因?yàn)闀?huì)阻塞JS引擎線程的渲染）
-
@5 減少cookie的使用：
- 「因?yàn)槊恳淮蜗蚍?wù)器發(fā)送請(qǐng)求物咳，都會(huì)在請(qǐng)求頭中把cookie傳遞給服務(wù)器，不論服務(wù)器是否想要蹄皱，如果本地cookie存儲(chǔ)信息多览闰，則每次傳輸都會(huì)攜帶一些沒(méi)必要的內(nèi)容...」
@6 對(duì)于一些操作使用函數(shù)的節(jié)流和防抖
@7 動(dòng)畫(huà)處理的原則：能用CSS搞定的不用JS，能用requestAnimationFrame搞定的不用定時(shí)器巷折，如果最后定時(shí)器動(dòng)畫(huà)都搞不定的压鉴，換需求...
四、webpack層面優(yōu)化
@1盔几、對(duì)小圖片進(jìn)行base64壓縮
@2晴弃、html、js逊拍、css文件壓縮
@3上鞠、關(guān)閉SourceMap
@4、開(kāi)啟gzip壓縮
五芯丧、vue層面優(yōu)化
- @1芍阎、v-if和v-show合理使用
- @2、v-for遍歷添加key缨恒，且避免同時(shí)使用v-if
- @3谴咸、圖片懶加載
- @4、路由懶加載/分類打包
- @5骗露、第三方插件按需導(dǎo)入
- @6岭佳、服務(wù)端渲染SSR 或 預(yù)渲染(骨架屏)
- @7、用vuex做緩存
