迷你MVVM框架 avalonjs v5.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 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啊！
标签: javascript