這一部分我就想到什么寫什么。
IMG標(biāo)簽表明圖片尺寸
在放置IMG標(biāo)簽的時(shí)候，保持圖片大小與實(shí)際需要顯示的大小一致，如果將1000800的圖片顯示成10080的話，不僅顯示效果差，下載圖片也會(huì)消耗很多時(shí)間，瀏覽器還要對(duì)這大圖進(jìn)行縮放。
減小圖片尺寸
很多圖片其實(shí)是可以被減小的，我在使用PS對(duì)圖片輸出的時(shí)候都會(huì)在顯示與品質(zhì)上尋找一個(gè)平衡點(diǎn)，試著將圖片調(diào)色板設(shè)為256色或更小，這樣可以大幅度減少圖片大小讓加載時(shí)間縮短。
css sprite
將許多小圖標(biāo)聚合在一張圖片上，通過css的background-position來定位，這樣可以減少HTTP請(qǐng)求節(jié)省資源。實(shí)際開發(fā)過程中可以使用一些自動(dòng)化工具來完成，gulp上也有對(duì)應(yīng)的插件來自動(dòng)合并圖片，開發(fā)者在寫css的時(shí)候正常書寫即可。
使用CDN
有不少公司提供了自建的CDN，我們可以直接使用第三方的CDN資源，使用CND會(huì)通過地理位置最近的用戶傳輸內(nèi)容，可以大幅度減少網(wǎng)絡(luò)延時(shí)。當(dāng)然別人的CND服務(wù)要是掛了也就麻煩了，不過概率極低，推薦使用。
緩存文件
這個(gè)主要是靠后端來設(shè)置過期時(shí)間。前端的話，有一個(gè)HTML5的manifest來使用離線應(yīng)用緩存，這種技術(shù)基本就是讓你提供一個(gè)清單文件列出需要緩存的資源，然后在HTML標(biāo)簽上添加 manifest='xxxxx.manifest' 來聲明。
具體的用法及信息可以訪問 https://www.w3.org/TR/2015/WD-appmanifest-20151124/
想要使用最新的被緩存的內(nèi)容的時(shí)候，可以給文件加上時(shí)間戳來解決。
合并CSS、JS(合并與壓縮)
合并這些文件的原因當(dāng)然是減少HTTP請(qǐng)求，現(xiàn)代前端開發(fā)中基本都會(huì)用到一些自動(dòng)化工具來完成，gulp啊，webpack啊，grunt啦等等都可以做到。JS的壓縮通過這些工具也都可以完美的做到，壓縮之后的文件會(huì)減少很多的文件大小。
盡量使用外部JS與css
將CSS與js放在外部文件中，可以方便的對(duì)他們進(jìn)行緩存與修改，HTML文件尺寸也會(huì)變小，加上緩存之后重新加載頁面速度也會(huì)更快。
拋棄CSS表達(dá)式
CSS表達(dá)式早就被拋棄了，反正我到現(xiàn)在也沒用過。。。。
要做一些計(jì)算啥的，less啊，sass啊這類預(yù)編譯CSS的很不錯(cuò)。
GZIP壓縮
相當(dāng)有用的服務(wù)器壓縮方式啊，尤其是在做SPA應(yīng)用的時(shí)候，GZIP的壓縮真的可以大幅度加快應(yīng)用的加載時(shí)間，當(dāng)然這個(gè)也是在服務(wù)器上操作的。
待續(xù)
