script的加载方式与执行
script的加载方式与执行
一点灵犀 发表于2年前
script的加载方式与执行
  • 发表于 2年前
  • 阅读 27
  • 收藏 0
  • 点赞 0
  • 评论 0

【腾讯云】新注册用户域名抢购1元起>>>   

摘要: Script的同步加载、异步加载及执行时机。

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()等方法动态添加上去的,则不会触发该事件,暂时是无望了。

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

  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
一点灵犀
粉丝 10
博文 51
码字总数 15202
作品 1
×
一点灵犀
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: