最小化渲染组件

来源：互联网发布：win10系统ps软件编辑：程序博客网时间：2024/06/07 09:49

这篇文章我们主要聚焦在组件的渲染方法上，在上篇文章中,我们采用了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更适合一些

转自：http://blog.csdn.net/slalx/article/details/44596429

0 0