前端頁面性能優化的幾種方式

時間 2019-11-08

標籤前端頁面性能優化幾種方式欄目系統性能简体版

原文原文鏈接

本文最初發表於博客園，並在GitHub上持續更新前端的系列文章。歡迎在GitHub上關注我，一塊兒入門和進階前端。javascript

如下是正文。css

前言

提高頁面性能優化的常見方式：html

一、資源壓縮合並，減小http請求前端
二、非核心代碼異步加載 --> 異步加載的方式 --> 異步加載的區別java
三、利用瀏覽器緩存 --> 緩存的分類 --> 緩存的原理git

緩存是全部性能優化的方式中最重要的一步【重要】github

有的人可能會回答local storage 和session storage，其實不是這個。瀏覽器緩存和存儲不是一回事。面試

四、使用CDN

瀏覽器第一次打開頁面時，緩存是起不了做用的。這個時候，CDN就上場了。segmentfault

五、DNS預解析

1、資源壓縮合並，減小http請求

合併圖片（css sprites）、CSS和JS文件合併、CSS和JS文件壓縮瀏覽器
圖片較多的頁面也可使用 lazyLoad 等技術進行優化。
精靈圖等

2、非核心代碼異步加載

異步加載的方式：（這裏不說框架，只說原理）

動態腳本加載
defer
async

動態腳本加載

使用document.createElement建立一個script標籤，即document.createElement('script')，而後把這個標籤加載到body上面去。

參考連接：

javascript 異步加載

defer

經過異步的方式加載defer1.js文件：

<script src="./defer1.js" defer></script>

async

HTmL5新增特性。

經過異步的方式加載async1.js文件：

<script src="./async1.js" async></script>

defer和async的區別

defer：在HTML解析完以後纔會執行。若是是多個，則按照加載的順序依次執行。
async：在加載完以後當即執行。若是是多個，執行順序和加載順序無關。

代碼舉例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!--經過異步的方式引入兩個外部的js文件-->
    <script src="./defer1.js" defer></script>
    <script src="./defer2.js" defer></script>
</head>

<body>
<script>
    console.log('同步任務');
</script>
</body>

</html>

上方打印的結果是：

同步任務
defer1
defer2

由於defer的加載是有順序的，因此兩個引入defer文件按順序執行。若是把引入的文件改成async的方式加載，打印的結果多是：

同步任務
async2
async1

參考連接：

淺談script標籤的defer和async

3、利用瀏覽器緩存

緩存：資源文件（好比圖片）在本地存有副本，瀏覽器下次請求的時候，可能直接從本地磁盤裏讀取，而不會從新請求圖片的url。

緩存分爲：

強緩存
協商緩存

強緩存

強緩存：不用請求服務器，直接使用本地的緩存。

強緩存是利用 http 響應頭中的Expires或Cache-Control實現的。【重要】

瀏覽器第一次請求一個資源時，服務器在返回該資源的同時，會把上面這兩個屬性放在response header中。好比：

注意：這兩個response header屬性能夠只啓用一個，也能夠同時啓用。當response header中，Expires和Cache-Control同時存在時，Cache-Control的優先級高於Expires。

下面講一下兩者的區別。

一、Expires：服務器返回的絕對時間。

是較老的強緩存管理 response header。瀏覽器再次請求這個資源時，先從緩存中尋找，找到這個資源後，拿出它的Expires跟當前的請求時間比較，若是請求時間在Expires的時間以前，就能命中緩存，不然就不行。

若是緩存沒有命中，瀏覽器直接從服務器請求資源時，Expires Header在從新請求的時候會被更新。

缺點：

因爲Expires是服務器返回的一個絕對時間，存在的問題是：服務器的事件和客戶端的事件可能不一致。在服務器時間與客戶端時間相差較大時，緩存管理容易出現問題，好比隨意修改客戶端時間，就能影響緩存命中的結果。因此，在http1.1中，提出了一個新的response header，就是Cache-Control。

二、Cache-Control：服務器返回的相對時間。

http1.1中新增的 response header。瀏覽器第一次請求資源以後，在接下來的相對時間以內，均可以利用本地緩存。超出這個時間以後，則不能命中緩存。從新請求時，Cache-Control會被更新。

協商緩存

協商緩存：瀏覽器發現本地有資源的副本，可是不太肯定要不要使用，因而去問問服務器。

當瀏覽器對某個資源的請求沒有命中強緩存（也就是說超出時間了），就會發一個請求到服務器，驗證協商緩存是否命中。

協商緩存是利用的是兩對Header：

第一對：Last-Modified、If-Modified-Since
第二對：ETag、If-None-Match

一、Last-Modified、If-Modified-Since。過程以下：

（1）瀏覽器第一次請求一個資源，服務器在返回這個資源的同時，會加上Last-Modified這個 response header，這個header表示這該資源在服務器上的最後修改時間：

（2）瀏覽器再次請求這個資源時，會加上If-Modified-Since這個 request header，這個header的值就是上一次返回的Last-Modified的值：

（3）服務器收到第二次請求時，會比對瀏覽器傳過來的If-Modified-Since和資源在服務器上的最後修改時間Last-Modified，判斷資源是否有變化。若是沒有變化則返回304 Not Modified，但不返回資源內容（此時，服務器不會返回 Last-Modified 這個 response header）；若是有變化，就正常返回資源內容（繼續重複整個流程）。這是服務器返回304時的response header：

（4）瀏覽器若是收到304的響應，就會從緩存中加載資源。

缺點：

Last-Modified、If-Modified-Since通常來講都是很是可靠的，但有可能出現的問題是：服務器上的資源變化了，可是最後的修改時間卻沒有變化。這一對header就沒法解決這種狀況。因而，下面這一對header出場了。

二、ETag、If-None-Match。過程以下：

（1）瀏覽器第一次請求一個資源，服務器在返回這個資源的同時，會加上ETag這個 response header，這個header是服務器根據當前請求的資源生成的惟一標識。這個惟一標識是一個字符串，只要資源有變化這個串就不一樣，跟最後修改時間無關，因此也就很好地補充了Last-Modified的不足。以下：

（2）瀏覽器再次請求這個資源時，會加上If-None-Match這個 request header，這個header的值就是上一次返回的ETag的值：

3）服務器第二次請求時，會對比瀏覽器傳過來的If-None-Match和服務器從新生成的一個新的ETag，判斷資源是否有變化。若是沒有變化則返回304 Not Modified，但不返回資源內容（此時，因爲ETag從新生成過，response header中還會把這個ETag返回，即便這個ETag並沒有變化）。若是有變化，就正常返回資源內容（繼續重複整個流程）。這是服務器返回304時的response header：

（4）瀏覽器若是收到304的響應，就會從緩存中加載資源。

提示：若是面試官問你：與瀏覽器緩存相關的http header有哪些？你能寫出來嗎？這是一個亮點。

參考連接：

瀏覽器緩存知識小結及應用[薦]

4、使用CDN

怎麼最快地讓用戶請求資源。一方面是讓資源在傳輸的過程當中變小，另外就是CDN。

要注意，瀏覽器第一次打開頁面的時候，瀏覽器緩存是起不了做任何用的，使用CDN，效果就很明顯。

5、DNS預解析（dns-prefetch）

經過 DNS 預解析來告訴瀏覽器將來咱們可能從某個特定的 URL 獲取資源，當瀏覽器真正使用到該域中的某個資源時就能夠儘快地完成 DNS 解析。

第一步：打開或關閉DNS預解析

你能夠經過在服務器端發送 X-DNS-Prefetch-Control 報頭。或是在文檔中使用值爲 http-equiv 的meta標籤：

<meta http-equiv="x-dns-prefetch-control" content="on">

須要說明的是，在一些高級瀏覽器中，頁面中全部的超連接（<a>標籤），默認打開了DNS預解析。可是，若是頁面中採用的https協議，不少瀏覽器是默認關閉了超連接的DNS預解析。若是加了上面這行代碼，則代表強制打開瀏覽器的預解析。（若是你能在面試中把這句話說出來，則必定是你出彩的地方）

第二步：對指定的域名進行DNS預解析

若是咱們未來可能從 smyhvae.com 獲取圖片或音頻資源，那麼能夠在文檔頂部的標籤中加入如下內容：

<link rel="dns-prefetch" href="http://www.smyhvae.com/">

當咱們從該 URL 請求一個資源時，就再也不須要等待 DNS 解析的過程。該技術對使用第三方資源特別有用。

參考連接：

個人公衆號

想學習代碼以外的軟技能？不妨關注個人微信公衆號：生命團隊（id：vitateam）。

掃一掃，你將發現另外一個全新的世界，而這將是一場美麗的意外：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。