1果正、頁(yè)面優(yōu)化五大法則
? ? 1.1、精簡(jiǎn)合并
? ? ? ? ? ? A忆谓、 html? 去掉注釋裆装，回車符、無(wú)效字節(jié)可節(jié)省65K
? ? ? ? ? ? B、 css 利用gulp等工具壓縮
? ? ? ? ? ? C哨免、 JavaScript? 利用?JSMin茎活、YUI?Compressor?工具（每個(gè)JS文件可降低26%文件大小）/采用webpack構(gòu)建琢唾，壓縮js代碼载荔。
? ? ? ? ? ? ? ? new webpack.optimize.UglifyJsPlugin({
????????????????????????compress: { warnings: false, drop_debugger: true,drop_console: true },
? ? ? ? ? ? ? ? ? ? ? ? sourceMap: true
????????????????????})
? ? ? ? ? ? D、 減少bundle數(shù)量? ??
????????????????????使用構(gòu)建工具(webpack采桃、rollup等)將多個(gè)文件打成一個(gè)bundle懒熙，減少下載次數(shù)。
1.2普办、異步
A工扎、 使用ajax請(qǐng)求數(shù)據(jù)
B、 提前加載,減少網(wǎng)絡(luò)請(qǐng)求等待衔蹲。
C肢娘、 延遲加載，使用async/defer
D舆驶、Javascript放置body底部：避免阻塞下載
E橱健、 CSS放到header中：避免白屏
F、 CSS避免使用 @import
1.3 贞远、圖片優(yōu)化
A畴博、 圖片地圖
B、 CSS Sprite
? ??.no3 {
????????background : transparent url( ../images/no713.jpg );
????????background-position : 0 -30px;
????????width : 15px;
????????height: 15px;
????}
C蓝仲、 Base64
inline images: 圖片內(nèi)嵌到網(wǎng)頁(yè)文本中俱病。
.sample-inline-png {
padding-left: 20px;
background: white;
url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMA
AAAlPW0iAAAABlBMVEUAAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrA
z3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTk
SuQmCC') no-repeat scroll left top; }
D、 Compress(壓縮)
? ??圖像種類：PNG8, PNG16, PNG256,
-?使用小且可緩存的favicon
網(wǎng)站圖標(biāo)文件favicon.ico袱结，不管你服務(wù)器有還是沒(méi)有亮隙，瀏覽器都會(huì)去嘗試請(qǐng)求這個(gè)圖標(biāo)。所以我們要確保這個(gè)圖標(biāo)：? 存在垢夹；? 文件盡量小溢吻，最好小于1k；? 設(shè)置一個(gè)長(zhǎng)的過(guò)期時(shí)間果元。
1.4 促王、?網(wǎng)絡(luò)優(yōu)化
A、多域名增加并行下載數(shù)而晒，提升整站下載時(shí)間
B蝇狼、 廣告與頁(yè)面分離
D、開啟Gzip壓縮
?????????通吵酰可以減少70%網(wǎng)頁(yè)內(nèi)容的大小迅耘，包括腳本贱枣、樣式表、圖片等文件颤专。
????????gzip比deflate更高效纽哥，主流服務(wù)器都有相應(yīng)的壓縮支持模塊竞慢。
E控汉、 減少Cookie大小
Cookie被用來(lái)做認(rèn)證或個(gè)性化設(shè)置线椰，其信息被包含在http報(bào)文頭中芝囤，對(duì)于cookie
????????我們要注意以下幾點(diǎn)组去，來(lái)提高請(qǐng)求的響應(yīng)速度：
????????????去除沒(méi)有必要的cookie缩筛，如果網(wǎng)頁(yè)不需要cookie就完全禁掉
????????????將cookie的大小減到最小
????????????注意cookie設(shè)置的domain級(jí)別会油，沒(méi)有必要情況下不要影響到sub-domain
????????????設(shè)置合適的過(guò)期時(shí)間蛤高，比較長(zhǎng)的過(guò)期時(shí)間可以提高響應(yīng)速度垦写。
F吕世、 添加Expires或Cache-Control響應(yīng)頭
????Cache-Control
????????cache-control: max-age=31536000
????????cache-control: private
????????cache-control: no-cache
????Expires
????????expires: Sat, 04 Dec 2010 01:00:43 GMT
? ??????修訂文件名，將版本號(hào)加入其中梯投，并設(shè)置長(zhǎng)久的Expires
