手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆

Javascript堵塞问题的解决[转]

首页 > Javascript >

本文来自:Thinking in LAMP - 老王的技术手册,网址是在baidu上面的,文章URL是:http://hi.baidu.com/thinkinginlamp/blog/item/1ebc2e730600891b8601b049.html

原文内容如下:(为了方便,我将图片COPY过来了,而并非是引用,不好意思老王)

所谓“Javascript堵塞问题”,指的是浏览器在下载javascript文件的时候,会堵塞其他下载进程,并且多个javascript文件之 间,只能一个一个下载,不能并行下载。浏览器之所以要这么干,一来是因为javascript里可能会有一些涉及页面渲染的操作,比如 document.write,所以要先把他们加载完,以免影响用户体验,二来是如果并发下载javascript文件,代码执行的先后顺序会错乱,从而 引起逻辑错误。为了规避上述弊端,YSlow建议如果有多个javascript文件,并且这些文件里没有类似document.write等页面渲染的 操作,那么应该尽可能把他们合并成一个文件,并放到页面的尾部。不过很多时候,合并javascript文件是个浩大的工程,不仅破坏了模块化结构,而且 还可能会给代码维护带来不必要的麻烦,今天说说另一个方法,以期避免对现有代码的大规模修改。

先做两个javascript文件,他们是a.php,b.php,之所以用php文件是因为我只会这个,内容如下:

PHP代码
  1. <?php sleep(1); ?>  

 

可以看到a.php和b.php的内容是一样的,其中之所以sleep一秒钟,是为了让演示的效果更明显。

现在让我们来做一个页面(x.htm),看看javascript堵塞问题是如何产生的:

XML/HTML代码
  1. <html>  
  2. <head>  
  3. <title>DEMO</title>  
  4. <script type="text/javascript" src="a.php"></script>  
  5. <script type="text/javascript" src="b.php"></script>  
  6. </head>  
  7. <body>  
  8. <img src="http://www.google.com/intl/en_ALL/images/logo.gif">  
  9. </body>  
  10. </html>  

浏览这个页面的时候,通过Pagetest软件,我们可以看到类似下面的结果:

大小: 3.2 K
尺寸: 500 x 69
浏览: 2383 次
点击打开新窗口浏览全图

我们可以看到,logo.gif图片的下载进程被堵塞了,并且a.php和b.php是分别下载的。

下面让我们再来做一个页面(y.htm),看看是怎么解决这个问题的:
XML/HTML代码
  1. <html>  
  2. <head>  
  3. <title>DEMO</title>  
  4. <script>  
  5. var load = function(file) {  
  6.     var scriptElement = document.createElement("script");  
  7.     scriptElement.src = file;  
  8.     document.getElementsByTagName("head")[0].appendChild(scriptElement);  
  9. }  
  10. load('a.php');  
  11. load('b.php');  
  12. </script>  
  13. </head>  
  14. <body>  
  15. <img src="http://www.google.com/intl/en_ALL/images/logo.gif">  
  16. </body>  
  17. </html>  
浏览这个页面的时候,通过Pagetest软件,我们可以看到类似下面的结果:
大小: 3.23 K
尺寸: 500 x 69
浏览: 2296 次
点击打开新窗口浏览全图
结论显而易见,logo.gif图片的下载进程并没有被堵塞,并且a.php和b.php是并行下载的。

参考资料:http://stevesouders.com/docs/web20expo-20080425.ppt


膘叔:虽然从我个人而言,我会考虑将js换到其他的域名下面,以防止堵塞(所谓的YAHOO设计网页14条军规中的),然后通过一个程序minify来进行引用。关于minify我会单独介绍。(其实也是COPY别人的文章而来,最近是很懒了。一是要考试,二是单位太忙,只能做到天天更新,但无法原创了)

 




本站采用创作共享版权协议, 要求署名、非商业和保持一致. 本站欢迎任何非商业应用的转载, 但须注明出自"易栈网-膘叔", 保留原始链接, 此外还必须标注原文标题和链接.

Tags: javascript, load, block

« 上一篇 | 下一篇 »

只显示10条记录相关文章

[转载]超强大的jquery formValidator (浏览: 51813, 评论: 3)
jQuery插件---获取URL参数 (浏览: 47113, 评论: 1)
通过JS更改FORM的action (浏览: 36365, 评论: 1)
JQuery学习第一天 (浏览: 36345, 评论: 3)
JS美化软件 (浏览: 33423, 评论: 4)
如何调试JS错误 (浏览: 29585, 评论: 0)
jQuery Plugins -- JQzoom (浏览: 28532, 评论: 3)
Minify的简单介绍 (浏览: 28123, 评论: 0)
利用PHP裁剪图片 (浏览: 28053, 评论: 4)
Javascript的变量与delete操作符 (浏览: 27940, 评论: 1)

发表评论

评论内容 (必填):