喜悦

除了 defer 属性，script 还新增了一个 async 属性，请看 MDC：

async Requires Gecko 1.9.2
This Boolean attribute is set to indicate that the browser should, if possible, execute the script asynchronously. If the script cannot be executed asynchronously, or the browser doesn’t support this attribute, the script is executed synchronously (and loading the content blocks until the script finishes running).

理想情况下，利用 async 属性，脚本异步加载将变得非常简单：
async-test.js:

var g = 1;

async-test-1.html:

<script src="async-test.js" async="true"></script>
<script>
    alert(typeof g); // Firefox 3.6 弹出 undefined
</script>

测试页面：async-test-1.html
目前只有 Firefox 3.6 支持 async 属性，希望其它浏览器能迅速跟进。

悲哀

Firefox 3.6 的尝试和探索精神令人钦佩。但是，在引入这个新特性时，也导致了传统异步加载方式的失效：

<script>
    (function(d) {
        var a = d.createElement('script');
        a.src = 'async-test.js';
        d.getElementsByTagName('head')[0].appendChild(a);
    })(document);
</script>
<script>
    alert(typeof g); // 预期结果是 undefined, Firefox 3.6 弹出 number
</script>

测试页面：async-test-2.html
真糟糕！类似问题，还有 Steve Souders 前不久发现的 document.write 在 Firefox 3.6 下的阻塞行为。

分析

用 Firebug 可以看到，在 Firefox 3.6 中，script 元素 async 属性的默认值是 false. 换言之，script 元素默认是同步加载的。可以推测，Firefox 3.6 在增加 async 这个属性时，很可能忽略了用 createElement(‘script’) 和 document.write(‘<script…’) 等方式创建的 script 元素，async 的属性值应该从默认值 false 调整为 true. 正是这个疏忽，导致了传统加载异步脚本的方式在 Firefox 3.6 中失效。对于 YUI3 和很多站点来说，这实在是太糟糕了。

知道了问题本因，可以得到目前异步加载脚本最安全的方式如下：

<script>
    (function(d) {
        var a = d.createElement('script');
        a.async = true;
        a.src = 'async-test.js';
        d.getElementsByTagName('head')[0].appendChild(a);
    })(document);
</script>

测试页面：async-test-3.html

注意1：所有测试结果，均在无缓存的情况下得出。
注意2：async-test-2.html 和 async-test-3.html 在 Opera 10.10 中弹出值非预期，原因未深究，有兴趣者可以进一步挖掘。

感慨

Google 在 ga 的部署脚本 中已经使用上了 async 属性：

<script type="text/javascript">
    (function() {
      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
      (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga);
    })();
  </script>

最后

再考大家一题，在 Firefox 3.6 下，下面的代码，alert 出什么：

<script src="async-test.js" async="false"></script>
<script>
    alert(typeof g); // ?
</script>

解决办法很简单，到镜像列表页面 http://www.mozilla.org/mirrors.html 找一个可以访问的服务器，ping出ip后，在hosts里绑定到releases.mozilla.org. 比如我的：

# mozilla update
204.152.184.113    releases.mozilla.org

推荐使用Primary Mirrors, 稳定可靠。

从非常简单的一个例子开始：

f();
function f() { alert('test'); }

上面的代码所有浏览器都能正确执行，原因是“预解析”（如果不了解，请阅读 JavaScript运行机制浅探）。

稍微变化一下：

f();
var a = function f() { alert('test'); };

上面的代码在IE下能正确执行，在其它浏览器下，提示f未定义。原因是：函数表达式和函数声明是不同的语法结构，非IE浏览器只会预解析函数声明，IE却会连函数表达式也一块预解析了。

Firefox的诡异现象

休息下，看个谁都知道答案的：

var test = 'right';
function f() { alert(test); };
f(); // => 'right'

休息完毕，来点花样：

Object.prototype.test = 'wrong';
var test = 'right';
(function f() {
    alert(test);
})();

Firefox的结果是’wrong’, 其它浏览器都是’right’. 诡异的Firefox, 这究竟是为什么呢？

将代码稍微修改下：

Object.prototype.test = 'wrong';
var test = 'right';
(function f() {
    alert(test);
    alert(window.test);
    alert(f.test);
})();

可以看出，在Firefox下，function f() { ... }中的test等于f.test. 更进一步可以发现，Firefox下，f.test == f.__proto__.test, 因此值为wrong.

再做一些改变：

Object.prototype.test = 'wrong';
var test = 'right';
(function() {
    alert(test);
})();

变成匿名函数后，所有浏览器都弹出’right’了。

更诡异的是，将第一行去掉：

var test = 'right';
(function f() {
    alert(test);
})();

具名函数，在Firefox下，也能正确输出’right’了。

问题似乎可以简单总结为：Firefox下，Object.prototype.test会影响具名函数内部的test变量。

想弄明白为什么

对于函数声明，我们都很清楚：

function functionName(args) {
    // body
}

除了上面这种语法格式，其它写法中出现的function，都是函数表达式：

(function() {
    alert('haha');
})();

(function xx() {
    alert('haha');
})();

void function() {
    alert('haha');
}();

!function() {
    alert('haha');
}();

无论是括号()（强制运算符），还是void，甚至!等运算符，都将function变成了语法结构中的函数表达式，在运行期才会解析（IE除外）。

回到Firefox下具名函数表达式变量的解析问题：

Object.prototype.test = 'wrong';
(function () {
    alert({}.test);
    alert(window.test);
})();

事情越来越诡异，IE下，window.test居然等于undefined.

再看一个越发让人发昏的例子：

alert(window instanceof Object);

Firefox和IE下，为false. Chrome, Safari, Opera为true.

也就是说，Firefox和IE下的window对象并没有继承自Object, 其内部有更复杂的处理机制（期待源码级揭秘），这导致了以上各种诡异问题。

并非所有问题都需要探根究底

总结下上文中提及的所有诡异问题：

1. IE对函数表达式也做预解析的bug:

f();
(function f() { alert('test') })();

2. IE的window.test, 不会追溯到Object.prototype.test:

Object.prototype.test = 'test';
alert(window.test);

3. Firefox的window.test, 在具名函数表达式中，某些写法下，读取时会出错：

Object.prototype.test = 'test';
var test = 'test2';
(function f() {
    alert(test);
})();

最后两个问题的原因是：Firefox和IE下的window对象没有直接继承自Object, 其内部有更复杂的处理机制。

和很多CSS bugs一样，以上问题并不一定都值得我们花费大量时间去探根究底。我们只要记住现象，知道如何避免，就足够了。对《Explorer 6 Duplicate Characters Bug》一文的最后一句话记忆犹新：

The effects can get even weirder but there’s no need to become obsessed, so we’ll quietly close the door on this crazy bug.

良好的编码习惯

避免以上各种诡异bugs最有效的良药是：养成良好的编码习惯。比如：

• 尽量少用全局变量。
• 不要在函数表达式中使用具名函数。

做到以上两条，本文出现的诡异问题，就都可以避免出现。

HTML Validator

http://users.skynet.be/mgueury/mozilla/

很喜欢这个扩展的Tidy算法模式，可以检查出HTML页面中绝大部分嵌套和书写错误，并且针对每个错误都有详细的说明和推荐写法。当然，很多时候，我们不大可能去纠正所有错误和警告。一个常用的小技巧是：将可以容忍的错误添加到Hidden列表中。这样，只要看看右下角的状态信息，就知道页面中是否还有错误了。

Launchy

https://addons.mozilla.org/en-US/firefox/addon/81

这个扩展相见恨晚，一见就再也离不开了。如上图所示，能很方便的让我们在不同浏览器中加载测试页面，还可以配置编辑器。注意的是：默认情况下，Launchy会自动探测浏览器和编辑器，我的习惯是将自动探测关闭，按照选项里的说明，在chrome目录下通过launchy.xml手动指定菜单项。这是我的配置文件：Firefoxprofilechromelaunchy.xml. 目前IETester只能打开，不知道怎么传送参数过去，还希望知道的指点一下。（IETester 0.3已经支持Command line arguments）

Fiddler Switch

https://addons.mozilla.org/en-US/firefox/addon/9373

在前端开发界，有这么一个说法：Firefox + Firebug + Fiddler，称之为 3F，拯救了前端的工作。Fiddler是个伟大的工具，默认在IE上工作得挺好，但在Firefox上需要设置代理，有点麻烦，Fiddler Switch就是Taobao UED空帷达人为了解决此问题而开发的。如果你还没用过Fiddler，推荐阅读下这篇文章：如何直接调试线上页面的JavaScript和CSS。

Johnny Cache

https://addons.mozilla.org/en-US/firefox/addon/3817

是否厌倦了 Ctrl + F5? 是否有时忘了切换 Web Developer Toolbar 禁用的Cache，而导致上网很慢？Johnny Cache让你一次配置，永久解决烦恼。我很喜欢这种谦虚却非常实用的扩展。

Firefox DNS Flusher

https://addons.mozilla.org/en-US/firefox/addon/7408

这也是一款非常谦虚但绝对实用的扩展。开发测试时，经常要修改hosts文件。但默认情况下，Firefox会缓存DNS，修改hosts文件后，有时得重启Firefox才能生效，这是很让人恼火的。装了这个扩展，就再也不用等待漫长的重启了。同时，还拥有了一个附加功能：直接查看域名的ip.

MeasureIt

https://addons.mozilla.org/en-US/firefox/addon/539

根据mockup制作精确的demo是前端工程师们的日常工作，通常的做法是在Photoshop或其它图像处理软件中测量，但来回切换窗口是有点影响效率的。MeasureIt能让你直接在页面中的测量，方便快捷。

我的Firefox上，除了Firebug, 开发用的扩展就上面这些了。除了MeasureIt用的频率不是很多，其它扩展几乎天天都用。感谢这些扩展，让我有更多的时间好好生活。

<input name="submitBtn" autocomplete="off" type="submit" value="提交" />

这样，后退或刷新页面时，Firefox就不会自动记忆表单状态了。

演示页面：firefox_autocomplete_test.php

详细资料：How to Turn Off Form Autocompletion