JavaScript相關(guān)優(yōu)化
把腳本放在頁面底部
放在前面js加載會造成阻塞，影響后面dom的加載使用外部JavaScript和CSS
在現(xiàn)實環(huán)境中使用外部文件通常會產(chǎn)生較快的頁面，因為 JavaScript 和 CSS 有機會被瀏覽器緩存起來兆旬。對于內(nèi)聯(lián)的情況听诸，由于 HTML 文檔通常不會被配置為可以進行緩存的妈橄，所以每次請求 HTML 文檔都要下載 JavaScript 和 CSS厦凤。所以枢纠，如果 JavaScript 和 CSS 在外部文件中肤寝，瀏覽器可以緩存它們当辐，HTML 文檔的大小會被減少而不必增加 HTTP 請求數(shù)量。壓縮JavaScript和CSS
壓縮文件是為了降低網(wǎng)絡(luò)傳輸量鲤看，減少頁面請求的響應(yīng)時間缘揪。減少DOM操作
操作dom會產(chǎn)生幾種動作，極大的影響渲染的效率。其中l(wèi)ayout（布局）和paint（繪制）是最大的找筝。-
js開銷縮短解析時間
開銷：加載-》解析和編譯-》執(zhí)行
js的解析和編譯蹈垢，執(zhí)行要花很長時間（谷歌開發(fā)工具中的performance中可以查看。選中main主線程中的某一段袖裕。）
解決方案：- 代碼拆分按需加載
- tree shaking代碼減重
- 避免長任務(wù)
- requestAnimationFrame和repuestIdleCallback進行時間調(diào)度
-
v8編譯原理（代碼優(yōu)化）
- 解析js代碼成抽象語法樹-》字節(jié)碼-》機器碼
編譯過程會進行優(yōu)化
運行時可能會發(fā)生反優(yōu)化 - v8內(nèi)部優(yōu)化
腳本流:邊下載邊解析
字節(jié)碼緩存:常用的字節(jié)碼會存起來(這個文件用到其他的文件也用到的參數(shù))
函數(shù)懶解析:先解析用到的 - 對象優(yōu)化(迎合v8進行優(yōu)化)
保證對象初始化順序一致(對象初始化時v8會生成隱藏屬性以便后續(xù)復(fù)用并且是按照順序排序的)
不要直接賦值對象新屬性(追加的屬性需要通過描述數(shù)組間接查找)
使用數(shù)組代替類數(shù)組(v8會對數(shù)組進行優(yōu)化)比如先將類數(shù)組轉(zhuǎn)化成數(shù)組
避免讀取數(shù)組越界(比如for循環(huán)多查找1個下標會照成性能相差6倍)
- 解析js代碼成抽象語法樹-》字節(jié)碼-》機器碼
造成undefined和數(shù)字比較
數(shù)組也是對象曹抬，當找不到對應(yīng)下標的時候回沿著原型鏈向上找造成額外開銷
業(yè)務(wù)上無效
- js內(nèi)存，避免造成內(nèi)存泄漏
通過變量是否能被訪問到來判斷內(nèi)存是否釋放急鳄。
- 局部變量: 函數(shù)執(zhí)行完沒有閉包引用會被標記回收
- 全局變量: 直到瀏覽器被卸載頁面釋放
- 回收機制:
引用計數(shù):每調(diào)用一次加一,當計數(shù)為0的時候進行回收谤民。缺點是不能解決循環(huán)引用(例如a對象依賴于b對象，標記清除(垃圾回收): 從根節(jié)點去訪問疾宏，當訪問到不能被訪問的對象就進行標記然后進行垃圾回收张足。(當a對象
解決：避免意外的全局變量；避免反復(fù)運行引發(fā)的閉包坎藐；避免脫離的dom元素沒有被回收(所以react有ref這個api)为牍。
CSS 相關(guān)優(yōu)化
- 把樣式表放在<head>標簽中
css放在head標簽中比css放在body標簽尾部少了一次構(gòu)建RenderTree, 一次計算布局和一次渲染網(wǎng)頁, 因此性能會更好。 - 不要使用CSS樣式表
- 使用<link>替代@import
- 不要使用filter
- 避免元素類型轉(zhuǎn)化(數(shù)組中放多種類型不利于v8引擎優(yōu)化代碼)
- 降低css對渲染的阻塞(按需加載顺饮，放在dom前面加載)
- 利用pu完成動畫(前面講到的復(fù)合)
- 使用contain進行優(yōu)化(優(yōu)化強度大吵聪。例如: contan:layout告訴瀏覽器這個節(jié)點內(nèi)部的子元素和外面的使用font-display進行優(yōu)化:讓文字更早的顯示在頁面上，減輕文字閃動的問題
html 相關(guān)優(yōu)化
- 減少iframes使用
- 壓縮空白符
- 避免嵌套層次太深
- 避免使用table布局
- 減少沒必要的注釋
- 刪除元素默認屬性(比如默認checkbox等)
開發(fā)內(nèi)容相關(guān)優(yōu)化
- 減少HTTP請求數(shù)
- 減少DNS重定向
- 緩存AJax請求
- 延遲加載
- 預(yù)加載
- 減少DOM元素的數(shù)量
- 劃分內(nèi)容到不同域名
- 盡量減少使用iframe
- 避免404錯誤
服務(wù)器相關(guān)優(yōu)化
- 使用CDN
- 添加Expires或Cache-Control響應(yīng)頭
- 啟用Gzip
- 配置Etag
- 盡早輸出緩沖
- Ajax請求使用GET方法
- 避免圖片src為空
- 傳輸加載優(yōu)化
服務(wù)器啟用gzip - keep Alive(持久TCP連接)
keepalive_requests 100;請求100次后開啟http的keepAlive有keepalive_timeout 65;65秒后關(guān)閉兼雄。 - http緩存
最好是用no-cache(要用的時候需要在服務(wù)器那邊Etag驗證下) - service workers
- 加速重復(fù)訪問
- 離線支持
Cookie相關(guān)優(yōu)化
- 減少cookie大小
- 靜態(tài)資源使用無cookie域名
首屏加載優(yōu)化
- 資源壓縮吟逝、傳輸壓縮、代碼拆分赦肋、tree shaking块攒、http緩存
- 路由懶加載、預(yù)渲染佃乘、inlineCss囱井、虛擬列表
- prefetch和preload調(diào)整加載順序js內(nèi)存管理
