用作测试的是一个含有100个div的HTML页面，div带有class和一些内容。为了排除掉寻找这些div所花费的时间，所以把选择器$('div')缓存起来了。用作测试的jQuery版本是1.4.2，所以测试结果也只是针对这个版本，在其他版本可能就不是这些结果了。

测试的jQuery方法分别是：

• .toggle()
• .show() 和 .hide()
• .css({'display':'none'}) 和 .css({'display':'block'})
• .addClass('hide') 和 .removeClass('hide')
• 改变<style>元素的一个属性

.show() 和 .hide()

在所有浏览器中，这两个方法在隐藏DOM元素上相对来说比较慢。主要原因在于.hide()方法必须先保存元素的"display"属性，这样.show()才能把元素恢复到原来的状态。这里用到了.data()这个jQuery方法，把信息保存在DOM元素上。为了达到这个目的，.hide()在每个元素上循环了两次，一次用来保存当前的"display"值，一次用来更新样式"display"为"none"。根据源代码上的注释，这样做是为了防止浏览器在每个循环上进行重新渲染（reflow）。.hide()方法还会检查你是否传递了使用动画效果的参数，就算传入一个"0"也会让性能大打折扣。在第一次调用.hide()的时候性能最慢，在之后再调用则会变快。

.toggle()

这个方法是最慢的。它会检查选择器返回的每一个元素当前是否可见，如果可见的话就调用.hide()方法，不可见则调用.show()方法。不但如此，它不仅会检查你是否传递了一个boolean值进去阻止.hide()或者.show()的执行，还会检查看你是否传入了function来进行切换（toggle）而不是对可见性进行切换。看起来这个方法还有很大的改善空间，例如可以先一次过把隐藏的元素select出来，然后调用.show()方法，同时把其余的元素select出来调用.hide()方法。

.addClass() 和 .removeClass()

这是两个很漂亮的隐藏/显示DOM元素方法。在Firefox上它的速度是.show()和.hide()的两倍，而在Safari上则是三倍。不过在IE6，IE7，Chrome和Opera上，两种方法几乎没什么差别。值得一提的是，对于100个DOM节点来说，两种方法在Firefox上相差18ms，在Safari相差4ms，速度的差异只会体现在大量节点选择的时候。不过增加和移除class需要你花费更多的工作，因为你需要创建一个用于隐藏的class，然后还要时刻关注着这个class的优先级以保证DOM能隐藏。jQuery增加和移除class是通过字符串操作的，所以我觉得随着元素上class数量的增加，这个方法会变慢，但是我还没对此进行测试过。

.css({'display':'none'}) 和 .css({'display':'block'})

这两个方法也很漂亮。相对于.addClass()和.removeClass()，IE6/7和Opera上的速度都得到了提升，而在其他浏览器上则能保持水准。当你知道要改变的元素的当前display样式，或者没有通过inline的方式去改变元素的display样式时，这两个方法很好用。如果你通过inline的方式改变了display样式，那么你需要确保在使得元素重新可见时display值要设置正确。如果你只是使用了元素的默认display值或者在css里设置display值，那么你只需要用类似.css({'display':''})的方法移除样式，元素就会恢复到它在css上的样式或者默认display值。作为一个类库，jQuery不能假定元素的display不是通过inline方式设置的，所以它需要被人手的去确定。不过既然你知道你不会去inline的设置display，那么你就可以去避免这个造成缓慢的主要因素。

禁止样式表

纯粹为了好玩，我想：如果我们不在每个dom节点上花功夫，而是去捣鼓样式表会怎样呢？这样会提高速度吗？其实就日常使用来说，上面的测试用到的方法已经足够快了，但是如果页面上有10000个节点需要进行隐藏和显示呢？只是把它们全部选择出来就已经够慢了。如果我可以控制样式表，那么就可以完全避免这些时间花费了。不过我得告诉你，这个方法是有很大风险的。

风险在于控制样式表时的跨浏览器问题。首先，我尝试能不能通过jQuery插入一个带有class的"style"标签，但是却出现了跨浏览器问题。然后我尝试用javascript去创建stylesheet节点和class，但是实在有太多的API了，要搞清楚需要花不少的时间。最后，放弃了编程的方式，我在head区里写了一个带有class的style标签。通过编程的方式来创建stylesheet实在是太慢了，但是如果它一旦被创建好，那么给它一个ID和使用它的"disabled"属性就是轻而易举的事情了。

1
2
3

<style id="special_hide">.special_hide { display: none; }</style>
<!--  ...  -->
<div class="special_hide">Special hide DIV</div>

然后在javascript里：

1

$('#special_hide').attr('disabled, 'true');

搞定！所有带有"special_hide"这个class的元素都显示出来了。要隐藏它们，你只需要……

1

$('#special_hide').attr('disabled', 'false');

现在它们全部都隐藏了。总的javascript耗时在所有浏览器上都是0-1ms。你的javascript只是用来改变一个属性。当然，浏览器还是需要花费时间去重新渲染页面的，但是实际上你已经避免了javascript的处理时间。如果你调用了.toggle()，.hide()或者 .css()这几个方法，那么这个方法就会失效。因为那几个方法会通过内联方式设置css样式，这些样式有更高的优先级。要重新使这个方法生效，只需调用.css('display', '') 把内联的样式移除掉。这个方法同样需要花费你更多的精力，因为那需要去定义class，同时把这些class赋给页面上需要进行显示/隐藏的元素，但是如果你所要处理的元素数量是极其庞大的话，那么这也许是值得的。

简要回顾一下，下面是改变元素显示状态的方法，按照最快到最慢的次序排列：

• 禁用/启用样式表
• .css('display', ''), .css('display', 'none')
• .addClass(), .removeClass()
• .show(), .hide()
• .toggle()

需要注意的是，在大多数的情况下，这些方法都足够的快了。当你要操作很大的jQuery集合时，那么.show() 和 .hide()方法在IE下就会变得很慢了，这是你可能要用addClass() 或者 .removeClass()方法。 禁用/启用样式表的方法只有在很极端的情况下才有必要用到。

Translated by icyfire @ company ON Jul 26, 2010
源文：Now you see me… show/hide performance

尼日利亚淡定帝是也～

老马还真是个活宝啊……超萌～

去看看:[威锋网] - iPhone 4第一时间火热拆解

北京时间6月23日消息，美国科技博客网站Facebook周二刊登了该网站对Facebook首席执行官马克·扎克伯格(Mark Zuckerberg)的独家采访记录。在这次于本周早些时候进行的采访中，扎克伯格谈到了Facebook的现状、未来发展、为外部开发者创建的收入生态系统及其他事宜。

摘录了下几个重点：

• 在应用程序被用户接受的问题上，主要有两种方式：一是通过病毒式传播，即通过强制方式发展新用户。另一种方式是让用户再次了解某款应用程序的具体性能。在互联网产业发展初期阶段，病毒式传播方式很有效。在这种情况下，其实并没有真正能够使用户再次了解应用程序的有效渠道。一些开发者通过病毒式传播方式，而迅速发展了大量用户。他们发展忠诚用户的主要方式，就是不断发展新用户，并让这些新用户产生反感情绪。真正能够让用户愿意再次了解某款应用程序性能的方式是：应用程序本身性能很好，用户愿意再次了解和使用。
• 维持各类游戏之间的平衡。对每位用户的兴趣爱好有所了解。如对于不喜欢玩游戏的用户，就少给他们投递一些有关游戏的信息。
• 对于外部游戏开发者而言，无论其公司规模大小，都能在Facebook获得平等的发展机遇。这种做法有利于维持社交游戏产业的正常竞争。
• Facebook网站上应该使用单一虚拟货币才好。如果我们能够一站式购买信用币，并能够用于所有游戏，无疑对用户和外部开发者都有好处。
• Twitter是性能很好、也非常简洁的服务。他们将一件事情做得很好，这就很强大。人们使用产品的方式非常不同。他们(注：指Twitter)做的一些事情，也正是我们刻意不想做的业务。

腾讯科技：专访Facebook扎克伯格：说我不在乎钱是误读

原文：Exclusive: Discussing the Future of Facebook and the Facebook Ecosystem with CEO Mark Zuckerberg

这是Google的。

上面是Opera的恶搞版，真的太搞了……

这是日本某人用CSS画的哆啦A梦，用来检测浏览器对CSS3的支持程度。我用几个浏览器测试，其中Chrome 4跟Safari 4表现最好，而Firefox 3.6次之，因为它渲染的哆啦A梦的眼睛不会动，而Opera10.5再次之，它不但眼睛不会动，还渲染少了一些渐变效果。至于IE就不说了，你可以自己试试看……

来源：http://blog-imgs-42-origin.fc2.com/s/h/o/shopdd/dora_css3.html

名称：artDialog
作者：唐斌
版本：v 2.0.9 Betav 2.10 Preview
更新：2010-05-02 2010-05-18
License：GNU Lesser General Public License

简介：artDialog是一个轻巧且高度兼容的javascript对话框组件，可让你的网页交互拥有桌面软件般的用户体验。

功能：支持锁定屏幕(遮罩)、模拟alert和confirm、多窗口弹出、静止定位、支持Ese键关闭对话框、定时关闭、自定义位置、拖动、鼠标调节窗口大小、换肤、穿越框架..

优点：

• 自适应内容: 无需预设高宽, 对话框与按钮自适应消息内容的大小
• 文本智能对齐: 如果设置了对话框宽度，短文本居中长文本居左对齐
• 容错能力: 如果定义的宽度高度小于内容大小不会出现错位
• 界面机制: 九宫格布局, 样式钩子与结构丰富, 可定制自适应皮肤
• 跨浏览器支持: 支持 Firefox, Chrome, Safari, IE6+, Opera ..
• 轻巧: 不依赖第三方库, js压缩后不足10kb
• IE6无抖动静止定位: 在 IE6 下可实现与现代浏览器一样完美无闪动静止定位效果
• 智能定位: 使用自定义坐标的时候智能修正位置, 不会超出边界
• 拖动流畅: 不会粘住鼠标也不会拖出浏览器视口导致无法控制
• IE6遮盖下拉控件支持: 支持 IE6 下覆盖下拉控件

下载：Google Code

使用感受：
好吧，上面的介绍跟优点都是从DEMO页面抄下来。

还是说说我自己的使用感受吧。首先调用使用的是流行的传入JSON参数的方法，这个我喜欢：

1
2
3
4
5
6
7
8
9
10
11
12
13

artDialog(
        {	
            content:'欢迎你来到对话框世界！',
            lock:true,
            style:'succeed noClose'
        },
        function(){
            alert('你点了确定');
        },
        function(){
            alert('你点了取消');
        }
);

另外在页面载入的时候，会预先弹出一个隐藏的对话框，预先加载了一些皮肤图片，这样可以加快以后弹出框的弹出速度，很聪明的做法。

代码结构清晰，而且扩展起来很方便。

不过虽然优点这么多，但是在实际使用中还是会发现不少问题，下面是我遇到的部分问题：

• IE7的一个iframe bug。artDialog使用的是createElement的方法来创建节点，这跟ymPrompt和lhgdialog不同。而使用createElement方法创建的iframe在IE7下会出现边框，虽然artDialog里面设了iframe的border为0，但是这在IE7下是不会有作用的，解决方法是创建了iframe后用setAttribute('frameborder', '0', 0)，注意需要第三个参数"0"，不然IE7还是不认。2.1中已经修复这个问题。
• artDialog还有个重要的特性是对象重用，之前创建的对象会用一个box装起来，并用id作标识，如果是相同的id，则会用回之前的对象，加快了弹出框的创建速度，但是这在FF之类的浏览器下工作得很好，可是在IE下，这样却会在DOM下产生许多副本，详细情况用IE DOM inspector看看就知道了。在IE下关闭一个弹出框后再打开另外一个，你会发现框了的内容会首先出现之前那个弹出框的内容再出现实际的内容。我的解决方法是……去掉对象重用的相关代码。
• artDialog有个不错的功能：锁定。但是事实上在我这里并没用到，锁定会把屏幕锁住，弹出框不能移动，背景用遮罩盖住，突显弹出框。其实我只是想要个普通的遮罩来突显弹出框而已，不需要锁定，而且锁定时会把滚动条干掉，导致页面会整体移动，个人感觉不太好。不过扩展个overlay功能其实不难。2.1版已经改进了锁定功能，不会发生页面的偏移了。
• 弹出框的定位使用的是黄金比例垂直居中，我不知道这个的好处是什么，实际上的效果并不是很好。水平居中没问题，但是垂直居中有时会太靠顶，所以最后我还是改为普通的垂直居中了。2.1中也作了改进。
• 使用iframe作为弹出内容的话，artDialog会首先出现一个loading的动画，等iframe加载完才显示。这很好，但是如果你的iframe里使用了jQuery的$(document).ready()的话，那恭喜你中大奖了。ready了的代码可能会出现异常，特别是在IE下。onload的速度一般会比jQuery的ready要慢，会是这个原因引起的吗？未作深入研究，所以我直接把这个loading干掉了。

大致上我遇到比较重大的问题就是上面这几个了，希望下一个版本能让我喜出望外。

Update 2010.05.20 版本2.1修复了不少bug也改进了不少功能，作者还真勤劳～跟作者在微博上反应了些问题都在新版本中得到了解决，赞一个。期待最终版。