同步无阻塞加载js

最新推荐文章于 2022-02-25 18:19:43 发布

williams2222

最新推荐文章于 2022-02-25 18:19:43 发布

阅读量90

点赞数

分类专栏： Javascript & Web 文章标签： JavaScript PHP BBS C C++ ViewUI

Javascript & Web 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一同事分析页面遇到阻塞式加载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有兴趣的朋友，可以延伸阅读：
[url]http://bbs.51js.com/viewthread.php?tid=72939&extra=page%3D1%26amp;filter%3Ddigest[/url]
[url]http://www.iteye.com/topic/134964[/url]
[url]http://jindw.iteye.com/blog/66702[/url]
[url]http://jsvm.org/forums/2424/ShowPost.aspx#2424[/url]

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

williams2222

关注

0
点赞
踩
0

收藏

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

一同事分析页面遇到阻塞式加载js，影响了页面的渲染速度。.之前，实现WYSIWYG插件机制的时候为了实现lazy load，写了个同步无阻塞加载js的方法，解决方法很暴力，仅供参考，，注意，只是个demo。。。[code="html"] test var require = {}; function import...
复制链接

扫一扫

专栏目录