昨天在面位元組跳動的時候面試官直接讓我說完輸入URL之後發生的過程之後，讓我說說性能優化的政策，當時想到的比較少，現在就來系統的總結一下。我從三個方面來進行詳細的描述，分别是網絡傳輸性能的優化、頁面渲染的優化以及js阻塞性能優化。
一、網絡傳輸性能的優化
1、配置緩存
2、資源打包
（1）js/html/css壓縮，提取公共資源
（2）圖檔優化
- HTML中不縮放圖檔
- base64編碼代替圖檔（适用于圖檔大小<2kb,頁面中引用圖檔數量不多的情況）
- 合并圖檔（雪碧圖）---------是一種CSS圖像合并技術，該方法是将小圖示和背景圖像合并到一張圖檔上，然後利用css的背景定位來顯示需要顯示的圖檔部分。可以點選這裡獲得詳細的講解
- 使用字型圖示
- 響應式圖檔
- 圖檔壓縮
- 更換圖檔樣式
- 圖檔懶加載 圖檔懶加載點選這裡，一鍵清晰它的原理實作與原理
- 圖檔預加載
（3）使用CDN緩存（聊緩存之前還是了解一下cdn吧，點選這裡進行了解）
二、頁面渲染性能優化點
1、css讀寫分離
2、DOM元素離線更新（使用 document fragment）
3、沒用的元素設為不可見，減少重繪的壓力
4、壓縮dom深度
5、圖檔在渲染之前指定大小
6、頁面中可能發生大量重排重繪的元素單獨觸發渲染層，使用GPU來分擔CPU的壓力
三、JS阻塞性能優化
1、defer 與async
(1)各種形式
（(1)）
<script src="script.js"></script>
沒有 defer 或 async，浏覽器會立即加載并執行指定的腳本，“立即”指的是在渲染該 script 标簽之下的文檔元素之前，也就是說不等待後續載入的文檔元素，讀到就加載并執行。
（2
）<script async src="script.js"></script>
有 async，加載和渲染後續文檔元素的過程将和 script.js 的加載與執行并行進行（異步）。
（3）
<script defer src="myscript.js"></script>
有 defer，加載後續文檔元素的過程将和 script.js 的加載并行進行（異步），但是 script.js 的執行要在所有元素解析完成之後，DOMContentLoaded 事件觸發之前完成。
（2）差別(defer 和 async 在網絡讀取（下載下傳）這塊兒是一樣的，都是異步的（相較于 HTML 解析）)
（(1)）
它倆的差别在于腳本下載下傳完之後何時執行，顯然 defer 是最接近我們對于應用腳本加載和執行的要求的
((2))關于 defer，此圖未盡之處在于它是按照加載順序執行腳本的，這一點要善加利用
((3))async 則是一個亂序執行的主，反正對它來說腳本的加載和執行是緊緊挨着的，是以不管你聲明的順序如何，隻要它加載完了就會立刻執行
仔細想想，async 對于應用腳本的用處不大，因為它完全不考慮依賴（哪怕是最低級的順序執行），不過它對于那些可以不依賴任何腳本或不被任何腳本依賴的腳本來說卻是非常合适的，最典型的例子：Google Analytics
這裡為一篇好文，簡單闡述了async與defer的差別-----defer就相當于将js的标簽放在文章最後面，他們加載的時間是相同的但是是執行的時間不同。
2、首屏js放在底部
3、過去幾年來，浏覽器解析和編譯腳本的速度已經有了顯著提升，這也改變了 JavaScript 的性能開銷結構。到了 2019 年，處理腳本的主要性能開銷展現在腳本下載下傳和 CPU 執行時間上。當浏覽器的主線程忙于執行 JavaScript 腳本時可能會拖累使用者互動操作，是以加快腳本執行速度并消除網絡瓶頸能明顯改善使用者體驗。
這裡是一篇根據如何加快腳本執行速度和消除網絡瓶頸而提高性能的文章