1、Make Fewer HTTP Requests (尽可能减少http请求数)
http请求是要开销的,减少请求数可以提高网页加载速度。常用的方法,合并css,js以及 Image maps和css sprites等。(css sprites是指只用将页面上的背景图合并成一张,然后通过background-position来取背景。)
2、Use a Content Delivery Network (使用CDN 内容分发网络)
通过在现有的Internet中增加一层新的网络架构,将网站的内容发布到最接近用户的 cache服务器内,通过DNS负载均衡(可选根据时间或访问速度来决定访问哪台服务器资源)的技术,判断用户来源就近访问cache服务器取得所需的内容。这样可以有效减少数据在网络上传输的时间,提高速度。
3、Add an Expires Header(添加Expires/catch-control头)
现在越来越多的图片,脚本,css,flash被嵌入到页面中,当我们访问他们的时候势必会做许多次的http请求。其实我们可以通过设置 Expires header来缓存这些文件。Expire其实就是通过header报文来指定特定类型的文件在览器中的缓存时间。大多数的图片,flash在发布后都是不需要经常修改的,做了缓存以后这样浏览器以后就不需要再从服务器下载这些文件而是而直接从缓存中读取,这样再次访问页面的速度会大大加快。
不过期间也有过问题,特别是对于脚本过期时间的设置还是应该仔细考虑下,不然相应的脚本功能更新后客户端可能要过很长一段时间才能“感知”到这样的变化。所以,哪些应该缓存,哪些不该缓存还是应该仔细斟酌一番。
4、Gzip Components(启用gzip压缩)
Gzip的思想就是把文件( html ,php, js, css, xml, txt…)先在服务器端进行压缩,然后再传输。这样可以显著减少文件传输的大小。传输完毕后浏览器会重新对压缩过的内容进行解压缩,并执行。
5、Put Stylesheets at the Top(将css放在页面最上面)
6、Put Scripts at the Bottom(将script放在页面最下面)
将脚本放在页面最下面的目的有那么两点: 1、因为防止script脚本的执行阻塞页面的下载。在页面loading的过程中,当浏览器读到js执行语句的时候一定会把它全部解释完毕后在会接下来读下面的内容。 所以放在页面最后,可以有效减少页面可视元素的加载时间。 2、 脚本引起的第二个问题是它阻塞并行下载数量。
7、Avoid CSS Expressions(避免在css中使用表达式)
css表达是的执行次数是远远多于我们想象的,往往会严重地影响性能。而且,它只能在IE中执行。所以因尽量地避免它,其实大部分可以用js实现。
8、Make JavaScript and CSS External(把javascript和css都放到外部文件中)
不仅从性能优化上会这么做,用代码易于维护的角度看也应该这么做。把css和js写在页面内容可以减少2次请求,但也增大了页面的大小。如果已经对css和js做了缓存,那也就没有2次多余的http请求了。
9、Reduce DNS Lookups(减少DNS查询)
在Internet上域名与IP地址之间是一一对应的,域名(kuqin.com)很好记,但计算机不认识,计算机之间的“相认”还要转成ip地址。在网络上每台计算机都对应有一个独立的ip地址。在域名和ip地址之间的转换工作称为域名解析,也称DNS查询。一次DNS的解析过程会消耗20-120毫秒的时间,在dns查询结束之前,浏览器不会下载该域名下的任何东西。所以减少dns查询的时间可以加快页面的加载速度。yahoo的建议一个页面所包含的域名数尽量控制在2-4个。
10、Minify JavaScript(压缩 JavaScript)
压缩js和css的左右很显然,减少页面字节数。容量小页面加载速度自然也就快。而且压缩除了减少体积以外还可以起到一定的保护左右。这点我们做得不错。常用的压缩工具有JsMin、YUI compressor等。另外像 http://dean.edwards.name/packer/ 还给我们提供了一个非常方便的在线压缩工具。压缩带来的一个弊端就是代码的可读性没了,但是在调试的时候,工具可以将其复原,也就是调用本地的。
11、Avoid Redirects(避免重定向)
发生重定向的原因很多,比如跳转后面缺少 /等,每增加一次重定向就会增加一次web请求,所以因该尽量减少。
12、Remove Duplicate Scripts (移除重复的脚本)
13、Configure ETags(配置实体标签(ETags))
使用ETags减少Web应用带宽和负载
14、Make Ajax Cacheable(使 AJAX 缓存)
做ajax请求的时候往往还要增加一个时间戳去避免他缓存。It's important to remember that "asynchronous" does not imply "instantaneous".(记住“异步”不是“瞬间”这一点很重要)。记住,即使AJAX是动态产生的而且只对一个用户起作用,他们依然可以被缓存。
相关推荐
yslow对前端的请求的响应时间,缓存,数据包大小,协议等进行评分,默认规则23条。
这是yslow 中优化思想 什么是YSlow? YSlow是Yahoo发布的一款基于FireFox的插件。... YSlow可以分析任何网站,并为每一个规则产生一个整体报告,如果页面可以进行优化,则YSlow会列出具体的修改意见。YSLOW [1]
雅虎Yslow 网页性能分析工具 安装,启动,使用及雅虎的34条军规
根据yslow建议,个人总结处理的一些web前端的优化方案。
YSlow是Yahoo发布的一款基于FireFox的插件,这个插件可以分析网站的页面,并告诉你为了提高网站性能,如何基于某些规则而进行优化。yslow3.18支持firefox30版本
[优]Yslow网站前端性能测试工具安装与使用简介
雅虎公司的前端性能分析工具Yslow,有助于前端同事开发和测试人员测试前端页面规范和性能。
关于Web前端优化,网上已经有太多的文章,平时主要用的也就是Firefox的两个插件,Yahoo的YSlow和Google的Page Speed(如果您有其它比较好用的,分享一下哦),它们会对你的网页进行检测,哪些做的比较好,哪些还有待...
本文档较全面,包括 前端性能优化的规则、工具使用介绍等演讲稿和资料。包括YSLOW工具介绍。 帮助你进行前端性能测试
YSlow是Yahoo发布的一款基于FireFox的插件。 安装YSlow必须首先先安装 Firebug,然后下载YSlow,再对... YSlow可以分析任何网站,并为每一个规则产生一个整体报告,如果页面可以进行优化,则YSlow会列出具体的修改意见
最近使用yslow+showslow做导购搜索页面性能评估测试,yslow是firefox一个插件,在firefox浏览网页时,会对网面性能进行评估(根据yahoo的14条规则,进行打分)。Showslow是收集yslow评测结果的web程序。 刚开始手动...
YSlow分析网页,并提出如何提高其性能的基础上一套规则,高性能的网页。我搜索一下”Yslow使用说明“,发现都是旧版本Yslow的使用介绍。于是翻译了一下yahoo官方关于新版Yslow的的使用帮助,希望给初次使用Yslow的朋友...
YSlow是由Yahoo开发者团队发布的一款基于Firebug的插件。而Firebug 又是一款基于FireFox的插件。所以说YSlow是一款基于FireFox插件的插件。虽然有点绕,但是最终说明的问题是: 很遗憾,微软的IE系列浏览器不能使用...
yslow for firefox v18
yahoo性能中心总结的高性能网站设计的14条规则,这个工具就是用来根据这些规则对你的网站进行测试评分的,下载后直接拖到firefox里就可以自动安装了,但是先要装另外一个插件firebug,在我上传的资源列表里可以找到
YSlow 是Yahoo发布的一款基于FireFox的插件,这个插件可以分析网站的页面,并告诉你为了提高网站性能,如何基于某些规则而进行优化。
YSlow.3.1.2.crx for Chrome : yahoo性能中心总结的高性能网站设计的14条规则,这个工具就是用来根据这些规则对你的网站进行测试评分的,下载后直接拖到chrome里就可以自动安装了
网站性能工具Yslow
yslow,用于检测网站性能,帮助开发人员进行性能调优的优秀工具
最近使用yslow+showslow做导购搜索页面性能评估测试,yslow是firefox一个插件,在firefox浏览网页时,会对网面性能进行评估(根据yahoo的14条规则,进行打分)。Showslow是收集yslow评测结果的web程序