您的位置：首页 > Web前端 > JavaScript

使用do 框架进行javascript无阻塞加载脚本

2012-08-15 15:28 771 查看

do 框架（3.5k）
Do是豆瓣网kejun开发的一个很轻量的Javascript开发框架。目前do.min.js。它的核心功能是对模块进行组织和加载。加载采取并行异步队列的策略，并且可以控制执行时机。Do可以任意置换核心类库，默认是jQuery。
项目地址：https://github.com/kejun/Do

下载地址为：http://download.csdn.net/detail/e421083458/4501683

上篇文章中讲到了使用　Scripts Block Downloads example 测试加载的外部脚本的速度！结果是很令人失望，js脚本必须执行完毕才能加载，js后面的html内容！

瀑布图为：

第一个脚本的下载和执行阻塞了其后的脚本下载以及页面的渲染，导致整个页面渲染完成需要11.75s。

我们把最消耗时间的两个脚本地址提取出来：

http://1.cuzillion.com/bin/resource.cgi?type=js&sleep=2&jsdelay=2&n=1&t=1345012676 http://1.cuzillion.com/bin/resource.cgi?type=js&sleep=2&jsdelay=2&n=2&t=1345012676[/code] 然后我们将kejun-Do-490e6f3解压，进入test，复制index.html一份。取名为maketest.html

源文件为：

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>Do 2.0 单元测试</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://code.jquery.com/qunit/git/qunit.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/qunit/git/qunit.css" type="text/css" media="screen" />

<script type="text/javascript" src="../do.js" data-cfg-corelib="core.js"></script>

<script type="text/javascript">
//domready之后加载
$(function() {

    asyncTest('测试核心类库默认被加载', function(){
      Do(function(){
        ok(typeof core_lib_loaded !== 'undefined', '核心类库默认加载成功');
        start();
      });
    });

    asyncTest('测试按模块名加载', function(){
	  //按组的形式加载
      Do.add('a1', {path: 'http://1.cuzillion.com/bin/resource.cgi?type=js&sleep=2&jsdelay=2&n=1&t=1345012676&r=' + Math.random(), type: 'js'});
	  Do.add('a2', {path: 'http://1.cuzillion.com/bin/resource.cgi?type=js&sleep=2&jsdelay=2&n=2&t=1345012676&r=' + Math.random(), type: 'js'});
	  //直接载入js或组名
      Do('a1', 'a2', function(){
        ok(typeof sleep_now !== 'undefined', 'a1, a2加载成功');
        start();
      });
    });

});
</script>
    
</head>
<body>
  <h1 id="qunit-header">Do 2.0 <sup>pre</sup></h1>

  <h2 id="qunit-banner"></h2>
  <div id="qunit-testrunner-toolbar"></div>

  <h2 id="qunit-userAgent"></h2>
  <ol id="qunit-tests"></ol>

  <div id="qunit-fixture"></div>
</body>
</html>


核心代码：

asyncTest('测试按模块名加载', function(){
	  //按组的形式加载
      Do.add('a1', {path: 'http://1.cuzillion.com/bin/resource.cgi?type=js&sleep=2&jsdelay=2&n=1&t=1345012676&r=' + Math.random(), type: 'js'});
	  Do.add('a2', {path: 'http://1.cuzillion.com/bin/resource.cgi?type=js&sleep=2&jsdelay=2&n=2&t=1345012676&r=' + Math.random(), type: 'js'});
	  //直接载入js或组名
      Do('a1', 'a2', function(){
        ok(typeof sleep_now !== 'undefined', 'a1, a2加载成功');
        start();
      });
    });


使用do框架内置的按组加载js的方式加载JS。

瀑状图为



页面整体的渲染时间和加载时间为3.79s左右，这主要依赖于解决了脚本加载阻塞的问题，从上图中可以看到两个脚本是并行加载的，而且未阻塞后面资源的加载。该方法还有一个优点在于不会触发IE和FF的资源加载状态条如下图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航