优化Twitter在博客中的显示
很多朋友都在博客上集成了Twitter的Widget显示，在Retweet主题则直接当一个版块集成在主题里。在twitter的apps可以生成基于Flash或者JS的代码。基于Flash的样式上已经无法自己定义，这里就说说JS输出的一些优化。
我也一直用下面的代码显示twitter的更新列表而没有用其他插件。我们可以通过CSS对输出的这个列表进行美化，这还不是本文要说的内容。
默认的JS代码如下：
我想说的是这个代码在实际使用上发现有两个问题：
1.代码不符合W3C规范
2.JS影响页面载入速度
第一个，由于代码<ul>标签里面没有<li>就直接闭合，虽然不影响使用，但不符合W3C标准。解决方法很简单，自己手动加个<li>就可以。当JS调出你的tweet之后这个li会自己消失，不影响显示。以前我一直用废标签<li>more</li>解决。
第二个问题，也是我觉得最严重的问题，Twitter的这个代码没法让我放心放到HTML文档流的前面。Twitter不能保证每次请求这个JS都有很好的返回速度，不影响下面内容的显示。所以我们更多的倾向JS影响的内容放在侧栏的同时，侧栏的代码一定要在正文的后面，哪怕是左侧栏布局。因为万一Twitter服务器相应慢了，那后面的内容会等很久才能显示，严重影响访客体验。更严重的是若出现插件错误，PHP会直接中断在那个位置，后面的内容直接不显示了。所以无论如何，文章区域在HTML文档流里一定要在侧栏前面，Twitter的这个代码同样如此不该放在正文的前面。
像在Retweet主题中，由于样式需要，这段代码必须在前面。我曾经考虑过用CSS的布局来改善这个问题，但没有很合适的解决办法，毕竟高度不是固定的，左右易换，上下难调。大家也不可能在自己主题中把twitter的widget放到不起眼的位置去显示。怎么更好的解决呢？
那么只好把代码拆开，HTML该在哪在哪，把JS放到最后加载。这样的优点是不影响页面的载入速度，页面读取完了再读twitter的JS代码，最后显示twitter列表。缺点是页面载入前那个区域空空的。
可刚才第一条提到，由于本身的代码不符合W3C标准，我们要放个多余的<li>在里面。我们干脆就让它显示一个载入状态不就能完美的解决了？
实际操作就是，把JS代码放到页面的最后，</body>前面。
然后给原来的<ul>添加一个<li>显示"loading..."如下
这样在JS载入前显示“loading...”，载入后替换为twitter列表，不影响页面载入速度。同时又符合了W3C标准，两全齐美了。
相关日志
Tags : twitter
我发现STheme...
我的英文博客：http://nba-2k.com/ 目前也在用， 考虑要换个主题了
2009-05-23 14:14 | #1我必须弯腰谢谢你!!
2009-05-24 23:57 | #2有没有办法令到这个官方的插件有诸如“不刷新翻页”的效果？
2009-08-01 17:14 | #3那得用到ajax，我还不会~
2009-08-01 19:21 | #4我正试图将Twitter换成不用翻墙的huotu.com 请问如何修改该代码才能避免先加载huotu更新 后加载bolg首页？（中间总是有1秒的延迟才能显示首页）
2009-08-31 19:51 | #5演示见我的blog
@卫星 , 如果是JS的跟TWITTER这个一样把JS放到页脚就行了。如果只有一行JS我也没办法了
2009-08-31 20:54 | #6@Sivan , 实话我是不太会放，我是直接覆盖里你的那最新5篇文章代码，推特的代码未修改。代码如下
正在加载嘀咕...
wudiShow.setUrl("http://www.huotu.com/");wudiShow.setSiteName("火兔");
2009-09-01 02:26 | #7正在加载嘀咕...
wudiShow.setUrl("http://www.huotu.com/");wudiShow.setSiteName("火兔");
2009-09-01 02:29 | #8@卫星 , 我看了下那个代码。你把wudishow生成的代码第一个div正在加载的保留，然后把后面所有的script代码都放到footer里应该就行了。
2009-09-01 04:19 | #9非常感谢，已经搞定。
2009-09-01 10:57 | #10Sivan这咋不显示源代码了。。？直接把效果显示给显出来了
2009-12-28 16:33 | #11我这就改~
2009-12-28 16:59 | #12