挣脱浏览器的束缚（4） - 王道！动态添加script元素

挣脱浏览器的束缚（4） - 王道！动态添加script元素2010-07-26赵劼我们已经知道，脚本文件的并行下载能够提高页面的加载速度。但是目前还有一个急需解决的问题，那就是对于FireFox浏览器的优化。在我们之前使用的优化方法，无论是简单实用的document.write还是食之无味的defer属性，FireFox浏览器都对此置若罔闻。不过FireFox也不是绝对地“冥顽不灵”，开发人员还是有方法对它进行优化的。

这个方法就是动态添加script元素。

动态添加script元素

不知道“动态添加script元素”这个说法是否正确，我在这里的意思是使用JavaScript编程，向<head />里添加script元素。下面的代码动态添加了5个script元素：

动态添加script元素

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server" id="head">
  <title>Untitled Page</title>
  <script type="text/javascript" language="javascript">
    for （var i = 0; i < 5; i ++）
    {
      var script = document.createElement（"script"）;
      script.type = "text/javascript";
      script.src = "Script.ashx？a=" + i;
      document.getElementById（"head"）.appendChild（script）;
    }
  </script>

</head>
<body>
  ...
</body>
</html>

请注意，由于在JavaScript代码执行时页面还没有加载完毕，因此还不能使用document.getElementsByTagName方法来获得head元素，我们只能为head元素添加一个id，并使用document.getElementById方法来获得它。打开这张页面，就会发现，无论是IE（图9）还是FireFox（图10）的元素加载都会发现优化的效果：

图9：IE中动态加载script元素效果

图10：FireFox中动态加载script元素效果