為什么要優(yōu)化?
? ? 1. 提升網(wǎng)頁(yè)加載速度
? ? 2. 對(duì)搜索引擎,屏幕閱讀器友好
? ? 3. 提高可讀性,可維護(hù)性
如何優(yōu)化?
? ? 1. 減少請(qǐng)求
? ? 2. 減少文件大小
? ? 3. 頁(yè)面性能
? ? 4. 可讀性,可維護(hù)性 (一些規(guī)范)
一 ? ?減少請(qǐng)求
① ?圖片合并
對(duì)于小圖標(biāo),或者類型差不多的圖標(biāo),盡量放在一起,運(yùn)用CSS Sprites
② ?減少CSS文件請(qǐng)求
多個(gè)css文件合并為一個(gè);少量css樣式內(nèi)聯(lián);避免使用important方式引入css文件.
二 ? ?減少文件大小
① ? 減少圖片大小
選擇合適的圖片格式;對(duì)圖片進(jìn)行壓縮
② ? ?css值縮寫
例:margin padding border border-radius font background等
③ ? ?省略值為0的單位
④ ? ?顏色值最短表示
⑤ ? ?css選擇器合并
⑥ ? ?文件壓縮
我們可以使用工具對(duì)我們的文件壓縮,例如:cssmin ? ?YUI compressor等
三 ? ?頁(yè)面性能
① ? ?加載順序
建議css文件放在<head>中,解析的更好;js腳本放在<body>的底部,因?yàn)閖s的加載和執(zhí)行會(huì)阻塞其他資源的加載和頁(yè)面的渲染
② ? 減少標(biāo)簽數(shù)量
③ ? 選擇器長(zhǎng)度(簡(jiǎn)潔的選擇器更好)
④ ? ?避免耗性能屬性
例:exprission ? ?filter ? border-radius ? ?box-shadow ? ?gradients
⑤ ? ?圖片設(shè)置寬高
⑥ ? ?所有表現(xiàn)用css實(shí)現(xiàn)
能用css實(shí)現(xiàn)的盡量少用js
四 ? ?可讀性 可維護(hù)性
? ? 規(guī)范
? ? 語(yǔ)義化
? ? 盡量避免Hack
? ? 模塊化
? ? 注釋
? ? ? ?我們最好每人都能把代碼寫的漂漂亮亮的,讓別人看著舒服,增加可維護(hù)性,一起構(gòu)造出一個(gè)好的代碼.加油吧,少年,初學(xué),請(qǐng)多多幫忙啊
