异步加载js的方法

[问答题]

异步加载js的方法

查看答案及解析

拯救世界的光太郎

同步加载严重受到网速和js逻辑的影响，一旦网速过慢，或者在js代码中，有较复杂的逻辑等，就会出现卡顿的现象，而异步加载就可以解决这些问题，同时，异步加载还可以满足按入的需求

异步加载的方法：

1. defer：<script src＝"..." defer/>

添加defer属性后，对应的js脚本在所有元素加载完成后才会执行，且是按照js脚本声明的顺序执行的

2. async：用法与defer相同，规定脚本一旦可用，就会异步执行，但只适用于外部引用的脚本，即有src属性，对应脚本为乱序执行，只要js脚本加载完成就会立即执行

编辑于 2021-03-03 21:34:18 回复(0)

牛客789741155号

我们知道渲染引擎遇到 script 标签会停下来，等加载并执行完该脚本，才继续向下渲染，这种传统js加载方式存在着明显的不足。当过多的js加载时，会严重影响页面渲染效率，一旦网速不好，那么整个网站将会等着，一直等待js加载执行，而不进行后续的渲染工作了。有的时候在加载工具方法时，我们希望加载的同时不阻塞页面的渲染；有的时候有些工具方法按需加载，用到时再加载；这是就得用到异步加载了

1. defer异步加载（IE可用）

<!--  1  --> <script defer = "defer" src = "./index.js"></script> <!--  2  --> <script defer = "defer"> //code </script> 复制代码

defer：遇到就去加载，但是要等DOM文档全部解析完才会被执行

2. async异步加载

<script async = "async" src = "./index.js"></script> 复制代码

async：遇到就去加载，加载完就去执行，不考虑DOM是否解析完毕！ async只能异步加载外部js，不能将js代码写在script标签内，让async去异步加载里面的js代码。

可同时使用async和defer，这样IE 4以上和其他浏览器都支持异步加载

<script src = "./js/tools.js" async defer></script>

发表于 2022-02-20 19:37:25 回复(0)

火柴哥

平时我们用的最多的就是同步加载，但是这种模式会阻止浏览器的后续解析，只有在当前的资源加载完成才能进行下一步。但是如果Js当中有输出document，修改dom，重定向的行为，就会造成页面阻塞。所以就需要到异步加载来解决这一问题，在浏览器下载JS的同时，也可以进行后续页面的处理，一般有以下方法：1.Script Don Element,但是这种加载方式执行完之前会阻止onload事件的触发，而现在很多页面的代码都会在onload时执行额外的渲染工作，所以还是会阻塞一部分页面的初始化处理2.onload：这种方法是把script的方法放在一个函数里，然后放着onload方法里执行，这样就解决了onload阻塞的问题3.使用async=“async”属性，直接加入到script当中即可4.使用defer=“defer”属性

发表于 2020-06-04 16:08:49 回复(0)

提交观点

问题信息

上传者：小小

难度：

3条回答 123收藏 956浏览

异步加载js的方法

问题信息

热门推荐

相关试题