|
剛剛寫了一個項目,，但頁面加載速度出現(xiàn)了問題,，所以研究了一下頁面加載的速度，看了很多資料,，大致匯總了一下,，希望和小伙伴一起學(xué)習(xí)進(jìn)步;
一、圖片：
1,、圖片精靈,；
將導(dǎo)航或是模塊的小圖片放在一起，通過background-position定位減少http請求
2,、壓縮圖片（壓縮工具網(wǎng)址）,；
imageMagic圖片處理工具：http://www./script/index.php
3、盡量使用gif格式和jpg格式的圖片（控制jpg圖片的質(zhì)量）,，減少圖片的大?。?/span>
背景圖片,，不需要透明的,，使用jpg格式；需要透明效果的使用png格式
4,、圖片比較多,，可以使用懶加載；
5,、將圖片放在其他服務(wù)器上做cdn分發(fā),；
6、減少圖片和特效,，減少使用其他網(wǎng)站的圖片和視頻,；
7、不要再html中縮放圖片,；
8,、facvicon ico要小,，并做緩存，設(shè)置三個月以上,；大小最好是1k,；
9、圖片轉(zhuǎn)化成base64位（有缺點(diǎn),，好像是會放大圖片,，有待研究）；
二,、css
1,、靈活運(yùn)用類名，模塊化樣式,；
將功能模塊相同的頁面部分,，用類寫成公共樣式
2、將樣式表置于head中,；
3,、精簡css代碼；
1）合并font,、padding,、margin、border,、list-style,、text、transform,、transition,、animation
2）合并類中相同的部分
3）刪除代碼中無效的定義（注：處理兼容性的除外）
4）按樣式類型對css代碼進(jìn)行排序
尺寸（Dimensions）、
顯示與浮動（Diplay&Flow）,、
定位（Positioning）,、
邊框相關(guān)屬性（Margins、Padding,、Borders,、Outline）、
字體樣式（Typographic Styles）,、
背景（Backgrounds）,、
其他樣式（Opacity、Cursors,、Generated Content）,。
5）相關(guān)鏈接
精簡css代碼：
css命名方法：
4、使用插件：csscomb
5,、代碼完成后,，壓縮,。
6、避免使用css表達(dá)式
7,、用link代替@import
8,、避免使用濾鏡
三：js
1、最后加載js,；
2,、減少dom操作;
3、刪減不必要的注釋和冗余,、無用的代碼;
4,、增加代碼的復(fù)用性;
5、壓縮js代碼,，（自動化構(gòu)建工具gulp）;
js/css壓縮工具：http://tool.oschina.net/jscompress/
6,、js代碼精簡; http://www.
四、內(nèi)容
1,、避免跳轉(zhuǎn);
2、減少dom元素事件的綁定;
3,、預(yù)加載;
4,、延遲加載js效果;
5、減少http請求（合并文件,、圖片）;
6,、不要出現(xiàn)404錯誤。
|
|
|
來自： 關(guān)不住的心 > 《待分類》
