迷你MVVM框架 avalonjs v0.5.1發布，性能大幅提高

早在avalon在IE與firefox有較為嚴重的性能問題，chrome等則由於它們太逆天因此看不出。主要原因是動態插入節點時，each由於一些幫方法考慮不周，結果不得不逐個插入，雖然使用了nextTick進行緩沖，但延遲明顯。然后avalonjs 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啊！