异步加载JS几种方式

最新推荐文章于 2022-02-11 19:23:09 发布

weixin_30455067

最新推荐文章于 2022-02-11 19:23:09 发布

阅读量118

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/bbc66/p/9440894.html

默认情况javascript是同步加载的，也就是javascript的加载时阻塞的，后面的元素要等待javascript加载完毕后才能进行再加载，对于一些意义不是很大的javascript，如果放在页头会导致加载很慢的话，是会严重影响用户体验的。

（1）defer -- 仅支持IE

异步加载,但要等到dom文档全部解析完才会被执行。

也可将代码写入内部。

（2）async

异步加载,加载完即执行.

只能加载外部脚本,不能把JS写入内部。

(3) 创建script，插入到DOM中，加载完毕后callBack

function loadScript(url, callback) {
            var script = document.createElement('script');  // 创建script标签
            // 如果存在script状态码为IE
            if (script.readyState) {//IE
                script.onreadystatechange = function () {
                    if (script.readyState == 'complete' || script.readyState == 'loaded') {
                        script.onreadystatechange = null;
                        callback();
                    }
                }
            } else {//Firefox, Safari, Chrome,  Opera 
                script.onload = function () {
                    rotate();
                }
            }
            script.src = url;
            document.head.appendChild(script);
        }