无阻塞加载外部js(动态脚本元素，XMLHttpRequest注入，LazyLoad)
动态脚本元素即在js中去创建<script>标签加载外部js并执行，这样加载的好处是文件的下载和执行过程不会阻塞页面的其他进程。通过下面两个例子对比出效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<script src="1.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function () {
var i = 0;
while (i < 1000000000) {
i++;
}
alert("内部js");
}
</script>
</head>
<body>
<div id="aa" style="color: Red; font-size: 200px;">
测试js加载顺序影响的性能问题。【放在底部加载】
</div>
</body>
</html>
A.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<script type="text/javascript">
window.onload = function () {
loadScript("1.js",function(){alert("加载外部js完成")})
var i = 0;
while (i < 1000000000) {
i++;
}
alert("内部js");
}
function loadScript(url,callback){
var script=document.createElement("script");
script.type="text/javascript";
if(script.readyState){
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);
}
</script>
</head>
<body>
<div id="aa" style="color: Red; font-size: 200px;">
测试js加载顺序影响的性能问题。【放在底部加载】
</div>
</body>
</html>
B.html
var i = 0;
while (i < 1000000000) {
i++;
}
alert("外部js");
1.js
进过执行后会发现，A.html执行结果为 alert("外部js") alert("内部js") render树渲染
B.html执行结果为 alert("内部js") render树渲染 alert("外部js") alert("加载外部js完成")
通过结果对比后，理解不阻塞页面其他进程更加直观
除了动态加载js外，还有XMLHttpRequest对象获取脚本也是无阻塞的，示例代码如下
var xhr=new XMLHttpRequest();
xhr.open("get","1.js",true);
xhr.onreadystatechange=function(){
if(xhr.readyState==4) {
if(xhr.status >= 200 && xhr.status<300 || xhr.status == 304){
var script=document.createElement("script");
script.type="text/javascript";
script.text=xhr.responseText;
document.body.appendChild(script);
}
}
}
xhr.send(null);
延迟加载工具LazyLoad
LazyLoad.js("1.js",function(){
alert("加载外部js完成！");
});
//加载多个
LazyLoad.js(["1.js","2.js"],function(){
alert("加载外部js完成！");
});
