首页 技术 正文
技术 2022年11月14日
0 收藏 630 点赞 3,128 浏览 2501 个字

1.多数浏览器使用单一进程来处理用户界面刷新和JavaScript脚本的执行。所以同一时刻只能做同一件事。JavaScript执行过程耗时越久,浏览器等待相应的时间就越长。 2.<script>标签用来加载出现在<head>中的外链JavaScript文件,紧挨着<link>标签用来加载外部css文件或者其他页面元素。理论上来说,把与样式和行为有关的脚本放在一起,并先加载他们,这样有助于确保页面的渲染和交互的正确性。但这样会带来严重的性能问题。 3.由于脚本阻塞页面其他资源的下载,建议将所有的<script>标签放到<body>标签的底部。 4.多个<script>外链脚本的下载会带来HTTP请求的性能开销。所以下载单个100KB的文件将比下载4个25KB的文件快。也即减少页面中外链的数量将会改善性能。 5.无阻塞脚本的秘诀在于,在页面完成加载后才加载javascript。意味着在window对象的load事件触发后在下载脚本。 6.方法一:defer属性(IE中)属性规定是否对脚本执行进行延迟,直到页面加载为止。该属性指明元素含有的脚本不会修改DOM。

<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>

高性能JavaScript–加载和执行(简要学习笔记一)

 方法二:html5中新增加的方法async=”true”(IE9中可以)

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>

高性能JavaScript–加载和执行(简要学习笔记一)

方法三:动态加载脚本

动态加载脚本节点下载文件时,返回的代码通常会立即执行。

书上说在火狐,谷歌等浏览器上可以使用<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);

高性能JavaScript–加载和执行(简要学习笔记一)高性能JavaScript–加载和执行(简要学习笔记一)

该书中还有一个封装好的标准及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加载完成!”)  

})

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,489
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,904
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,737
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,490
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:8,128
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:5,290