下一代YSlow的锐动力»Yahoo!用户界面博客（YUIBlog）

下一代YSlow的供电由锐

7月18日，2011马塞尔·杜兰在下午09:17 | 发展，性能 | 4评论

几个星期前，雅虎宣布2011年在速度 YSlow的移动，使移动世界YSlow的性能分析的力量。

YSlow的手机作为作品的bookmarklet ，从而有可能比其他浏览器火狐（附加）或铬（扩展）运行。

YSlow的建筑部分被重新设计，以跨平台和YUI在沙盒，跨浏览器的抽象和简单的YQL的访问可能是重要因素。

沙箱

为了不干扰，不搞乱页面本身的性能分析和嵌入在页面上，YSlow的是一个bookmarklet，JavaScript和CSS注入任何网页，利用YUI的沙箱电源：

书签网址：

 JavaScript的：（函数（Y，P，O）{
     P = y.body.appendChild（y.createElement（“IFRAME”））;
     p.id ='YSlow的，书签';
     p.style.cssText ='显示：无“;
     O = p.contentWindow.document;
     o.open（）写（“
         <HEAD>
         <身体的onload =“
             YUI_config = {
                胜利：window.parent，
                 DOC：window.parent.document
             };
             VARð=文件;
             d.getElementsByTagName（\'头\'）[0]
                 。appendChild（
                     d.createElement（\'脚本\'）
                 ）。SRC = \ http://d.yimg.com/jc/yslow-bookmarklet.js的\“
         >
     '）;
     o.close（）
 （文件））

上面的代码：

创建一个空的iframe;
追加到页面的主体;
隐藏的iframe *;
得到它的窗口句柄;
其内容写入到iframe的主体;
这个机构是空的，但有一个onload事件
onload onload事件定义如何注入YSlow的的JS：
- 设置YUI_config ，所以win doc点被分析的页面window和document分别
- YSlow的网址，通过创建一个动态注入script到iframe的元素head

* iframe的显示YSlow的演示的全部资产装入

这将被分析的页面放入一个iframe。这个iframe将作为沙盒环境，将驻留在YSlow的。由于没有动态创建的iframe src属性，将有机会获得其母公司（被分析的页面），因为这里没有发生有相同的原产地政策违反。

的YUI_config对象是很方便的，因为它设置win doc doc iframe的父（被分析的页面），因此任何新的YUI实例将绑定默认情况下，布线的父文档任何呼叫到Y.all和Y.one通过Y.config.win或Y.config.doc从YUI use回调。

YSlow会的演示文稿处理iframe的window和document引用，让YSlow的主脚本呈现的标记，以及不与父页面的样式发生冲突的情况下获取这个iframe内外部CSS。 YSlow的父页面进行扫描，以获得后来的表现分析所需的所有组件（图片，脚本，链接，背景图片，闪光灯等）。这是做通过，访问Y.config.win和Y.config.doc ，因为他们是指父页面。

跨浏览器抽象

YSlow的移动应该是一个书签，在任何浏览器*工作。 YUI的抽象跨浏览器，浏览器的差异正常化问题，导致在一个干净，易于阅读和维护代码库。

YSlow的不完全移植了YUI 3 -控制器层（从即将推出的应用程序组件） -但仍，所有的DOM操纵和事件处理由node和event模块。我们计划在未来的版本了YUI 3到港口的YSlow的功能。

*并非所有浏览器目前支持

YQL的

YSlow分析，通过检查发现在页面上的组件的HTTP标头页。 HTTP响应头是不是可以在页面中，因此这些部件需要再次请求为YSlow的顺序得到响应头信息。这可以通过XMLHttpRequest请求（AJAX）的组件的URL列表，但不幸的是由于同一原产地政策的限制，这是不可能的，除非所有组件在同一个域的页面，这是不太可能实现。

一脉相承的政策限制的一个共同的解决方法是使用JSONP请求组件的URL列表和代理代表对YSlow的检索HTTP响应头，其中一个外部服务器。由于YSlow的普及和最近的移动性能分析工作，我们期待着相当沉重的交通YSlow的移动书签。为了支持这样的交通， YQL的是可伸缩的解决方案，通过一个开放的数据表命名data.headers ，检索的响应头和内容，为给定的URL列表，而假冒的用户代理，以确保预期的内容是通过YSlow的检索。

YQL的查询组件所有YQL的查询，而引擎盖下的管理JSONP请求，YSlow的控制器代码更简单，易于维护管理工作。

未来的增强功能：新YSlow的移动界面友好

目前YSlow的移动用户体验是相同的桌面体验。一长串的性能分析数据的处理是不小智能手机屏幕上的最佳体验。自锐也抽象跨设备的手势，YSlow的移动将获得一个全新的移动友好的界面，在未来的版本。

性能工具的性能

YSlow的移动部署了仔细考虑其在被分析的页面加载时间性能的影响。 YSlow的使用YUI的3模块进行审议只包括需要加载尽可能快的YSlow的模块。 YUI种子文件和装载机，不包括在内，因为所有必要的模块和子模块组合在一起后，瑞安Grove的性能禅宗的技巧，这使得它可以加载到一个单一的小单要求的一切：YSlow的bookmarklet.js：204KB，66KB（ GZIP），其中：

锐：75KB，27KB（GZIP）
YSlow的：129KB，39KB（GZIP）

4评论»

评论对这个职位的RSS 引用地址。

可以肯定现在使用手机的样式
胡安 - 7月19日，2011年＃
好消息马塞尔。保持良好的工作！
爱德华多·兰格伦- 7月21日，2011年＃
[...]下一代YSlow的供电由锐[...]
pingback的加快您的网站«尚达拉的最佳实践 - 2011年7月25日，＃
我不是一个开发商，但很感兴趣，在应用程序的性能，奥雅纳的广域网和互联网。我首次尝试，它为我工作的伟大。感谢将努力在...
评论由克里夫查普曼 - 7月27日，2011年＃

发表评论

支持WordPress的关于雅虎虚拟主机。

Yahoo!用户界面博客（YUIBlog）

下一代YSlow的供电由锐