文档章节

script的加载方式与执行

一点灵犀
 一点灵犀
发布于 2016/06/16 15:47
字数 556
阅读 28
收藏 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()等方法动态添加上去的,则不会触发该事件,暂时是无望了。

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

© 著作权归作者所有

共有 人打赏支持
一点灵犀

一点灵犀

粉丝 10
博文 52
码字总数 15202
作品 1
深圳
程序员
JavaScript 异步加载

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

learn_more
2015/09/20
32
0
Javascript 异步加载详解

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

Carl_
2014/09/15
0
0
Javascript 异步加载详解

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

张悟空
2014/08/18
0
0
异步加载script,提高前端性能(defer和async属性的区别)

一、异步加载script的好处 为了加快首屏响应速度,前端会采用代码切割、按需加载等方式优化性能。异步加载script也是一种前端优化的手段。 就好比如果我的页面其中一个功能需要打开地图,但是地...

xiaobe
08/22
0
0
JS异步加载库LABjs简易说明

一、关于LABjs的简单介绍 作者:Kyle Simpson 作用:动态并行加载脚本文件 以及 管理加载脚本文件的执行顺序 官网:http://www.labjs.com/ 二、关于LABjs的使用 以下实例原文链接:http://ww...

WolfX
2016/02/19
20
0

没有更多内容

加载失败,请刷新页面

加载更多

2018资本方向:重新发现社交

2018年可谓是资本寒冬,投资人方面认为今年投资主题较少,大量机构继续项目退出来筹措新一期基金,创业公司上市募资,好让投资人收回资金离场,在如此惨淡的背景下,社交领域的投资却有回暖趋...

ThinkSNS账号
19分钟前
1
0
day118-20181016-英语流利阅读-待学习

耶鲁毕业又如何?美国最高法院大法官被控性侵 雪梨 2018-10-16 1.今日导读 美国最高法院大法官布雷特·卡瓦诺(Brett Kavanaugh)被指涉及 1980 年代多件性侵案,包括克里斯汀·布莱希·福特...

飞鱼说编程
20分钟前
2
0
Android studio取消自动折叠代码

在这里面设置就行

lanyu96
21分钟前
1
0
Magento2后台忘记密码

Magento2后台忘记密码处理方式 第一种(Magento CLI 命令行创建新用户): php bin/magento admin:user:create --admin-user="newName" --admin-password="New-passwd" --admin-email="newN......

alt_tab_jj
22分钟前
1
0
Vue 引入Jquery jQueryRotate.2.2 制作转盘抽奖

原先用jquery做的,现在整合webpack+vue 其实只需要webpack就行了,只是为了方便打包。 1、关闭eslint 检测,如果开启,插件里面全是报错,麻烦的很。 webpack.base.conf.js const createLin...

大灰狼wow
23分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部