您的位置: 首页 > 技术文档 > 网页制作 > WEB前端优化的体会
jQuery+Bing API实现简易搜索引擎 回到列表 九宫格应用案例:极酷网页播放器
 WEB前端优化的体会

作者:mj_623ok 时间: 2009-06-29 文档类型:转载 来自:Be Energetic,Be Confident!

第 1 页 WEB前端优化的体会 [1]
第 2 页 WEB前端优化的体会 [2]
第 3 页 WEB前端优化的体会 [3]

二、我们从代码方面来探讨有如下方法

1.减少http请求数

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

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

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

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

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

2.把样式表放到顶部

我们发现把css放到文档头部会让网页加载得更快。因为这样可以让页面逐渐加载。
把样式表放到接近底部的问题是它阻止了页面元素的逐渐显示。这样还会导致“flash of unstyled content” 即在样式表加载之前页面内容是以没有样式的形式显示出来的,待加载完样式后,页面重绘,内容一闪即改变了样式表现。

3.把脚本放到底部

把脚本放到尽可能底部的地方,一个原因是让页面逐渐渲染,另一个是实现更好的并行下载。

对于脚本,脚本以下的内容被阻止逐渐加载了,因为只有当下载完脚本以后才会下载下面的内容,第二个脚本引起的问题是阻止平行下载。 “http/1.1 specification”建议浏览器对一个域名, 同一时间下载数不超过2个(按:实际监测发现一般有超过2个),我曾经让ie并行下载100个图片。 当脚本正在下载的时候,浏览器不会开始下载任何东西。

4.避免css expressions

css expressions 是一个有力(和危险)的方式动态的改变css的属性。他们自ie5就开始被支持,举个例子,用css expression可以让背景色每个小时轮换一次。但是被非ie浏览器忽略的。

background-color: expression( (new Date()).getHours()%2 ? “#B8D4FF” : “#F08A00″ );

expressions的问题就在与它的计算频率绝对超出我们的想象,甚至当我们移动鼠标,都会引起页面的重绘!

下面是举例页面

减少css expressions计算次数的一个方法就是使用一次性的expressions。 当第一次expression计算出一个明确的值,就让样式等于这个值,不再变动。如果样式的属性一定要动态的改变,就用时间句柄吧!

5.让脚本和样式外延

Javascript和CSS应该是外部调用还是内嵌呢?
用外部调用文件的方式更快,因为他们是可以被缓存的,如果是内嵌在页面中他们就无法被缓存了!想想如果用户要在你的网站看很多很多的页面,如果都是使用同一个外部脚本和样式,那么他们一旦被缓存,就再也不需要下载了,这样会给你带来很大的潜在好处。

6.减小脚本体积

有两个比较流行的工具是用来减小脚本的体积的–JSMin和YUI Compressor。(按:这个压缩和Gzip压缩是不一样的,Gzip是传输压缩,这个是代码压缩)。

我们以上方法,读者应该适当的选择或配合使用,我们在选择方法的原则是应该以最低的代价来完成客户端的功能。

原文:http://hi.baidu.com/mj_623ok/blog/item/a843d8de288d601b632798b8.html

本文链接:http://www.blueidea.com/tech/web/2009/6832.asp 

出处:Be Energetic,Be Confident!
责任编辑:bluehearts

上一页 WEB前端优化的体会 [2] 下一页

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

相关文章 更多相关链接
JavaScript优化细节
jQuery性能优化指南
整理及优化CSS代码的七个原则
影响reflow的因素及其优化
15个网站用户体验优化禁忌
热门搜索: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
>> 分页 首页 前页 后页 尾页 页次:3/31个记录/页 转到 页 共3个记录 分享按钮

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

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

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

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

杂⑦杂⑧ Gold NORMANA V2