最小化渲染组件

  1. 云栖社区>
  2. 博客>
  3. 正文

最小化渲染组件

slalx_1986 2015-03-24 19:19:00 浏览969
展开阅读全文

这篇文章我们主要聚焦在组件的渲染方法上,在上篇文章中,我们采用了innerHTML渲染组件,但是频繁更新组件的话,由于reflow,repaint等原因,页面的性能会下降,同时输入框的焦点也会丢失。最理想的方式就是哪些数据变化,我们更新哪块view,并且从外表上看还是整个区域全部更新。目前解决这个问题的方式有Virtual DomMVVM.

  • 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内部到底是如何进行的?

  1. 简单对象

    假如说我们有一个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']
    }
    

    这样的话,比较起来算法复杂度就会下降很多。

要完成上面的操作如果处处都需要我们从零开始写,会费时费力,已经有类似immutablemori来帮我们完成上面你的工作。

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

脏检查的基本思想是

  1. 一旦数据可能发生改变,库就要通过摘要循环或变化循环去检查是否发生了变化。
  2. 在Angular中,一次摘要循环会检查所有需要监听的表达式,看是否发生了变化。
  3. 它知道模型的前一个值是什么,当变化发生时,会触发一个「change」事件。
  4. 对开发者来说,最大的好处莫过于你可以使用原生的JavaScript对象(用起来写起来都很爽)。
  5. 而缺点就是它的算法比较糟糕,并且可能有很大的开销。该操作的开销与被监视的对象的数量是成正比的。

综上两种最小化渲染组件的方式,区别主要在下面两点

  1. 何时触发更新,数据模型与视图的绑定

    react是每次在setState的时候触发更新,如果没有setState的调用是不会触发,采用的是数据与试图的单项绑定;而anguar采用的是数据的双向绑定, 页面中需要时刻监控着数据对象的变化,并且操作的开销与被监视的对象的数量是成正比的,随着监控的对象的数量增加,计算压力和内存压力都会增加,性能就会出现问题。

  2. 如何更新,diff的计算

    react对用采用immutable数据结构的形式来进行数据的diff,其实在进行diff之前已经知道数据的变化了,只是找到变化的部分;angular通过脏检查的方式来进行数据差异的查找,垃圾回收的压力和计算的压力确实会比较大。

孰优孰劣很难说,只能说他们分别有自己的应用场景,我们只要用对场景就没有对错。对性能要求苛刻的场景,react更适合一些,性能对比http://evancz.github.io/todomvc-perf-comparison/,并且react只关注与视图层,需要在js代码中。对数据的实时更新,需要双向绑定的场景,同时如果你想让框架帮你做所有的事,angular更适合一些

网友评论

登录后评论
0/500
评论
slalx_1986
+ 关注