Rule1 Make fewer http requests
依據(jù)性能黃金法則，80%的時(shí)間花費(fèi)在了Images,scripts,stylesheets,Flash等Http請(qǐng)求上，我們需要花費(fèi)在這塊的時(shí)間，這些技術(shù)包括使用image maps,css sprites,inline images,和合并javascript與stylesheets
image maps
如果你頁(yè)面上有很多帶鏈接的圖片，image maps(圖片地圖)是一種減少Http請(qǐng)求數(shù)量的方式。一個(gè)image maps允許你在單張圖片上放置相關(guān)的多個(gè)鏈接地址，用戶點(diǎn)擊圖片上不同的區(qū)域，跳轉(zhuǎn)到不同的鏈接頁(yè)面；
有兩種類型的image maps，一種是server-side image maps, 這種maps，所有的點(diǎn)擊都請(qǐng)求同一個(gè)URL,并且參數(shù)附帶用戶點(diǎn)擊點(diǎn)的x，y坐標(biāo)；另一種是Client-side image maps，這種更加常用，因?yàn)橛脩酎c(diǎn)擊不同的區(qū)域，請(qǐng)求不同的URL；如下
<map name="map1">
<area shape="rect" coords="0,0,31,31" href="home.html" title="Home">
<area shape="rect" coords="36,0,66,31" href="gifts.html" title="Gifts">
</map>
-- image map詳細(xì)資料可查看
https://en.wikipedia.org/wiki/Image_map
-- client-side image maps的實(shí)例
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_areamap
css sprites
俗稱雪碧圖，具體怎么做應(yīng)該都知道；說說它的益處吧，它不僅減少了Http請(qǐng)求數(shù)，而且相對(duì)image maps更加靈活，因?yàn)閕mage map要求使用的圖片要求圖形有順序，單sprites不需要；
另外一般人都認(rèn)為合并圖片會(huì)比分開的圖片總量的大小要來的大，因?yàn)楹喜⒑蟮膱D片有格外增加的空白區(qū)域，事實(shí)上合并的圖片反而趨于更小，因?yàn)楹喜⒌膱D片相對(duì)分開的圖片減少了存儲(chǔ)的信息開銷，比如顏色表，格式形式等；
inline images
使用data:URL 協(xié)議使你的頁(yè)面直接包含圖像而不需要任何Http請(qǐng)求是可能的，但瀏覽器直到ie8才支持；格式如下
data:[<mediatype>][;base64],<data>
data:不單單能使用于內(nèi)聯(lián)圖片，任務(wù)一個(gè)指定URL的地方都能使用它，包括script和a 標(biāo)簽；
因?yàn)閐ata:URLs內(nèi)嵌于頁(yè)面中，所以在不同頁(yè)面訪問中并不會(huì)緩存他們，從而增大頁(yè)面的大小，一種聰明的做法是通過外聯(lián)css和內(nèi)容圖片作為背景圖設(shè)置來使內(nèi)嵌圖片隨著css一塊被緩存，在多個(gè)頁(yè)面都使用到這個(gè)內(nèi)嵌圖片的情況下，是值得這么做的，比如網(wǎng)站logo；
-- 如何生成圖片的base64編碼
使用一些在線工具，比如這個(gè)http://www.pjhome.net/web/html5/encodeDataUrl.htm；
或者使用google chrome開發(fā)者工具，在 chrome 下新建一個(gè)窗口，然后把要轉(zhuǎn)化的圖片直接拖入瀏覽器，打開控制臺(tái)，點(diǎn) Source，點(diǎn)擊圖片，右側(cè)就會(huì)顯示該圖片的 base64 編碼
combined scripts and Stylesheets
理想狀態(tài)下，把一個(gè)網(wǎng)頁(yè)上引用的多個(gè)script腳本合并成一個(gè)，把引用的多個(gè)樣式文件合并成一個(gè)，以此來減少http請(qǐng)求數(shù)，一般合并后還會(huì)有另一個(gè)步驟來減少文件大小，叫做壓縮；
-- 如何合并
一般使用grunt或者gulp打包工具的童鞋都知道，都能輕松做到；
