这篇文章我们主要聚焦在组件的渲染方法上,在上篇文章中,我们采用了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'}
}
经过某种操作,我们修改了object.a.y=3,现在最新的javascript对象变成
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);
可以参考这里的性能对比
http://jsperf.com/array-change-detection
3、function 和closure
fn(a.b, c)
当a,b,c变化时,需要调用fn
脏检查的基本思想是
- 一旦数据可能发生改变,库就要通过摘要循环或变化循环去检查是否发生了变化。
- 在Angular中,一次摘要循环会检查所有需要监听的表达式,看是否发生了变化。
- 它知道模型的前一个值是什么,当变化发生时,会触发一个「change」事件。
- 对开发者来说,最大的好处莫过于你可以使用原生的JavaScript对象(用起来写起来都很爽)。
- 而缺点就是它的算法比较糟糕,并且可能有很大的开销。该操作的开销与被监视的对象的数量是成正比的。
综上两种最小化渲染组件的方式,区别主要在下面两点
-
何时触发更新,数据模型与视图的绑定
react是每次在setState的时候触发更新,如果没有setState的调用是不会触发,采用的是数据与试图的单项绑定;而anguar采用的是数据的双向绑定, 页面中需要时刻监控着数据对象的变化,并且操作的开销与被监视的对象的数量是成正比的,随着监控的对象的数量增加,计算压力和内存压力都会增加,性能就会出现问题。
-
如何更新,diff的计算
react对用采用immutable数据结构的形式来进行数据的diff,其实在进行diff之前已经知道数据的变化了,只是找到变化的部分;angular通过脏检查的方式来进行数据差异的查找,垃圾回收的压力和计算的压力确实会比较大。
孰优孰劣很难说,只能说他们分别有自己的应用场景,我们只要用对场景就没有对错。对性能要求苛刻的场景,react更适合一些,性能对比http://evancz.github.io/todomvc-perf-comparison/,并且react只关注与视图层,需要在js代码中。对数据的实时更新,需要双向绑定的场景,同时如果你想让框架帮你做所有的事,angular更适合一些