点评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' ...
随机推荐
- 第三方Jar上传到Nexus3
mvn deploy:deploy-file -DgroupId=ESPPaaSService -DartifactId=ESPPaaSService -Dversion=1.0 -Dpackagin ...
- 不连数据库List分页
package com.jpsycn.kfwggl.common.crawl; import java.util.ArrayList; import java.util.List; public cl ...
- 关闭不安全的HTTP方法
关闭不安全的HTTP方法 在项目或tomcat下的web.xml中,添加如下配置: <!-- 关闭不安全的HTTP方法 --> <security-constraint> &l ...
- Kafka使用入门教程 简单介绍
介绍 Kafka是一个分布式的.可分区的.可复制的消息系统.它提供了普通消息系统的功能,但具有自己独特的设计.这个独特的设计是什么样的呢? 首先让我们看几个基本的消息系统术语: Kafka将消息以 ...
- Power-BI:从5方面助力您企业的发展
商务智能让企业得以使用自己的数据来预测销量趋势.分析ROI.追踪收益.做出更明智的产品和服务决策.商务智能可从5个方面让您成为“数据之星”,为您发展企业: 1．关注企业成长.而非数据 优质的BI工具最 ...
- 百度地图API 简单示例
百度地图API2.0需要申请AK javascript引用百度地图API 设置地图DIV样式 javascript设置地图DIV 如下图代码: <!DOCTYPE html> <ht ...
- jQuery.proxy()函数
jQuery.proxy(),接受一个函数,然后返回一个新函数,并且这个新函数始终保持了特定的上下文(context)语境. context 代表上下文 name是上下文的某个属性 jQuery. ...
- linux：计算机概论
1>.计算机的五大单元:输入单元.输出单元.CPU内部的控制单元.算术逻辑判断单元和主记忆体单元(记忆体包含主记忆体和辅组记忆体): 2>.CPU分为两类:精简微指令集(RISC)和复杂微 ...
- Linux14.04安装JDK
1.下载jdk-7u5-linux-x64.tar.gz, 2.解压 一版有人会安装在e有人会安装在tc/local,etc/lib 或者opt等目录下. 安装目录:etc/local 解压到etc/ ...
- Summary: Merge Sort of Array && 求逆序对
常用算法(后面有inplace版本): package ArrayMergeSort; import java.util.Arrays; public class Solution { public ...