avalon v5.1发布，性能大幅提高

早在avalon在IE与firefox有较为严重的性能问题，chrome等则由于它们太逆天因此看不出。主要原因是动态插入节点时，each由于一些帮方法考虑不周，结果不得不逐个插入，虽然使用了nextTick进行缓冲，但延迟明显。然后avalon v5把大体的架构完成了，然后重点改良这些方法了。在v5.1中所有延迟都没有了，即便在IE6下也很接近之前在chrome的运行效果。算是一次非常出色的改进。


1， addItemView方法不再逐个复制，逐个插入了。


//原来
 function addItemView(index, item, data) {
        var scopes = data.scopeList;
        var collection = data.collection;
        var parent = data.element;
        var doc = parent.ownerDocument;
        var textNodes = [];
        var scope = createItemModel(index, item, collection, data.args);
        scopes = [scope].concat(scopes)
        for (var node = data.view.firstChild; node; node = node.nextSibling) {
            var clone = node.cloneNode(true);
            if (collection.insertBefore) { //必须插入DOM树,否则下为注释节点添加自定义属性会失败
                parent.insertBefore(clone, collection.insertBefore);
            } else {
                parent.appendChild(clone);
            }
            if (clone.nodeType === 1) {
                scanTag(clone, scopes.concat(), doc); //扫描元素节点
            } else if (clone.nodeType === 3) {
                textNodes.push(clone); //插值表达式所在的文本节点会被移除,创建循环中断(node.nextSibling===null)
            } else if (clone.nodeType === 8) {
                clone.nodeValue = node.nodeValue + "" + index;
                if (!clone.addScope) {
                    clone.$scope = scope;
                    clone.addScope = "addItemView";
                }
                clone.$view = data.view.cloneNode(false);
            }
        }
        avalon.nextTick(function() {
            for (var i = 0; node = textNodes[i++]; ) {
                scanText(node, scopes.concat(), doc); //扫描文本节点
            }
        })
    }
改为


function addItemView(index, item, data) {
    var scopes = data.scopes;
    var list = data.list;
    var parent = data.element;
    var doc = parent.ownerDocument;
    var scope = createItemModel(index, item, list, data.args);
    scopes = [scope].concat(scopes);
    var view = data.view.cloneNode(true);//★★★★
    var textNodes = [];
    var elements = [];
    for (var node = view.firstChild; node; node = node.nextSibling) {
        if (node.nodeType === 1) {
            elements.push(node);
        } else if (node.nodeType === 3) {
            textNodes.push(node);
        } else if (node.nodeType === 8) {
            node.id = node.nodeValue + index; //设置路标
            node.$scope = scope;
            node.$view = view.cloneNode(false);//★★★★
        }
    }
    // parent.insertBefore(el, null) === parent.appendChild(el)
    parent.insertBefore(view, list.place || null);
 
    for (var i = 0; node = elements[i++];) {
        scanTag(node, scopes.concat(), doc); //扫描文本节点
    }
    avalon.nextTick(function() {
        if (!parent.inprocess) {
            parent.inprocess = 1; //作用类似于display:none
            var hidden = parent.hidden; //http://html5accessibility.com/
            parent.hidden = true;//★★★★ 防止reflow
        }
        for (var i = 0; node = textNodes[i++];) {
            scanText(node, scopes.concat(), doc); //扫描文本节点
        }
        if (parent.inprocess) {
            parent.hidden = hidden;
            parent.inprocess = 0;
        }
    })
}
2，新的路标系统：avalon使用一个注释节点来确认每个子模板的起点， 像emberjs则是使用两个script节点， knockout是使用两个 。


//原来
//路标是指每个模板最开头的那个注释节点
    //<!--xxx1--><tag><tag><text><!--xxx2--><tag><tag><text><!--xxx3--><tag><tag><text>
    // 假若 index == 2, 返回<!--xxx2-->
 
    function findIndex(elem, listName, index) {
        for (var node = elem.firstChild; node; node = node.nextSibling) {
            if (node.nodeType === 8 && (node.nodeValue === listName + index)) {
                return node;
            }
        }
    }
 
    //重置所有路标
 
    function resetIndex(elem, name) {
        var index = 0;
        for (var node = elem.firstChild; node; node = node.nextSibling) {
            if (node.nodeType === 8) {
                if (node.nodeValue.indexOf(name) === 0) {
                    if (node.nodeValue !== name + index) {
                        node.nodeValue = name + index;
                        var scope = node.$scope || {};
                        scope.$index = index;
                    }
                    index++;
                }
            }
        }
    }
现在的逻辑简化成这样：


function findIndex(elem, index) { //寻找路标
    for (var node = elem.firstChild; node; node = node.nextSibling) {
        if (node.id === node.nodeValue + index) {//★★★★
            return node;
        }
    }
}
 
function resetIndex(elem, name) { //重置路标
    var index = 0;
    for (var node = elem.firstChild; node; node = node.nextSibling) {
        if (node.nodeType === 8 && node.nodeValue === name) {//★★★★
            if (node.id !== name + index) {
                node.id = name + index;//★★★★
                node.$scope.$index = index;
            }
            index++;
        }
    }
}
3，移除模板的两个函数合并成一个，因此整体代码量都下降了。


//原来
    function removeItemView(node, listName) {
        var nodes = [node];
        var view = node.$view;
        for (var check = node.nextSibling; check; check = check.nextSibling) {
            //遇到下个路标时就断开
            if (check.nodeType === 8 && check.nodeValue.indexOf(listName) === 0) {
                break
            }
            nodes.push(check);
        }
        for (var i = 0; node = nodes[i++]; ) {
            view.appendChild(node);
        }
        return [view, check]; //返回被移除的文档碎片及下一个路标
    }
    //移除each中的多个子视图,返回它们对应的文档碎片集合
 
    function removeItemViews(node, listName, number) {
        var views = [];
        do {
            var array = removeItemView(node, listName);
            if (array[1]) {
                views.push(array[0]);
                node = array[1];
            } else {
                break
            }
        } while (views.length !== number);
        return views;
    }
现在是


function emptyNode(parent) {//它直接用于clear与update方法
    while (parent.firstChild) {
        parent.removeChild(parent.firstChild);
    }
}
function removeItemView(node, id) { 
    var nodes = [node];
    var view = node.$view;
    for (var check = node.nextSibling; check; check = check.nextSibling) {
        if (check.nodeType === 8 && check.id === id) {
            break
        }
        nodes.push(check);
    }
    for (var i = 0; node = nodes[i++];) {
        view.appendChild(node);
    }
    emptyNode(view);//★★★★
    view = null;//★★★★
}
可以到它的主页查看效果！如果有什么好的改进，记得pull request啊！