网站代码图片优化汇总
Posted rich23
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了网站代码图片优化汇总相关的知识，希望对你有一定的参考价值。
刚刚写了一个项目，但页面加载速度出现了问题，所以研究了一下页面加载的速度，看了很多资料，大致汇总了一下，希望和小伙伴一起学习进步;
一、图片：
1、图片精灵；
将导航或是模块的小图片放在一起，通过background-position定位减少http请求
2、压缩图片（压缩工具网址）；
imageMagic图片处理工具：http://www.imagemagick.org/script/index.php
3、尽量使用gif格式和jpg格式的图片（控制jpg图片的质量），减少图片的大小；
背景图片，不需要透明的，使用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代码：
css命名方法：
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.chinaz.com/web/2015/0417/399746.shtml
四、内容
1、避免跳转;
2、减少dom元素事件的绑定;
3、预加载;
4、延迟加载js效果;
5、减少http请求（合并文件、图片）;
6、不要出现404错误。
参考的相关网址：
给你的网站减重（英文）：
雅虎优化30条建议:
编写高质量的前段代码：
各种开发类在线工具：
以上是关于网站代码图片优化汇总的主要内容，如果未能解决你的问题，请参考以下文章