Yahoo!用户界面博客（YUIBlog）

截屏：罗斯Harmes锐TextMate的捆绑

于2006年11月30日下午5:27由埃里克·米拉利亚在发展 ， YUI剧院 | 14评论

继续阅读截屏：TextMate的罗斯Harmes锐捆绑...

找到的谈话： bloglines technorati

共享和扩展： 书签del.icio.us Digg它！ | reddit！

性能的研究，第1部分：什么80/20法则告诉我们关于减少HTTP请求

2006年11月28日，在下午12:56 Tenni陶依尔发展 ， 性能 | 128评论

这不是什么秘密，用户喜欢更快的网站。 我工作在一个专门的团队侧重于量化和改善全球雅虎产品性能。 作为我们工作的一部分，我们进行了相关网页性能的实验。 我们分享我们的研究结果，使其他前端工程师加入我们加快了在网络上的用户体验。

80/20的性能规则

维弗雷多帕累托，经济学家在20世纪初，国家财富的80％至20％的人口属于著名的观察。 什么通常称为Pareto原则（也称为80-20规则），其中规定任何现象，这是后来广义的后果，80％来自20％的原因。 我们看到这种现象，在软件工程，其中80％的时间花在只有20％的代码。 当我们优化我们的应用程序，我们知道，20％的代码集中。 优化网页时，也应适用同样的技术。 大多数性能优化今天是生成的HTML文件（阿帕奇，C + +，数据库等）的部分，但这些部件不仅有助于用户的响应时间约20％。 这是更好地把重点放在优化有助于其他80％的部分。

使用数据包嗅探器，我们发现，其他80％的地方。 图1是一个http://www.yahoo.com空缓存加载时间都花在哪里的图形视图。 每一个酒吧代表一个特定的组件，并显示在浏览器开始顺序。 第一栏是浏览器的时间，花费仅检索HTML文档。 请注意，只有10％的时间都花在这里，浏览器请求HTML页面和Apache来缝合在一起的HTML并返回响应返回给浏览器。 其余90％的时间都花在抓取页面中的其他组件，包括图片，脚本和样式表。

表1显示了流行的网站，下载HTML文件的时间介于5％和38％的开支。 其他62％至95％的时间都花在HTTP请求获取的HTML文件（如图像，脚本和样式表）的所有组件。 事实上，浏览器每个主机的并行下载只有两个或四个组成部分，根据响应的HTTP版本和用户的浏览器页面中有许多组件的影响加剧。 我们的经验表明，减少HTTP请求的数量减少响应时间的影响最大，往往是最简单的性能改进，使。

不应该反正一切都被保存在浏览器的缓存？

得出的结论是相同的：减少HTTP请求的数量减少响应时间的影响最大，往往是最简单的性能改善。 在下一篇文章中，我们将看看缓存的影响，与现实世界的一些令人吃惊的结果。

免责声明：口述视觉丰富的设计规则，需要对这一要求的减排目标权衡。 当你需要视觉的丰富性，应采取额外的步骤 - 聚合JS文件，使用CSS精灵，等等 - 但视觉丰富，往往背道而驰修长的HTTP请求管道。

找到的谈话： bloglines technorati

共享和扩展： 书签del.icio.us Digg它！ | reddit！

视频：道格拉斯·克罗克福德，“高级JavaScript”

于2006年11月27日，10:59上午由埃里克·米拉利亚， YUI剧院 | 开发 | 34评论

上个月，我发表一些从一个视频Douglas Crockford的前端工程上的演讲（ 视频：道格拉斯·克罗克福德，“绝望的API：DOM的理论” ）。 那些喜欢道格拉斯的深潜到DOM可能是在他的“高级JavaScript”的演讲，现在公开Yahoo!奇摩影片也感兴趣。 在此演示文稿 - 由三部分组成的系列，他一直在雅虎教学的三分之一 - 道格拉斯看起来密切JavaScript程序员可以选择在创作他们的应用程序的代码模式。 他比较熟悉结构，如Pseudoclassical模式更为独特的模式，如寄生模式，（他认为）运行“粮食”的JavaScript。 当布伦丹·艾希谈到雅虎今年夏天，他形容为“尤达的lambda编程和JavaScript”道格拉斯;看“高级JavaScript后，”你可能有一个清晰的感觉到这种情绪来自何处。

值得重复道格拉斯的想法和观点，是他自己和录像制作工艺中的许多缺陷，是我的。

• 第1部分：31分钟
• 第2部分：25分钟
• 第3部分：11分钟
• 下载的幻灯片（PowerPoint文件压缩）

找到的谈话： bloglines technorati

共享和扩展： 书签del.icio.us Digg它！ | reddit！

分级浏览器支持：第四季更新

11月15日，2006在1:42由内特Koechley上午| 开发 | 17评论

大约每三个月更新图表，详细说明哪些浏览器获得A级的支持，按照分级浏览器支持 。 在昨天的结合锐更新版本 ，这里是我们的浏览器更新为2006年第四季度的支持。

总结：A级的支持，为Firefox 2.0开始，为IE7重申。 A级的支持，停止对IE 5.5和Firefox 1.0。 很少使用Gecko的衍生工具（例如，Netscape和Mozilla应用程序套件），现在接受X级，而不是A级的支持。 现在，Opera 9中获得A级对其他平台的支持。

在子弹的形式，这里是所有在本次更新的变化：

1. 重申A级的支持，IE 7，运（XP中）
2. 终止A级的支持，IE5.5以上，运
3. 启动A级支援，Firefox 2.x的，WIN / MAC。
4. 终止A级支持，火狐1.0.x的，WIN / MAC。
5. 扩大A级支持，歌剧9.x中，WIN / MAC
6. 终止A级的支持，Mozilla的应用程序套件，WIN / Mac的
7. 终止A级的支持，网景，WIN / Mac的

虽然你应始终引用官方的金紫荆星章的图表，雅虎开发者网络上 ，我已经包括了本季度的图表为了子孙后代的快照：

	赢得98	赢得2000	WIN XP	的Mac 10.3.x的	MAC 10.4
IE浏览器7.0			A级
IE 6.0版本	A级	A级	A级
火狐2.0。	A级	A级	A级	A级	A级
Firefox 1.5中。	A级	A级	A级	A级	A级
Opera 9中。	A级	A级	A级	A级	A级
Safari浏览器2.0 *					A级

展望下一季度（2007年第一季度），我们将反映增量支持的浏览器版本，但预计没有大的变化。

谢谢，
内特

找到的谈话： bloglines technorati

共享和扩展： 书签del.icio.us Digg它！ | reddit！

YUI的版本0.12.0：TabView控制，改进的API文档，

2006年11月13日，在下午06:35埃里克米拉利亚| 开发 | 23评论

今天我们发布了0.12版本的YUI库。 这里的亮点：

• TabView控制 ：锐书面动画 和 Dom作者马特·斯威尼 ，这个充满活力的标签解决方案的最新锐此外，渐进增强和高光泽丰富，同时具有强大的支持。 退房马特的名册TabView例子可以做什么新的控制理念;查看源上的例子，看到他们是如何实现的。
• 改进的文件：YUI开发亚当·摩尔（ 事件 ， 拖放 ， 滑块 ， TreeView的 ）创造了一个产生新的API文档的工具，使我们产生一个完整的统一的，交联的API文档自动完成供电搜索控制 。 新的API文档提供了一类结构清晰的开发，并提供单独分类的属性和配置选项。 你可能永远不会回去再次备忘单 ...
• ......但是，如果你还像备忘单备忘单是0.12版本更新，包括TabView和内特- Koechley的CSS的新表复位 ， 字体和网格基础。 您可以下载所有的YUI的备忘单从YUI图书馆网站。
• 说到CSS的网格：内特已经rev'd烤支持为750px，950px，全视口（“液体”）布局的网格包。 电网0.12三元下3KB前gzip压缩支持布局和重量。 复位/字体/网格基础上，我们已经建立了YUI的网站现在我们正在使用的新的全视口支持使用。
• 整个图书馆的改进：如果你从以前的版本升级，整个图书馆被发现，增强事件的新onContentReady的方法，以显着改善与简化的界面，为建立多月的日历显示（ 日历控件日历， 检查出循序渐进的方式逐步升级指南 ）。 对于一个变化的完整列表，请参阅发行说明文档，伴随着分配。

我们会跟进一些关于这些主题的信息，在本周晚些时候。 现在，请让您的方式到SourceForge上下载最新的YUI的分布;看到了整个图书馆的变化充分体现在分配的发行说明。 一如既往， YUI的网站雅虎开发者网络拥有所有最新的文档。

找到的谈话： bloglines technorati

共享和扩展： 书签del.icio.us Digg它！ | reddit！

JavaScript中，我们很难new亚

2006年11月13日，在9:21上午由Douglas Crockford | 开发 | 54评论

JavaScript是一种原型的语言，但它有一个new运 ​​营商，试图把它看起来像一个经典的语言之类的。 这往往混淆程序员，导致一些问题的编程模式。

你永远不需要在JavaScript中使用new Object() 使用对象字面{}代替。 同样，不使用new Array()使用数组文字[]代替。 您的JavaScript工作没有像在Java中的数组，使用类似Java的语法阵列会混淆。

不要使用new Number ， new String ，或new Boolean 。 这些形式产生不必要的对象封装。 只是用简单的文字。

不要使用new Function来创建函数值。 ，而不是使用函数表达式。 例如，

 帧[0]。的onfocus =“新功能”（“document.bgColor ='古董白”“） 

更好地写成

 帧[0]的onfocus =（）{document.bgColor ='古董白';}; 

第二种形式允许编译器将看到函数体越快，所以迟早将被检测到任何错误。 有时使用new Function的人不明白如何工作的内部函数。

  selObj.onchange =新的功能（“dy​​namicOptionListObjects”
         dol.index +“]（本）。”）; 

如果我们保持在字符串的函数体，编译器无法看到它们。 如果我们继续作为字符串表达式的函数体，我们不能看到它们。 这是更好的方案无知。 通过一个函数返回一个函数，我们可以明确地传递我们要绑定的值。 这使我们能够在一个循环初始化了一套selObj 。

  selObj.onchange =功能（I）{
    回归函数（）{
         dynamicOptionListObjects [我]的变化（本）;

     };
 （dol.index）; 

这是不是一个好主意，直接在前面提出了new function 。 例如， new function提供了没有任何优势，在构建新的对象。

  MyObj中=新的功能（）{
     this.type =“核心”;
 }; 

这是更好地使用对象文本。 这是更小，更快。

  MyObj中= {
    类型：“核心”
 }; 

如果我们是一个对象，它包含绑定到私有变量和函数的方法，最好还是离开了new前缀。

  VAR FOO =新的功能（）{
    功能processMessages（消息）{
        警报（“消息：”+ message.content）;
     }
     this.init =函数（）{
        订阅（“/ mytopic的”，这一点，processMessages）;
     }
 } 

通过使用new调用函数，对象保存到一个毫无价值的prototype对象。 没有抵销的优势浪费内存。 如果我们不使用new ，我们不保持浪费prototype链中的对象。 所以，相反，我们将调用工厂函数以正确的方式，使用()

  VAR foo函数（）{
    功能processMessages（消息）{
        警报（“消息：”+ message.content）;
     }
    返回{
        初始化函数（）{
            订阅（“/ mytopic的”，这一点，processMessages）;
         }
     };
 }（）;

这样的规则很简单：我们应该用new运 ​​营商是唯一的一次调用pseudoclassical的构造函数。 当调用一个构造函数，使用new是强制性的。

有一个时间new ，一个没有时间。

找到的谈话： bloglines technorati

共享和扩展： 书签del.icio.us Digg它！ | reddit！