文档章节

script的加载方式与执行

一点灵犀
 一点灵犀
发布于 2016/06/16 15:47
字数 556
阅读 28
收藏 0
点赞 0
评论 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
博文 51
码字总数 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
JS的并行加载与执行顺序

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

wf王帆
2016/05/16
422
0
JS异步加载库LABjs简易说明

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

WolfX
2016/02/19
20
0
动态加载js文件的正确姿势

最近在做一个为网页生成目录的工具awesome-toc,该工具提供了以jquery插件的形式使用的代码,也提供了一个基于Bookmarklet(小书签)的浏览器插件。 小书签需要向网页中注入多个js文件,也就...

樂天
2015/11/27
56
0
关于ajax返回数据中包含js文件不执行的问题

我在页面上构建了一个ajax请求(普通的和jquery的都试过),去请求一个html片段,此片段中包含 和 。把此片段用InnerHTML写道某个DOM里,一般情况下, 会执行,但是额外调取的,如 方式调取的,...

木川瓦兹
2013/04/07
2.5K
1
高性能的javascript之加载和执行篇

javascript在浏览器中的性能,可以认为是开发者所面临的最严重的可用性问题,今天,自己看完高性能的javascript的加载和执行这一章,聊聊怎么解决js的加载顺序和执行的原理. image.png 当浏览...

bug_killer
01/14
0
0
JS动态加载脚本及对动态脚本内方法的调用

首先我们需要一个被加载的js文件,我在一个固定文件夹下创建了一个package.js,打开后在里面写一个方法functionOne,很简单,代码如下: function functionOne(){ alert("成功加载");} 后面的...

恐空控
2014/02/24
0
0
javascript性能优化:创建javascript无阻塞脚本

  javaScript 在浏览器中的运行性能,在web2.0时代显得尤为重要,成千上万行javaScript代码无疑会成为性能杀手, 在较低版本的浏览器执行JavaScript代码的时候,由于浏览器只使用单一进程来...

grootzhang
2016/04/13
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Java8新特性之接口

在JDK8以前,我们定义接口类中,方法都是抽象的,并且不能存在静态方法。所有的方法命名规则基本上都是 public [返回类型] [方法名](参数params) throws [异常类型] {}。 JDK8为接口的定义带...

developlee的潇洒人生
32分钟前
0
0
aop + annotation 实现统一日志记录

aop + annotation 实现统一日志记录 在开发中,我们可能需要记录异常日志。由于异常比较分散,每个 service 方法都可能发生异常,如果我们都去做处理,会出现很多重复编码,也不好维护。这种...

长安一梦
42分钟前
1
0
将博客搬至CSDN

AHUSKY
54分钟前
1
0
Python web框架Django学习(1)

1.Django简介 (1)Python下有许多款不同的 Web 框架。Django是重量级选手中最有代表性的一位。许多成功的网站和APP都基于Django。Django是一个开放源代码的Web应用框架,由Python写成。 (2...

十年磨一剑3344
今天
0
0
Databook-数据之书

Databook-数据之书 用于数据分析的Jupyter Notebooks。 不需购买服务器,快速开始自己的数据分析过程。 源码:https://github.com/openthings/databook 作者:openthings,https://github.co...

openthings
今天
5
0
Python PIPEs

https://www.python-course.eu/pipes.php https://www.tutorialspoint.com/python/os_pipe.htm

zungyiu
今天
1
0
gRPC学习笔记

gRPC编程流程 1. proto文件定义 proto文件用于定义需要通过gRPC生成的接口,可以理解为接口定义文档 2. 通过构建工具生成服务基类代码-Maven或Gradle 3. 服务端开发 服务端实现类须实现通过构...

OSC_fly
今天
0
0
Docker Mac (三) Dockerfile 及命令

Dockerfile 最近学习docker的时候,遇到一件怪事,关于docker镜像可能会被破坏,还不知道它会有此措施 所以需要了解构建Dockerfile的正确方法 Dockerfile是由一系列命令和参数构成的脚本,这些命...

___大侠
今天
0
0
Android Studio+NDK+Cmake 移植FFmpeg-4.0.2命令行工具

一、编译 参考大神的帖子,亲测一次编译成功:https://blog.csdn.net/bobcat_kay/article/details/80889398 鉴于以前查文档的经验,这里附上编写例子的时间:2018年7月22日 我用的是ubantu,...

她叫我小渝
今天
0
0
mysql创建数据库

登录MYSQL mysql -u root -p 脚本创建数据库WeChat,并制定默认的字符集是utf8mb4。 CREATE DATABASE Wechat DEFAULT CHARSET utf8mb4 COLLATE utf8mb4_general_ci; 授权 grant all......

niithub
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部