点评js异步加载的4种方式
主要介绍了点评js异步加载的4种方式，帮助大家更全面的了解js异步加载方式，感兴趣的小伙伴们可以参考一下
js异步加载的4种方式，点评开始。
<!DOCTYPE html>
<html>
<head>
<script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
alert("加载完成！");
});
</script>
</head>
<body>
<img src="https://images0.cnblogs.com/i/121863/201405/222202573569862.jpg" />
</body>
</html>
方案1：$(document).ready
点评：
1、需要引用jquery
2、兼容所有浏览器。
方案2：<script>标签的async="async"属性
async的定义和用法(是HTML5的属性)
async 属性规定一旦脚本可用，则会异步执行。
示例：
<script type="text/javascript" src="xxxxxxx.js" async="async"></script>
点评：
1、HTML5中新增的属性，Chrome、FF、IE9&IE9+均支持（IE6~8不支持）。此外，这种方法不能保证脚本按顺序执行。
2、async 属性仅适用于外部脚本（只有在使用 src 属性时）。
方案3：<script>标签的defer="defer"属性
defer 属性规定是否对脚本执行进行延迟，直到页面加载为止。
有的 javascript 脚本 document.write 方法来创建当前的文档内容，其他脚本就不一定是了。
如果您的脚本不会改变文档的内容，可将 defer 属性加入到 <script> 标签中，以便加快处理文档的速度。因为浏览器知道它将能够安全地读取文档的剩余部分而不用执行脚本，它将推迟对脚本的解释，直到文档已经显示给用户为止。
示例：
<script type="text/javascript" defer="defer">
alert(document.getElementById("p1").firstChild.nodeValue);
</script>
点评：兼容所有浏览器。此外，这种方法可以确保所有设置defer属性的脚本按顺序执行。
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
(function(){
var s = document.createElement('script');
s.type = 'text/javascript';
s.src = "http://code.jquery.com/jquery-1.7.2.min.js";
var tmp = document.getElementsByTagName('script')[0];
tmp.parentNode.insertBefore(s, tmp);
})();
</script>
</head>
<body>
<img src="https://images0.cnblogs.com/i/121863/201405/222202573569862.jpg" />
</body>
</html>
方案4：动态创建
点评：兼容所有浏览器。
以上就是针对js异步加载的4种方式进行的区分介绍，希望对大家的学习js异步加载有所帮助。
------------------------------------------------------------------------------
点评js异步加载的4种方式的更多相关文章
- JS异步加载的三种方式
js加载的缺点:加载工具方法没必要阻塞文档,过得js加载会影响页面效率,一旦网速不好,那么整个网站将等待js加载而不进行后续渲染等工作. 有些工具方法需要按需加载,用到再加载,不用不加载,. 默认正常 ...
- js异步加载的5种方式
方案1:$(document).ready 点评: 1.需要引用jquery 2.兼容所有浏览器. 方案2:<script>标签的async="async"属性 asy ...
- js异步加载的3种方式（转载）
1.defer标签 只支持IE defer属性的定义和用法: 属性规定是否对脚本执行进行延迟,直到页面加载为止.有的 javascript 脚本 document.write 方法来创建当前的文 ...
- JS异步加载的三种方案
js加载的缺点:加载工具方法没必要阻塞文档,个别js加载会影响页面效率,一旦网速不好,那么整个网站将等待js加载而不进行后续渲染等工作. 有些工具方法需要按需加载,用到再加载,不用不加载. 一.def ...
- JavaScript异步加载的三种方式——async和defer、动态创建script
一.script标签的位置 传统的做法是:所有script元素都放在head元素中,必须等到全部js代码都被下载.解析.执行完毕后,才能开始呈现网页的内容(浏览器在遇到<body>标签时才 ...
- js异步加载的三种解决方案
默认情况javascript是同步加载的,也就是javascript的加载时阻塞的,后面的元素要等待javascript加载完毕后才能进行再加载,对于一些意义不是很大的javascript,如果放在页 ...
- js页面加载的几种方式的速度： window.onload、 $(window).load、 $(function(){}）、 $(document).ready(function () {})、onload=‘asd（）’
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 转:web前端面试题合集 (Javascript相关)（js异步加载详解）
1. HTTP协议的状态消息都有哪些? 1**:请求收到,继续处理2**:操作成功收到,分析.接受3**:完成此请求必须进一步处理4**:请求包含一个错误语法或不能完成5**:服务器执行一个完全有效请 ...
- route按需加载的3种方式：vue异步组件、es提案的import()、webpack的require.ensure()
1. vue异步组件技术 vue-router配置路由,使用vue的异步组件技术,可以实现按需加载. 但是,这种情况下一个组件生成一个js文件.举例如下: { path: '/promisedemo' ...
随机推荐
- robotframework数据驱动框架
即将更新...............
- 优化Linux内核参数/etc/sysctl.conf sysctl 《高性能Linux服务器构建实战：运维监控、性能调优与集群应用》
优化Linux内核参数/etc/sysctl.conf sysctl <高性能Linux服务器构建实战:运维监控.性能调优与集群应用> http://book.51cto.com/ar ...
- shell脚本调试技术_转
转自:http://itlab.idcquan.com/linux/SHELL/727128.html 参考:https://linux.cn/article-8045-1.html 本文全面系统地介 ...
- Sqoop -- 用于Hadoop与关系数据库间数据导入导出工作的工具
Sqoop是一款开源的工具,主要用于在Hadoop相关存储(HDFS.Hive.HBase)与传统关系数据库(MySql.Oracle等)间进行数据传递工作.Sqoop最早是作为Hadoop的一个第三 ...
- ajax请求后加额外的数据
$.ajax({ cache: true, type: "POST", url:"${ctx!}/bus/trail/getTrailInfoById", da ...
- Mysql复制-Slave库设置复制延迟
mysql> stop slave; mysql> change master to master_delay=10;#单位是秒 mysql> start slave; mysql& ...
- JQuery-UI Dialog下使用服务器端按钮失效
目标:点按钮弹出div层,选择数据后自动隐藏div,将所选数据赋值到窗体. <div id="divWinPop"> //里面是要实现弹出框的代码,包括翻页.查找等. ...
- 对jsp可见域的变量感悟
page 变量当前页面有效 reqeust 某次请求中的变量有效 session 某次会话中的变量有效 application 全站有效 page<request<session< ...
- Java基础之一组有用的类——为标记定义自己的模式（ScanString)
控制台程序. Scanner类提供了一种方式,用来指定如何识别标记.这需要使用next()方法的两个重载版本.其中的一个版本接受Pattern类型的参数.另一个版本接受String类型的参数,用来指定 ...
- Topcoder SRM 598 div2
e,不知道为啥进不去了,这个B题贪心,从最小和最大的匹配如果超过了就只去最大的! 然后就没了- -! 这场比赛时不知为啥,string出问题了,可能是编译器挂了!0蛋- -!