美文网首页前端
javascript的同步异步加载

javascript的同步异步加载

作者: avery1 | 来源:发表于2018-04-02 15:45 被阅读105次

我们知道的javascript基本是同步加载的,也就是阻塞式加载,即上面地没有完成下面的会等待上面的执行完才回继续执行,因为这样我们很多时候习惯把javascript标签放到页面的底部,这样能实现不阻塞页面的加载。

实际上我们还有些方法实现javascript的异步加载

1、定时器

setTimeOut和setInterval其实都是异步执行的例子,定时器的作用就是等待到合适的时间点在执行相应的代码。不然定时器同步的话那我们只能等待定时器执行完在执行其他的了。

当然用这个加载一些外部javascript是不现实的,因为我们没法确定这个time。

2、动态往页面添加script

这种方式实现的也是异步的加载,不会阻塞后面的代码的实行,但是直接往页面添加script也是有风险的,一般在一些方法内的调用是可以的。

直接写到script内然后在直接往页面添加的话,有些页面的初始化还是会被阻塞的。所以比较好的使用这种方法就是在方法内比如页面早已经加载完成点击某些按钮的时候执行。还有就是在window.onload方法里在执行。

3、defer

defer属性的作用是实现javascript的异步加载

4、async

async的左右也是javascript的异步加载

关于defer和async的区别,网上有很多说明。我们看下上图

图一表示正常的javascript加载执行的时候html的解析停止了也就是同步的。

图二表示async的javascript的加载的时候是异步的但是加载完成了马上就开始执行了

图三表示defer的javascript的加载也是异步但是他的执行是等到html加载完了在执行的。

参考文档

不得不说的JavaScript异步加载

浅谈JavaScript异步加载的三种方式——async和defer、动态创建script

JavaScript 异步 / 同步加载

相关文章

  • AJAX

    同步和异步 异步的javascript和xml就是AJAX,不用全部重新加载,可以实现异步请求,局部刷新的功能。 ...

  • JavaScript 异步 / 同步加载

    同步加载: 即阻塞模式,会影响浏览器的后续处理,停止浏览器的后续解析,因此,会停止浏览器后续对文件(eg: img...

  • javascript的同步异步加载

    我们知道的javascript基本是同步加载的,也就是阻塞式加载,即上面地没有完成下面的会等待上面的执行完才回继续...

  • Javascript 同步异步加载详解

    http://handyxuefeng.blog.163.com/blog/static/454521722013...

  • 2021-07-14【unity】Addressble bund

    1.同步加载一个: 2.同步加载多个: 3.异步加载一个: 4.异步加载:

  • 关于JavaScript同步加载和异步加载

    关于同步加载和异步加载 同步加载:同步模式,又称阻塞模式,会阻止浏览器的后续处理,停止了后续的解析,因此停止了后续...

  • 跳转场景

    同步加载 (同步加载:如果场景很大,有可能会卡顿。) 异步加载     需要三个场景来完成异步加载,开始场景、过渡...

  • js加载同步还是异步? JSONP原理?

    1、浏览器端的js加载默认是同步还是异步?同步,可以人为设置异步;async让js异步加载,需要每个script标...

  • AJAX-全集

    同步+异步 Ajax同步+异步 JavaScript之(AJAX) JQuery之(AJAX) JQuery-有f...

  • JS 模块化方案对比

    1. CommonJS 规范(同步加载 NodeJS) 2. AMD(异步加载模块 requireJS) 采用异步...

网友评论

    本文标题:javascript的同步异步加载

    本文链接:https://www.haomeiwen.com/subject/yzhxhftx.html