zoukankan      html  css  js  c++  java
  • 无阻塞加载外部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完成!");
               });
  • 相关阅读:
    k3 cloud套打模板中出现单元格数据为空的情况,及无法正确的选择数据源
    k3 cloud中列表字段汇总类型中设置了汇总以后没有显示出汇总值
    k3 cloud查看附件提示授予目录NetWorkService读写权限
    k3 cloud中提示总账期末结账提示过滤条件太长,请修改此过滤条件
    金蝶云k3 cloud采购入库单校验日期不通过
    C# Code First 配置(二)
    C# Azure 远程调试
    C# ABP源码详解 之 BackgroundJob,后台工作(一)
    C# 在webapi项目中配置Swagger(最新版2017)
    高并发之
  • 原文地址:https://www.cnblogs.com/KingUp/p/5582856.html
Copyright © 2011-2022 走看看