文档章节

script的加载方式与执行

一点灵犀
 一点灵犀
发布于 2016/06/16 15:47
字数 556
阅读 257
收藏 0

钉钉、微博极速扩容黑科技,点击观看阿里云弹性计算年度发布会!>>>

script一般是阻塞式加载的,H5新增了asyncdefermodule特性,可用于异步加载/延迟执行:

schematic diagram

  • async 属性是指当这个 script 可用时,就异步执行它
  • defer 属性是指当页面被解析完毕后,才能执行
  • 如果以上两个属性都没有,则立刻下载并执行,同时阻止页面的解析,直到执行完毕
  • module 属性是指关联脚本全部下载后才会执行,且不受defer影响

标准定义详见:https://html.spec.whatwg.org/#the-script-element

关于async和defer

aysnc 的 script 不能保证在 jQuery(document).ready 的时候是可用的,而 defer 可以。

这篇博文给出了如下测试结果:

jQuery(document).ready 的执行时序。
Chrome 下是:defer -> jQuery(document).ready -> async -> window.onload。
Firefox 下是:async -> defer -> jQuery(document).ready -> window.onload。
我又把 JavaScript 的下载速度变慢,发现结果仍然没有变化。

所以使用async的时候需要谨慎,全局的属性和方法最好提前定义。

动态加载javascript基本

还有一个常用的技巧是,在需要的时候动态加载脚本——比如日期插件、地区选择插件,等等——以便加快页面载入速度。该博文也提到了相关方法及一些坑。

不过这里我关心的是执行时机。onload事件被认为是可以确保在SCRIPT执行完成后马上被执行,但实际使用中发现,此时它仍有可能未完成初始化,如果立即执行callback可能会出问题,对于体积较大的插件(如echarts),出错的概率明显变大。

所以,应当把onload当做loaded事件处理。然后使用setTimeout方法延迟执行callback,以保障它真的执行完毕了。不过时间阈值不好定,这也是个坑。

后来发现了beforescriptexecuteafterscriptexecute,<del>但貌似只有Firefox支持</del>当前无浏览器支持,而且如果这个script标签是用appendChild()等方法动态添加上去的,则不会触发该事件,暂时是无望了。

暂时没找到更好的办法。欢迎大家出主意:-)

一点灵犀

一点灵犀

粉丝 12
博文 53
码字总数 15777
作品 1
深圳
程序员
私信 提问
加载中
请先登录后再评论。
JavaScript 异步加载

本文转载自:http://blog.csdn.net/m13666368773/article/details/7586106 一、同步加载与异步加载的形式 1. 同步加载 我们平时最常使用的就是这种同步加载形式: <script src="http://your...

learn_more
2015/09/20
55
0
异步加载的方式

一、同步加载与异步加载的形式 1. 同步加载 我们平时最常使用的就是这种同步加载形式:<script src="http://yourdomain.com/script.js"></script> 同步模式,又称阻塞模式,会阻止浏览器的后...

osc_5qpsci0d
2018/08/13
3
0
异步加载的方式

异步加载的三种方式——async和defer、动态脚本创建    ① async方式 async属性是HTML5新增属性,需要Chrome、FireFox、IE9+浏览器支持 async属性规定一旦脚本可用,则会异步执行 async属性...

osc_jrtl615f
2019/01/10
1
0
异步加载js文件

//摘录部分 begin HTML 4.01 的script属性 charset: 可选。指定src引入代码的字符集,大多数浏览器忽略该值。 defer: boolean, 可选。延迟脚本执行,相当于将script标签放入页面body标签的底...

alexgaoyh
2014/04/22
4K
0
Javascript 异步加载详解

一、同步加载与异步加载的形式 1. 同步加载 我们平时最常使用的就是这种同步加载形式: <script src="http://yourdomain.com/script.js"></script> 同步模式,又称阻塞模式,会阻止浏览器的后...

Carl_
2014/09/15
51
0

没有更多内容

加载失败,请刷新页面

加载更多

技术教程| 百度鹰眼历史轨迹查询:轨迹抽稀功能

本文作者:用****9 本篇教程中,我们将详细地说明鹰眼历史轨迹查询(gettrack接口)中,如何通过vacuate_grade选项对轨迹进行抽稀,以及不同的抽稀力度对轨迹产生的影响。 上一篇教程中,我们...

百度开发者中心
前天
0
0
整数的最大值和最小值 - Maximum and Minimum values for ints

问题: I am looking for minimum and maximum values for integers in python. 我在python中寻找整数的最小值和最大值。 For eg., in Java, we have Integer.MIN_VALUE and Integer.MAX_VA......

法国红酒甜
29分钟前
16
0
Quartz的Misfire处理规则 错过任务执行时间的处理机制

调度(scheduleJob)或恢复调度(resumeTrigger,resumeJob)后不同的misfire对应的处理规则 CronTrigger withMisfireHandlingInstructionDoNothing ——不触发立即执行 ——等待下次Cron触发频率...

独钓渔
今天
4
0
如何在Django视图中合并两个或多个查询集? - How to combine two or more querysets in a Django view?

问题: I am trying to build the search for a Django site I am building, and in that search, I am searching in 3 different models. 我正在尝试搜索要构建的Django网站,在该搜索中,我......

javail
今天
5
0
PHP解析/语法错误; 以及如何解决它们? - PHP parse/syntax errors; and how to solve them?

问题: Everyone runs into syntax errors. 每个人都遇到语法错误。 Even experienced programmers make typos. 即使是经验丰富的程序员也会打错字。 For newcomers, it's just part of the......

fyin1314
今天
20
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部