js异步脚本
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异步脚本的更多相关文章
- 深入理解JS异步编程五（脚本异步加载）
异步脚本加载 阻塞性脚本 JavaScript在浏览器中被解析和执行时具有阻塞的特性,也就是说,当JavaScript代码执行时,页面的解析.渲染以及其他资源的下载都要停下来等待脚本执行完毕 浏览器是 ...
- 原生 JS 中 延迟脚本和异步脚本
一.延迟脚本 defer HTML4.0中为<script> 标签添加了个defer属性.属性的用途是表民脚本在执行时不会影响页面的构造. 脚本会被延迟到页面加载完毕的时候,执行.也就是当 ...
- 点评js异步加载的4种方式
主要介绍了点评js异步加载的4种方式,帮助大家更全面的了解js异步加载方式,感兴趣的小伙伴们可以参考一下 js异步加载的4种方式,点评开始. <!DOCTYPE html> <htm ...
- 关于JS异步加载方案
javascript延迟加载的解决方案: 1.使用defer标签 <span style="font-size: small;"><script type=&qu ...
- js异步加载 defer和async 比较
网上说法很多,很少一句话能总结清楚的,终于找到两句一针见血的描述,很到位: 相同点:都不阻塞DOM解析 defer :顺序:保证先后顺序.解析:HTML 解析器遇到它们时,不阻塞(脚本将被异步下载) ...
- JavaScript值延迟脚本和异步脚本
Html 4.0为<script>标签定义了defer属性,这个属性的用途是表名脚本在执行时,不会影响页面的构造.也就是说,脚本会延迟到整个页面解析完毕之后在运行,因此,在<scri ...
- JS之脚本延迟
自从开了博客,我就一下班回来匆匆吃完饭门一关等一开电脑一打开匆匆的研究东西,以至于朋友们都怀疑我是不是都得了自闭症 其实因为我有恐惧心理怕自己的技术哪天跟不上社会了,说到技术我觉得技术不求越新越好,但 ...
- JS异步加载的三种方案
js加载的缺点:加载工具方法没必要阻塞文档,个别js加载会影响页面效率,一旦网速不好,那么整个网站将等待js加载而不进行后续渲染等工作. 有些工具方法需要按需加载,用到再加载,不用不加载. 一.def ...
- JavaScript <script>标签的位置、延迟脚本（defer属性）与 异步脚本（async属性）
一.<script>标签的位置 传统的做法是将<script>元素放在<head>元素中,例如: <!DOCTYPE html><html > ...
随机推荐
- StartUML破解
破解文件路径如今下: .../StarUML/www/license/node/LicenseManagerDomain.js 使用文本编辑器打开,红色字体为添加内容: function valida ...
- struts总结
struts总结 1.为什么学习Struts框架 a.Struts框架好处 struts2是主流的开发技术,大多数公司在使用,struts把相关的servlet组件的各种操作都进行了相应的封装,这样就 ...
- DevExpress GridControl GridView 导出到 Excel 类
说明: 1>GridView 导出到 Excel (如果分页,只导出当前页数据) 2>GridView 导出到 Excel 3>方法2可以参考DataTable 导出到 Excel ...
- cluster模块实现多进程-让我的代理服务速度飞起来了
cluster模块实现多进程 现在的cluster已经可以说完全做到的负载均衡,在做代理服务和http服务器的时候能够讲服务器性能发挥到最大.来看一下具体的实现吧 var cluster = requ ...
- Oracle Linux 6.3下安装Oracle 11g R2(11.2.0.3)
本文主要描写叙述了在Oracle Linux 6.3下安装Oracle 11gR2(11.2.0.3).从Oracle 11g開始,Oracle官方站点不再提供其Patch的下载链接,须要使用Meat ...
- 发送email给列表中的邮箱--python
#!/usr/bin/python # -*- coding: utf-8 -*- # from email.Header import Header from email.MIMEText impo ...
- C语言中怎么求动态数组大小
先来个简单的样例 int a[] = {1,2,3}; int arr_len = 0; arr_len = sizeof(a)/sizeof(int); 解释:sizeof() keyword是求出 ...
- Redis与MySQL的结合
Redis与MySQL的结合 目前大部分互联网公司使用MySQL作为数据的主要持久化存储,那么如何让Redis与MySQL很好的结合在一起呢?我们主要使用了一种基于MySQL作为主库,Redis作为高 ...
- 解决 子进程已安装的 post-removal脚本返回了错误号 100 的方法
打开终端: $gksudo nautilus 进入目录: /var/lib/dpkg 删除: info info.bak (文件夹) 重建文件夹: info 之后重新安装 或删除就可以了.
- Android5.0之TextInputLayout、FloatingActionButton的使用
TextInputLayout和FloatingActionButton都属于MD风格的控件,比起普通的EditText和Button.ImageButton,TextInputLayout和Floa ...