这篇文章我们主要聚焦在组件的渲染方法上，在上篇文章中,我们采用了innerHTML渲染组件，但是频繁更新组件的话，由于reflow,repaint等原因，页面的性能会下降，同时输入框的焦点也会丢失。最理想的方式就是哪些数据变化，我们更新哪块view,并且从外表上看还是整个区域全部更新。目前解决这个问题的方式有Virtual Dom和MVVM.
- Virtual Dom
- MVVM
- VirtualView
Virtual Dom
以react为代表的框架采用了virtual dom的方法来进行页面的渲染工作。
我们以react为例http://jsfiddle.net/slalx/69z2wepo/4602/，来看看使用virtual dom是怎么工作的。
var PeopleList = React.createClass({
getInitialState: function() {
return {data:[
{'name': '张三',
'level': '开发工程师.'},
{'name': '李四',
'level': '高级开发工程师.'},
{'name': '王五',
'level': '资深开发工程师.'}
]
};
},
handleClick: function(){
var data = this.state.data;
data.push({'name':1,'level':4});
this.setState(data);
},
render: function() {
var listItems = this.state.data.map(function(item) {
return <li>{item.name}{item.level}</li>;
});
return <ul><li><button onClick={this.handleClick}>添加</button></li>{listItems}</ul>
;
}
});
React.render(<PeopleList />, document.getElementById('container'));数据模型的变化会调用setState方法，来触发render方法，在render方法中会采用virtrual dom的方法进行渲染。
virtual dom的基本思想是就是在每次状态更新的时候，生成一个新的json形式的vtree,通过和上次生成的vtree对比，找到变化的部分，然后patch到真正的dom树中，整个过程都是在内存中完成的，只有一次dom操作，并且只更新变化的部分；这样既可以跟踪页面中dom的状态，也可以使页面的渲染逻辑更加清晰明了。
virtual dom中涉及的最关键的一个部分就是新的vtree和上次的vtree对比时所用的diff算法，一般传统的比较两个树结构之间的最小的修改至少也得是O(n^3)复杂度，但是这里用到一个简单且强大的技巧，达到了O(n)的复杂度。下面来看下diff内部到底是如何进行的？
-
简单对象
假如说我们有一个JavaScript对象
var object = {
a: {x: 1, y: 2},
b: {text: 'helloWorld'}
}
var object2 = {
a: {x: object.a.x, y: 3},
b: object.b
}
这里我们重用了object.a.x和object.b，减少了copy的问题。同时如果我们对比两个对象的差异性，在我们比较object.b和object2.b之前，如果他们是同一个对象，仅仅需要需要检查他们的引用是否相等。
2、复杂对象
假如我们有一个复杂的对象，其中一个键值发生了变化，如果还采用上面你的方式就会比较难处理。
var prev = {
'0-3': {
'0-1': {0: 'a', 1: 'b'},
'2-3': {...},
},
'4-7': {...}
}经过某种操作变成了下面这样
var next = {
'0-3': {
'0-1': prev['0-3']['0-1'],
'2-3': {
2: 'hey',
3: prev['0-3']['2-3'][3]
}
},
'4-7': prev['4-7']
}-
这样的话，比较起来算法复杂度就会下降很多。
要完成上面的操作如果处处都需要我们从零开始写，会费时费力，已经有类似immutable和mori来帮我们完成上面你的工作。
MVVM
目前主流的mvvm框架[angular,ember]都使用了一种叫做脏检查的算法[chrome36,opera23版本后支持了Object.observe()做同样功能]，来完成数据的差异性对比，找到变化的数据，然后根据模型与视图的对应关系更新视图和模型。
依angular为例，来看看现在的mvvm框架是怎么工作的。假如有个人员列表应用的例子，我们要把「peoples」数组（在JS中定义的）中的每个「people」的值绑定到一个列表项上，这样我们的数据和用户界面总能保持同步：
<html ng-app>
<head>
<script src="angular.js"></script>
<script src="controller.js"></script>
</head>
<body ng-controller="PeopleListCtrl">
<ul>
<li ng-repeat="people in peoples">
{{people.name}}
<p>{{people.level}}</p>
</li>
</ul>
</body>
</html>下面是控制器的js代码
var peopleApp = angular.module('peopleApp', []);
peopleApp.controller('PeopleListCtrl', function($scope) {
$scope.peoples = [
{'name': '张三',
'level': '开发工程师.'},
{'name': '李四',
'level': '高级开发工程师.'},
{'name': '王五',
'level': '资深开发工程师.'}
];
});一旦底层的模型数据发生变化，由于数据与视图的双向绑定http://stackoverflow.com/questions/9682092/databinding-in-angularjs，我们DOM中的列表就会相应更新。Angular是怎么做到的？它在底层进行着「脏检查」的工作。
算法如下，在这里可以查看具体的实现
1、简单对象var record = {
obj, // The object whose field needs to be checked.
field, // The field name to dereference.
lastValue, // The last value of the field.
next, // Next record in the chain of records to check.
};
var current = head;
while(current !== null) {
if (current.obj[current.field] !== current.lastValue) {
// record change
}
current = current.next;
}可以参考这里的性能对对 http://jsperf.com/object-observe-polyfill-sandbox
2、array和map
var maybeDirty = false;
for(int index = 0, length = list.length; index < length; index++) {
var item = list[index];
if (record === null || item !== record.item) {
record = changeLog.mismatch(record, item, index);
maybeDirty = true;
} else if (maybeDirty) {
record = changeLog.verifyReinsertion(record, item, index);
}
record = record._nextRec;
}
changeLog.truncate(record); 3、function 和closure
fn(a.b, c)脏检查的基本思想是
- 一旦数据可能发生改变，库就要通过摘要循环或变化循环去检查是否发生了变化。
- 在Angular中，一次摘要循环会检查所有需要监听的表达式，看是否发生了变化。
- 它知道模型的前一个值是什么，当变化发生时，会触发一个「change」事件。
- 对开发者来说，最大的好处莫过于你可以使用原生的JavaScript对象（用起来写起来都很爽）。
- 而缺点就是它的算法比较糟糕，并且可能有很大的开销。该操作的开销与被监视的对象的数量是成正比的。
综上两种最小化渲染组件的方式，区别主要在下面两点
-
何时触发更新,数据模型与视图的绑定
react是每次在setState的时候触发更新，如果没有setState的调用是不会触发,采用的是数据与试图的单项绑定；而anguar采用的是数据的双向绑定， 页面中需要时刻监控着数据对象的变化，并且操作的开销与被监视的对象的数量是成正比的，随着监控的对象的数量增加，计算压力和内存压力都会增加，性能就会出现问题。
-
如何更新，diff的计算
react对用采用immutable数据结构的形式来进行数据的diff,其实在进行diff之前已经知道数据的变化了，只是找到变化的部分；angular通过脏检查的方式来进行数据差异的查找，垃圾回收的压力和计算的压力确实会比较大。
孰优孰劣很难说，只能说他们分别有自己的应用场景，我们只要用对场景就没有对错。对性能要求苛刻的场景，react更适合一些，性能对比http://evancz.github.io/todomvc-perf-comparison/，并且react只关注与视图层,需要在js代码中。对数据的实时更新，需要双向绑定的场景，同时如果你想让框架帮你做所有的事，angular更适合一些
435
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
