剛剛寫了一個項目，但頁面加載速度出現了問題，所以研究了一下頁面加載的速度，看了很多資料，大致匯總了一下，希望和小伙伴一起學習進步;

一、圖片：

1、圖片精靈；

將導航或是模塊的小圖片放在一起，通過background-position定位減少http請求

2、壓縮圖片（壓縮工具網址）；

簡易版：http://www.tuhaokuai.com/image

imageMagic圖片處理工具：http://www.imagemagick.org/script/index.php

3、盡量使用gif格式和jpg格式的圖片（控制jpg圖片的質量），減少圖片的大?。?/p>

背景圖片，不需要透明的，使用jpg格式；需要透明效果的使用png格式

4、圖片比較多，可以使用懶加載；

5、將圖片放在其他服務器上做cdn分發；

6、減少圖片和特效，減少使用其他網站的圖片和視頻；

7、不要再html中縮放圖片；

8、facvicon ico要小，并做緩存，設置三個月以上；大小最好是1k；

9、圖片轉化成base64位（有缺點，好像是會放大圖片，有待研究）；

二、CSS

1、靈活運用類名，模塊化樣式；

將功能模塊相同的頁面部分，用類寫成公共樣式

2、將樣式表置于head中；

3、精簡css代碼；

1）合并font、padding、margin、border、list-style、text、transform、transition、animation

2）合并類中相同的部分

3）刪除代碼中無效的定義（注：處理兼容性的除外）

4）按樣式類型對css代碼進行排序

       尺寸（Dimensions）、

顯示與浮動（Diplay&Flow）、

定位（Positioning）、

邊框相關屬性（Margins、Padding、Borders、Outline）、

字體樣式（Typographic Styles）、

背景（Backgrounds）、

其他樣式（Opacity、Cursors、Generated Content）。

5）相關鏈接

精簡css代碼：

http://www.cnblogs.com/dangjian/p/4299325.html

css命名方法：

http://www.zhangxinxu.com/WordPRess/2010/09/?2???€é?˜?•ˆ?š„css?‘???‡†?ˆ™?–1?3•/

4、使用插件：csscomb

5、代碼完成后，壓縮。

6、避免使用css表達式

7、用link代替@import

8、避免使用濾鏡

三：js

1、最后加載js；

2、減少dom操作;

3、刪減不必要的注釋和冗余、無用的代碼;

4、增加代碼的復用性;

5、壓縮js代碼，（自動化構建工具gulp）;

js/css壓縮工具：http://tool.oschina.net/jscompress/

6、js代碼精簡;

http://www.llsffx.com

四、內容

1、避免跳轉;

2、減少dom元素事件的綁定;

3、預加載;

4、延遲加載js效果;

5、減少http請求（合并文件、圖片）;

6、不要出現404錯誤。