网站代码、图片优化汇总

刚刚写了一个项目，但页面加载速度出现了问题，因此研究了一下页面加载的速度，看了不少资料，大体汇总了一下，但愿和小伙伴一块儿学习进步;

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