网站性能优化工具大全 | javascript | 前端观察

前端观察 • 11年前扫码分享

我是创始人李岩：很抱歉！给自己产品做个广告，点击进来看看。

您的位置：首页 > javascript, resource, tips > 网站性能优化工具大全

网站性能优化工具大全

神飞发表于 17. oct, 2012, 分类: javascript, resource, tips , 7 条评论 »
标签：优化 & 工具 & 性能

网站性能优化（wpo）已经成为一个非常重要的话题了，越来越多的互联网公司开始有wpo的职位，而相关技能也是对前端开发工程师的重要技术要求之一。国外大牛steve souders在参加webperfdays london期间，收集了大量常用的网站性能优化工具，这里和大家分享下。

当然这些不是全部，还有很多工具是目前所缺少的：

当分析一个网站时需要一个计算last-modified时间和今天之间的平均变化并和过期时间来对比的工具。目的是告诉开发者过期时间和资源变化频率是否一致。这个功能可以和pagespeed、yslow和http archive整合。
检测一个网站是否在可以使用异步片段(async snippet)的时候使用阻塞的片段(blocking snippet)。比如pagaspeed实现了但是只能用于google analytics。
诊断渲染被延迟的根本原因的工具。
更容易的可视的dns ttls的工具，内置到chrome dev tools或者webpagetest。
爬去文件目录并优化图片的后端工具。候选： yeoman, wesley.
safari(mobile)中的导航计时。
更好的检测和诊断内存泄露的工具。
网页计时规范，计算javascript、css、reflow等环节花费的时间。
可视、可修改网络存储(localstorage、app cache等)的工具。
可视、可清理dns缓存的工具。
专注于性能建议的jslint版本。
对比两个har文件的工具。

总结：

网站性能优化除了雅虎的34条黄金准则之外，分析和优化工具是必备的，希望这些工具能够对大家有所帮助。但是性能优化并不仅仅这些，还有很多技术是实践中积累发现的，比如元彦同学最近整理的几篇：

恩，如果你有一些好的前端性能优化经验或者工具，欢迎分享给我们。

文章整理自：webperfdays: performance tools

作者: 神飞
爱好前端设计与开发，崇尚一目了然的设计。现居深圳，就职于腾讯isux团队 follow me on twitter @qianduan。

如果你喜欢本文，欢迎订阅本站以获得本站最新内容。

wmtimes 发表于oct 18, 2012 at 00:01

列出的工具的确是蛮全蛮多的。

回复
依云发表于oct 18, 2012 at 12:06

还有 firebug 呢？httpfox 呢？yslow 呢？
ps: async = 异步。

回复
- 神飞发表于oct 18, 2012 at 16:33
  
  多谢~~
  firebug不算吧，它是debug工具，yslow和pagespeed已经提到，httpfox加上了~~
  
  回复
  - 依云发表于oct 18, 2012 at 17:50
    
    哦。firebug 怎么不算呢？它的网络面板可以很清晰地看到有多少网络请求，是什么时候开始，每个阶段（域名解析、建立连接、接收数据等）花了多少时间，哪些被缓存了，每个请求和总共（+-缓存）的数据量是多少。
    
    回复
老杨发表于oct 19, 2012 at 15:34

能不能给我的也连接上啊！！！
jquery 插件！自己的技术博客！

回复
terry 发表于oct 21, 2012 at 10:32

不错，很全，支持！

回复
hale 发表于mar 23, 2013 at 15:56

除了用过httpfox和yslow外，其他基本没用过，不过yahoo关于这一块的有些规则还是很有指导意义的，好多人都是根据yahoo的“14条评分规则”（减少http请求，gzip，cache，etag等）来做优化的。

回复