【高性能JavaScript】读书笔记 - 引入脚本（三） - 03

最新推荐文章于 2024-04-24 09:22:16 发布

一点编程

最新推荐文章于 2024-04-24 09:22:16 发布

阅读量332

点赞数

分类专栏：高性能javascript 文章标签： javascript 读书笔记高性能脚本

本文链接：https://blog.csdn.net/jasonapoint/article/details/62057663

版权

高性能javascript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

【简介】XHR异步请求JS脚本，再注入页面，只要在不产生跨域的情况下，也是个不错的选择。而推荐的无阻塞模式是先添加动态加载所需要的代码，然后加载或通过动态脚本或通过XHR，实现异步请求脚本。

1. XMLHttpRequest脚本注入(XMLHttpRequest Script Injection)

第二种无阻塞加载脚本是通过XHR对象做脚本文件的异步请求，将请求到的脚本注入到页面中。

<script type="text/javascript">
    var xhr = new XMLHttpRequest();
    xhr.open("get", "package.js", true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
            // xhr.status校验HTTP状态码是否有效
            // (2XX表示有效响应，304表示从缓存读取)
            if (xhr.status >= 200 && xhr.status <= 300 || xhr.status == 304) {
                var script = document.createElement("script");
                script.type = "text/javascript";
                script.src = "package.js";
                script.text = xhr.responseText;

                document.body.appendChild(script);

            }
        }
    }
    xhr.send(null);
</script>

通过发送一个GET请求，获取package.js文件，XHR对象请求到的脚本数据放在responseText中，然后通过DOM操作，将请求到的脚本数据放到script标签中。实际上，这一过程相当于创建一个内联脚本添加到了body标签的尾部。

<body>
//代码....
<script type="text/javascript" src="package.js">function packageFun() {
    alert("成功加载");
}</script>
</body>

这种方法的主要优点在于可以异步下载JavaScript代码，但不在下载完后立即执行，而是可以把脚本的执行推迟到需要使用的时候。它的局限性在于XHR不能做跨域请求(协议、域名或ip、端口中有任何一个不同，即为跨域)，所以不能从CDN上下载JavaScript文件。

2. 推荐的无阻塞模式(Recommended Nonblocking Pattern)

先添加动态加载所需要的代码(在这个例子中，这段代码就是一个loadScript函数)，然后加载初始化页面所需的剩下的代码。

// 先加载后面动态加载所需要的代码
function loadScript(url, callback){
    var script = document.createElement('script');
    script.type = "text/javascript";

    if (script.readyState) {
        // 判断是IE浏览器
        alert("IE浏览器");     
        script.onreadystatechange = function(){
            if (script.readyState == "loaded" || script.readyState == "complete") {
                script.onreadystatechange = null;
                callback();
            }
        }
    } else {
        // 判断是其他浏览器
        alert("其他浏览器");
        script.onload = function() {
            callback();
        }
    }

    script.src = url;
    document.getElementsByTagName('head')[0].appendChild(script);
}

// 再加载剩余的代码
loadScript("the-rest.js", function(){
    // Application.init()在the-rest.js中
    Application.init();
});

小结：
1. 将脚本放在页面底部，确保脚本执行前，页面已经渲染完成。
2. 合并脚本，减少script标签的数量和HTTP请求。
3. 对于需要先引入后执行的脚本，采用异步的无阻塞加载方式加载外链js脚本，引入后再执行后面程序。

附：欢迎大家关注我的新浪微博 - 一点编程，了解最新动态。

一点编程

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【高性能JavaScript】读书笔记 - 引入脚本（三） - 03

【简介】XHR异步请求JS脚本，再注入页面，只要在不产生跨域的情况下，也是个不错的选择。而推荐的无阻塞模式是先添加动态加载所需要的代码，然后加载或通过动态脚本或通过XHR，实现异步请求脚本。
复制链接

扫一扫