web前端优化之动态加载

网站最近搞了次优化,效果比较明显,以前不敢用的动态加载(我自己起得,洋名叫lazy load,这样翻译应该也算得体,延迟加载也说得过去..)终于派上了用场.

总的来说是这样的:

1. 页面加载时不会初始化的脚本不引用,不显示的ui用的样式不加载.用户交互用到时加载.
2. 除用户可视区域外的图片不加载,用户有滚屏操作时加载.

具体实现:

1 . 实现js和css的动态加载
适用 : 页面的pv较高,功能模块较多,每次刷新页面都需要重复解析和渲染.
缺点 : 用户从点击一个按钮到函数响应,中间会有静态的下载和解析的一段延迟(有客户端缓存会好的多)
优化 :　为了尽量让用户感觉不到延迟，我们在登录页面预载的一些经常用到的脚本(由于网站的更新周期固定,所以脚本仅会在更新当天预载)
实现 :

XN.dynamicLoad(
{
files : [’http://s.xnimg.cn/a2328/csspro/module/poke.css’,
’http://s.xnimg.cn/a2252/jspro/xn.app.poke.js’],
funcs : [’doPoke’]
});

以上代码是人人网个人主页中的一段代码,用来动态加载打招呼的功能,files注册需要动态加载进来的静态,funcs注册触发加载的函数名.这个东西以前写过一篇不太成熟的文章(如下)

2 . 实现图片的动态加载
适用 : 现在仅对新鲜事动了刀，因为新鲜事里图片变动太快，客户端缓存率太低．整个页面图片动态加载没有必要，因为很多模块都是固定的，本来客户端就有缓存．
缺点 : 这个东东很冒险,上线之后发现ff3.0刷新之后图片全白了,正在优化实现代码…
优化 : 既然问题那么多,为了便于维护,仅对ie和ff两种用户比较多的浏览器才用这种方法.
实现 :

<img needclip="1" width="50" height="50"
lala="upload/2012/3/201203231635148840.jpg"
src="http://camnpr.com/upload/2012/3/201203231635144451.gif" onload="feed_img_delay_load(this);" />

以上是人人网home页新鲜事中的一段代码,图片的src=”upload/2012/3/201203231635144451.gif”是一个1×1像素的空白gif,而它的真正地址被存在”lala”这个属性中(有人问我为什么要起个lala呢…随意起得了,起个dongganchaoren就有点长了…),onload中的feed_delay_load是关键,1×1的图片加载完毕后会调用它,它首先会判断图片是否在可视区域,如果是把它显示出来,如果不是把图片放到加载队列里.然后会有一个定时器检测屏幕滚动,从队列里加载图片.

优化效果 :
试过才知道,真的好用…

如果你钟爱于使用Jquery，那么上边的方法更成熟于Jquery本身的集成，使用方法是：

jQuery(function () {
$("img").lazyload({
placeholder: ’{$->>repath}jQueryPlugins/jquery.lazyload/grey.gif’,
effect: "fadeIn"
});
//jQuery(’#loading-one’).empty().append(’页面加载完毕.’).parent().fadeOut(’slow’);
});

一篇不太成熟的文章

适用：页面使用大量的js做交互和ajax，然而又不像gmail，一次加载之后不会刷新页面，所以如果引入大量js就会拖慢页面的加载速度。这时如果只加载每个页面都需要初始化的js，其他js只有当需要时才动态加载进来，就会大大提高页面加载速度。

动态加载的方法：

//示例代码
dynamicLoad = function( file )
{
    each( file.funcs , function( i , func )
    {
        //为可能用到的函数声明一个同名的代理函数
        window[ func ] = function()
        {
            var ars = arguments;
            //当页面中调用到此函数时，会首先把自己注销
            window[ func ] = null;
            //加载相应的js文件
            loadFile( file.file , function()
            {
                //js加载完成之后，调用js中声明的同名函数，完成动态加载
                window[ func ].apply( null , ars );
            });
        };
    });
};
 
dynamicLoad({
    file : ’http://xxx.com/xxx.js’,
    funcs : [ ’chatWith’ , ’showProfile’ ]
});

通过dynamicLoad方法注册了一个需要动态加载的函数，参数的file为需要动态加载的文件，funcs为js中实现的函数，当页面中触发调用此函数时，将动态加载对应文件。

需要解决的问题：

1  避免重复加载

这个问题很好解决，只需要做一个数组来存储已经加载的脚本，页面onload的时标记页面中已经加载的js，动态加载时判断某一脚本是否已加载，没有则加载此文件并标记为已加载。

2 在一个js中加载另一js时如何解决版本号问题

开发时写在页面里的脚本可能是xxx.js?ver=$$$,更新之后$$$会替换成对应的svn版本号，然而在js中动态加载另一文件时如何获知该js的版本号呢？

我想到的一种方法：

<script vsrc="xxx.js?ver=$$$"></script>

把页面中需要动态加载的js的src属性改成vsrc，这样就可以得到该文件的版本号