A Coder

Coding My Dream!

0%

In.Js延迟加载Js/Css提高网页载入速度

发表于 更新于 分类于

这几天一直在捣鼓博客的主题，过段时间又要开始忙活了，倒时候就不能正常写博了又，呵呵，程序员，苦逼的职业！

统计代码大家基本上都在用，很多时候打开网页后，网页浏览器选项卡前的Loading图标一直在转个不停，一直无法加载完成，用Firebug就能发现元凶了——统计代码一直无法加载完成，导致了整个页面一直Loading。

虽然大多数的统计代码都用<script>直接引入(如)：

<script type="text/javascript">
    var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
    document.write(unescape("%3Cscript src=’" + _bdhmProtocol
        + "hm.baidu.com/h.js%3F657bb8bc8477a6eb0f6993fbf78bc9e6’ type=’text/javascript’%3E%3C/script%3E"));
</script>




代码直接加到html，这样在加载整个页面时，统计代码一直无法加载完成，出于阻塞状态，影响了整个页面的加载！



如果将统计代码在页面加载完成后加载就可以解决问题了！

在百度中搜索一番后，找到了一些异步加载Js的模块加载器，比如RequireJs，YUI Loader，LabJs，RunJs，SeaJs，DoJs等。前面几个都是基于JQuery的，如果我们的页面并没有用到JQuery的话，为了使用它们而引用几十KB的JQuery.min.js的话有点不必要。所以我看了DoJs可是我找了一下并没有开源……

本文向大家介绍开源的轻量级“多线程”异步模块加载器In.js，In的开发借鉴了Do的一些思路和使用习惯，In.js压缩后只有4.77k，个头也不大，而且没有JQuery依赖。

代码托管在Github:http://github.com/PaulGuo/In

 

1、在你页面引入in.js

例如：底层框架为jQuery 1.5.2-min.js，并引用in时自动加载。


<script type="text/javascript" src="in.js" autoload="true" core="jquery 1.5.2-min.js"></script>

autoload: 是否在加载in.js的时候加载底层核心库 – {可选参数 – true|false}

core: 底层核心库的路径 – {可选参数 – url}


如果同时设置了core，并且autoload=true，则在引入In.js的同时加载core到页面中。

core不是必须的！autoload为开启自动加载模式，对存在依赖的模块自动加载！

 

2、加载Js/Css模块 In.add()

加载三个待执行的javascript模块，分别为mod1、mod2、mod3，其中mod2依赖于mod3.


<script type="text/javascript">
    In.add(‘mod1’, { path: ‘mod1.js’, type: ‘js’, charset: ‘utf-8’ });
    In.add(‘mod2’, { path: ‘mod2.js’, type: ‘js’, charset: ‘utf-8’, rely: [‘mod3’] });
    In.add(‘mod3’, { path: ‘mod3.js’, type: ‘js’, charset: ‘utf-8’ });
</script>

其他的参数不需要解释了，rely是指定模块的依赖。注意：此时并未开始载入Js！

 

3、使用模块 In() or In.use()

队列默认为并行执行，队列中最后一个函数被视为回调函数，下面的代码会并行加载mod1,mod2,function，并立即执行，三者均加载完毕后执行回调函数。


<script type="text/javascript">
    //真正的加载顺序为 mod1 || mod2 || function -> function[callback]
    var demo = In(‘mod1’, ‘mod2’, function () {
        console.log(‘我跟mod1和mod2是并行的关系’);
    }, function () {
        console.log(‘我是回调函数，他们都加载完毕才会触发我’);
    });
</script>

注意：此时开始载入Js！

4、其他函数方法

In.ready()  //在domReady之后加载


<script type="text/javascript">
    In.ready(‘mod1’, ‘mod2’, function () {
        console.log($);
    });
</script>

 

In.later() //延迟加载队列


<script type="text/javascript">
    //延迟3秒加载队列
    In.later(3000, ‘mod1’, ‘mod2’, function () {
        console.log($);
    });
</script>

 

In.css() //动态注入CSS


<script type="text/javascript">
    In.css(‘body {background:yellow}’);
</script>

 

In.config() //配置函数


<script type="text/javascript">
    //设置为串行加载模式，兼容旧的写法
    In.config(‘serial’, true);
    //设置核心库，核心库会被所有模块依赖
    In.config(‘core’, ‘jquery 1.5.2-min.js’);
</script>

在博客页面测试


<script type="text/javascript" src="js/in.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
    In.add(‘baidu’,{path:‘http://hm.baidu.com/h.js?657bb8bc8477a6eb0f6993fbf78bc9e6'});
    In.later(500,‘baidu’);//延时500毫秒加载
</script>

红线位置为页面加载完成，百度的统计代码都在红线之后加载

image