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