JavaScript文件引用方式及其同步执行与异步执行示例代码

前言

同步加载适用于需要依赖该文件中的代码执行结果的情况，而异步加载适用于不需要依赖该文件中的代码执行结果的情况，可以优化页面加载速度。

一、同步加载

同步加载： 即阻塞模式，会影响浏览器的后续处理，停止浏览器的后续解析，因此，会停止浏览器后续对文件（eg: img）的加载、渲染和执行。js 之所以要同步执行，是因为 js 中可能有输出 document 内容、修改dom、重定向等行为，所以默认同步执行才是安全的。

常见的同步加载方式：

（1）script外链

html文件中的<script src='xxx.js'></script> js文件将会以同步的方式加载。

我们平时最常使用的就是这种同步加载形式：

<script src="http://yourdomain.com/script.js"></script>

同步模式，又称阻塞模式，会阻止浏览器的后续处理，停止了后续的解析，因此停止了后续的文件加载（如图像）、渲染、代码执行。
js 之所以要同步执行，是因为 js 中可能有输出 document 内容、修改dom、重定向等行为，所以默认同步执行才是安全的。

以前的一般建议是把

（2）h5 中script的新属性 async 设定为false ，js文件将会以同步的方式加载。

（3）html中script标签之间的js代码 也是同步加载执行的。

<script>
//将会被同步加载执行的代码。
</script>

总的来说，浏览器在解析 HTML 文档时，如果遇到 script标签，便会停下对 HTML 文档的解析，转而去处理脚本。如果脚本是内联的，浏览器会先去执行这段内联的脚本，如果是外链的，那么先会去加载脚本，然后再执行。等到脚本执行结束后，浏览器才会继续解析 HTML 文档。

二、异步加载

常见的异步加载方式：

1、任何以添加 script 节点(例如 appendChild(scriptNode) ) 的方式引入的js文件都是异步执行的 。

这种技术可以让脚本的加载与页面的其它部分并行进行，下面是一个示例：

var script = document.createElement(“script”);
script.setAttribute(“src”,“xx.js”);
documenrt.getElementsByTagName(“head”)[0].appendChild(script);

在以上代码中，创建了一个新的script元素并指定了其源文件。通过将这个元素添加到document.head中，实现了脚本文件的异步加载。

2.使用async和defer实现异步加载

使用async属性：

async属性允许脚本异步加载。一旦脚本可用，它将尽快执行，而不用等到页面解析完成。这意味着脚本的执行顺序无法保证。

async 属性详解：

• 加载方式: 使用 async 的脚本会异步加载，与 HTML 解析同时进行。
• 执行顺序: 脚本会在加载完成后立即执行，不保证按照它们在页面中的出现顺序执行。
• 执行时机: 一旦脚本加载完成，就会立即执行，可能会在 HTML 解析完成之前执行，也可能在解析过程中执行。
• 适用场景: 用于独立、不依赖于其他脚本或 DOM 内容的脚本，例如分析工具或广告脚本，因为它们可以尽快执行而不影响页面的解析。

<script async src="async-script.js"></script>

如果页面上存在多个设置了async属性并通过src引用的外部脚本的

使用defer属性：

与async属性类似，defer同样允许脚本在HTML解析时异步加载，但脚本只会在整个页面解析完成后执行。使用这种方式，脚本的执行顺随是相对于它们在文档中的出现顺序的。

defer 属性

• 加载方式: 使用 defer 的脚本在 HTML 解析的同时异步加载。
• 执行顺序: 所有带有 defer 的脚本会按照它们在页面中的出现顺序依次执行。
• 执行时机: 脚本会在 HTML 文档解析完毕后执行，也就是在 DOMContentLoaded 事件触发之前，但不会阻塞页面的解析。
• 适用场景: 当脚本依赖于 DOM 结构时，使用 defer 是理想的，因为它保证了脚本执行时 DOM 已经完全加载完成。

如果页面中存在设置了defer="defer"属性并且是通过src引用的外部脚本的

如果页面上存在多个设置了defer="defer"属性并通过src引用的外部脚本的

<script src="example.js" defer></script>

// 正常加载顺序从上到下
<script src="./js/test.js"></script> // console.log('这是普通外链的js文件');
// 设置defer属性
<script defer src="./js/test1.js"></script> // console.log('这是设置了defer属性的外链的js文件');
// 内嵌脚本
<script>
	console.log('这是内嵌的JS脚本');
    document.addEventListener('DOMContentLoaded', function () {
      console.log('这是页面的DOMContentLoaded事件');
    });
</script>

执行结果：

区别总结：

• 加载顺序: async 无序（哪个脚本先加载完哪个先执行），defer 有序（按照 HTML 中的顺序执行）。
• 执行时机: async 脚本一旦加载完成立刻执行，defer 脚本会在 HTML 解析完成之后执行。

执行时机图示：

• 普通 script 标签：同步加载，立即阻塞 HTML 解析，加载完毕后执行。
• defer 脚本：异步加载，不阻塞 HTML 解析，等 HTML 全部解析完后按顺序执行。
• async 脚本：异步加载，不阻塞 HTML 解析，但加载完毕后立即执行，且无序。

哪个更好？

当脚本依赖于页面的 DOM 结构时，使用 defer 更安全。

当脚本与其他脚本和页面结构无关时，可以使用 async 以加快加载和执行速度。

不同scritp的加载和执行时机

总结 

到此这篇关于JavaScript文件引用方式及其同步执行与异步执行的文章就介绍到这了,更多相关js文件引用方式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论