1:用一个大图片代替多个小图片。
第一条:Make Fewer HTTP Requests 尽可能的减少HTTP的Request请求数。
80%的用户响应时间都是浪费在前端。而这些时间主要又是因为下载图片、样式表、JavaScript脚本、flash等文件造成的。减少这些资源文件的Request请求数将是提高网页显示效率的重点。
这里好像有个矛盾,就是如果我减少了很多的图片,样式,脚本或者flash,那么网页岂不是光秃秃的,那多难看呢?其实这是一个误解。我们只是说尽量的减少,并没有说完全不能使用。减少这些文件的Request请求数,当然也有一些技巧和建议的
2:合并你的css文件。
图:合并与融合
以前为了方便组织和规划样式表,将用于不同用途的样式表文件分离开来,形成 不同的css文件。然后在页面中根据需要引用多个css文件。根据“尽可能的减少HTTP的Request请求数”准则我们知道,那样的确是不合理的,因 为那样会产生更多的HTTP的Request请求数。从而降低网页的效率。所以,从提高网页效率的角度上而言,我们还是应该将所有的css写在同一个 css文件中。但是问题又来了。那么怎么来很好的组织和规划样式表呢?这的确是个矛盾。比较好的做法是采用两套版本。编辑版和发布版。编辑版仍然使用多个 css文件以便于规划和组织。而等到发布的时候,再将多个css文件合并到一个文件中去,从而达到减少HTTPRequest请求数的目的。
3:合并你的javascript文件。
第五条:Put CSS at the Top 把CSS样式放在页面的上方。
无论是HTML还是XHTML还是CSS都是解释型的语言,而非编译型的。所以CSS到上方的话,那么浏览器解析结构的时候,就已经可以对页面进行 渲染。这样就不会出现,页面结构光秃秃的先出来,然后CSS渲染,页面又突然华丽起来,这样太具有“戏剧性”的页面浏览体验了。
第六条:Move Scripts to the Bottom 将脚本放在底部
原因同第五条一样。只是脚本一般是用来于用户交互的。所以如果页面还没有出来,用户连页面都不知道什么样子,那谈交互简直就是扯谈。所以,脚本和CSS正好相反,脚本应该放在页面的底部。
第七条:Avoid CSS Expressions 避免使用CSS中的Expressions
图:CSS中的Expressions其实也是一种if判断
首先有必要先说明一下CSS Expressions是什么一个东西。其实它就像其它语言中的if……else……语句。这样在CSS中就可以进行简单的逻辑判断了。举个简单的例子——
<style>
input{background-color:expression((this.readOnly && this.readOnly==true)?”#0000ff”:”#ff0000″)}
</style>
<INPUT TYPE=”text” NAME=”">
<INPUT TYPE=”text” NAME=”" readonly=”true”>
这样css就可以根结一些情况分别使用不同的样式了。但是CSS中Expressions 的代价却是极高的。当你的页面需要根据判断来渲染效果的元素很多的时候,那么你的浏览器将长期处于假死状态,从而给用户带来极差的用户体验。
第八条:Make JavaScript and CSS External 将javascript和css独立成外部文件
这一条好像和第一条有点矛盾。的确,如果从HTTP的request请求数来讲的话,这样做的确是降低了效率。但是之所以这么做,是因为另外一个重 要的考虑因素——缓存。因为外部的引用文件会被浏览器缓存,所以如果javascript和css体积较大的时候,我们将它们独立成外部文件。这样当用户 只要浏览一次以后,这些体积较大的js和css文件就能被缓存起来,从而极高地提高用户再次访问时的效率。
第九条:Reduce DNS Lookups 减少DNS查询
DNS域名解析系统。大家都知道我们之所以能记住那么多的网址,是因为我们记住的都是单词,而非http://202.153.125.45这样的 东西,而帮我们把那些单词和202.153.125.45这样的ip地址联系起来的就是DNS。那这一条对我们到底有什么真正意义上的指导意义呢?其实有 两条:
1:如果不是必须,请不要把网站放到两台服务器上。
2:网页中的图片、css文件、js文件、flash文件等等,不要太多的分散在不同的网络空间中。这就是为什么那种只发一个网站中的壁纸图片的帖子,要比壁纸图片来源于不同网站的帖子显示要快得多的原因。
第十条:Minify JavaScript and CSS 减少JavaScript和CSS文件的体积
这点很好理解。在你的最终发布版本中把没有必要的空行、空格和注释全部去掉。显然手工去处理效率太低,好在网上到处都是用于压缩这些东西的工具。压缩JavaScript代码体积的工具随处可见,我便不再列举了,这里我只提供一个用于压缩css代码体积的在线工具网站——http://www.cssdrive.com/index.php/main/csscompressor
它提供了多种压缩方式,可以适应多种要求。
第十一条:Avoid Redirects 避免跳转
我只从网页开发人员的角度来解读此条。那么我们可以解读到什么东西呢?2点——
1:“此域名已过期,5秒钟以后,页面将跳转到http://www.xxxxxx.com/index.html页面”,这句话看起来的确很熟悉。但是,我就奇怪了,为什么不直接链接到那个页面呢?
2:一些链接地址请更明确的写出来。例如:将http://justinyoung.cnblogs.com/ 写成http://justinyoung.cnblogs.com (注意最后面一个“/”符号)。的确,这两个网址都能访问到我的博客,但是,事实上,它们是有区别的。http://justinyoung.cnblogs.com 的结果是个301响应,它会被重新指向http://justinyoung.cnblogs.com/ 。但是显然,中间多浪费了一些时间。
第十二条 Remove Duplicate Scripts 移除重复的脚本
这个准则的道理很浅显,但是真正在工作中,很多人却因为“项目时间紧”、“太累了”、“初期没有规划好”……这样的理由搪塞过去了。你,的确可以找很多的理由不去处理这些多余重复的脚本代码,如果你的网站不需要更高的效率和后期维护的话。
也正是这点,我提醒大家一些,一些javascript框架、javascript包一定要慎用。至少要问一下:用了这个js kit 到底给我们多少方便,提高了多少工作效率。然后,再与它因为多余的、重复的代码带来的负面效果比较一下。
第十四条:Make Ajax Cacheable 上面的准则也适用Ajax
图:Ajax的使用要恰当
现在的Ajax好像有点被神话了,好像网页只要Ajax了,那么就不存在效率问题了。其实这是一种误解。拙劣的使用Ajax不会让你的网页效率更高,反而会降低你的网页效率。Ajax的确是个好东西,但是请不要过分的神话它。使用Ajax的时候也要考虑上面的那些准则。
当然,上面的这些也只是供你参考的理论上的准则。具体的情况还是要具体的去对待。理论和准则只是用来指导现实工作的,却是万万不可死记硬套。
yslow使用指南:
中文版:http://www.yslow.net/show.php?tid=123
官方英文版:http://developer.yahoo.com/yslow/help/
分享到:
相关推荐
YSlow是由Yahoo开发团队推出的一款基于Firefox浏览器的插件,它依赖于另一款名为Firebug的扩展。Firebug是一款强大的Web开发工具,允许开发者深入检查HTML、CSS、JavaScript以及网络请求等方面。因此,YSlow是建立在...
总的来说,"firefox-firebug-yslow.zip"提供的工具集是前端开发者不可或缺的利器,它们将助力开发者在网页开发过程中实现更高的效率和更优的性能。无论是初学者还是经验丰富的专业人士,都可以从中受益,提升自己的...
FireBug和YSlow是Web开发和优化领域中的两个重要工具,尤其对于前端开发者而言,它们是不可或缺的利器。本文将详细介绍这两个工具的功能、用途以及如何使用它们来提升网页性能。 **FireBug** FireBug是一款集成在...
Firebug和YSlow是两款非常重要的Web开发和性能优化工具,尤其在JavaScript调试和网页速度分析方面具有显著作用。它们都是Firefox浏览器的扩展插件,能够帮助开发者深入理解页面加载和执行过程,从而提高网站的性能和...
3. **分析网页**:输入网址或打开网页后,YSlow会自动开始分析,展示评分和优化建议。 4. **应用建议**:根据YSlow的建议,调整网页代码或服务器设置,然后重新分析以查看改进效果。 **四、YSlow与网页性能** 网页...
Firebug是开发人员们钟爱火狐浏览器的一个重要原因,Firebug是火狐浏览器上一个集成式的强大调试环境,很多调试应用插件都 必须基于Firebug平台,包括下面会介绍到了一些Web测试和调试工具,所以Firebug可以说是每一...
随着互联网应用的快速发展,前端自动化测试已成为提高软件质量和开发效率的重要手段之一。 ##### 1.1 自动化测试的目的 - **提高效率**:通过自动化工具代替手工测试,减少重复性劳动,提高测试速度。 - **减少...
《深入解析HTTPWatch:...无论是开发人员还是网络管理员,都能从中受益,提高工作效率,提升网络服务质量。通过深入学习和熟练运用HTTPWatch,我们可以更好地理解和解决网络性能问题,打造更快、更安全的互联网体验。
通过对加载时间、资源加载顺序等关键指标的分析,开发者能够发现性能瓶颈,并针对性地进行优化。 接下来,评估页面组件是了解网站性能的另一个重要环节。评估的过程中,需要考虑到HTML结构、CSS样式、JavaScript...
- **YSlow**:由Yahoo开发,分析网页性能,提供优化建议,帮助提升网页加载速度。 - **CoolPreviews**:预览链接内容的插件,提高浏览效率。 4. **VS2010 必备插件**: - **CodeMap**:Visual Studio插件,提供...
本文主要探讨了网络优化和JavaScript优化两个方面,以提高网页加载效率。 一、网络优化 1. 合并压缩CSS、JavaScript、图片及静态资源CDN缓存: YSlow提供了23条网络优化规则,其中合并和压缩资源可以有效减少HTTP...
Yslow是一款由Yahoo开发的网页性能分析工具,它根据Yahoo的网页性能最佳实践为你的网站打分。本文将详细探讨如何通过优化策略在Yslow中获得A级评分,并对网站进行全面的性能调优。 首先,了解Yslow的评分标准至关...
- **特点**:YSlow针对各种影响网站性能的因素进行评分,并提出改进措施。 - **应用场景**:适用于综合评估页面性能,并获取来自Yahoo的最佳实践建议。 3. **WebPageTest** - **简介**:WebPageTest是一个在线...
ASP(Active Server Pages)是一种由微软开发的服务器端脚本环境,用于生成动态网页或Web应用程序。它允许开发者在HTML代码中嵌入VBScript或JScript等脚本语言,以便在服务器端处理数据并返回结果到客户端浏览器。...
Web开发性能优化是一个涵盖广泛的主题,它...以上是针对Web开发性能优化的一些关键点,实际应用中还需结合具体项目和用户需求进行调整。优化的目标是在不影响用户体验的前提下,最大限度地提高页面加载速度和运行效率。
针对这些问题,淘宝UED培训推荐了一系列高效实用的工具,如Firebug、Fiddler、YSlow、IEDeveloperToolBar、HTTPWatch及Chrome Developer Tools等。 #### 三、Firebug:强大的Firefox插件 - **功能**: - 调试CSS...
1. PageSpeed Insights:谷歌提供的免费工具,可以分析网页性能,并提供优化建议。 2. GTmetrix:另一款性能测试工具,提供YSlow和PageSpeed评分,以及详细的优化建议。 3. Webpack、Gulp、Grunt等构建工具:这些...
5. Page Speed:类似YSlow,用于分析网页性能,并提供优化建议。 6. Measureit:实时测量网页元素的尺寸,方便布局调整。 7. Fiddler:网络调试神器,可以捕获、修改和重发HTTP请求,便于调试页面样式。 8. DNS ...
此外,文章还提供了使用YSlow Firefox扩展测试前后加载速度差异的实际案例,直观地展示了这种方法的有效性。 #### 三、WHATISMISSINGINPHPSOAPEXTENSION? 在《WHATISMISSINGINPHPSOAPEXTENSION?》一文中,作者分析...
本书还介绍了一些性能分析工具,如Firebug、YSlow等,这些工具可以帮助开发人员分析和诊断网页加载和执行中的性能瓶颈,从而提供针对性的优化方案。 通过上述内容的详细解读,可以看出《High Performance ...