WPO工具概览
- 4. 百度旗下购物网站 WED - WPO 代码 级别 优化 HTML 优化(减小体积) CSS 优化(减小体积、选择符性能、图片合并) JS 优化(减小体积、代码性能) 图片优化(压缩) 正则优化
- 11. 百度旗下购物网站 WED - WPO YSlow 爱问 Why ,爱傻瓜式 爱教条,也爱数据 最爱给你打分 我不是什么神器 我只是个 Firebug 插件 我是 YSlow
- 16. 百度旗下购物网站 WED - WPO PageSpeed 爱高性能,爱打分 我不是另一个 YSlow 我有自己的原则 我不仅仅是一个 Firebug 插件 我还是 Apache Module 我是 PageSpeed
Editor's Notes
- 工具种类非常多,尝试着分类介绍,怎么分也分不出来合理的顺序
- 简单按大家熟悉程度来讲,从熟悉到不熟悉
- 本 Topic 中出现的各种神器都有强大的功能,但是由于时间有限,本 Topic 中都集中在性能优化方面讨论。
- 分为原生支持功能和插件功能
- Firebug 的插件, Yahoo 出品 关于 YSlow 的 Y – Yahoo / Why
- Firebug 相关的在 Firefox 上使用方便,但是不适用于其他浏览器 YSlow 、 PageSpeed 都可以给页面打分,依据的都是各自的标准和算法,因此同一个页面用两个工具评判出来的结果可能并不相同。使用工具的时候注意比较同一个工具的结果。
- 微软出品的代理性质的工具,适用于 IE 以及 IE 之外的很多浏览器
- 付费, IE 、 Firefox 插件
- 瀑布图
- 时间图
- 页面事件
- 性能提示
- 性能提示
- 为性能优化而生的工具,免费而高级
- 在 Summary Tab 中展示页面在各个方面的排名情况,并可以在与其他网站的比较中显示当前页面所处于的水平,具体的性能方面包括:总体、缓存、网络、服务器、 Javascript
- 在 Report 页面中,除了 Summary Tab 之外,对于每一个性能部分都有独立的 Tab ,每个 Tab 中都列出了详细的性能优化提示。本图是 Javascript Tab 的截图,显示了 Javascript 性能的排名、显示了执行时间操作 20ms 的 Javascript 代码段。
- 与前面介绍的工具的 Timeline 不同,这里是按域名的方式展示的,某个请求消耗的时间长短很容易可以看到。此外,还能同时显示 CPU 消耗、 Javascript 执行以及页面渲染的情况。