前端性能優化第一篇-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>標籤引用圖片之外，CSS中我們使用的圖片同樣會造成請求和載入，不妨看看這個頁面上有多少圖標，點贊，評論，分享等等，不勝枚舉。
如果沒一個圖標都進行一次請求的話，頁面的速度可想而知。所以我們換一個策略：將同種類的小圖標放置在同一個圖片中，然後通過background-size和background-position屬性來得到合適的圖標。
栗子～
策略三：內聯圖片
描述
傳統的插入圖片方式是這樣滴：<img src="http://我也不知道寫點什麼好">，這樣需要進行一次請求來的得到數據。
但是對於一個小小的圖片，請求一次性價比不高，又沒法應用上面提到的第二項的時候哦，我們可以嘗試用內聯圖片：將圖片作爲數據直接寫到頁面的靜態內容中。這種方法的優點是減少了請求次數，缺點是增加了第一次請求的大小，瀏覽器不能緩存這張圖片，並且圖片的大小有了限制
栗子
<img src=“data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406KUgpt5/LCKuVgz5BDCSb13ZO99ZOdcZGvt4mJjzMVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAAABJRU5ErkJggg%3D%3D”/>策略四：合併腳本和樣式表
描述
在前端爲了工程化和模塊化，我們往往要將不同的功能模塊放到不同的文件中，來保證可讀性和可維護性。但是一個頁面中有十幾個css引用和script顯然是不現實的。
解決方案就是在將他們合併到一個文件中，這是要尤其注意變量污染之類的問題。同時當文件A，B，C，D合併爲X之後，引用X的這個頁面只需要A和B的功能，，這樣反而造成了冗餘。
在現代我們有了更好的解決方案，通過一些構建工具進行自動化構建，可以解決這個問題～