Web前端性能优化的34条法则(转载自http://www.agilejoy.com/)

2010-07-26  郭艳军 

Yahoo的性能团队提出的七大类,34条法则,对页面打开速度的提升帮助很大,这些方面涉及内容、服务器、cookie、CSS、JavaScript、图片、移动应用..

这些方面对于用户体验和性能测试都很具有参考价值,特转载。

内容部分
1.尽量减少HTTP请求
将多个js和css进行文件合并,减少请求数,通过 CSS Sprites 来减少多个小图片的请求
2.减少DNS查找
将页面内容分成两部分或四部分,来达到减少dns查找和并行下载的权衡
3.避免跳转
尽可能的避免跳转,注意url的规范,如被全/和不同域名的跳转,可以通过Alias或者mod_rewirte建立CNAME
4.可缓存的AJAX
5.推迟加载内容
6.预加载
分为无条件加载,有条件加载和有预期的加载
7.减少DOM元素数量
8.根据域名划分页面内容
9.使iframe的数量最小
10.不要出现404错误
服务器部分
11.使用内容分发网络
12.为文件头指定Expires或Cache-Control
静态内容,在更改并不频繁的文件要缓存起来,有更新时通过修改文件名来实现
13.Gzip压缩文件内容
14.配置ETag
15.尽早刷新输出缓冲
对于大的静态页面输出,可采用php flush
16.使用GET来完成AJAX请求
javascript和CSS部分
17.把样式表置于顶部
18.避免使用CSS表达式(Expression)
19.使用外部JavaScript和CSS
20.削减JavaScript和CSS
21.用代替@import
22.避免使用滤镜
23.把脚本置于页面底部
24.剔除重复脚本
25.减少DOM访问
26.开发智能事件处理程序
图片和Cookie
27.减小Cookie体积
28.对于页面内容使用无coockie域名
开新的域名来显示网站的静态内容
29.优化图像
将gif转换成png,用pngcrush优化png图,用jpegtran优化jpg,去掉exif和注释,
30.优化CSS Spirite
将大背景图中和小图横向摆放,颜色相近的放一起,中间不留大空隙
31.不要在HTML中缩放图像
32.favicon.ico要小而且可缓存
移动开发部分
33.保持单个内容小于25K
34.打包组件成复合文本

409°/4091 人阅读/0 条评论 发表评论

登录 后发表评论