黑马程序员技术交流社区

标题: 网站代码、图片优化汇总 [打印本页]

---

作者: 关不住的心    时间: 2017-2-4 11:39
标题: 网站代码、图片优化汇总

刚刚写了一个项目，但页面加载速度出现了问题，所以研究了一下页面加载的速度，看了很多资料，大致汇总了一下，希望和小伙伴一起学习进步;

一、图片：

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/精简高效的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.llsffx.com

四、内容

1、避免跳转;

2、减少dom元素事件的绑定;

3、预加载;

4、延迟加载js效果;

5、减少http请求（合并文件、图片）;

6、不要出现404错误。

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2