文档章节

script的加载方式与执行

一点灵犀
 一点灵犀
发布于 2016/06/16 15:47
字数 556
阅读 34
收藏 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
博文 53
码字总数 15777
作品 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
JS的并行加载与执行顺序

JavaScript文件(下面简称脚本文件)需要被html文件引用才能在浏览器中运行。在html文件中可以通过不同的方式来引用脚本文件,我们需要关注的是,这些方式的具体实现和这些方式可能会带来的性...

wf王帆
2016/05/16
422
0
异步加载script,提高前端性能(defer和async属性的区别)

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

xiaobe
08/22
0
0

没有更多内容

加载失败,请刷新页面

加载更多

CentOS配置Tomcat监听80端口,虚拟主机

Tomcat更改默认端口为80 更改的配置文件是: /usr/local/tomcat/conf/server.xml [root@test-a ~]# vim /usr/local/tomcat/conf/server.xml # 找到 Connector port="8080" protocol="HTTP/1......

野雪球
37分钟前
2
0
《稻盛和夫经营学》读后感心得体会3180字范文

《稻盛和夫经营学》读后感心得体会3180字范文: 一代日本经营之圣稻盛和夫凭借刻苦勤奋的精神以及深植于佛教的商业道德准则,成为了“佛系”企业家的代表人物。在《稻盛和夫经营学》“领导人...

原创小博客
今天
1
0
java框架学习日志-5(常见的依赖注入)

依赖注入(dependency injection) 之前提到控制反转(Inversion of Control)也叫依赖注入,它们其实是一个东西,只是看的角度不同,这章详细说一下依赖注入。 依赖——指bean对象创建依赖于...

白话
今天
2
0
红外接收器驱动开发

背景:使用系统的红外遥控软件没有反应,然后以为自己接线错误,反复测试,结果烧坏了一个红外接收器,信号主板没有问题。所以自己开发了一个红外接收器的python驱动。接线参见https://my.os...

mbzhong
今天
2
0
ActiveMQ消息传送机制以及ACK机制详解

AcitveMQ是作为一种消息存储和分发组件,涉及到client与broker端数据交互的方方面面,它不仅要担保消息的存储安全性,还要提供额外的手段来确保消息的分发是可靠的。 一. ActiveMQ消息传送机...

watermelon11
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部