BlogJava-emu in blogjava

[翻译]加速Javascript：DOM操作优化

emu — Mon, 01 Mar 2010 09:20:00 GMT

原文：《Speeding up JavaScript: Working with the DOM》

作者： KeeKim Heng, Google Web Developer

在我们开发互联网富应用（RIA）时，我们经常写一些javascript脚本来修改或者增加页面元素，这些工作最终是DOM——或者说文档对象模型——来完成的，而我们的实现方式会影响到应用的响应速度。

DOM操作会导致浏览器重解析(reflow)，这是浏览器的一个决定页面元素如何展现的计算过程。直接修改DOM，修改元素的CSS样式，修改浏览器的窗口大小，都会触发重解析。读取元素的布局属性比如offsetHeithe或者offsetWidth也会触发重解析。重解析需要花费计算时间，因此重解析触发的越少，应用就会越快。

DOM操作通常要不就是修改已经存在的页面上的元素，要不就是创建新的页面元素。下面的4种优化方案覆盖了修改和创建DOM节点两种方式，帮助你减少触发浏览器重解析的次数。

方案一：通过CSS类名切换来修改DOM

这个方案让我们可以一次性修改一个元素和它的子元素的多个样式属性而只触发一次重解析。

需求：

（emu注：原文作者写到这里的时候脑子显然短路了一下，把后面的Out-of-the-flow DOM Manipulation模式要解决的问题给摆到这里来了，不过从示范代码中很容易明白作者真正想描述的问题，因此emu就不照翻原文了）

我们现在需要写一个函数来修改一个超链接的几个样式规则。要实现很简单，把这几个规则对应的属性逐一改了就好了。但是带来的问题是，每修改一个样式属性，都会导致一次页面的重解析。

function selectAnchor(element) {
  element.style.fontWeight = 'bold';
  element.style.textDecoration = 'none';
  element.style.color = '#000';
}

解决方案

要解决这个问题，我们可以先创建一个样式名，并且把要修改的样式规则都放到这个类名上，然后我们给超链接添加上这个新类名，就可以实现添加几个样式规则而只触发一次重解析了。这个模式还有个好处是也实现了表现和逻辑相分离。

.selectedAnchor {
  font-weight: bold;
  text-decoration: none;
  color: #000;
}

function selectAnchor(element) {
  element.className = 'selectedAnchor';
}

方案二：在非渲染区修改DOM

（emu注：作者在这里再次脑子短路，把DocumentFragment DOM Generation模式的介绍提前到这里来了，emu只好再次发挥一下）
上一个方案解决的是修改一个超链接的问题，当一次需要对很多个超链接进行相同修改的时候，这个方案就可以大显身手了。

需求

需求是这样的，我们要写一个函数来修改一个指定元素的子元素中所有的超链接的样式名（className）属性。要实现很简单，我们可以通过遍历每个超链接并且修改它们的样式名来完成任务。但是带来的问题就是，每修改一个超链接都会导致一次重解析。

function updateAllAnchors(element, anchorClass) {
  var anchors = element.getElementsByTagName('a');
  for (var i = 0, length = anchors.length; i < length; i ++) {
    anchors[i].className = anchorClass;
  }
}

解决方案

要解决这个问题，我们可以把被修改的指定元素从DOM里面移除，再修改所有的超链接，然后在把这个元素插入回到它原来的位置上。为了完成这个复杂的操作，我们可以先写一个可重用的函数，它不但移除了这个DOM节点，还返回了一个把元素插回到原来的位置的函数。

/**
* Remove an element and provide a function that inserts it into its original position
* @param element {Element} The element to be temporarily removed
* @return {Function} A function that inserts the element into its original position
**/
function removeToInsertLater(element) {
  var parentNode = element.parentNode;
  var nextSibling = element.nextSibling;
  parentNode.removeChild(element);
  return function() {
    if (nextSibling) {
      parentNode.insertBefore(element, nextSibling);
    } else {
      parentNode.appendChild(element);
    }
  };
}

有了上面这个函数，现在我们就可以在一个不需要解析渲染的元素上面修改那些超链接了。这样只在移除和插入元素的时候各触发一次重解析。

function updateAllAnchors(element, anchorClass) {
  var insertFunction = removeToInsertLater(element);
  var anchors = element.getElementsByTagName('a');
  for (var i = 0, length = anchors.length; i < length; i ++) {
    anchors[i].className = anchorClass;
  }
  insertFunction();
}

方案三：一次性的DOM元素生成

这个方案让我们创建一个元素的过程只触发一次重解析。在创建完元素以后，先进行所有需要的修改，最后才把它插入到DOM里面去就可以了

需求

需求是这样的，实现一个函数，往一个指定的父元素上插入一个超链接元素。这个函数要同时可以设置这个超链接的显示文字和样式类。我们可以这样做：创建元素，插入到DOM里面，然后设置相应的属性。这就要触发3次重解析。

function addAnchor(parentElement, anchorText, anchorClass) {
  var element = document.createElement('a');
  parentElement.appendChild(element);
  element.innerHTML = anchorText;
  element.className = anchorClass;
}

解决方案

很简单，我们只要把插入元素这个操作放到最后做，就可以只进行一次重解析了。

function addAnchor(parentElement, anchorText, anchorClass) {
  var element = document.createElement('a');
  element.innerHTML = anchorText;
  element.className = anchorClass;
  parentElement.appendChild(element);
}

不过，要是我们想要插入很多个超链接到一个元素里面的话，那么这个做法还是有问题：每插入一个超链接还是要触发一次重解析。下一个方案可以解决这个问题。

方案四：通过文档片段对象（DocumentFragment）创建一组元素

这个方案允许我们创建并插入很多个元素而只触发一次重解析。要实现这点需要用到所谓的文档片段对象（DocumentFragment）。我们先在DOM之外创建一个文档片段对象（这样它也就不需要解析和渲染），然后我们在文档片段对象中创建很多个元素，最后我们把这个文档片段对象中所有的元素一次性放到DOM里面去，只触发一次重解析。

需求

我们要写一个函数，往一个指定的元素上面增加10个超链接。如果我们简单的直接插入10个超链接到元素上面，就会触发10次重解析。

function addAnchors(element) {
  var anchor;
  for (var i = 0; i < 10; i ++) {
    anchor = document.createElement('a');
    anchor.innerHTML = 'test';
    element.appendChild(anchor);
  }
}

解决方案

要解决这个问题，我们要先创建一个文档片段对象，然后把每个新创建的超链接都插入到它里面去。当我们把文档片段对象用appendChild命令插入到指定的节点时，这个文档片段对象的所有子节点就一起被插入到指定的元素里面，而且只需要触发一次重解析。

function addAnchors(element) {
  var anchor, fragment = document.createDocumentFragment();
  for (var i = 0; i < 10; i ++) {
    anchor = document.createElement('a');
    anchor.innerHTML = 'test';
    fragment.appendChild(anchor);
  }
  element.appendChild(fragment);
}

注意：如无特别声明，本文中引用的所有程序均不是Google开发，也与Google没有其他什么关系。这些程序引发的责任均由其开发者或者所有者自己承担，与google无关。

emu 2010-03-01 17:20 发表评论

[翻译] 压缩，让网络更快

emu — Thu, 18 Feb 2010 09:00:00 GMT

摘要: 互联网上，每天有超过99人年浪费在下载未经压缩的内容上面。虽然支持压缩已经是每个现代的浏览器的标准功能了，但是它们的使用者们往往还是由于这样那样的原因不能下载到压缩的数据。这样就造成了带宽浪费并且拖慢了用户和网页的交互。阅读全文

emu 2010-02-18 17:00 发表评论

谷歌的在线翻译API很好用哈哈

emu — Mon, 15 Feb 2010 15:50:00 GMT

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google AJAX Language API - Basic Translationtitle>
    <script type="text/javascript" src="http://www.google.com/jsapi">script>
    <script type="text/javascript">

    google.load("language", "1");

    function initialize() {
      google.language.translate("Happy new year!", "en", "zh-CN", function(result) {
        if (!result.error) {
          var container = document.getElementById("translation");
          container.innerHTML = result.translation;
        }
      });
    }
    google.setOnLoadCallback(initialize);

    script>
  head>
  <body>
    <div id="translation">div>
  body>
html>

emu 2010-02-15 23:50 发表评论

关于firefox下setTimeout的诡异函数

emu — Tue, 19 Jan 2010 11:51:00 GMT

舜子老早就反应过这个问题了，当时也没有留心去好奇一下。今天jayyang有再提起，上mozilla查了一下，原来有文档说明的：
Lateness" argument

Functions invoked by setTimeout are passed an extra "lateness" argument in Mozilla, i.e., the lateness of the timeout in milliseconds.

写个小脚本测试了一下，果然不错

var delay=3000
if(/firefox/i.test(navigator.userAgent)){
    setTimeout(test,delay)
    alert("试试等一会再确认")
}else{
    alert("只有 firefox 浏览器支持 Lateness 参数！")
}
function test(){
    var t=arguments[arguments.length-1]
    alert("你点alert之前犹豫了"+(t<2?"不到"+delay:delay+t)+"毫秒")
}

emu 2010-01-19 19:51 发表评论

flash player往页面注入的脚本表现了adobe的临时工水平

emu — Sat, 16 Jan 2010 05:09:00 GMT

啥都甭说了，看看上面这几个“+=”，已经把啥都说了。刚看到youyee同学定位到一个严重性能瓶颈并表情上面把这段flash往页面里面注入的代码贴出来的时候，emu简直无法相信。
还好大家都是干这行的，在flash注入完上述脚本后再覆盖（一开始误为重载了，感谢jee等同学的）掉这几个函数并不为难，最多就是为之难受罢了。

emu 2010-01-16 13:09 发表评论

IE8下对cookie的限制。

emu — Thu, 29 Oct 2009 10:50:00 GMT

emu测试了一下IE8，发现cookie的限制似乎比以前宽松多了。具体限制是：
* 每个域名下允许50个cookie，超过了覆盖最早写入的cookie（或者说队列式管理，超过了第一个出队）
* 同一个页面（和从这个页面发出的请求）子域、父域和根域各自有自己的50个cookie。
* 单个cookie的总长度：cookieName+cookieValue+附加信息（包括等号，空格，分号，domain，expires，path之类的）不能超过5k（最多5119bytes）
* 同一个页面（和从这个页面发出的请求）子域、父域和根域的全部cookie的内容长度（cookieName+cookieValue+等号，空格，分号）不能超过10k，否则全部变成httponly，无法用脚本访问

* 同一个页面（和从这个页面发出的请求）子域、父域和根域的全部cookie的内容长度（cookieName+cookieValue+等号，空格，分号）不能超过50k。

总而言之，cookie不是用来存数据的，能不用就别用。

边做测试边些博客的后果是，由于不停的清空cookie把博客的登陆态清掉了，差点文章提交失败重新写呵呵

emu 2009-10-29 18:50 发表评论

CSDN sd2.0大会，与csdn社区网友合影

emu — Sat, 24 Oct 2009 08:05:00 GMT

emu 2009-10-24 16:05 发表评论

白突发了回奇想

emu — Wed, 26 Aug 2009 11:27:00 GMT

一向用脚本冲掉浏览器缓存文件都是通过XHR做一个no-cache的请求来实现的，但是一些早期的XHR并不稳定，用来请求非文本资源的时候有可能会导致浏览器崩溃。
有一天突发奇想，用表单想指定的资源发起一个post请求会如何呢？众所周知post请求到的数据是不能cache的，那么如果这个请求指向指定的URL，该URL的cache是否也就应该跟着失效呢？
说干就干，用 fiddler+IE/Firefox 模拟了一下整个过程，结果是令人失望的，post请求到的数据固然不会进入cache，也不会把相同URL的cache资源给冲掉。重新打开页面的时候，还是显示post以前cache住的那份资源。
看来还是只好冒死用XHR去清cache了。

emu 2009-08-26 19:27 发表评论

IE8里，“about：”又回来了

emu — Fri, 22 May 2009 04:32:00 GMT

还记得IE6.0.2600以前的美好日子吗？那时我们多喜欢搞这种代码来节省一个http请求啊：

当然还有这样的

showModalDialog("about:hello")

在IE6.0.2600以后，大家就只好转向更兼容的写法了：

今天偶然发现，IE8正式版下面，久违的“about：”又可以显示和执行了呵呵。

emu 2009-05-22 12:32 发表评论

我现在在哪？

emu — Thu, 07 May 2009 02:38:00 GMT

google太猛了，可以把我现在的地理信息暴露无遗（不过当然是在我同意的前提下）

emu 2009-05-07 10:38 发表评论

Chrome浏览器第一次使用google gears组建的时候会有问题

emu — Tue, 13 Jan 2009 03:46:00 GMT

http://qzone.qq.com/blog/286013388-1231818216

使用谷歌浏览器(chrome)的时候，有的时候脚本程序会捕获到“Uncaught TypeError: Object # has no method 'create' ”这个错误，在chrome的用户论坛上也有人在问这个问题。

这个错误应该是由于最新版的谷歌浏览器没有自带完整的google gears组件导致的。看起来最新版的chrome浏览器会在用户第一次使用gears组件的时候自动下载和安装该组件，而在安装成功以前我们虽然可以成功创建 application/x-googlegears 对象，却无法调用它的create方法创建任何有用的东西。

这个时候其实没有太多的事情可以做，基本上我们我们只能检测这个对象的create接口是否存在，发现不存在的时候提示用户耐心等待，过一段时间后再刷新，或者下回再来看看，希望它已经自己安装好了。

emu 2009-01-13 11:46 发表评论

打开QQ空间速度飞快的方法

emu — Sun, 11 Jan 2009 13:07:00 GMT

打开QQ空间速度飞快的方法

假如你是中国电信adsl上网的用户，在windows平台下试用IE浏览器访问QQ空间，那么
首先呢，就是访问http://gears.google.com/ 先把google gears装上(最新是0.5版)。有一些同学访问不了gears主页或者由于某种原因安装不上google上的最新版gears，那么可以试试到
http://down1.tech.sina.com.cn/download/down_contents/1194710400/37265.shtml
上下载稍微旧一点的版本（0.4版）
网上还有更旧的版本，但是emu就没有实验过了。
然后呢，你就可以访问这个地址了：http://imgcache.qq.com/qzone/test/gears/gearsMng.html
对于网通宽带的朋友，就要访问这个：http://cnc.imgcache.qq.com/qzone/test/gears/gearsMng.html
而对于教育网的朋友，则要访问这个：http://edu.imgcache.qq.com/qzone/test/gears/gearsMng.html
点击“启用加速”，会有个gears提示，确认以后，等全部进度条走成绿色就好了，以后访问QQ空间的时候就会自动的变得飞快。

有几点小技巧：
* google gears不是很稳定，有的时候进度条走着走着就卡住不走了，这个时候可以多点几下“启用加速”就好了。如果还是不行，可能是网络原因，也没有关系，不管它就可以了，google gears会在网络好的时候自己把没下载完的文件给补上的。
* 如果不大确定你的上网环境（联通？有线宽屏？铁通？），或者笔记本经常抱来抱去上QQ空间，那么不妨把电信、网通和教育网三个页面都访问一遍，分别启用加速，这样不管在什么环境下都可以确定获得最好的效果。
* 如果你用的是FireFox浏览器，也可以依照上面的操作。
* 如果你用的是google的chrome浏览器，并且是1.0正式版以上的版本，那么它已经自带了一个比较稳定版本的gears，跳过安装gears这一步。但是chrome下面gears还是有时不十分稳定，虽然emu已经尽力做了兼容，在第一次使用的时候还是可能有点问题。
* 如果用的不是windows系统，那么gears还有MacOS下的版本，支持Safari(http://gears.google.com/?platform=mac-safari)和Firefox(http://gears.google.com/?platform=mac-firefox)和linux下的版本(http://gears.google.com/?platform=linux 支持Firefox)，恭喜恭喜。不过到底用起来怎么样，emu也没试过。
* 如果你用的居然是opera，就认命了吧。

emu 2009-01-11 21:07 发表评论

分域名优化的时候要考虑备选IP的问题

emu — Fri, 23 May 2008 03:36:00 GMT

我们在需要下载很多内容的时候，很容易想到做分域名的并发下载，给原来的服务器多分几个域名，因为分不同的域名可能可以在浏览器中分到更多的下载进程，提高下载速度。
但是在做网络应用的时候，我们的一个域名下面有的时候会有多个ip多台服务器，分布在不同的机房，这个时候浏览器会在可选的ip里面随机的选择一个ip。用nslookup可以看到可选的ip，用ping可以看到当前正在实用的ip。
在多个ip的情况下，对具体的一个用户，往往是连接到某些ip特别快，而连接到某些ip就不怎么块。比如我现在有一个域名（和它的几个分域名），在深圳访问的时候有2个ip可以分，其中一个是深圳本地的服务器，一个是外地的服务器。这个时候如果页面打开需要用到的关键资源依赖于这个域名，那么分域名有可能对速度不是提高而是有反作用。
因为这种情况下，慢的资源成为了瓶颈，变成是速度的决定因素。我本来有一半的机会是快的，一半的机会是慢的，如果现在分两个域名去下载关键资源，变成有1/4的机会是两个域名都分到深圳的服务器，可以有提高，而3/4的机会是有一个以上的域名分到外地的服务器，反而变慢了，这样提高的是少部分人的感受，而多数人的感受没有提升或者变的更差。如果简单的按照yahoo的优化建议分散到4个域名上，那么这个比例就变成1：15，更差了。
因此分域名下载不能简单的绝对化的看待，要看实际应用场景做决定。

emu 2008-05-23 11:36 发表评论

apache返回Request header field is missing ':' separator

emu — Fri, 09 May 2008 08:30:00 GMT

一段时间没有用这个apache，突然之间发现apache不返回东西了，抓包发现不管发什么请求，这个apache总是返回：
Request header field is missing ':' separator
重启apache，关掉重开，卸掉重装，折腾半天后还是选择google了，原来早有人郁闷过这个问题：http://www.apachelounge.com/forum/viewtopic.php?t=602

Just spent half of night googling.

The main reason that I switched to 2.2.x branch is mod_proxy errors like
"Request header field is missing ':' separator." when accessing sites localhost sites.
Somewhere I read that it might be fixed in 2.2, so that's why I'm here.

After 3 weeks building all neccessary modules putting and tuning all together I see the same error =/

Problem was in Nod32's IMON module. It for some reason duplicates request. I disabled it and all works fine again.
http://issues.apache.org/bugzilla/show_bug.cgi?id=34716

Posting it here to help other with issues like this.

一模一样的现象，一模一样的原因。把nod32的imon（也就是网络监控）禁用了就好了。

emu 2008-05-09 16:30 发表评论

facebook全面开放了web IM

emu — Thu, 24 Apr 2008 03:23:00 GMT

悄悄在几个network内试用了一段时间后，今天终于全员开放了。web IM最大的问题是不能P2P的传递消息，什么都要走服务器，一来一回比起直接点对点发送显然成本要高的多，尤其我们亚洲用户的数据都要走到米国的服务器上再走回来（我被连接到了69.63.176.174这台米国服务器）。facebook用了推模式尽量保证了消息的即时性，同时维持那么多http连接看来也是不小的技术挑战，不过目前看来表现还不错。
Facebook建议大家用IE7或者Firefox来试用聊天功能。在IE6下面会弹开一个新页面来聊天。在Firefox下面没有使用传说中的COMET技术，还是每次推消息后断开连接重新请求。

emu 2008-04-24 11:23 发表评论

百度不知道百度知道

emu — Wed, 23 Apr 2008 02:38:00 GMT

有朋友在问卡巴斯基报告一个“Trojan-Clicker.HTML.Agent.ad”的事情，说是百度搜不到，我google了一把：

嗯，google上有100多个搜索结果，而百度呢？

交白卷了。谁说搜中文内容百度更专业来着。更好笑的是在google的搜索结果的第二个就是百度知道上面的问题，试了下在百度知道里面搜：

百度知道里面有两个结果而百度居然不知道百度其实知道？其实问题在于百度的网页搜索引擎无法理解“Trojan-Clicker”中的这个横杠是个连接符而不是排除搜索内容的意思，把这个横杠去掉以后，百度还是可以搜出来6个结果的。

百度号称更懂中文，以前的理解是百度比其他搜索引擎更懂中文，现在才明白过来，百度更懂中文是相对于百度懂英文的程度来说的。

奇怪的是百度知道的搜索居然没有这个问题，难道用的是不同的搜索引擎？

emu 2008-04-23 10:38 发表评论

用shindig搭Opensocial容器

emu — Wed, 26 Mar 2008 09:41:00 GMT

shindig是google的一个opensocial容器的参考实现。google高调发布opensocial以后大家纷纷在宣布支持opensocial，可是真正要找个支持opensocial的容器一点也不容易，orkut的sandbox限制很多，myspace中国也只支持flash的方式，真正要玩opensocial，还是自己搭一个环境算了。

shindig现在还不能简单的安装运行（http://incubator.apache.org/shindig/#tab-download），要做一些手工活：
按照 http://incubator.apache.org/shindig/#tab-building 的指引，

下载安装JDK，设置好JAVA_HOME和PATH环境变量
下载安装subversion客户端（我用了TortoiseSVN）
下载解压Maven（在windows上用，我用了zip版本），一个类似ant的东东，用于编译shindig。设置好M2_HOME（指向Maven的解压目录），M2（指向bin子目录）和PATH环境变量（加进bin子目录的路径）。
新建shindig目录，用TortoiseSVN update下来shindig工程（http://svn.apache.org/repos/asf/incubator/shindig/trunk）
在shindig/java/gadgets目录下面运行mvn package编译。由于依赖的jar都要从网上下载，等了漫长的一个多小时，最后在shindig\java\gadgets\target目录下得到一个gadgets.war，大约2M左右大小。

拿到war就好办了，随便找一个web容器给它运行。首选的当然是开源、绿色、轻巧可爱的tomcat了。下载下来解压，运行startup.bat，就跑起来了。访问http://localhost:8080/看到欢迎页面，从Administration-->Tomcat Manager进入。衰，要登陆。在tomcat/conf下面找到tomcat-users.xml，加两行

重启tomcat，用tomcat/tomcat进入Administration-->Tomcat Manager
找到 WAR file to deploy-->Select WAR file to upload ，选中刚才编译好的gadgets.war上传。后在Applications列表中看到/gadgets就好了。

http://localhost:8080/gadgets下面没有默认页面，只能直接访问 samplecontainer 页面 http://localhost:8080/gadgets/files/samplecontainer/samplecontainer.html

第一个输入框是gadget的xml地址，也就是所谓的OpensocialAPP了。第二个输入框指向的xml里面描述了一些模拟的用户信息，主要提供了people、personAppData、activities这些基本的APP信息。

下面蓝色框是一个iframe，里面就是这个APP的展示区域了。

看来google现在还想让大家用iframe来作web application，失望一下。要是第三方可以像igoogle里面的gmail模块一样直接inline嵌入到页面中间就好了。iframe还是很多问题的，速度问题，页面负担，还有浏览器bug。

emu 2008-03-26 17:41 发表评论

为IE找个新死法

emu — Fri, 01 Feb 2008 07:43:00 GMT

IE在解释表达式的时候显然大有优化的余地，FireFox就没这个毛病。下面这段小代码可以轻松让IE崩溃掉：

var n=32768;
var s=new Array(n).join("0+")+0;
if(confirm("真的要杀了浏览器吗?")){
eval(s);
alert("杀不掉,试试把n调大一点?");
}

其实就是让IE解析一个“0+0+0+0....”的表达式。
在我的机器上，IE6跑到32255就自动关闭了（可以作为一个新的无提示关闭浏览器漏洞呵呵，会把同一个进程打开的全部窗口一起杀掉），IE7还要差些，在31515就挂了。opera也好不到哪里去，32180就崩溃了。而FireFox一直跑到2^27（ie和opera还不到2^15）的时候把我的内存全吃光了，在虚拟内存支持下还是可以执行完成：

var s="0+",n=27 ;
for(var i=0;i<n;i++) s+=s;
alert(s.length/2)
s+=0;
if(confirm("真的要杀了浏览器吗?")){
eval(s);
alert("杀不掉,试试把n调大一点?");
}

一直到2^28的时候，字符串构造失败了才罢休。

emu 2008-02-01 15:43 发表评论

在IE下面指定表单编码方式

emu — Thu, 31 Jan 2008 09:31:00 GMT

在跨业务、跨网站发送数据或者业务升级的时候，我们有的时候需要指定发送数据的编码方式，比如页面是utf-8编码的，而发送出去的数据却是GB2312编码的。在做Ajax开发的时候，我们往往都是用vbscript或者用查字典法来解决这个问题（http://www.blogjava.net/emu/articles/31756.html）。但是有些业务，也许并不需要做成Ajax这么复杂，用表单提交显得更加自然。

其实html里面form标签有个accept-charset属性，可以帮助我们解决这个问题，可惜的是傻乎乎的IE浏览器虽然认得accept-charset，却并不卖它的帐。IE的表单提交的时候使用什么编码是完全看页面的charset决定的。还好，IE在charset这个问题上一傻到底（见http://www.blogjava.net/emu/archive/2007/08/21/138247.html），糊弄它一下，它就乖乖听话了：

<HTML>
<HEAD>
    <meta http-equiv=content-type content="text/html; charset=UTF-8">
    <SCRIPT LANGUAGE="JavaScript">
        var isIE=!!window.ActiveXObject;
        if(isIE && document.charset!="utf-8")location.reload(false);
        if(location.search) alert("“我”字编码为:"+location.search.substr(6))
    SCRIPT>
    <TITLE>encode before form postTITLE>
    <META NAME="Author" CONTENT="emu">
HEAD>
<BODY>
    <form action="#" accept-charset="GB2312" onsubmit="if(isIE)document.charset='GB2312'">
        <input name="test" value="我" readonly>
        <input type=submit>
    form>
BODY>
HTML>

简单的讲，就是在表单发送前告诉IE说当前页面是GB2312编码就行了：

试试把xml和javascript写到同一个文件里面

emu — Fri, 18 Jan 2008 14:07:00 GMT

服务器现在同时输出json和xml两种数据，取决于服务程序和页面之间的约定。在程序遇到问题的时候会返回错误信息，也按照相同的约定会返回json或者xml格式的数据。比如当页面请求xml的时候服务会返回：

xml version="1.0" encoding="gb2312"?><error>出错了error>

而当页面请求的是json的时候服务器会返回

alert("出错了")

但是今天遇到的问题是，服务器本身出了问题，比如说遇到内部服务器错误或者资源不存在，又不想返回对解决问题帮助不大的500或者404响应，而想像上面一样返回一个一致性的带错误说明的200响应。由于无从得知现在应该返回xml还是json格式的出错信息。于是服务器就统一返回了一个xml格式的错误。但是页面这个时候是用script标签在请求一个json数据，接收到一个xml文件，直接就产生语法错误了。改成json的话，请求xml的地方也无法提供正确的错误提示。

这个时候我们需要的就是服务器返回一个同时符合javascript和xml语法的错误信息，或者说把xml和javascript的错误信息放到一起。

嗷嗷研究过把css和javascript放在一个文件里面，主要是为了可以较少一个http请求。把xml和javascript放在一起有一些不同。

最容易想到的是“结束。因此如果用这样一个符号开始一个文件，我们就可以通过控制它的结束位置来控制它在不同语法下面的意义。

error.xml

<error>出错了error>

注意，从xml的角度上来看，这个xml没有带

error.xml

<error>出错了error>

之所以刻意不带注释，但是FF就没有这样的灵活性了。

简单的在IE下面用两种语法处理这个文件的一个例子：

<HTML>
<HEAD>
<TITLE> test TITLE>
<META NAME="Author" CONTENT="emu">
HEAD>
<BODY>
<xml src="error.xml" id="err">xml>
<SCRIPT LANGUAGE="JavaScript" src="error.xml" charset="utf-8">SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
alert(err.getElementsByTagName("error")[0].xml)
SCRIPT>
BODY>
HTML>

emu 2008-01-18 22:07 发表评论

OpenSocial，想说爱你不容易

emu — Thu, 03 Jan 2008 10:11:00 GMT

OpenSocial的推出，让大家怀抱了多大的期望。Many sites, one API ，Server optional，将来我们的web application 就可以一次编写到处运行，英特网变成一个（也许几个）巨大的操作系统...google给我们描绘了一个多么美丽的乌托邦。包括Myspace在内的诸多SNS网站也都早早就宣布支持OpenSocial。可是两个月过去了，还是只看到orkut的一个半成品的sandbox，在emu的手里还从来没有顺顺当当跑起来过。Myspace.cn在千呼万唤之后终于丢出来一个开发者平台MDP，大家高兴了半天以为OpenSocial终于有一个实现平台了，可是打开一看：　　

        基于Myspace.cn开发者平台（MDP），您可以使所开发产品访问MySpace的用户及用户数据，这些产品将可以直接植入MySpace.cn页面，从而让更多的人有机会看到和使用您的产品，MDP可以让您：
                用Flash，或者在不久的将来用JavaScript和HTML来开发您的产品；
                自己在产品上发布广告，或由MySpace提供定向广告，投放在您的产品上；
                应用程序可以部署在您自己的服务器上或MySpace.cn的服务器上；
        MDP将支持Open Social规范，OpenSocial是一个令人耳目一新的新的社区产品开发标准，可以使用大家所熟悉的ActionScript，JavaScript, HTML等语言开发跨平台的社区产品。
　　
嗯，将支持js，将支持html，将支持Open Social规范，只要我们耐心等，牛奶会有的，面包会有的，一切都会有的。这帮子家伙就会忽悠，让人不禁要想，大家真的打算支持Open Social 吗？

emu 2008-01-03 18:11 发表评论

在eclipse下面跑jsunit

emu — Thu, 01 Nov 2007 04:13:00 GMT

写了几个简单的测试用例，在eclips下面绑定了TT，Firefox和safari跑一下，相当的舒服啊。

由于使用了本地文件系统访问，用IE的话会有权限警告，要多一个确认的交互才能允许，于是改用TT。
用FireFox最新的minefield版本和opera在访问本地文件系统的时候都有问题，要改用web访问方式才能通过：

minefield

opera：

下载jsunit的plugin，放到eclipse的plugins目录下面，然后在window/preferences下面配置jsunit的路径和测试用的浏览器就可以了

safari我使用的是Digidea的汉化版。safari似乎兼容性不好，标准的jsunit测试都有两个通不过，另有两个运行不起来。

emu 2007-11-01 12:13 发表评论

定位到了IE报告“存储空间不足，无法完成此操作”的原因。

emu — Fri, 24 Aug 2007 13:39:00 GMT

©emu

近期有大量的投诉是关于在脚本运行过程IE报告“存储空间不足，无法完成此操作”的。出现此问题的用户全部都无法访问IE的“帮助——关于”页面，报告相同的错误，因此可以定位为IE本身出了问题。

怀疑是某些软件修改了系统造成，但是也一直没有定位到是什么软件或者插件。由于问题无法在开发机上重现，定位了非常久，最后猜测是由于在模式对话框中访问navigator.userAgent造成。编写了如下页面：

<SCRIPT>
showModalDialog("javascript:'