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. 分布式存储Ceph的几种安装方法，源码，apt-get，deploy工具，Ubuntu CentOS

    最近搞了下分布式PB级别的存储CEPH  尝试了几种不同的安装,使用 期间遇到很多问题,和大家一起分享. 一.源码安装 说明:源码安装可以了解到系统各个组件, 但是安装过程也是很费劲的,主要是依赖包太 ...

  2. Cocos2d-x创建新工程

    转自:http://www.cnblogs.com/andyque/archive/2011/09/27/2192920.html 而是新建一个工程.然后,我们不是copy文件夹.lib和dll了.我 ...

  3. 【转】在Windows下搭建React Native Android开发环境

    http://www.jianshu.com/p/2fdc4655ddf8 安装JDK 从Java官网下载JDK并安装.请注意选择x86还是x64版本. 推荐将JDK的bin目录加入系统PATH环境变 ...

  4. 解决div和父div不上对齐

    加一个vertical-align: top;就好了.原因就是inline-block会使元素向下对齐.这和padding-top,margin-top没有关系的.使用浮动就不会有这种情况了,当然会带 ...

  5. java 5 Lock

    import java.util.concurrent.locks.Lock; import java.util.concurrent.locks.ReentrantLock; public clas ...

  6. Android动态加载技术初探

    一.前言: 现在,已经有实力强大的公司用这个技术开发应用了,比如淘宝,大众点评,百度地图等,之所以采用这个技术,实际上,就是方便更新功能,当然,前提是新旧功能的接口一致,不然会报Not Found等错 ...

  7. [AngularJS + Webpack] require directives

    direictives/index.js: module.exports = function(ngModule) { //register all the directives here requi ...

  8. Andriod:如何卸载模拟器上已经安装的应用程序？

    根据学习对HelloWorld进行手术的时候,遇到了一个问题: 就是在修改了布局后,重新链接模拟器时报错: Installing helloworld.apk... Re-installation f ...

  9. sqlServer 求当前周的第一天和最后一天，当前月的第一天和最后一天，前三个月的第一天和今天

    ---当前周的第一天 ),DATEADD(day,-(DATEPART(weekday,GETDATE())-),GETDATE()) , )as'周一', CONVERT(varchar(),DAT ...

  10. C#做的一个加密/解密的类

    转自:http://www.16aspx.com/Article/3904 using System; using System.Security.Cryptography; using System ...