1.延迟脚本

HTML4.01为<script>标签定义了defer属性，为了表明脚本在执行时不会影响页面的构造。也就是说，脚本会在整个页面都解析完毕后再运行。因此在<script>中设置defer属性，相当于告诉浏览器立即下载，但是延迟执行。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" defer="defer" src="js/jquery-1.11.3.js"></script>
</head>
<body>
</body>
</html>

defer属性值适用于外部脚本文件。IE4-IE7还支持对嵌入脚本的defer属性。但是IE8及以后版本则忽略给嵌入脚本设置的defer属性。

2.异步脚本

HTML5为<script>元素定义了async属性。与defer类似，都是改变处理脚本的行为，同样async也只适用于外部脚本文件，并告诉浏览器立即下载，但是标记为async的脚本并不保证按照指定它们的先后顺序执行。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" defer="defer" src="js/sim1.js"></script>
<script type="text/javascript" defer="defer" src="js/sim2.js"></script>
</head>
<body>
</body>
</html>

代码中第二个脚本很有可能会在第一个脚本之前执行。指定async的目的是不让页面等待两个脚本下载和执行，从而异步加载页面其他内容，为此建议异步脚本不要在加载期间修改DOM

异步脚本一定会在页面load事件前执行。

3.创建script

<script type="text/javascript">
function loadScript(url, callback) {
var script = document.createElement_x("script")
script.type = "text/javascript";
if (script.readyState) { //IE
script.onreadystatechange = function() {
if (script.readyState == "loaded" ||
script.readyState == "complete") {
script.onreadystatechange = null;
callback();
}
};
} else { //Others: Firefox, Safari, Chrome, and Opera
script.onload = function() {
callback();
};
}
script.src = url;
document.body.appendChild(script);
}
</script>

js异步脚本的更多相关文章

  1. 深入理解JS异步编程五（脚本异步加载）

    异步脚本加载 阻塞性脚本 JavaScript在浏览器中被解析和执行时具有阻塞的特性,也就是说,当JavaScript代码执行时,页面的解析.渲染以及其他资源的下载都要停下来等待脚本执行完毕 浏览器是 ...

  2. 原生 JS 中 延迟脚本和异步脚本

    一.延迟脚本 defer HTML4.0中为<script> 标签添加了个defer属性.属性的用途是表民脚本在执行时不会影响页面的构造. 脚本会被延迟到页面加载完毕的时候,执行.也就是当 ...

  3. 点评js异步加载的4种方式

    主要介绍了点评js异步加载的4种方式,帮助大家更全面的了解js异步加载方式,感兴趣的小伙伴们可以参考一下 js异步加载的4种方式,点评开始. <!DOCTYPE html> <htm ...

  4. 关于JS异步加载方案

    javascript延迟加载的解决方案: 1.使用defer标签 <span style="font-size: small;"><script type=&qu ...

  5. js异步加载 defer和async 比较

    网上说法很多,很少一句话能总结清楚的,终于找到两句一针见血的描述,很到位: 相同点:都不阻塞DOM解析 defer  :顺序:保证先后顺序.解析:HTML 解析器遇到它们时,不阻塞(脚本将被异步下载) ...

  6. JavaScript值延迟脚本和异步脚本

    Html 4.0为<script>标签定义了defer属性,这个属性的用途是表名脚本在执行时,不会影响页面的构造.也就是说,脚本会延迟到整个页面解析完毕之后在运行,因此,在<scri ...

  7. JS之脚本延迟

    自从开了博客,我就一下班回来匆匆吃完饭门一关等一开电脑一打开匆匆的研究东西,以至于朋友们都怀疑我是不是都得了自闭症 其实因为我有恐惧心理怕自己的技术哪天跟不上社会了,说到技术我觉得技术不求越新越好,但 ...

  8. JS异步加载的三种方案

    js加载的缺点:加载工具方法没必要阻塞文档,个别js加载会影响页面效率,一旦网速不好,那么整个网站将等待js加载而不进行后续渲染等工作. 有些工具方法需要按需加载,用到再加载,不用不加载. 一.def ...

  9. JavaScript <script>标签的位置、延迟脚本（defer属性）与 异步脚本（async属性）

    一.<script>标签的位置 传统的做法是将<script>元素放在<head>元素中,例如: <!DOCTYPE html><html > ...

随机推荐

  1. TOR的使用

    使用步骤: 1.配置,该计算机是否需要通过代理访问互联网?选否 2.该计算机的防火墙是否仅允许特定端口的互联网连接?选否 3.互联网服务提供商(ISP)是否对Tor网络连接进行了封锁或审查?选是 4. ...

  2. Linux为Tomecat指定JDK

    在搭建Jenkin+Sonar集成时,由于系统环境配置了jdk1.7,但是jenkins在安装sonar的插件时,需要jdk1.8.,所以需要在Tomcat指定jdk1.8. (1)暂停Tomcat ...

  3. Java比较运算符

    注意哦: 1.  > . < . >= . <= 只支持左右两边操作数是数值类型 2.  == . != 两边的操作数既可以是数值类型,也可以是引用类型 public clas ...

  4. [置顶] mmog游戏开发之业务篇

    这周不是很忙,因为我们的游戏开发了近一年,由于公司的业务调整,在游戏开第二服的时候,老板果断的把项目停到了. 感觉超级的不爽啊.因为这个游戏项目像我的孩子一样和我一样成长,里边的大概的业务逻辑都是偶实 ...

  5. 使用ThinkPHP框架高速开发站点(多图)

    使用ThinkPHP框架高速搭建站点 这一周一直忙于做实验室的站点,基本功能算是完毕了.比較有收获的是大概了解了ThinkPHP框架.写一些东西留作纪念吧.假设对于相同是Web方面新手的你有一丝丝帮助 ...

  6. pair的例子

    11.12 编写程序,读入string和int的序列,将每个string和int存入一个pair中,pair保存在一个vector中. #include<iostream> #includ ...

  7. radio组件

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  8. Java 并发——多线程基础

    Thead类与Runnable接口 Java的线程,即一个Thread实例. Java的线程执行过程有两种实现方式: 子类继承Thread类,并且重写void run()方法. 自定义类实现Runna ...

  9. Topself

    TopShelf简介 个人理解:开源.跨平台的服务框架.提供一种方式以控制台编写windows服务,与windows服务相比,目前只发现便于调试. 官网网站:http://docs.topshelf- ...

  10. hibernate篇章六--demo（Hibernate之第1解之-hibernate_demo_1）

    准备工作做好了,开始Hibernate: 1:建立包:package:dao.model.service.util包: 2:开始model实体类Student:id,sname生成getter/set ...