高性能JS 非阻塞方式下载 JavaScript 用 XHR 对象下载代码，并注入到页面中

XMLHttpRequest Script Injection XHR

另一个以非阻塞方式获得脚本的方法是使用 XMLHttpRequest(XHR)对象将脚本注入到页面中。此技术

首先创建一个 XHR 对象，然后下载 JavaScript 文件，接着用一个动态<script>元素将 JavaScript 代码注入页

面。下面是一个简单的例子：

var xhr = new XMLHttpRequest();

xhr.open("get", "file1.js", true);

xhr.onreadystatechange = function(){

if (xhr.readyState == 4){

if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){

var script = document.createElement ("script");

script.type = "text/javascript";

script.text = xhr.responseText;

document.body.appendChild(script);

}

}

};

xhr.send(null);

此代码向服务器发送一个获取 file1.js 文件的 GET 请求。onreadystatechange 事件处理函数检查 readyState

是不是 4，然后检查 HTTP 状态码是不是有效（2XX 表示有效的回应，304 表示一个缓存响应）。如果收

到了一个有效的响应，那么就创建一个新的<script>元素，将它的文本属性设置为从服务器接收到的

responseText 字符串。这样做实际上会创建一个带有内联代码的<script>元素。一旦新<script>元素被添加到

文档，代码将被执行，并准备使用。

这种方法的主要优点是，你可以下载不立即执行的 JavaScript 代码。由于代码返回在<script>标签之外（换

句话说不受<script>标签约束），它下载后不会自动执行，这使得你可以推迟执行，直到一切都准备好了。

另一个优点是，同样的代码在所有现代浏览器中都不会引发异常。

此方法最主要的限制是：JavaScript 文件必须与页面放置在同一个域内，不能从 CDNs 下载（CDN 指“内

容投递网络（Content Delivery Network）”，前面 002 篇《成组脚本》一节提到）。正因为这个原因，大型

网页通常不采用 XHR 脚本注入技术。 

引用自高性能JS