script脚本加载和执行

最新推荐文章于 2024-08-08 08:19:51 发布

huruiDD

最新推荐文章于 2024-08-08 08:19:51 发布

阅读量593

点赞数

分类专栏： javascript 文章标签： js javascript web

本文链接：https://blog.csdn.net/weixin_38551805/article/details/115702695

版权

javascript 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

"本文介绍了网页中脚本的延迟加载(defer)、异步加载(async)以及动态加载的方法，强调了它们对页面性能的影响。defer属性确保脚本在页面解析完成后执行，而async则使脚本并行加载，不保证执行顺序。动态加载虽然灵活，但可能影响预加载器的资源优先级。此外，还提到了模块脚本(type="module")的使用及其特性。"

摘要由CSDN通过智能技术生成

 1.推迟脚本执行 defer,立即下周，延迟执行。脚本会被延迟到整个页面都解析完毕后再运行
<script defer src="example1.js"></script>

 2.异步执行脚本 async
<script async src="example2.js"></script> 异步加载，顺序未定

 3.动态加载脚本
let script = document.createElement('script');
script.src = 'gibberish.js';
script.async = false;
document.head.appendChild(script);
// 以这种方式获取的资源对浏览器预加载器是不可见的。这会严重影响它们在资源获取队列中的优先级。根据应用程序的工作方式以及怎么使用，这种方式可能会严重影响性能。要想让预加载器知道这些动态请求文件的存在，可以在文档头部显式声明它们：
<link rel="preload" href="gibberish.js">

注：带有type="module"属性的<script>标签会告诉浏览器相关代码应该作为模块执行，而不是作为传统的脚本执行。模块可以嵌入在网页中，也可以作为外部文件引入：
<script type="module" src="example1.js"></script>