同步无阻塞加载js

最新推荐文章于 2024-08-06 22:26:26 发布

phphot

最新推荐文章于 2024-08-06 22:26:26 发布

阅读量3.9k

点赞数

分类专栏： @html/js/css/Ajax 文章标签： callback function file xhtml html xml

本文链接：https://blog.csdn.net/phphot/article/details/4325853

版权

@html/js/css/Ajax 专栏收录该内容

289 篇文章 5 订阅

订阅专栏

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

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

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" 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>

<!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.javaeye.com/topic/134964
http://jindw.javaeye.com/blog/66702
http://jsvm.org/forums/2424/ShowPost.aspx#2424

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

phphot

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
10
评论
同步无阻塞加载js

一同事分析页面遇到阻塞式加载js，影响了页面的渲染速度。. 之前，实现WYSIWYG插件机制的时候为了实现lazy load，写了个同步无阻塞加载js的方法，解决方法很暴力，仅供参考，，注意，只是个demo。。。 Html代码 > html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" dir="ltr
复制链接

扫一扫

专栏目录