同步无阻塞加载js

willko

浏览: 383993 次
性别:
来自: 深圳

最近访客更多访客>>

路人NFTS

chinalongxia

Sdky

zhengshujunyx

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Javascript & Web

JavaScript PHP BBS C C++

一同事分析页面遇到阻塞式加载js，影响了页面的渲染速度。.

之前，实现WYSIWYG插件机制的时候为了实现lazy load，写了个同步无阻塞加载js的方法，解决方法很暴力，仅供参考，，注意，只是个demo。。。

<!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" xml:lang="zh-CN" dir="ltr"> 
  <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
    <title>test</title> 
   <script type="text/javascript">
		var require = {};

		function importJS(file) {  
  
            if (typeof require[file] != "undefined") {  
                return;  
            }  
  
            require[file] = true;  
  
            var script = document.createElement("script");  
            script.type = "text/javascript";  
            script.src = file;  
  
            var callback = arguments.callee.caller;  
  
            script.onload = function() {  
                callback();  
                callback = function(){};  
            };  
  
            script.onreadystatechange = function() {  
                if(/loaded|complete/.test(this.readyState)) {  
                    callback();  
                    callback = function(){};  
                }  
            };  
  
            document.getElementsByTagName("head")[0].appendChild(script);  
  
            throw "";  
        }
   </script>
   <script type="text/javascript">
(function(){try {
	importJS('a.js'); //先加载a.js
	importJS('b.js'); //然后加载b.js

	alert('c'); //最后打印c
}catch (ex) {}})();
   </script>
  </head> 
  <body>

  </body>

  </html>

要使用importJS的那段js代码必须写在(function(){try { /*代码*/ }catch (ex) {}})();之间，且importJS要在头部...不然会重复执行，，，写这个demo的时候，发现ff3下嵌套加载会出现alert无法阻塞的bug

这肯定不是很好的解决方法，限制比较大，只是勉强解决同步无阻塞加载^_^，并且参考了bingo的方法

对于，同步无阻塞加载js有兴趣的朋友，可以延伸阅读：
http://bbs.51js.com/viewthread.php?tid=72939&extra=page%3D1%26amp;filter%3Ddigest
http://www.iteye.com/topic/134964
http://jindw.iteye.com/blog/66702
http://jsvm.org/forums/2424/ShowPost.aspx#2424

希望，有朋友可以提供一个比较好的解决方法。

分享到：

再实验mysql中批量查询使用in还是n+1？ | 一次查询完成基于“父id"的无限分类

2009-06-28 00:25
浏览 5521
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论