使用 Google 工具栏追踪 Blog 留言April 24, 2008

每个开 Blog 的兄弟都会时刻关注 Blog 上的留言，上次已经说道如何使用 Gtalk 追踪网站的留言。

在使用 Google 工具条时发现其实 Google 工具条本身也开放了 API 供用户调用。第一步要做的就是将用户留言做成 RSS 格式的输出（其实也就是 XML 格式，Wordpress 已经有这样的功能了）。

然后我们再写个针对 Google 工具条的 XML 文件即可。格式如下

<?xml version="1.0" encoding="utf-8"?>
<custombuttons xmlns="http://toolbar.google.com/custombuttons/">
    <button>
       <site>在这里设置点击按钮以后进入的网址</site>
       <title>我是按钮的标题</title>
       <description>我是按钮的描述</description>
       <feed refresh-interval="1800">RSS 地址</feed>
       <icon mode="base64" type="image/x-icon">
           base64 以后的 ico 文件内容
       </icon>
    </button>
</custombuttons>

具体的例子可以参看这里，其中 title 与 description 不言而喻，是标题以及描述，最为重要的是 feed 标签。feed 的值就是任何的 RSS 链接，针对本文就是其留言的 RSS 地址。refresh-interval 属性是刷新的间隔时间，单位是秒。

然后我们可以根据 Google 工具栏提供的链接将我们已经做好的 XML 格式的按钮添加到 Google 工具条中。格式为

http://toolbar.google.com/buttons/add?url=<XML 文件 URL 地址>

访问这个生成的链接就可以加入到 Google 工具条了，效果如图上所示。比如

点击这里将 Gracecode.com 的文章加入 Google 工具条

最后，有关多的信息，可以参看 Google 工具条的中文 API 文档。

跨域 Ajax 调用总结April 8, 2008

上次提到过跨域 Ajax 的调用问题，这次做个总结。众所周知，Javascript 有“同源策略”的限制。但有时候偏偏又要碰到 Ajax 跨域调用的问题，这个时候就需要些“特殊”的方法使脚本正常使用。

总结下目前所能想到的一些策略，具体的可以查看 Yahoo 开发中心的相关文档。

使用 iframe

具体详情，可以参看这里。

实现的原理就是 iframe 与 父页面 进行 Javascript 通信。完全跨域操作没有测试过，但跨子域名是完全可行的。

优势（部分）

• 全部使用 Javascript 搞定
• 简单，不用学习其他语言

缺点（部分）

• 破坏 HTML 结构
• 客户端的资源占用比较大

服务器端脚本

架构可以先“盗用” Yahoo 文中的那张插图。大家也许想到变通的办法了，就是在服务器端编写类似网关的脚本。

比如获取另外个域下的 Json 输出，用 PHP 编写的部分代码如下

header('Content-type: text/javascript');
$url = 'http://x.other.net/json';
if ($content  = file_get_contents($url)) {
    echo $url;
}

很简单的代码，但对于服务器端而言，没有任何的限制。进一步的扩展，可以使用 CURL 库。

优势（部分）

• 使用没有任何限制
• 对 Javascript 透明

缺点（部分）

• 必须支持服务器端
• Javascript 程序员必须了解服务器端语言
• 服务器端脚本必须与页面在同个域内
• 可能会加重服务器负载

由于相对比较熟悉 PHP 语言，加上后者对于客户端友好，所以在条件允许的情况下，个人还是比较偏向后者。

创建高性能的 Web 页面March 26, 2008

首先，感谢 圆心 和 小马 主持这次的技术交流会。此次关注的是 客户端的效率问题 ，根据 Yahoo 的总结，可以总结下面 14 条“军规”。

1. 尽可能的减少 HTTP 的请求数 [content]
2. 使用 CDN（Content Delivery Network） [server]
3. 添加 Expires 头（或者 Cache-control） [server]
4. Gzip 组件 [server]
5. 将 CSS 样式放在页面的上方 [css]
6. 将脚本移动到底部（包括内联的）[javascript]
7. 避免使用 CSS 中的 Expressions [css]
8. 将 JavaScript 和 CSS 独立成外部文件 [javascript] [css]
9. 减少 DNS 查询 [content]
10. 压缩 JavaScript 和 CSS （包括内联的）[javascript] [css]
11. 避免重定向 [server]
12. 移除重复的脚本 [javascript]
13. 配置实体标签（ETags）[css]
14. 使 Ajax 缓存 [content]

根据，PPT 的内容所示，我使用 Yslow 检查了下本人的主页，才得了个“F 47”（坦白说，与我本人估计的非常有出入）。

主要的问题就是没有开启 Gzip 压缩，以及没有设置 HTTP 头缓存。看来折腾了那么久，除了服务器端的性能，客户端的缓存还是不能忽视的。

想想看，如果淘宝首页没有缓存，即便是多了 1KB 的页面容量，乘以每天上亿的 PV，这个数字将是多么的庞大。

最后，提供本次的交流会的 PPT 下载，再次感谢他们。

有关更多的信息，可以访问 圆心 同志的 Blog，他上面有更详实的内容。