如何使得 widgets 不降低网站的加载时间
现在用于网站上的 widgets 越来越多，越来越多人为了在他们的网站或 blog 上显示 Flickr photos、 Twitter status、 iTunes playlists 等而安转了这种第三方代码支持，这些日益增加的 widgets ，尽管当中大概只有 1% 是有用的，当这 1% 很好的改变完善整个互联网的格局。
不过随着 widgets 出现也带来了一个问题：使用 widgets 会降低你的网站速度。在比较好的情况下，你使用的 widgets 来自一个稳定快速的服务器；比较糟糕的是你使用的 widgets 来自一个不稳定的服务器，那对你的网站的影响就会很大。
不管是上面两种情况的那一种，您完成网站的加载和渲染都取决于在别人服务器上的代码运行速度，即使是一个成熟稳定的 widgets ，它也需要时间来反映，这仍然会造成网站加载速度的变慢。
我们对此作了一些研究，想要使得 widgets 不影响网站的加载时间：
根本原因：
大多数的使用 widgets 的方式都是：raw 式嵌入或 javascript 式嵌入。
raw 式嵌入通常是提供一个 object/embed 代码，来直接实现一个 Flash widget，这种方法的优点是它可以在不允许使用 javascript 式嵌入的网站上运行；缺点是：a . 许多人不喜欢把 object/embed 代码直接放在他们的页面上。 b . 有些 widgets 不是基于 Flash 的。 c . widgets 的作者不能对已嵌入的 widgets 进行太大修改变化。
javascript 式嵌入使用了脚本，包括远程部署代码进入用户的网站，优点是：它更简洁也更灵活，它的缺点是：它或多或少的增加了网站加载时间，而且一旦出现问题，网站加载时间将成倍的增加。
解决方案：WEDJE
提供一个 raw 式嵌入还是必要的，因为不是每个网站都允许使用 javascript 式嵌入，但是如果 widgets 是使用在人们自己网站或博客上，javascript 式嵌入仍然是一个更理想方法。所以，为了兼容这两种方式，我们想了一种新的方案： WEDJE （ Widget Enabled DOM Javascript Embedding ）。
Standard document.write
大多数的 javascript 式嵌入是简单的使用 document.write 来把代码写入你的页面，问题是，如果 widgets 服务器停了，其余网站就不能运行 widgets 了，直到 javascript 自己停止，很多人误以为可以对其使用延迟属性来防止这种事情的发生，但延迟属性完全阻止了 document.write ，所以它不是一个好的解决办法。
延迟 innerHTML 代码
另外一种 javascript 式嵌入的方法是加入帐号机制，增加一个延迟参数来加载 javascript，在 script 加载完后使用 innerHTML 来写入。这似乎很不错，但在实际中，不同的浏览器的效果都不同。
WEDJE
WEDJE 与上面所讲的延迟 innerHTML 代码有点相似，但它是跨平台、跨浏览器的，我们先写了一个 javascript div ，然后再用 javascript 创建一个 script ，再把这个 script 添加到 javascript div 里，这样形成一个一环套一环的链接。
由于各个要素都通过这种方式连接起来了，浏览器在 script 加载完后能够正确装载和执行 javascript ，而这正是我们要找的方法。
下文是一个使用 wedje 的例子，刷新本页，以下图片会有一个 7 秒的延迟显示。
This text is before the widget code.
This text is after the widget code.
Caveats
目前为止，这种方法测试过的浏览器有：
* Safari: Mac and PC
* Firefox: Mac and PC
* Internet Explorer: PC
* Opera: Mac and PC
1 . 下面是在 js 文件里的代码：
- document.getElementById(‘wedje_div_yourcompanyname’).innerHTML+=’<img src="http://www.mikeindustries.com/blog/images/inline/widgetexample.gif" width="160" height="380" />’;
2 . 下面是要嵌入到你页面里的代码：
紧凑版本 （ 如果你的页面为 application/xml ，请勿使用 ）
- <script type="text/javascript">(function(){document.write('<div id="wedje_div_yourcompanyname"></div>');s=document.createElement('script');s.type="text/javascript";s.src="http://www.mikeindustries.com/blog/scripts/sleepywidget.php";setTimeout("document.getElementById('wedje_div_yourcompanyname').appendChild(s)",1);})()</script>
3 . Application/XML 版本
- <script type="text/javascript" language="Javascript" id="wedje_script_yourcompanyname">(function(){c=document.createElement('div');c.id='wedje_div_yourcompanyname';s=document.getElementById('wedje_script_yourcompanyname');s.parentNode.insertBefore(c,s);w=document.createElement('script');w.type='text/javascript';w.src='http://www.mikeindustries.com/blog/scripts/sleepywidget.php';setTimeout("document.getElementById('wedje_div_yourcompanyname').appendChild(w)",1);})()</script>
原文：mikeindustries.com
翻译：peterzsk
本文永久链接：http://zsk.akaka.com.cn/2007/07/widget-deployment/
谢谢。
这篇文章好！
不过，不知道对于Google的广告是否也可以如此使用呢？
[回复]
找了好久，好东西！
[回复]
没用widgets,直接改sidebar了。一步步学习，建wp不久，多多关照！
[回复]
学习一下~
[回复]
真是高手啊,学习中
[回复]
厉害，我今天刚知道widget里面可以加代码，呵呵，跟楼主差距太大了。
[回复]