如何使用iframe标签，延迟加载跨域JS文件

首先需要了解浏览器对JS的下载模式。

早期浏览器采用阻塞式下载，也就是单线下载，任何资源下载时间过长都可能导致网页打开过慢；而后期的浏览器采用瀑布式，多线下载，大大提高了网页打开速度，但是文档的ready依然受到所有JS文件下载的影响，造成类似木桶原理的短板效应，任何一个资源下载过长都会影响其他JS的使用。

在WEB项目中，经常会出现需要使用其他合作伙伴的JS文件的情况，比如可信网站的验证，网站点击的采集统计，都可能使用其他公司域名下的JS文件。

而跨域访问往往是性能瓶颈所在，毕竟有网路消耗，更何况其他公司的资源自身是无法控制的，对方任何失误都可能对自己造成牵连。

如上图httpWatch监测到得结果所示，一个跨域访问的JS文件加载时间过长，造成页面加载被牵连，蓝色竖线也就是document的load事件触发的时间被其拖后了一大截，其他JS的特效在该文件被加载完成前始终无法使用，极其影响客户体验。

 

解决的办法是对非必须和页面同时加载的跨域JS文件做延迟加载。

首先页面上需要一个iframe。

[html]  view plain copy print ?

1. <</span>div class="test">  
2.     <</span>iframe id="registerWebsit" scrolling="no" style="display:none" width="180" height="70" frameborder="0">  
3.                   
4.     </</span>iframe>  
5. </</span>div>  

这个iframe不做任何连接，并且被隐藏。

当页面资源加载完毕时，我们再用JS修改它的连接并显示出来。

[html]  view plain copy print ?

1. <</span>script type="text/javascript">  
2.     $(window).load(function(){                
3.         $("#registerWebsit").attr("src","/jsp/common/registerWebsit.jsp");  
4.         $("#registerWebsit").show();  
5.     });  
6. </</span>script>  

registerWebsit.jsp的内容为需要延迟加载的JS：

[html]  view plain copy print ?

1. <</span>%@ page contentType="text/html;charset=utf-8"%>  
2. <</span>html>  
3. <</span>head>  
4. </</span>head>  
5. <</span>body style="background:#a5a398">  
6.     <</span>div style="margin-left:15px">  
7.     <</span>script type="text/javascript" src="http://xxx.xxx.com"></</span>script>  
8.     </</span>div>  
9. </</span>body>  
10. </</span>html>  

 

使用后的httpWatch监测结果显示：

最后才加载该JS，该JS的加载被移到了红线也就是page的load事件完成之后。该JS即使受到影响，也不会让自身网页加载失败。