..........................................................................................................................
HTML部分
- 語義化HTML:好處在于可以使代碼簡潔清晰,支持不同設(shè)備,利于搜索引擎,便于團(tuán)隊開發(fā);
- 減少DOM節(jié)點(diǎn):加速頁面渲染嘶炭;
- 給圖片加上正確的寬高值:這可以減少頁面重繪,同時防止圖片縮放;
- 防止src屬性和link的href屬性為空:當(dāng)值為空時蜀铲,瀏覽器很可能會把當(dāng)前頁面當(dāng)成其屬性值加載;
- 正確的閉合標(biāo)簽:如避免使用
<div/>
属百,瀏覽器會多一個將它解析成<div\></div\>
的過程记劝; - 鏈接為目錄或首頁的地址后面加”/”,如http://www.5icool.org/族扰;
- 用LINK而不用@import方式導(dǎo)入樣式厌丑;
- 樣式放在頁頭,JS放在頁尾渔呵;
- 縮小favicon.ico并緩存怒竿;
CSS部分
- 避免使用 CSS Expressions(CSS表達(dá)式):如background-color: expression( (new Date()).getHours()%2 ? “#B8D4FF” : “#F08A00″ ) ;
- 避免使用 CSS Filter(CSS濾鏡);
- 使用CSS縮寫扩氢,減少代碼量耕驰;
- 通過CSS Sprites把同類圖片合成一張,減少圖片請求录豺;
- 減少查詢層級:如.header .logo要好過.header .top .logo朦肘;
- 減少查詢范圍:如.header>li要好過.header li;
- 避免TAG標(biāo)簽與CLASS或ID并存:如a.top双饥、button#submit媒抠;
- 刪除重復(fù)的CSS;
Javscript部分
- 盡量少用全局變量咏花;
- 使用事件代理綁定事件趴生,如將事件綁定在body上進(jìn)行代理;
- 避免頻繁操作DOM節(jié)點(diǎn)迟螺;
- 不使用EVAL冲秽;
- 減少對象查找,如a.b.c.d這種查找方式非常耗性能矩父,盡可能把它定義在變量里锉桑;
- 類型轉(zhuǎn)換:把數(shù)字轉(zhuǎn)換成字符串使用"" + 1,浮點(diǎn)數(shù)轉(zhuǎn)換成整型使用Math.floor()或者M(jìn)ath.round()窍株;
- 對字符串進(jìn)行循環(huán)操作民轴,譬如替換攻柠、查找,應(yīng)使用正則表達(dá)式后裸;
- 刪除重復(fù)的JS瑰钮;
服務(wù)器部分
- 盡量合并CSS、JS文件微驶,或?qū)⑵渲苯訉懺陧撁嫔侠饲矗瑴p少HTTP請求;
- 壓縮CSS因苹、JS文件苟耻,縮短文件傳輸時間;
- 避免404錯誤:特別要避免給404指定一個停擺頁面扶檐,否則所有404錯誤都將會加載一次頁面凶杖;
- 一般要求減少DNS查詢次數(shù),如同一個頁面的請求資源盡量少的使用不同的主機(jī)名款筑,這可以減少網(wǎng)站并行下載的數(shù)量智蝠,但很多網(wǎng)站為了加速下載資源其實是特意用了多個主機(jī)名,這里要做一個權(quán)衡奈梳;
- 使用CDN加速杈湾,使用戶從離自己最近的服務(wù)器下載文件;
- 減少Cookie的大小颈嚼,使用無cookie的域毛秘,客戶端請求靜態(tài)文件的時候,減少 Cookie 的反復(fù)傳輸對主域名的影響阻课;
- 為文件頭指定Expires,使內(nèi)容具有緩存性艰匙;
- 使用gzip壓縮內(nèi)容限煞;