最小化渲染组件

最新推荐文章于 2022-04-19 23:32:16 发布

slalx

最新推荐文章于 2022-04-19 23:32:16 发布

阅读量7.4k

点赞数

分类专栏： javascript 前端架构文章标签：前端 javascript 前端框架

本文链接：https://blog.csdn.net/slalx/article/details/44596429

版权

javascript 同时被 2 个专栏收录

28 篇文章 1 订阅

订阅专栏

前端架构

5 篇文章 1 订阅

订阅专栏

这篇文章我们主要聚焦在组件的渲染方法上，在上篇文章中,我们采用了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之前，如果他们是同一个对象，仅仅需要需要检查他们的引用是否相等。

复杂对象

假如我们有一个复杂的对象，其中一个键值发生了变化，如果还采用上面你的方式就会比较难处理。

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是怎么做到的？它在底层进行着「脏检查」的工作。

算法如下，在这里可以查看具体的实现

简单对象

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

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

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更适合一些