js异步加载的3种方式(转载)
1.defer标签 只支持IE
defer属性的定义和用法: 属性规定是否对脚本执行进行延迟,直到页面加载为止。有的 javascript 脚本 document.write 方法来创建当前的文档内容,其他脚本就不一定是了。
如果您的脚本不会改变文档的内容,可将 defer 属性加入到 <script> 标签中,以便加快处理文档的速度。因为浏览器知道它将能够安全地读取文档的剩余部分而不用执行脚本,它将推迟对脚本的解释,直到文档已经显示给用户为止。
<script type="text/javascript" defer="defer">
alert(document.getElementById("p1").firstChild.nodeValue);
</script>
2.async(async 属性是 HTML5 中的新属性。)
async 属性规定一旦脚本可用,则会异步执行。
注释:async 属性仅适用于外部脚本(只有在使用 src 属性时)。
注释:有多种执行外部脚本的方法:
如果 async="async":脚本相对于页面的其余部分异步地执行(当页面继续进行解析时,脚本将被执行)
如果不使用 async 且 defer="defer":脚本将在页面完成解析时执行
如果既不使用 async 也不使用 defer:在浏览器继续解析页面之前,立即读取并执行脚本
<script type="text/javascript" src="demo_async.js" async="async"></script>
3.创建script,插入到DOM中,加载完毕后callBack;
function loadScript(url, callback){
var script=document.creatElment("script");
script.type="text/javascript";
if(script.readyState){ ie
script.onReadyState=function(){
if(script.readyState ="load" || script.readyState = "complete"){
script.onReadyState=null;
callback();
}else{
script.onload=function(){
callback();
}
}
}
}
script.src=url;
document.body.appendChild(script);
}
js异步加载的3种方式(转载)的更多相关文章
- 点评js异步加载的4种方式
主要介绍了点评js异步加载的4种方式,帮助大家更全面的了解js异步加载方式,感兴趣的小伙伴们可以参考一下 js异步加载的4种方式,点评开始. <!DOCTYPE html> <htm ...
- JS异步加载的三种方式
js加载的缺点:加载工具方法没必要阻塞文档,过得js加载会影响页面效率,一旦网速不好,那么整个网站将等待js加载而不进行后续渲染等工作. 有些工具方法需要按需加载,用到再加载,不用不加载,. 默认正常 ...
- js异步加载的5种方式
方案1:$(document).ready 点评: 1.需要引用jquery 2.兼容所有浏览器. 方案2:<script>标签的async="async"属性 asy ...
- 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" ...
- route按需加载的3种方式:vue异步组件、es提案的import()、webpack的require.ensure()
1. vue异步组件技术 vue-router配置路由,使用vue的异步组件技术,可以实现按需加载. 但是,这种情况下一个组件生成一个js文件.举例如下: { path: '/promisedemo' ...
- js 异步加载的方式
js 异步加载的方式 渲染引擎遇到 script 标签会停下来,等到执行完脚本,继续向下渲染 defer 是“渲染完再执行”,async 是“下载完就执行”,defer 如果有多个脚本,会按照在页面中 ...
随机推荐
- 【开源】知乎日报UWP 更新
说明 大概十天之前我更新了一次APP,后来又仔细看了一下Store里的评论,发现还有几个地方没有改过来.于是前天晚上抽时间改了一下,顺便完善了一下UI体验. 没有看前面文章的童鞋可以看一下下面的链接: ...
- 在同一个硬盘上安装多个 Linux 发行版及 Fedora 21 、Fedora 22 初体验
在同一个硬盘上安装多个 Linux 发行版 以前对多个 Linux 发行版的折腾主要是在虚拟机上完成.我的桌面电脑性能比较强大,玩玩虚拟机没啥问题,但是笔记本电脑就不行了.要在我的笔记本电脑上折腾多个 ...
- 【初探Spring】------Spring IOC(一)
IOC:Inversion of Control(控制反转).IOC它所体现的并不是一种技术,而是一种思想,一种将设计好的对象交给容器来管理的思想.IOC的核心思想就体现在控制.反转这两个词上面,要理 ...
- Alcatraz 的安装和删除
Xcode 所有的插件都安装在目录: ~/Library/Application Support/Developer/Shared/Xcode/Plug-ins/ 你也可以手工切换到这个目录来删除插件 ...
- RowVersion数据类型
RowVersion数据类型是系统自动生成的,唯一的,二进制数字,数值和binary(8)相同,RowVersion通常用作给Table的数据行加版本戳,存储大小为 8 个字节.RowVersion数 ...
- 【Win 10 应用开发】TCP通信过程
基于TCP协议的通信,估计大伙儿都不陌生的,以前玩.net或玩C++的时候应该玩得很多吧.现在老周简单介绍一下在RT中如何用. TCP是基于连接的,所以,肯定有一方是监听者,通常称服务端或服务器,它负 ...
- 如何在博客中使用SublimeText风格的代码高亮样式
因为觉得博客园自带的代码高亮样式很单一,不符合作为前端的我的审美习惯,于是下定决心要想办法折腾出一个方法来应用上另外一套代码高亮样式. 虽然探索的过程是很痛苦的,但最后还是成功了,但也不枉付出的那些努 ...
- ASP.NET Core 中文文档 第四章 MVC(2.3)格式化响应数据
原文:Formatting Response Data 作者:Steve Smith 翻译:刘怡(AlexLEWIS) 校对:许登洋(Seay) ASP.NET Core MVC 内建支持对相应数据( ...
- .Net语言 APP开发平台——Smobiler学习日志:如何快速实现地图定位时的地点微调功能
Smobiler是一个在VS环境中使用.Net语言来开发APP的开发平台,也许比Xamarin更方便 样式一 一.目标样式 我们要实现上图中的效果,需要如下的操作: 二.地点微调代码 VB: Dim ...
- Github Pages和Hexo创建静态博客网站
Github Pages和Hexo创建静态博客网站 安装Node.js 本人是window环境,所以下载window版. 下载地址:https://nodejs.org/en/download/ 下载 ...