網站代碼、圖片優化彙總

剛剛寫了一個項目，但頁面加載速度出現了問題，因此研究了一下頁面加載的速度，看了不少資料，大體彙總了一下，但願和小夥伴一塊兒學習進步;

1、圖片：

一、圖片精靈；

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

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

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

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

三、儘可能使用gif格式和jpg格式的圖片（控制jpg圖片的質量），減小圖片的大小；

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

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

五、將圖片放在其餘服務器上作cdn分發；

六、減小圖片和特效，減小使用其餘網站的圖片和視頻；

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

八、facvicon ico要小，並作緩存，設置三個月以上；大小最好是1k；

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

 

2、css

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

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

二、將樣式表置於head中；

三、精簡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/%E7%B2%BE%E7%AE%80%E9%AB%98%E6%95%88%E7%9A%84css%E5%91%BD%E5%90%8D%E5%87%86%E5%88%99%E6%96%B9%E6%B3%95/

四、使用插件：csscomb

五、代碼完成後，壓縮。

六、避免使用css表達式

七、用link代替@import

八、避免使用濾鏡

三：js

一、最後加載js；

二、減小dom操做;

三、刪減沒必要要的註釋和冗餘、無用的代碼;

四、增長代碼的複用性;

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

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

六、js代碼精簡;

http://www.chinaz.com/web/2015/0417/399746.shtml

4、內容

一、避免跳轉;

二、減小dom元素事件的綁定;

三、預加載;

四、延遲加載js效果;

五、減小http請求（合併文件、圖片）;

六、不要出現404錯誤。

 

參考的相關網址：

 

給你的網站減重（英文）：

https://www.sitepoint.com/complete-guide-reducing-page-weight/

雅虎優化30條建議:

http://www.360doc.com/content/14/0325/14/15727046_363598248.shtml

編寫高質量的前段代碼：

http://blog.csdn.net/echoyoung46/article/details/45953095

各類開發類在線工具：

http://tool.lu/c/developer