点评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' ...
随机推荐
- preg_match_all
<meta charset="utf8"> <?php set_time_limit (0); for($i=1;$i<34;$i++){ $url = & ...
- Unicode和多字节字符集 (MBCS) 杂谈
这个估计是很多人曾经头疼过的问题,现在的VC版本基本都支持Unicode和多字节字符集 (MBCS),在进行MFC编程时VC的默认设置是unicode字符集.但是我们通常需要做一些代码移植的工作,如果 ...
- python_序列
1. python存在6中内建序列:列表.元组.字符串.Unicode字符串.buffer对象.xrange对象 列表可以修改,元组和字符串不可以修改. 2. 序列支持的操作: 索引 序列中所有的元素 ...
- UIActivityIndicatorView
1. activityIndicatorViewStyle 设置指示器的样式 UIActivityIndicatorViewStyleWhiteLarge UIActivityIndicator ...
- jQuery框架的简单使用（H5）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- iOS UICollectionView之二（垂直滚动）
#import <UIKit/UIKit.h> @interface AppDelegate : UIResponder <UIApplicationDelegate> @pr ...
- The REST Objection
HTTP 1.1 Standard http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html
- RAC数据库迁移ASM磁盘组到其它存储
环境介绍: 一共有两个磁盘组:crs和data:crs使用normal冗余:data使用外部冗余. 添加新的asm磁盘过程(略) 1.迁移前 SQL> select group_number, ...
- Lintcode: Route Between Two Nodes in Graph
Given a directed graph, design an algorithm to find out whether there is a route between two nodes. ...
- Eclipse下配置C++开发环境（转）
1. 首先确保你的电脑上已经安装了Java,如果没有,或者不确定,请到官网上下载并安装,网址如下(这一步我就不详述了): http://www.java.com/zh_CN/ 2. 到官网上下载并 ...