前端效能優化第一篇-http請求

本系列文章是我在閱讀《高效能網站架設指南》時的讀書筆記，文章的順序基本和書的順序是相同的，同時由於這本書的出版時間比較早了，我會根據現代前端的發展變化做出備註。

http請求是提升效能的一個重要方面，我們可以在開啟一個網站的時候開啟開發者工具的時候看看發生的請求（如果你正在看這篇文章，不妨開啟開發者工具，然後看看network，重新整理頁面），這是就能發現，在一個頁面呈現的過程中進行了大量的資料請求，比如樣式表，指令碼，當然也包括引用的類庫和框架
注：現在可以通過前端構建工具，比如webpack等，進行構建，可以大大減少這些消耗

策略一：ImageMap

描述

這是一種取代多個圖片連結的方法。

我們都知道如果我們在頁面上呈現多個圖片就要進行多次請求。如果這幾個圖片剛好能夠排列在一起，將這些內容拼接成一個大圖片，然後在不同區域繫結事件。

實現方法

需要三種不同的標籤<img>，<map> ，<area>。

• <img>標籤用來設定圖片的內容
• <map> 標籤用來和圖片進行對映，要在<img>中新增usemap屬性來建立這個連結
• <area>標籤用來規定成為熱點的區域

一個小栗子（來自MDN，如果想看到效果，
）～

<map name="primary">
  <area shape="circle" coords="75,75,75" href="left.html">
  <area shape="circle" coords="275,75,75" href="right.html">
</map>
<img usemap="#primary" src="https://placehold.it/350x150" alt="350 x 150 pic">

參考MDN

策略二：圖片sprites

描述

除了直接使用<img>

栗子～

策略三：內聯圖片

描述

傳統的插入圖片方式是這樣滴：<img src="http://我也不知道寫點什麼好">，這樣需要進行一次請求來的得到資料。

但是對於一個小小的圖片，請求一次價效比不高，又沒法應用上面提到的第二項的時候哦，我們可以嘗試用內聯圖片：將圖片作為資料直接寫到頁面的靜態內容中。這種方法的優點是減少了請求次數，缺點是增加了第一次請求的大小，瀏覽器不能快取這張圖片，並且圖片的大小有了限制

栗子

<img src=“data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406KUgpt5/LCKuVgz5BDCSb13ZO99ZOdcZGvt4mJjzMVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAAABJRU5ErkJggg%3D%3D”/>

參考html img Src base64 圖片顯示

策略四：合併指令碼和樣式表

描述

在前端為了工程化和模組化，我們往往要將不同的功能模組放到不同的檔案中，來保證可讀性和可維護性。但是一個頁面中有十幾個css引用和script顯然是不現實的。
解決方案就是在將他們合併到一個檔案中，這是要尤其注意變數汙染之類的問題。同時當檔案A，B，C，D合併為X之後，引用X的這個頁面只需要A和B的功能，，這樣反而造成了冗餘。
在現代我們有了更好的解決方案，通過一些構建工具進行自動化構建，可以解決這個問題～