无阻塞加载外部js(动态脚本元素，XMLHttpRequest注入，LazyLoad)

最新推荐文章于 2023-02-02 13:45:06 发布

weixin_33895516

最新推荐文章于 2023-02-02 13:45:06 发布

阅读量208

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/KingUp/p/5582856.html

版权

动态脚本元素即在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.οnlοad=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完成！");
           });

转载于:https://www.cnblogs.com/KingUp/p/5582856.html

weixin_33895516

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
无阻塞加载外部js(动态脚本元素，XMLHttpRequest注入，LazyLoad)

动态脚本元素即在js中去创建<script>标签加载外部js并执行，这样加载的好处是文件的下载和执行过程不会阻塞页面的其他进程。通过下面两个例子对比出效果<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-...
复制链接

扫一扫