一谦趣、Web前端優(yōu)化最佳實(shí)踐之 內(nèi)容
1. 盡量減少HTTP請(qǐng)求；
合并文件鸽疾，比如把多個(gè)css文件合成一個(gè)周循；
CSS Sprites 利用CSS background 相關(guān)元素進(jìn)行背景圖絕對(duì)定位；
圖像地圖 （在一個(gè)圖像上劃分不同區(qū)域映射不同的鏈接）份帐；
內(nèi)聯(lián)圖像（使用data：URL scheme 在實(shí)際的頁(yè)面嵌入圖像數(shù)據(jù)）；
2. 減少DNS查找：
DNS查詢完成之前瀏覽器不能從這個(gè)主機(jī)下載任何任何文件楣导。
方法：DNS緩存废境、將資源分布到恰當(dāng)數(shù)量的主機(jī)名，平衡 并行下載和 DNS查詢 ;
3. 避免重定向：多余的中間訪問(wèn) （不是絕對(duì)的避免筒繁，盡量減少）
定義：重定向用于將用戶從一個(gè)url重新路由到另一個(gè)url;
損傷：重定向的延遲也很嚴(yán)重噩凹，因?yàn)樗舆t了整個(gè)html文檔的傳輸，在html文檔到達(dá)之前毡咏，頁(yè)面中不會(huì)呈現(xiàn)出任何東西驮宴，也沒有任何組件會(huì)被下載，在用戶與html文檔之間插入重定向延遲了頁(yè)面中的所有東西;
4. 使Ajax可緩存
Ajax頁(yè)面緩存是ajax處理數(shù)據(jù)時(shí)對(duì)一些重復(fù)相同數(shù)據(jù)進(jìn)行一個(gè)緩存操作呕缭，這種設(shè)計(jì)使客戶端對(duì)一些靜態(tài)頁(yè)面內(nèi)容的請(qǐng)求堵泽，比如圖片，css文件恢总，js腳本等迎罗，變得更加快捷，提高了頁(yè)面的響應(yīng)速度片仿，也節(jié)省了網(wǎng)絡(luò)通信資源;
5. 非必須組件延遲加載 纹安，未來(lái)所需組件預(yù)加載 （異步）;
6.減少DOM元素?cái)?shù)量 ;
7. 切分組件到多個(gè)域；
主要的目的是提高頁(yè)面組件并行下載能力砂豌，但不要跨太多域厢岂；
8. 最小化iframe的數(shù)量
iframes 提供了一個(gè)簡(jiǎn)單的方式把一個(gè)網(wǎng)站的內(nèi)容嵌入到另一個(gè)網(wǎng)站中。 但我們需要慎重的使用iframe阳距。iframe的創(chuàng)建比其它包括script和css的 DOM 元素的創(chuàng)建慢了 1-2 個(gè)數(shù)量級(jí)塔粒；
使用 iframe 的頁(yè)面一般不會(huì)包含太多 iframe，所以創(chuàng)建 DOM 節(jié)點(diǎn)所花費(fèi)的時(shí)間不會(huì)占很大的比重筐摘。但帶來(lái)一些其它的問(wèn)題：onload 事件以及連接池(connection pool)窗怒。
Iframes 阻塞頁(yè)面加載
及時(shí)觸發(fā) window 的 onload 事件是非常重要的。onload 事件觸發(fā)使瀏覽 器的 “忙” 指示器停止蓄拣，告訴用戶當(dāng)前網(wǎng)頁(yè)已經(jīng)加載完畢。當(dāng) onload 事件 加載延遲后努隙，它給用戶的感覺就是這個(gè)網(wǎng)頁(yè)非常慢球恤。
window 的 onload 事件需要在所有 iframe 加載完畢后(包含里面的元素)才會(huì)觸發(fā)。在 Safari 和 Chrome 里荸镊，通過(guò) JavaScript 動(dòng)態(tài)設(shè)置 iframe 的src 可以避免這種阻塞情況咽斧。
- 杜絕http 404錯(cuò)誤堪置；
二. Web前端優(yōu)化最佳實(shí)踐之 Server篇
使用CDN ；
內(nèi)容分發(fā)網(wǎng)絡(luò)（CDN）業(yè)務(wù)是指利用分布在不同區(qū)域的節(jié)點(diǎn)服務(wù)器群組成流量分配管理網(wǎng)絡(luò)平臺(tái)张惹，為用戶提供內(nèi)容的分散存儲(chǔ)和高速緩存舀锨，并根據(jù)網(wǎng)絡(luò)動(dòng)態(tài)流量和負(fù)載狀況，將內(nèi)容分發(fā)到快速宛逗、穩(wěn)定的緩存服務(wù)器上坎匿，提高用戶內(nèi)容的訪問(wèn)響應(yīng)速度和服務(wù)的可用性服務(wù)。
添加Expires或者Cache-Control信息頭 雷激；
Gzip壓縮內(nèi)容替蔬；
能有效減輕網(wǎng)絡(luò)流量的壓力；
配置ETags（Entity Tag 實(shí)體標(biāo)簽）屎暇；
屬于HTTP協(xié)議的一部分承桥，也就是所有的web服務(wù)器都應(yīng)該（也確實(shí)能）支持這個(gè)特性。它的作用是用一個(gè)特殊的字符串來(lái)標(biāo)識(shí)某個(gè)資源的“版本”根悼，客戶端（瀏覽器）來(lái)請(qǐng)求的時(shí)候凶异，可以比較，如果ETag一致挤巡，則表示該資源并沒有修改過(guò)剩彬，客戶端（瀏覽器）可以使用自己緩存的版本；
盡早刷新Buffer玄柏；
Ajax請(qǐng)求使用GET方法 襟衰；
XMLHttpRequest POST要兩步，而GET只需要一步（注意：在IE上GET能處理的最大url長(zhǎng)度是2k）粪摘；
幾個(gè)需要補(bǔ)充的地方：
1瀑晒、“當(dāng)然，ETag對(duì)多數(shù)站點(diǎn)性能的影響并不是很大”徘意，應(yīng)該說(shuō)ETag在正確使用的情況下苔悦，會(huì)讓大量的請(qǐng)求以304頭方式響應(yīng)，可以相當(dāng)?shù)墓?jié)省服務(wù)器資源和帶寬椎咧。
2玖详、對(duì)于盡早刷新這點(diǎn)，PHP幾乎是做不到的勤讽，即使執(zhí)行了flush以及類似的函數(shù)蟋座，也要等到請(qǐng)求完全執(zhí)行之后，才會(huì)輸出給瀏覽器端脚牍。
3向臀、Ajax使用GET和POST各有好處，GET方式可以更快響應(yīng)诸狭，但是可能會(huì)有被瀏覽器緩存的問(wèn)題券膀，一般都需要加個(gè)隨機(jī)數(shù)來(lái)避免君纫，POST方式則不會(huì)，so芹彬，最好是根據(jù)自己的情況分別使用GET和POST 方法蓄髓；
避免空src的img標(biāo)簽
三、Web前端優(yōu)化最佳實(shí)踐之 Cookie篇
縮小Cookie大惺姘铩会喝；盡量控制cookie的大小，不要塞入一些無(wú)用的信息会前；
針對(duì)Web組件使用域名無(wú)關(guān)性的Cookie好乐；
-- 這里說(shuō)的Web組件，多指靜態(tài)文件瓦宜，比如圖片蔚万、CSS等，客戶端請(qǐng)求靜態(tài)文件的時(shí)候临庇，減少了Cookie的反復(fù)傳輸對(duì)主域名的影響反璃；
四、Web前端優(yōu)化最佳實(shí)踐之 CSS篇
把CSS放到代碼頁(yè)上端假夺，瀏覽器能夠有針對(duì)性的對(duì)HTML頁(yè)面從上到下進(jìn)行解析和渲染淮蜈；
避免CSS表達(dá)式 ；
從頁(yè)面中剝離JavaScript 與 CSS已卷，能夠有針對(duì)性的對(duì)其進(jìn)行單獨(dú)的處理策略梧田，比如壓縮或者緩存策略；
精簡(jiǎn)JavaScript 與 CSS （語(yǔ)法能簡(jiǎn)寫的簡(jiǎn)寫）侧蘸；
使用<link> 而不是@import （在IE中@import指令等同于把link標(biāo)記寫在HTML底部）裁眯；
避免使用Filter ；
五讳癌、Web前端優(yōu)化最佳實(shí)踐之 JavaScript篇
將腳本放到HTML代碼頁(yè)底部穿稳；
外部引入javascript和css；
壓縮javascript和css 晌坤；
移除重復(fù)腳本 逢艘；
減少DOM訪問(wèn) ；
1骤菠、緩存已經(jīng)訪問(wèn)過(guò)的元素它改；
2、“離線”更新節(jié)點(diǎn)商乎，再將它們添加到樹中搔课；
3、避免使用JavaScript輸出頁(yè)面布局--應(yīng)該是CSS的事兒；
合理設(shè)計(jì)事件監(jiān)聽器 爬泥；
六、Web前端優(yōu)化最佳實(shí)踐之 Image 篇
優(yōu)化圖片：根據(jù)實(shí)際顏色需要選擇色深崩瓤、壓縮 袍啡；
優(yōu)化css精靈 ；
不要在HTML中拉伸圖片 却桶；
保證favicon.ico小并且可緩存 境输；
七、Web前端優(yōu)化最佳實(shí)踐之 Mobile(iPhone) 篇
Web前端優(yōu)化最佳實(shí)踐最后一部分是針對(duì)移動(dòng)應(yīng)用的颖系，其實(shí)只是針對(duì)iPhone的嗅剖，目前只有兩條規(guī)則；
單個(gè)數(shù)據(jù)對(duì)象小于25k（Keep Components under 25k）嘁扼；
--- Apple官方信息指出可緩存到內(nèi)存中的Web數(shù)據(jù)對(duì)象最大支持到10M信粮，但經(jīng)過(guò)測(cè)試，發(fā)現(xiàn)也就是25k左右趁啸；
Pack Components into a Multipart Document
--- 將Web頁(yè)面組件打包成一個(gè)多部分組成的文檔强缘，其目的是減少HTTP請(qǐng)求。
