滚动加载优化

一般情况下，滚动加载是通过在window上绑定scroll事件，实时遍历容器数组，计算每个元素的scrollTop，满足要求的就触发回调，并从数组里删除该节点。

这样的思路最简单，但是我们知道scroll事件的触发是非常频繁的，在每次触发的时候遍历数组，时间复杂度为O(n)，需要滚动加载的元素越多，每次滚动过程的遍历就越慢，成线性增长。

在做排行榜的时候，因为全站要进行滚动加载，每次滚动载入的数据量都比较大（每次5k+(gzip)的html，1000个节点左右），所以考虑了一个更优的解法。

我们还是用push的方式添加需要延迟加载的节点，添加的时候进行排序。

Containers.push(lazyContainer);
Containers.sort(function(a, b){
    return D.offset(a).top > D.offset(b).top;
});

再看下面的代码：

var scrollView = function(){
    if(Containers.length === 0) return;

    if(D.offset(Containers[0]).top - D.scrollTop() < 1000) {
        var currentContainer = Containers.shift();
        currentContainer.init();
        scrollView();
    }
};

scrollView();
E.on(window, 'scroll', scrollView);

因为前面添加的时候是事先排过序的，所以滚动过程中，可以只对最小值进行比较，当该值符合滚动展示条件的时候，触发回调然后递归再继续检查数组下一位。

可以看出，这样的复杂度其实只是个常量，O(1)的，尤其是滚动的时候计算元素和scrollTop的偏移值开销也不小，把复杂度降下来之后，每次滚动只会执行一次计算，而不是原来的N次。

可用性降级

KISSY 的 data-lazyload 通过 data-lazyload-src 属性实现内容延迟和图片延迟,但是在手动模式下:

<img data-lazyload-src="http://img01.taobaocdn.com/tps/i1/T1dy8RXjpEXXXXXXXX-225-60.png" />

使得img标签无法降级,无脚本环境里,图片纷纷表示无法显示.

在目前的基础上,考虑加入扩展:

<style>
.js-supported {
    visibility: visible;
}
.js-not-supported {
    visibility: hidden;
}
</style>

<noscript>
<style>
.js-supported {
    visibility: hidden;
}
.js-not-supported {
    visibility: visible;
}
</style>
</noscript>

<img data-lazyload-src="http://img01.taobaocdn.com/tps/i1/T1dy8RXjpEXXXXXXXX-225-60.png" class="js-supported" />
<img src="http://img01.taobaocdn.com/tps/i1/T1dy8RXjpEXXXXXXXX-225-60.png" class="js-not-supported" />

后来讨论过程中@ktmud 老师提到另外一个简洁的实现,采用noscript标签加一点脚本来延迟图片:

<noscript class="KS_Data_Lazyload">
    <img src="http://img01.taobaocdn.com/tps/i1/T1dy8RXjpEXXXXXXXX-225-60.png" />
</noscript>

脚本里,通过读取noscript的内容并插入到文档流里,在kissy里,可以这么搞:

var D = KISSY.DOM;
KISSY.all('noscript.KS_Data_Lazyload').each(function(ns) {
    ns.parent()[0].insertBefore(D.create(D.text(D.create(ns.html()))), ns[0]);
});

无脚本环境里,直接就显示noscript里的内容；有脚本环境里,脚本就把noscript里的东东取出来,按需延迟加载.

而这种方案因为noscript的innerHTML是一段text,故而所需要的DOM操作比目前的方案要多两次DOM操作,适合在某些重要场合进行应用,比如首页, SRP, Detail等等.

DEMO: noscript lazyload