LearningRecord
LearningRecord copied to clipboard
Published
20 hours ago •
Rashomon511
Rashomon511
异步加载 js 脚本的方法有哪些？
1.指定 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>
2.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>
2.利用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>
4.动态创建script标签
var script = document.createElement("script");
script.src = "js/test.js";
document.head.appendChild(script);
5.iframe 方式 用 iframe 加载一个同源的子页面，让子页面的 js 影响当前的父页面 6:requirejs 7:import
