javascript高性能

我在《javascript高性能》 这本书里面读到这个文章,所以做一下学习笔记,供大家一块学习:

无阻塞脚本的概念什么?

为什么要用无阻塞脚本?

如何实现无阻塞脚本,和每个实现方式应该注意什么问题?

我来围绕以上4个问题来展开阐述:

1.无阻塞脚本的概念是什么?


2.为什么要用到无阻塞脚本?


3.如何实现无阻塞脚本?



延迟脚本属性: defer属性

也就是在脚本的标签里面添加defer属性来实现,最后加载这段javascript

[javascript] view plaincopy

<script type="text/javascript" defer>

//添加defer属性,first会在second弹出之后执行

alert("first");

</script>

<script type="text/javascript">

//没有添加defer属性,second会在first弹出之前执行

alert("second");

</script>

缺点: 只有 Internet Explorer4+和firefox 3.5+ 支持 defer 属性,如果要适应其他的浏览器,只能选择下面的几个方案了

动态脚本语言

也就是通过Dom的方法, createElement方法来创建动态的script标签,检测标签加载完成是script的onload方法来检测加载成功,而ie里面不支持这个方法,则是onreadystatechange方法来检测.详细看以下代码:

[javascript] view plaincopy

function addScript(src,callBack)

{

var head=document.documentElement.getElementsByTagName("head")[0];

var scri=document.createElement("script");

scri.type="text/javascript";

/*ie browser*/

if(document.all)

{

scri.onreadystatechange=function()

{

if(scri.readyState=="loaded"||scri.readyState=="complete")

{

alert(src+" ie brower 加载完毕!");

callBack&&callBack();

}

}

}

/*other browser*/

else

{

scri.onload=function()

{

alert(src+" not ie brower 加载完毕!");

callBack&&callBack();

}

}

<pre name="code" class="javascript"><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"> scri.src=src;</blockquote> //一般在设置src之后再append到dom树里面,

//详情 http://www.iefans.net/ie-script-element-readystate/
head.appendChild(scri);</pre>}addScript("js.js",function(){addScript("js2.js")});

<pre></pre>

在
这段代码里面我异步加载了两个js(js.js和js2.js), 在加载第一个js之后又调用了加载第二个js. 应该注意的是ie里面的
onreadystatechange方法里面,判断加载状态(scri.readyState) 的状态有:<br>

<br>

• uninitialized – 原始状态<br>

• loading – 下载数据中..<br>

• loaded – 下载完成<br>

• interactive – 还未执行完毕.<br>

• complete – 脚本执行完毕<br>

<br>

因为在ie各个版本里面无法确定哪个是加载成功,所以判断了两个状态,下载完成和执行完成两种状态,有关详细的ie中script加载状态请参考: http://www.iefans.net/ie-script-element-readystate/<br>
<br>

优点: 1. 兼容各个主流浏览器<br>

2.可以解决js跨域问题.<br>

XMLHttpRequest脚本注入(XHR)

原理：用XMLHTTP取得要脚本的内容，再创建 script 对象。

注意：服务器端js 必须用UTF8编码保存,因为服务器与XML使用UTF8编码传送数据。

代码如下:

[javascript] view plaincopy

<script language="JavaScript">

function GetHttpRequest()

{

if ( window.XMLHttpRequest ) // Gecko

return new XMLHttpRequest();

else if ( window.ActiveXObject ) // IE

return new ActiveXObject("MsXml2.XmlHttp");

}

function AjaxPage(sId, url){

var oXmlHttp = GetHttpRequest();

oXmlHttp.OnReadyStateChange = function()

{

if ( oXmlHttp.readyState == 4 )

{

if ( oXmlHttp.status == 200 || oXmlHttp.status == 304 )

{

IncludeJS( sId, url, oXmlHttp.responseText );

}

else

{

alert( 'XML request error: ' + oXmlHttp.statusText + ' ('+oXmlHttp.status+')') ;

}

}

}

oXmlHttp.open('GET', url, true);

oXmlHttp.send(null);

}

function IncludeJS(sId, fileUrl, source)

{

if ((source!=null)&&(!document.getElementById(sId))){

var oHead = document.getElementsByTagName('HEAD').item(0);

var oScript = document.createElement( "script" );

oScript.language = "javascript";

oScript.type = "text/javascript";

oScript.id = sId;

oScript.defer = true;

oScript.text = source;

oHead.appendChild( oScript );

}

}

AjaxPage( "script1", "b.js" );

</script>

部分源码来自: http://mario-design.iteye.com/blog/147810
优点:

1.兼容各个主流浏览器

缺点:

1.存在js跨域问题, 也就是 www.baidu.com 页面无法下载 www.google.com?aa.js 这个问题

以上是我对无阻塞脚本的总结,博文有什么问题可以直接留言给我或者发送邮件nishiwode923@qq.com. 中间有部分内容来自其他博文,已将链接公布在博文内部,希望原博文lz可以谅解.