IT源码网

怎样实现脚本的动态加载

leader 2021年03月09日 编程语言 378 0

所谓"脚本的动态加载", 指的是的在执行js代码时, 动态地加载并执行其他的js脚本. 因此我们需要在js中动态地创建<script>标签, 并引入脚本文件, 如下: 

<!DOCTYPE html> 
<html lang="zh"> 
 
<head> 
    <meta charset="UTF-8" /> 
</head> 
 
<body> 
    <script> 
        ["./test1.js","./test2.js"].forEach(item=>{ 
           var script = document.createElement("script"); 
           script.src = item; 
           document.head.appendChild(script); 
        }) 
    </script> 
</body> 
 
</html>

 

 

注意: 通过这种方式动态加载的脚本是不会阻塞页面渲染的, 但执行顺序无法保证, 那个脚本先下载完成就会先执行哪个脚本. 如果需要按顺序执行, 那就需要修改上面的代码, 将script.async 设置为false;

评论关闭
IT源码网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

怎样理解script标签的defer属性和async属性