刚刚写了一个项目,但页面加载速度出现了问题,所以研究了一下页面加载的速度,看了很多资料,大致汇总了一下,希望和小伙伴一起学习进步; 一、图片: 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错误。
|