异步加载 js 脚本的方法有哪些？

shenanheng commented 5 years ago

1:html5中新增async(ie9以上;并且只能用于外部脚本js的引入) 2:html4中defer属性(只能用于外部脚本js的引入) 3:利用ajax请求js的代码并用eval执行 4:动态创建script标签 5:用iframe引入js 6:requirejs 7:import 8:define

luohong123 commented 5 years ago

指定 async 属性指定 async 属性的目的是不让页面等待两个脚本下载和执行，从而异步加载页面其他内容。为此，建议异步脚本不要在加载期间修改 DOM。执行顺序：让脚本在加载完可用时立即执行,异步脚本一定会在页面的 load 事件前执行，但可能会在 DOMContentLoaded 事件触发之前或之后执行。
```
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
<script type="text/javascript" async src="example1.js"></script> <script type="text/javascript" async src="example2.js"></script>
  </head>
  <body>
 </body>
</html>
```

defer属性执行顺序：在dom加载完毕后执行，defer脚本的执行会在window.onload之前，其他没有添加defer属性的script标签之后

<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
</head>
<script>
window.onload = function() {
    console.log("window.onload");
}
</script>
<script src="js/defer.js" defer></script>
<script>
console.log("normal");
</script>
<body>
</body>
</html>

利用XHR异步加载js内容并执行

<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
</head>
<script>
var xhr = new XMLHttpRequest();
xhr.open("get", "js/defer.js",true)
xhr.send();
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        eval(xhr.responseText);
    }
}
</script>
<body>
</body>
</html>

动态创建script标签

var script = document.createElement("script");
script.src = "js/test.js";
document.head.appendChild(script);

iframe 方式用 iframe 加载一个同源的子页面，让子页面的 js 影响当前的父页面

into-piece commented 5 years ago

动态创建script标签，可通过script的onreadyState监视加载。
html5新增的async属性：可跟其他内容并行下载，限制ie9以上，只能加载外部js脚本。
html4的defer，作用与async相同，兼容更好一点，但async只要加载完可立即执行，defer需等待在dom加载完毕后执行，在window.onload之前，其他没有添加defer属性的script标签之后。
利用XHR异步加载js内容并执行。
iframe方式。

taoyaoyaoa commented 5 years ago

1.动态创建script标签 2.利用XHR异步加载js内容并执行 3.

H4的属性 defer 兼容所有浏览器。

这两个方法的区别 1、defer脚本的执行会在window.onload之前，其他没有添加defer属性的script标签之后。 2、async会让脚本在下载完可用时立即执行，而defer脚本则会在dom加载完毕后执行， 3、async不能确保加载执行的顺序，多个 defer 脚本，会按照它们在页面出现的顺序加载

async 3.动态创建script标签

(function () {
        var s = document.createElement_x('script'); 
        s.type = 'text/javascript';
        s.src = "http://code.jquery.com/jquery-1.7.2.min.js";
        var tmp = document.getElementsByTagName_r('script')[0];
        tmp.parentNode.insertBefore(s, tmp);
    })();

4.XHR异步加载js

 var xhr = new XMLHttpRequest();
    xhr.open("get", "xxxx.js", true)
    xhr.send();
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            eval(xhr.responseText);
        }
    }

5.iframe方式，利用iframe加载一个同源的子页面，让子页面内的js影响当前父页面的一种方式。

web-data-MrLi commented 5 years ago

异步加载的很多 1.async 在html5新增的属性，谷歌、火狐、ie9（ie6-ie8）不支持

2.H4属性中的defer 兼容所有浏览器

3.两个方法的区别

1、defer脚本的执行会在window.onload之前，其他没有添加defer属性的script标签之后。

2、async会让脚本在下载完可用时立即执行，而defer脚本则会在dom加载完毕后执行，

3、async不能确保加载执行的顺序，多个 defer 脚本，会按照它们在页面出现的顺序加载

chongyangwang commented 5 years ago

script标签有两个属性 defer 和async

defer 并行加载脚本，在解析该 script标签时并不会阻止文档的渲染，defer属性的script脚本必须等到dom结构渲染完毕才可以执行。

async

同步加载脚本，当解析该脚本时，会将该脚本的内容解析完毕之后，再去进行dom的绘制，造成文档加载阻塞

常见的异步加载脚本的方式

1. 动态创建scipt标签:

 var script = document.creamentElement('script');

   script.src='a.js'

  document.body.append(script)

2 .XHR异步加载:

 var xhr =new xhrHttpRequest()  
  xhr.open(get, 'a.js', true)
  xhr.send()
  xhr.onreadystatechange=function(){
    if(xhr.status===200  || xhr.readyState===4){
        eval(xhr.responseText)
    }
  }

jodiezhang commented 5 years ago

浏览器加载JS文件的原理 浏览器加载Javascript脚本，主要通过 Githubissues.

Githubissues is a development platform for aggregating issues.

YvetteLau / Step-By-Step

异步加载 js 脚本的方法有哪些？ #26