点评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' ...
随机推荐
- ubuntu14.04安装Docker
Ubuntu在14.02开始就已经集成了Docker,要安装很简单: 1 2 3 4 sudo apt-get update sudo apt-get install docker.io sudo ...
- 微信公开课PRO版张小龙演讲全文
今天,微信当家人张小龙通过微信官方账户发布了一则视频,视频中张小龙阐述了微信对于开放平台的一些理念和方向.张小龙用八点概括.以下是张小龙发言: 各位参加微信公开课的朋友们,大家好. 首先很遗憾这一次不 ...
- [BS-03] 统一设置UITabBarController管理的所有VC的tabBarItem图标文字的颜色大小等属性
1. 统一设置UITabBarController管理的所有VC的tabBarItem图标文字的颜色大小等属性 . 统一设置UITabBarController管理的所有VC的tabBarItem图标 ...
- 删除SSMS中保存的帐户信息
通常我们在对象资源管理器中连接服务器时,会发现在服务器名称下保存有之前的实例信息.随着连接增多,要找某个连接还得费劲.sql2012:此时可以删除C:\Users\Administrator\AppD ...
- Windows 7 / Windows 10 安装 IPX/SPX
以我的系统为例: Windows 7/10 x64 首先下载 NWLINK IPX/SPX 驱动(这是 Microsoft 对 IPX/SPX 的实现.) http://pan.baidu.com/s ...
- iOS 延迟执行
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(<#delayInSeconds#> * NSEC_PER_SEC)), ...
- 内存溢出之Tomcat内存配置
设置Tomcat启动的初始内存其初始空间(即-Xms)是物理内存的1/64,最大空间(-Xmx)是物理内存的1/4. 可以利用JVM提供的-Xmn -Xms -Xmx等选项可进行设置 三.实例,以下给 ...
- 模拟退火法（吊打XXX）Bzoj3680
3680: 吊打XXX Time Limit: 10 Sec Memory Limit: 128 MBSec Special Judge Submit: 308 Solved: 94 [Subm ...
- how to use automapper in c#, from cf~
[DataContract] public class GroupDto { [DataMember] public int id { get; set; } [DataMember] public ...
- 【IOS】1.学前准备
OC 支持 GC 只在Mac OS X好用. IOS 不支持GC. iPhone开发环境必须是 Mac OS X Xcode包括 Xcode.app iPhone SDK iPhone Simulat ...