您的位置: 首页 > 技术文档 > 网页制作 > 高性能表现的网站
JS的IE和FF兼容性问题汇总 回到列表 web标准页面知识必备
 高性能表现的网站

作者:mask2012  时间: 2008-03-06 文档类型:翻译 来自:蓝色理想

第 1 页 高性能表现的网站 [1]
第 2 页 高性能表现的网站 [2]
第 3 页 高性能表现的网站 [3]

原文http://developer.yahoo.com/performance/rules.html
2007.3.20 Steve Souders

Translated by mask

从2004年开始,我开始进入雅虎的异常表现小组。我们是一个很小的队伍,专门针对雅虎的产品进行质量检测和改进,我作为一个后端工程师,现在却开始捣鼓前端代码优化方面的工程,所以我认为这是一个极好的进步的机会。我的目标是改进用户端体验,我度量了在各个带宽下浏览器的响应时间,得出如下的一个图表,它展示了来自http://yahoo.com的http的流量。

以上图标的第一个标签就是html,是一个html文档最开始加载的东东,在这个例子中,读取html代码只占了整个响应时间中的5%,这个结果适用于绝大多数网站,在采样美国的前十位网站中,只有一家超过5%但少于20%,其余80%的时间是用来读取网页其他内容的,也就是说,前端(原文是front-end,意思就是不包括html代码的其余内容,可以是图片,脚本,flash,视频,各种东西)。这就是为什么我们要把目光集中在这些东西来提高显示速度的关键原因。

为什么要从前端开始着手有三个主要原因

  1. 这里有提升和改进的潜力。如果能减少一半的体积,就能减少40%的响应时间
  2. 改进前端比改进后端需要的时间和资源更少。(改进后端要重新设计应用程序规划,代码,寻找优化代码的方法,添加或改变硬件配置,分布式数据库,等等)
  3. 前端的改进在我们的工作中已经被证实,我们在yahoo有五十个小组,在我们的最佳表现规则下,提高了他们的用户端响应时间达到25%或更高。

我们的黄金规则是:首先优化前端表现,这些东西耗费了用户端响应时间中的80%。

1.减少http请求数

图片,css,script,flash,等等这些都会增加http请求数,减少这些元素的数量能减少响应时间。

CSS Sprites技术能减少图片的请求数,把零散的小图片放到一起,运用background-position来改变背景图片的位置,前提是html元素事先定义好宽高,其实就像一个遮罩,移动背景就会看到不同的景象。

内嵌图像  用data:URL scheme的方式把图片内容代码直接嵌入html代码中,这样会增大html代码的体积,改进的方式是把内嵌图片嵌入到css中(css被缓存),这样就会更好的减少http请求数而且不增大html的体积。

很多用户都是在空缓存的情况下进入你的网站的,这样第一次的速度就会显得很重要。

第一条规则是最重要的一条规则。

出处:蓝色理想
责任编辑:bluehearts

上一页 下一页 高性能表现的网站 [2]

◎进入论坛网页制作WEB标准化版块参加讨论,我还想发表评论

相关文章 更多相关链接
第三届D2资料分享
寻找圣杯
网站中文字的视觉设计
网站的视觉路径和版式设计
WEB前端设计师需要的技能
热门搜索:CSS Fireworks 设计比赛 网页制作 web标准 用户体验 UE photoshop Dreamweaver Studio8 Flash 手绘 CG
站点最新 站点最新列表
周大福“敬•自然”设计大赛开启
国际体验设计大会7月将在京举行
中国国防科技信息中心标志征集
云计算如何让安全问题可控
云计算是多数企业唯一拥抱互联网的机会
阿里行云
云手机年终巨献,送礼标配299起
阿里巴巴CTO王坚的"云和互联网观"
1499元买真八核 云OS双蛋大促
首届COCO桌面手机主题设计大赛
栏目最新 栏目最新列表
浅谈JavaScript编程语言的编码规范
如何在illustrator中绘制台历
Ps简单绘制一个可爱的铅笔图标
数据同步算法研究
用ps作简单的作品展示页面
CSS定位机制之一:普通流
25个最佳最闪亮的Eclipse开发项目
Illustrator中制作针线缝制文字效果
Photoshop制作印刷凹凸字体
VS2010中创建自定义SQL Rule
>> 分页 首页 前页 后页 尾页 页次:1/31个记录/页 转到 页 共3个记录 分享按钮

蓝色理想版权申明:除部分特别声明不要转载,或者授权我站独家播发的文章外,大家可以自由转载我站点的原创文章,但原作者和来自我站的链接必须保留(非我站原创的,按照原来自一节,自行链接)。文章版权归我站和作者共有。

转载要求:转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印,亦不能抹去我站点水印。

特别注意:本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有,文章若有侵犯作者版权,请与我们联系,我们将立即删除修改。

您的评论
用户名:  口令:
说明:输入正确的用户名和密码才能参与评论。如果您不是本站会员,你可以注册 为本站会员。
注意:文章中的链接、内容等需要修改的错误,请用报告错误,以利文档及时修改。
不评分 1 2 3 4 5
注意:请不要在评论中含与内容无关的广告链接,违者封ID
请您注意:
·不良评论请用报告管理员,以利管理员及时删除。
·尊重网上道德,遵守中华人民共和国的各项有关法律法规
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·本站评论管理人员有权保留或删除其管辖评论中的任意内容
·您在本站发表的作品,本站有权在网站内转载或引用
·参与本评论即表明您已经阅读并接受上述条款
推荐文档 | 打印文档 | 评论文档 | 报告错误  
专业书推荐 更多内容
网站可用性测试及优化指南
《写给大家看的色彩书1》
《跟我去香港》
众妙之门—网站UI 设计之道
《Flex 4.0 RIA开发宝典》
《赢在设计》
犀利开发—jQuery内核详解与实践
作品集 更多内容

杂⑦杂⑧ Gold NORMANA V2