web优化之YSlow的使用

前几天看了几篇关于web优化的文章，优化方法大同小异，减少HTTP请求，压缩代码，图片汇总等。今天看到关于YSlow的介绍，才想到竟然有这么个插件，提示你哪里可以优化。

YSlow是Yahoo发布的一款基于FireFox的插件，安装YSlow必须首先先安装 Firebug，然后下载YSlow，再对其安装。

一、YSlow有什么用？

YSlow可以对网站的页面进行分析，并告诉你为了提高网站性能，如何基于某些规则而进行优化。
YSlow可以分析任何网站，并为每一个规则产生一个整体报告，如果页面可以进行优化，则YSlow会列出具体的修改意见。

二、YSlow的安装：

1、安装 firebug插件。针对不同的浏览器插件也是不同的，例如针对chrome.插件名称为：Firebug Lite for Google Chrome。官网下载地址为：https://chrome.google.com/webstore/search/firebug%20%20for%20chrome

点击添加至chrome ，安装后，Firebug Lite按钮将会出现在谷歌浏览器地址栏右侧，一个小虫子图标在哪里显示着。点击即可启用。

2、安装YSLOW插件，官网下载地址为：http://developer.yahoo.com/yslow/

点击安装即可。安装后，YSlow按钮会在 chrome的右上角显示。

三、YSlow的使用

点击YSlow按钮，启动插件，点击Run Test 测试当前页面。在新弹出的界面中按照重要性显示了影响此页面效率的元素，其中A类评分为最高，F为最低。详细使用手册可见：使用手册

四、一般来说提高网页效率依照下面23条准则

1. 减少HTTP请求次数

合并图片、CSS、JS，改进首次访问用户等待时间。

2. 使用CDN

就近缓存==>智能路由==>负载均衡==>WSA全站动态加速

3. 避免空的src和href

当link标签的href属性为空、script标签的src属性为空的时候，浏览器渲染的时候会把当前页面的URL作为它们的属性值，从而把页面的内容加载进来作为它们的值。测试

4. 为文件头指定Expires

使内容具有缓存性。避免了接下来的页面访问中不必要的HTTP请求。

5. 使用gzip压缩内容

压缩任何一个文本类型的响应，包括XML和JSON，都是值得的。旧文章

6. 把CSS放到顶部

7. 把JS放到底部

防止js加载对之后资源造成阻塞。

8. 避免使用CSS表达式

9. 将CSS和JS放到外部文件中

目的是缓存，但有时候为了减少请求，也会直接写到页面里，需根据PV和IP的比例权衡。

10. 权衡DNS查找次数

减少主机名可以节省响应时间。但同时，需要注意，减少主机会减少页面中并行下载的数量。

IE浏览器在同一时刻只能从同一域名下载两个文件。当在一个页面显示多张图片时，IE 用户的图片下载速度就会受到影响。所以新浪会搞N个二级域名来放图片。

11. 精简CSS和JS

12. 避免跳转

同域：注意避免反斜杠 “/” 的跳转；

跨域：使用Alias或者mod_rewirte建立CNAME（保存域名与域名之间关系的DNS记录）

13. 删除重复的JS和CSS

重复调用脚本，除了增加额外的HTTP请求外，多次运算也会浪费时间。在IE和Firefox中不管脚本是否可缓存，它们都存在重复运算JavaScript的问题。

14. 配置ETags

它用来判断浏览器缓存里的元素是否和原来服务器上的一致。比last-modified date更具有弹性，例如某个文件在1秒内修改了10次，Etag可以综合Inode(文件的索引节点(inode)数)，MTime(修改时间)和Size来精准的进行判断，避开UNIX记录MTime只能精确到秒的问题。服务器集群使用，可取后两个参数。使用ETags减少Web应用带宽和负载

15. 可缓存的AJAX

“异步”并不意味着“即时”：Ajax并不能保证用户不会在等待异步的JavaScript和XML响应上花费时间。

16. 使用GET来完成AJAX请求

当使用XMLHttpRequest时，浏览器中的POST方法是一个“两步走”的过程：首先发送文件头，然后才发送数据。因此使用GET获取数据时更加有意义。

17. 减少DOM元素数量

是否存在一个是更贴切的标签可以使用？人生不仅仅是DIV+CSS

18. 避免404

有些站点把404错误响应页面改为“你是不是要找***”，这虽然改进了用户体验但是同样也会浪费服务器资源（如数据库等）。最糟糕的情况是指向外部 JavaScript的链接出现问题并返回404代码。首先，这种加载会破坏并行加载；其次浏览器会把试图在返回的404响应内容中找到可能有用的部分当作JavaScript代码来执行。

19. 减少Cookie的大小

20. 使用无cookie的域

比如图片 CSS 等，Yahoo! 的静态文件都在主域名以外，客户端请求静态文件的时候，减少了 Cookie 的反复传输对主域名的影响。

21. 不要使用滤镜

png24的在IE6半透明那种东西，别乱使，淡定的切成PNG8+jpg

22. 不要在HTML中缩放图片

23. 缩小favicon.ico并缓存

web优化之YSlow的使用相关推荐

雅虎的Web优化最佳实践
雅虎的Web优化最佳实践 1. 内容优化尽量减少HTTP请求:常见方法包括合并多个CSS文件和JavaScript文件,利用CSS Sprites整合图像,Image map(图像中不同的区域设置 ...
错过校招_您可能错过的Web优化技巧
错过校招 by Harnoor Bandesh 由Harnoor Bandesh 您可能错过的Web优化技巧 (The Web Optimization trick you might have mi ...
移动开发中的 Web：WebView、WebKit、JSCore、Web 优化、热修复、跨平台、Native、Hybrid……...
移动开发领域近年来已经逐渐告别了野蛮生长的时期,进入了相对成熟的时代.而一直以来 Native 和 Web 的争论从未停止,通过开发者孜孜不倦的努力,Web 的效率和 Native 的体验也一直在寻求 ...
Scrutiny 9 for Mac(Web优化工具)
Scrutiny 9 for Mac是Mac平台上对一款Web优化工具.Scrutiny Mac能够检查网站中包含的每个链接的状态,能够提高这些链接对质量,为用户提供更好的体验,Scrutiny Ma ...
多变量线性优化_使用线性上下文强盗进行多变量Web优化
多变量线性优化 Expedia Group Technology -数据 (EXPEDIA GROUP TECHNOLOGY - DATA) Or how you can run full webpa ...
YaHoo Web优化的14条法则
2019独角兽企业重金招聘Python工程师标准>>> Web应用性能优化黄金法则:先优化前端程序(front-end)的性能,因为这是80%或以上的最终用户响应时间的花费所在. 法 ...
Web优化 --利用css sprites降低图片请求
sprites是鬼怪,小妖精,调皮鬼的意思,初听这个高端洋气的名字我被震慑住了,一步步掀开其面纱后发觉非常easy的东西.作用却非常大什么是CSS Sprites CSS Sprites是指把网页中 ...
web优化之-asp.net js延迟加载 js动态合并 js动态压缩
紧接着上一篇文章js文件合并压缩去掉重复引用缓存延迟加载来说,遗留了一个很大的问题那就是js文本怎么合并与压缩了,上一篇文章中的 public static void AppendJs ...
Web前端优化最佳实践及工具集锦
摘要:前端的性能对于Web应用的用户体验来说非常重要.不要以为你的Web应用的性能已经足够好了,其实还会有很多可以提升的地方.本文将介绍Google和雅虎关于前端优化的最佳实践以及工具,你可以逐一检验 ...

web优化之YSlow的使用

web优化之YSlow的使用相关推荐

最新文章

热门文章