最近老大給我佈置了一道作業，讓我去想想有哪些辦法可以優化web頁面的性能，回頭一看，做了這麼多年的前端開發，多少還是知道一些常規的性能優化策略，以下是我對性能優化的一個總結，共13點，如果描述錯誤，歡迎指正：
1. 使用cdn
對於需要展示大量圖片等靜態資源的頁面，可以將圖片等靜態資源放在cdn上，這樣可以加速對資源的獲取。
2. 合併http請求
比如對於較小的圖片，可以將其轉換成base64的文本放在CSS文件中;對應多個後臺數據請求，可以要求後臺合併;使用打包工具，將頁面的CSS和js文件合併;使用雪碧圖合併小圖標。這樣可以減少http請求數量。
注意:合併後的文件過大也是會影響性能的，因爲多個請求同時發起至少可以保持請求是併發，節省總體時間消耗，如果合併後的文件太大，反而會讓一個請求時間過長，導致瀏覽器總體等待時間過長。
3. 開啓http的keep alive
讓HTTP請求可以複用TCP連接，因爲TCP連接建立很耗時。
4. 首屏使用ssr
我理解主要有以下兩個優點：
第一：節約首屏請求時間。在服務器發起第一次首屏需要數據的請求，由於內網服務器之間距離短，切服務器帶寬大，傳輸數據快，因此從首屏數據傳輸來說，服務端佔優勢;
第二：加少首屏頁面迴流。服務端利用其緩存能力和機器性能優勢，裝配好首屏的HTML，返回給瀏覽器，瀏覽器可以直接解析渲染，不需要額外對頁面進行迴流，首屏體驗更佳。
5. 使用預加載資源
對於需要滾動加載圖片或者dom資源的頁面，可以在首屏後預加載幾頁資源，在用戶滾動到一定距離的時候，再次請求並加載部分資源。
6. 節流和防抖
對於頁面上可能頻繁觸發的事件，使用節流或者防抖方案(具體使用那種視情況而定)。頻繁觸發的事件不僅會消耗計算資源，由於js是單線程執行，還可能會影響阻塞用戶的操作。
7. 使用緩存
對於靜態資源請求可以和服務器約定使用304緩存資源。當文件不變的情況下，不至於每次都讓服務器返回數據，而是直接讀取本地緩存。
8. 使用http2.0
主要有以下幾個優點。
第一：頭部壓縮，2.0會對http請求的頭部進行壓縮(使用的是約定簡化字典技術）；
第二：數據併發傳輸，2.0使用的二進制分幀傳輸技術，相對於http1.1的文本傳輸技術，可以針對單個http請求進行併發傳送（我理解應該是二進制碼更容易拆分成相同大小的塊，併發傳輸後，在接收端更容易拼裝在一起，然後還原）。
第三：多路複用（1.1其實也有類似效果，比如keep alive，但是由於2.0使用分幀技術，多個http請求之間可以更好的支持複用連接）。
此外http2.0還支持服務端推送
9. 異步請求
當後邊的程序不需要等待前邊數據請求的時候，可以將請求設置成異步。如果有多個請求，可以使用Promise.all()同時進行多個異步請求，又可以等待到每個異步請求結束和纔去處理需要等待的任務。
10. DNS預解析
如果某個資源在將來可以反覆用到，或者頁面返回被跳轉到，可以開啓dns預解析（讓瀏覽器緩存dns解析結果）。對於https的頁面，加上
<meta http-equiv="x-dns-prefetch-control" content="on">
或者直接在請求資源標籤中加入：
<link rel="dns-prefetch" href="//example.com">
頁面會自動對標籤裏的鏈接進行dns預解析
11. http請求正文壓縮
常見的gzip、deflate 和 deflate-raw壓縮方法。壓縮後可以減少數據傳輸量，節約服務器帶寬資源和用戶網絡資源。
12. 使用web worker開啓子js線程
用來計算可能佔用時間較大的操作，比如說md5、sha轉換，加密操作等。這樣不至於在計算時候阻塞主js線程執行。
13. 使用server worker技術
這是一種新的技術，其實我也不太瞭解，只是覺得可以用它來做web頁面的類似離線的緩存（類似強緩存，單肯定還是有差異的）。