前端性能優化

性能優化常見的辦法：

　　1、資源壓縮與合併

　　資源壓縮與合併 主要包括這些方面：

　　html壓縮，CSS壓縮，JS的壓縮和混亂以及合併。

  　 一、html 壓縮

　　　　html代碼壓縮就是壓縮這些在文本文件中有意義，可是在HTML中不顯示的字符，包括空格，製表符，換行符等，還有一些其餘意義的字符，如HTML註釋也能夠被壓縮。

　　　　如何進行 html 壓縮？

　　　　(1)、使用在線網站進行壓縮(開發過程當中通常不用)

　　　　(2)、nodejs 提供了html-minifier工具，利用其餘項目構建工具

　　　　(3)、後端模板引擎渲染壓縮

 

　　二、CSS 壓縮

　　　　css代碼壓縮簡單來講就是無效代碼刪除和css語義合併　

　　　　如何進行 CSS 壓縮？

　　　　(1)、使用在線網站進行壓縮(開發過程當中通常不用)

　　　　(2)、nodejs 提供了html-minifier工具，利用其餘項目構建工具

 

　　三、JS 的壓縮和混亂

　　　　js的壓縮和混亂主要包括如下這幾部分：

　　　　(1)、無效字符的刪除

　　　　(2)、剔除註釋

　　　　(3)、代碼語義的縮減和優化

　　　　(4)、代碼保護(代碼邏輯變得混亂，下降代碼的可讀性，這點很重要)　　　

　　　　

　　　　如何進行JS 的壓縮和混亂？

　　　　(1)、使用在線網站進行壓縮(開發過程當中通常不用)

　　　　(2)、使用html-minifier工具，利用其餘項目構建工具

　　　　(3)、使用uglifyjs2對js進行壓縮

 　

　　　　注：html壓縮無關緊要，但css壓縮與js的壓縮和混亂必需要有！

 

　　四、文件合併

　　　　壓縮合並css和js能夠減小網站http請求的次數

　　　　如何實現文件合併？　

　　　　(1)、使用在線網站進行文件合併

　　　　(2)、使用nodejs實現文件合併(gulp、webpack等)

　　

　　2、非核心代碼異步加載的方式　　

　　　　一、異步加載的方式

　　　　　　異步加載的三種方式：async、defer、動態腳本建立

　　　　　　(1)、async 方式

　　　　　　1>.async屬性是HTML5新增屬性，須要Chrome、FireFox、IE9+瀏覽器支持

　　　　　　2>.async屬性規定一旦腳本可用，則會異步執行 

　　　　　　3>.async屬性僅適用於外部腳本

　　　　　　4>.若是是多個腳本，該方法不能保證腳本按順序執行

　　　　<script type="text/javascript" src="xxx.js" async="async"></script>

　　　　

　　　　　　(2)、defer 方式

　　　　　　1>.兼容全部瀏覽器

　　　　　　2>.defer屬性規定是否對腳本執行進行延遲，直到頁面加載爲止

　　　　　　3>.若是是多個腳本，該方法能夠確保全部設置了defer屬性的腳本按順序執行

　　　　　　4>.若是腳本不會改變文檔的內容，可將defer屬性加入到script標籤中，以便加快處理文檔的速度

 

 

　　　　　　(3).動態建立腳本

　　　　　　動態建立script標籤在還沒定義 defer 和 async 前，異步加載的方式是動態建立script，經過window.onload方法確保頁面加載完畢再將script標籤插入到DOM中,具體代碼以下：

function addScriptTag(src) {
      var script = document.createElement('script');
      script.setAttribute("type","text/javascript");
      script.src = src;
      document.body.appendChild(script);
}
window.onload = function() {
      addScriptTag("js/index.js");
}

 

　　　　二、異步加載的區別

　　　　　(1)、defer是在HTML解析完以後纔會執行，若是是多個，按照加載的順序依次執行

　　　　　(2)、async是在加載完以後當即執行，若是是多個，執行順序和加載順序無關

 

　　3、利用瀏覽器緩存

　　　　對於web應用來講，緩存是提高頁面性能同時減小服務器壓力的利器。

　　　　瀏覽器緩存類型

　　　　瀏覽器緩存 分爲 強緩存 和 協商緩存。

　　　　強緩存：

　　　　　　不會向服務器發送請求，直接從緩存中讀取資源，在chrome控制檯的network選項中能夠看到該請求返回200的狀態碼，而且size顯示from disk cache或from memory cache；

　　　　相關header：

　　　　　　Expires: response header裏的過時時間，瀏覽器再次加載資源時，若是在這個過時時間內，則命中強緩存

　　　　　　Cache-Control: 這是一個相對時間，在配置緩存的時候，以秒爲單位，用數值表示。當值設爲max-age=300時，則表明在這個請求正確返回時間（瀏覽器也會記錄下來）的5分鐘內再次加載資源，就會命中強緩存。好比Cache-Control:max-age=300

　　　　　　二者同時存在的話，Cache-Control優先級高於Expires

 

　　　　協商緩存：

　　　　　　向服務器發送請求，服務器會根據這個請求的request header的一些參數來判斷是否命中協商緩存，若是命中，則返回304狀態碼並帶上新的response header通知瀏覽器從緩存中讀取資源；另外協商緩存須要與cache-control共同使用

　　　　相關header：

　　　　　　Last-Modified 和 If-Modified-Since

　　　　　　ETag 和 If-None-Match

 

　　　　緩存的機制：

　　　　　　強制緩存優先於協商緩存進行，若強制緩存(Expires和Cache-Control)生效則直接使用緩存，

　　　　　　若不生效則進行協商緩存(Last-Modified / If-Modified-Since和Etag / If-None-Match)，協商緩存由服務器決定是否使用緩存，

　　　　　　若協商緩存失效，那麼表明該請求的緩存失效，從新獲取請求結果，再存入瀏覽器緩存中；生效則返回304，繼續使用緩存。

 

       　　　　

 

 

　　

　　4、使用 CDN

　　大型Web應用對速度的追求並無止步於僅僅利用瀏覽器緩存，由於瀏覽器緩存始終只是爲了提高二次訪問的速度，

　　對於首次訪問的加速，咱們須要從網絡層面進行優化，最多見的手段就是CDN（Content Delivery Network，內容分發網絡）加速。

　　經過將靜態資源(例如javascript，css，圖片等等）緩存到離用戶很近的相同網絡運營商的CDN節點上，不但能提高用戶的訪問速度，還能節省服務器的帶寬消耗，下降負載。

 

　　CDN是怎麼作到加速的呢？

　　其實這是CDN服務商在全國各個省份部署計算節點，CDN加速將網站的內容緩存在網絡邊緣,不一樣地區的用戶就會訪問到離本身最近的相同網絡線路上的CDN節點，

　　當請求達到CDN節點後，節點會判斷本身的內容緩存是否有效，若是有效，則當即響應緩存內容給用戶，從而加快響應速度。

　　若是CDN節點的緩存失效，它會根據服務配置去咱們的內容源服務器獲取最新的資源響應給用戶，並將內容緩存下來以便響應給後續訪問的用戶。

　　所以，一個地區內只要有一個用戶先加載資源，在CDN中創建了緩存，該地區的其餘後續用戶都能所以而受益。

 

　　

　　5、預解析DNS

　　　　資源預加載是另外一個性能優化技術，咱們可使用該技術來預先告知瀏覽器某些資源可能在未來會被使用到。

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

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

　　　　<link rel="dns-prefetch" href="//example.com">

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

　　　　經過簡單的一行代碼就能夠告知那些兼容的瀏覽器進行 DNS 預解析，這意味着當瀏覽器真正請求該域中的某個資源時，DNS 的解析就已經完成了,從而節省了寶貴的時間。

　　　　另外須要注意的是，瀏覽器會對a標籤的href自動啓用DNS Prefetching，因此a標籤裏包含的域名不須要在head中手動設置link。可是在HTTPS下不起做用，須要meta來強制開啓功能。

　　　　這個限制的緣由是防止竊聽者根據DNS Prefetching推斷顯示在HTTPS頁面中超連接的主機名。下面這句話做用是強制打開a標籤域名解析

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

 

 

隨筆整理自

　　https://www.jianshu.com/p/4d69c0dd3d2e

　　http://www.javashuo.com/article/p-bbdcbwfy-dx.html

感謝博主分享！