高性能JavaScript--加载和执行(简要学习笔记一)
<html>
<body> <script type="text/javascript" defer="defer">
alert(document.getElementById("p1").firstChild.nodeValue);
</script> <p>上面的脚本会从下面的段落中请求信息。通常,这是做不到的,因为在段落加载之前,脚本已经运行过了。</p> <p id="p1">hello zqz!</p> <p>然而,defer 属性规定了脚本必须在页面加载完毕后执行。这样,脚本就可以从段落中请求数据了。</p> <p><b>注释:</b>该属性只能在 Internet Explorer 中运行。</p> </body>
</html>
async 属性规定一旦脚本可用,则会异步执行。
注释:async 属性仅适用于外部脚本(只有在使用 src 属性时)。
<!DOCTYPE html>
<html>
<body>
<p id="p1">Hello ZQZ!</p>
<script type="text/javascript" src="/example/html5/demo_async.js" async="async"></script>
</body>
</html>
方法三:动态加载脚本
动态加载脚本节点下载文件时,返回的代码通常会立即执行。
书上说在火狐,谷歌等浏览器上可以使用<script>元素接收完成时触发的一个load事件来监听脚本加载完成时的状态。
<script> var script=document.createElement("script");
script.type="text/javascript"; script.load=function(){ alert("接收外部script完成!");
}; script.src="scprit1.js";
document.getElementsByTagName("head")[0].appendChild(script); </script>
可在我测试后,无论是在哪个浏览器都没有效果,不知道是为什么!求知道的博友们留言给我。谢谢!
而IE中有另外一种实现方式,他会触发一个readystatechange事件。可以用来监听script的加载完成。<script>元素提供一个readyState属性。
该属性有5种取值:
"uninitialized" //初始状态 "loading" //开始下载 "loaded" //下载完成 "interactive" //数据完成下载但尚不可用 "complete" //所有数据已准备就绪
然后在微软的相关文档中表明,在<script>生命周期中,并非每个取值都会用到。所以最靠谱的就是检查“loaded”跟"complete"。
var script=document.createElement("script");
script.type="text/javascript"; script.onreadystatechange=function(){
//alert("0")
if(script.readyState=="loaded" || script.readyState=="complete"){ script.onreadystatechange=null; //删除事件处理器,避免处理两次
alert("外部js接收完成");
} }; script.src="scprit1.js";
document.getElementsByTagName("head")[0].appendChild(script);
该书中还有一个封装好的标准及IE特有的实现方法:
function loadscript(url,callback){
var script=document.createelement("script");
script.type="text/javascript";
if(script.readystate){//ie
script.onreadystatechange=function(){
if(script.readystate=="loaded"||script.readystate== “complete"){
script.onreadystatechange=null;
callback();
}
};
}else{//其它浏览器
script.onload=function(){
callback();
};
}
script.src=url;
document.getelementsbytagname("head")[0].appendchild(script);
}
使用方法:
loadScript("scprit1.js",function(){
alert("外部js加载完成!")
})
高性能JavaScript--加载和执行(简要学习笔记一)的更多相关文章
- 高性能JavaScript 加载和执行
前言 本章主要讲述如何加载脚本使得用户能有良好的用户体验,而核心内容就是JavaScript的异步加载.之前写过一篇不得不说的JavaScript异步加载,相似的内容就不多加描述,讲些不同的东西,主要 ...
- 怎么样加快JavaScript加载和执行效率
概览 无论当前 JavaScript 代码是内嵌还是在外链文件中,页面的下载和渲染都必须停下来等待脚本执行完成.JavaScript 执行过程耗时越久,浏览器等待响应用户输入的时间就越长.浏览器在下载 ...
- 加快JavaScript加载和执行效率
JavaScript 在浏览器中的性能成为开发者所面临的最重要的可用性问题.而这个问题又因 JavaScript 的阻塞特性变的复杂,也就是说当浏览器在执行 JavaScript 代码时,不能同时做其 ...
- JavaScript权威设计--事件处理介绍(简要学习笔记十七)
1.事件相关概念 事件类型:一个用来说明发生什么类型事件的字符串 事件目标:是发生的事件或与之相关的对象. 事件处理程序(事件监听程序):是处理货响应事件的函数. 事件对象:是与特定事件相关并且包含有 ...
- JavaScript权威设计--Window对象(简要学习笔记十三)
1.Window对象是所有客户端JavaScript特性和API的主要接入点. Window对象中的一个重要属性是document,它引用Document对象. JavaScript程序可以通过Doc ...
- js模块加载框架 sea.js学习笔记
seajs实现了JavaScript 的 模块开发及按模块加载.用来解决繁琐的js命名冲突,文件依赖等问题,其主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载. 官方文档:http:/ ...
- android图片的异步加载和双缓存学习笔记——DisplayImageOptions (转)
转的地址:http://hunankeda110.iteye.com/blog/1897961 1 //设置图片在下载期间显示的图片 2 showStubImage(R.drawable.ic_lau ...
- 高性能JavaScript--快速响应的用户界面(简要学习笔记三)
1.浏览器线程:用于执行JavaScript和更新用户界面的进程被称为“浏览器UI线程”. 2. <1>定时器的出现让出UI线程控制权 setTimeout(),setInterval ...
- JavaScript权威设计--JavaScript表达式与运算符,语句(简要学习笔记六)
1.delete是一元操作符,用来删除对象属性或者元素. var a={ x:1, y:2 } delete a.x; //删除x属性 “x”in a //false:a对象中已经不存在x属性 ale ...
随机推荐
- dotNET跨平台相关文档整理
一直在从事C#开发的相关技术工作,从C# 1.0一路用到现在的C# 6.0, 通常情况下被局限于Windows平台,Mono项目把我们C#程序带到了Windows之外的平台,在工作之余花了很多时间在M ...
- ABP教程-打造一个《电话簿项目》-目录-MPA版本-基于ABP1.13版本
此系列文章会进行不定期的更新,应该会有6章左右. 感兴趣的朋友可以跟着看看,本教程适合已经看过ABP的文档但是又无从下手的小伙伴们. 初衷: 发布系列教程的原因是发现ABP在园子火了很久,但是发现还是 ...
- ABP文档 - 目录
ABP框架 概览 介绍 多层结构 模块系统 启动配置 多租户 集成OWIN 共同结构 依赖注入 会话 缓存 日志 设置管理 时间 领域层 实体 值对象(新) 仓储 领域服务 工作单元 领域事件(Eve ...
- Gradle配置APK自动签名完整流程
转载请注明出处:http://www.cnblogs.com/LT5505/p/6256683.html 一.生成签名 1.命令行生成签名,输入命令keytool -genkey -v -keysto ...
- 用C语言封装OC对象(耐心阅读,非常重要)
用C语言封装OC对象(耐心阅读,非常重要) 本文的主要内容来自这里 前言 做iOS开发的朋友,对OC肯定非常了解,那么大家有没有想过OC中NSInteger,NSObject,NSString这些对象 ...
- 如何安全的将VMware vCenter Server使用的SQL Server Express数据库平滑升级到完整版
背景: 由于建设初期使用的vSphere vCenter for Windows版,其中安装自动化过程中会使用SQL Server Express的免费版数据库进行基础环境构建.而此时随着业务量的增加 ...
- javascript设计模式:策略模式
前言 策略模式有效利用组合.委托.多态等技术和思想,可以有效避免多重条件选择语句. 策略模式对开放-封闭原则提供了很好的支持,将算法封装在strategy中,使得他们易于切换.理解.扩展. 策略模式中 ...
- js数组学习整理
原文地址:js数组学习整理 常用的js数组操作方法及原理 1.声明数组的方式 var colors = new Array();//空的数组 var colors = new Array(3); // ...
- [WPF] Wait for a moment.
一.控件介绍 在 WPF 中使用的等待控件,控件包括三种,普通的等待信息提示(WaitTip),进度条提示(WaitProgress),以及主程序覆盖的模拟时钟等待窗口(WaitClock),具体效果 ...
- 每天一个设计模式-7 生成器模式(Builder)
每天一个设计模式-7 生成器模式(Builder) 一.实际问题 在讨论工厂方法模式的时候,提到了一个导出数据的应用框架,但是并没有涉及到导出数据的具体实现,这次通过生成器模式来简单实现导出成文本,X ...