首页 > 代码库 > 网站代码、图片优化汇总
网站代码、图片优化汇总
刚刚写了一个项目，但页面加载速度出现了问题，所以研究了一下页面加载的速度，看了很多资料，大致汇总了一下，希望和小伙伴一起学习进步;
一、图片：
1、图片精灵；
将导航或是模块的小图片放在一起，通过background-position定位减少http请求
2、压缩图片（压缩工具网址）；
简易版：http://www.tuhaokuai.com/image
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代码：
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/
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错误。
参考的相关网址：
给你的网站减重（英文）：
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
网站代码、图片优化汇总
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。