现有WEB应用为了提高客户体验,提高前台脚本的复用性,常使用大量的脚本,一个页面在显示时,加载几百K的脚本文件越来越常见,使用HTTPHandler模拟一个需要加载较长时间的脚本文件.
Scripts.ashx
public class Scripts : IHttpHandler {
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "application/x-javascript";
System.Threading.Thread.Sleep(1500);
context.Response.Write("//");
}
public bool IsReusable {
get {return false; }
}
}
使用传统的加载方式对其进行加载,
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server" id="aaa">
<title>Untitled Page</title>
<script type="text/javascript" language="javascript" src="Scripts.ashx?a"></script>
<script type="text/javascript" language="javascript" src="Scripts.ashx?b"></script>
通过IE可以看到加载这些脚本是顺序进行的,以此类推多个大脚本的加载的时间将成几何倍增长,对服务器假设再国外的站点,以及网络状况较差的用户来说,从开启页面到看到页面将花费数十秒时间。
打破传统的页面加载方式,通过document.write()来对脚本进行动态加载
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server" id="aaa">
<title>Untitled Page</title>
<script type="text/javascript" language="javascript">
document.write(
'<script type="text/javascript" language="javascript"' +
' src="Scripts.ashx?a"><' + '/script>');
document.write(
'<script type="text/javascript" language="javascript"' +
' src="Scripts.ashx?b"><' + '/script>');
</script>
</head>
用这种方法加载脚本,通过IE会发现,脚本的加载是并行的,虽然仍然无法突破Http协议规定的一个Domain只能有两个连接的限制,但是脚本的加载速度已经明显快了很多.
浏览器判断域名的方式比较严格,是以同一域名下的子域名,同一域名下端口不同,都算不同,通过增加子域名来增加并行加载的连接数较为常见。
在开发过程中可以通过修改Host文件,来模拟多连接并发下载的情况。
Host文件
127.0.0.1 gms.test.91.com
127.0.0.1 gms1.test.91.com
127.0.0.1 gms2.test.91.com
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript" language="javascript">
document.write('<script type="text/javascript" language="javascript"' +
' src="http:// gms.test.91.com/Scripts.ashx?a"><' + '/script>');
document.write('<script type="text/javascript" language="javascript"' +
' src="http://gms1.test.91.com /Scripts.ashx?b"><' + '/script>');
document.write('<script type="text/javascript" language="javascript"' +
' src="http://gms2.test.91.com/Scripts.ashx?c"><' + '/script>');
</script>
通过IE可以看到,加载3个各需要1.5s完成时间的脚本,几乎在2s内就完成。
最后说一下defer这个属性, <script defer="defer"></script>,曾经在使用某些第三方的脚本控件时,加载过程中会报错,提示internet explorer 无法打开站点,已终止操作,在加了defer属性后,就不再报错,查阅了相关资料,defer属性的作用是告诉浏览器,脚本中不存在需要立即执行的代码,并且可以在后台对脚本进行下载,与页面显示是并行的,但是defer在firefox中是不被支持的。