avalon之所以能在页面处理1W个绑定（angular对应的数字是2000），出于两个重要设计——基于事件驱动的双向绑定链及智能CG回收机制。

avalon的双向绑定链是通过Object.defineProperties及VBScript，将要操作VM属性变成一种访问器属性。访问器属性是一种特殊的属性，需要我们为它指定setter、getter方法（当然，这也是框架内部生成的，只有计算属性可以做一些干预），当用户对此属性进行赋值操作时，就会调用setter方法，对它进行读取时，就会进行getter方法。我们通过hack进这两个方法，做各种各样的事，如依赖收集及事件广播、触发$watch回调，其中最重要一点，就是将关联在它上面的订阅数组的对象逐个触发，从而更新视图，这也是双向绑定链的原理。比如说

vm.me = 111

<div ms-text="me"></div>

me就会有一个订阅数组，里面放着一个对象，里面包含如此操作这个div的信息，如果有两个绑定属性的值存在me这个变量，这数组就有两个对象。触发是用户修改vm.me 时立即发生，不需要像angular那样调用$apply或$digest方法，也不像angular那样将所有绑定对象都检测一次。angular之所以会卡死，因为页面一旦绑定对象多，这检测时间也恐怖了，并且这检测可能是深遍历对象的属性进行比较的。而avalon每次只会检测其一个属性上对应的小数组，因此检测压力会相对少许多。

由于绑定属性会转换绑对象，并且绑定对象包含要操作的元素节点或文本特点这种惯例的存在，就会引发第二个问题，如果回收这些绑定对象呢？angular虽然为$scope对象添加了一个$destroy，但没有针对绑定对象有更精细的操作。avalon在1.36之前在notifySubscribers进行绑定对象的element进行是否在DOM树的检测，不在就将绑定对象的所有属性都置为null，并从当前订阅数组移除。

avalon1.36/1.4引入全新的CG回收机制，页面上的{{}}插值表达式ms-*属性，经过扫描后，变成一个个绑定对象，对象包含name、value、type、param、vmodels、priority、args、vmodels、evaluator、handler等属性与方法，有些绑定对象还会多出template、 group、$repeat、proxies等属性（1.36前更多，现在都大幅精简了），因此绑定对象也算一个比较大的JS对象，页面上的绑定属性越多，这些绑定对象自然也越多，占用着大用的内存。如果页面发生一些移除节点操作，涉及这些绑定属性原来所在的元素节点，那么这些绑定对象也应该销毁，我们就必须将binding.element 置为null，才会方便CG回收。之前是位于notifySubscribers方法里进行，但它处理的目标是一个很小的数组，不会检测所有绑定对象，因此总有漏网之鱼，这样积沙成塔，在移动端上就是一个很大的问题，会弄崩手机浏览器。

在1.36/1.4中，内部定义一个全局的$$subscribers数组，所有生成的绑定对象都放到里面，然后每当我让VM的属性发生变化时，就一定会经过notifySubscribers方法，这时对$$subscribers数组的对象进行检测。并且这检测也有技巧，为了减少检测频率对浏览器造成压力，每次检测至少经过333ms才会进行一次。

检测手段，是判定binding.element是否位于DOM树上，由于element可能是元素节点，文本节点或注释节点，IE的原生contains方法也有BUG，于是检测也是多种多样的。

var $$subscribers = []

function removeSubscribers() {

    for (var i = $$subscribers.length, obj; obj = $$subscribers[--i]; ) {

        var data = obj.data

        var el = data.element

        var remove = el === null ? 1 : (el.nodeType === 1 ? typeof el.sourceIndex === "number" ?

                el.sourceIndex === 0 : !root.contains(el) : !avalon.contains(root, el))

        if (remove) { //如果它没有在DOM树

            $$subscribers.splice(i, 1)

            avalon.Array.remove(obj.list, data)

            // log("debug: remove " + data.type)

            obj.data = obj.list = data.evaluator = data.element = data.vmodels = null

        }

    }

}

var beginTime = new Date(), removeID

function notifySubscribers(accessor) { //通知依赖于这个访问器的订阅者更新自身

    var currentTime = new Date()

    clearTimeout(removeID)

    if (currentTime - beginTime > 333) {

        removeSubscribers()

        beginTime = currentTime

    } else {

        removeID = setTimeout(removeSubscribers, 333)

    }

    var list = accessor[subscribers]

    if (list && list.length) {

        var args = aslice.call(arguments, 1)

        for (var i = list.length, fn; fn = list[--i]; ) {

            var el = fn.element

            if (typeof fn === "function") {

                fn.apply(0, args) //强制重新计算自身

            } else if (fn.$repeat) {

                fn.handler.apply(fn, args) //处理监控数组的方法

            } else if (fn.element) {

                var fun = fn.evaluator || noop

                fn.handler(fun.apply(0, fn.args || []), el, fn)

            }

        }

    }

}

当然这是两个要点，为了提高性能，avalon也像一些大型应用程序那样，善于利用缓存机制。之前是使用FIFO缓存算法，1.4后改为LRU。

<!DOCTYPE html>

<html>

    <head>

        <title>监控函数</title>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <script src="avalon.js"></script>

        <style>

            .odd{

                background: green;

            }

        </style>

        <script type="text/javascript">

            var model = avalon.define({

                $id: "test",

                array: [1, 2, 3, 4, 5],

                more: 10,

                isOdd: function(el) {

                    return (el + model.more) % 2 === 1

                },

                add: function() {

                    model.array.push(1)

                },

                remove: function() {

                    model.array.pop()

                },

                change: function(){

                    model.more = 11

                }

            })

</script>

</head>

<body ms-controller="test" >

    <ul>

        <li ms-repeat="array" ms-class="odd:isOdd(el)">{{el}}</li>

    </ul>

    <p><button ms-click="add">add</button><button ms-click="remove">remove</button><button ms-click="change">change</button></p>

</body>

</html>

迷你MVVM框架 avalonjs 学习教程22、avalon性能大揭密的更多相关文章

  1. 迷你MVVM框架 avalonjs 学习教程19、avalon历史回顾

    avalon最早发布于2012.09.15,当时还只是mass Framework的一个模块,当时为了解决视图与JS代码的分耦,参考knockout开发出来. 它的依赖收集机制,视图扫描,绑定的命名d ...

  2. 迷你MVVM框架 avalonjs 学习教程1、引入avalon

    avalon是国内最强大的MVVM框架,没有之一,虽然淘宝KISSY团队也搞了两个MVVM框架,但都无疾而终.其他的MVVM框架都没几个.也只有外国人与像我这样闲的架构师才有时间钻研这东西.我很早之前 ...

  3. 迷你MVVM框架 avalonjs 学习教程18、一步步做一个todoMVC

    大凡出名的MVC,MVVM框架都有todo例子,我们也搞一下看看avalon是否这么便宜. 我们先从react的todo例子中扒一下HTML与CSS用用. <!doctype html> ...

  4. 迷你MVVM框架 avalonjs 学习教程16、过滤器

    avalon的过滤器是参考自angular与rivets.它也被称做管道文本过滤器,它的处理对象只能是文本(字符串),它只能用在文本绑定中,并且只能是双花括号形式.下面是各大家的过滤器比较: rive ...

  5. 迷你MVVM框架 avalonjs 学习教程3、绑定属性与扫描机制

    在MVVM框架中,你都会看到页面定了许多奇怪的属性,比如knockout的data-☆,angular的ng-☆,avalon的ms-☆,此外还有一些只写文本节点上的双花括号,它们统称为指令.ms-☆ ...

  6. 迷你MVVM框架 avalonjs 学习教程17、avalon的一些配置项

    本章节,主要是介绍avalon.config方法,通过它来制定一些更贴心的功能. 一般情况下,我们在使用ms-controller绑定时,需要添加一个ms-controller类名,目的是为了防止网速 ...

  7. 迷你MVVM框架 avalonjs 学习教程20、路由系统

    SPA的成功离开不这三个东西,分层架构,路由系统,储存系统.分层架构是我们组织复杂代码的关键,这里特指MVVM的avalon:路由系统是将多个页面压缩在一个页面的关键:储存系统特指本地储存,是安全保存 ...

  8. 迷你MVVM框架 avalonjs 学习教程11、循环操作

    avalon是通过ms-repeat实现对一组数据的批量输出.这一组数据可以是一个数组,也可以是一个哈希(或叫对象).我们先从数组说起吧. 第二节就说,凡是定义在VM中的数组,如果没有以$开头或者没放 ...

  9. 迷你MVVM框架 avalonjs 学习教程4、数据填充

    MVVM是前端的究极解决方案,你们可能用过jQuery,但那个写的代码不易维护:你们可以听过说requirejs与seajs,传说中的模块开发,加载器,但它们的最终目标是打包:你们可能听过unders ...

随机推荐

  1. C#如何使用VS2010与SQL2008建立链接及初步调用（转）

    关于VS2010与SQL2008建立链接及初步调用问题,网上参考的资料很多,我写这个博客,并非是做重复工作,也不是做搬运工.本文将以一种初学者的角度,去完成从数据库建立,到VS2010与SQL中的数据 ...

  2. C语言sscanf用法解析与正则表达式支持

    最近学习算法和输入输出用到的基本知识,首先是我自己写的一份代码参考和学习了很多资源 后面会给出参考资料,他们写得更加详细,正则表达式的支持确实是一大亮点所在 #include<iostream& ...

  3. Openwrt编译时修改默认IP的方法

    在~/openwrt/barrier_breaker/package/base-files/files/lib/functions/ uci-defaults.sh 第178行修改IP地址

  4. HighCharts定时刷新图表

    假设图表容器的id为exChart,如下: <div style="height:450px;" id="chart">   1. 首先在serie ...

  5. ubuntu初次设置root密码

    初次安装ubuntu创建的用户不是root用户,但是需要root权限的时候又需要密码,那么如何设置密码呢? 很简单.如下几步操作

  6. Android之WebViewClient与WebChromeClient的区别

    Android之WebViewClient与WebChromeClient的区别 2012-05-05      0个评论       收藏    我要投稿 ANDROID应用开发的时候可能会用到WE ...

  7. Hadoop高级培训课程大纲-开发者版

    一.课程概述 本次培训课程主要面向大数据系统管理人员和开发设计人员,基于开源社区大数据应用最活跃的Hadoop和HBase技术框架,围绕分布式文件存储(HDFS).分布式并行计算(Map/Recue) ...

  8. PREV-1_蓝桥杯_核桃的数量

    问题描述 小张是软件项目经理,他带领3个开发组.工期紧,今天都在加班呢.为鼓舞士气,小张打算给每个组发一袋核桃(据传言能补脑).他的要求是: 1. 各组的核桃数量必须相同 2. 各组内必须能平分核桃( ...

  9. Java设计原则之依赖倒转原则

    定义:高层模块不应该依赖低层模块,二者都应该依赖其抽象:抽象不应该依赖细节:细节应该依赖抽象. 问题由来:类A直接依赖类B,假如要将类A改为依赖类C,则必须通过修改类A的代码来达成.这种场景下,类A一 ...

  10. JavaScript-Tool：Moment.js

    ylbtech-JavaScript-Tool:Moment.js Parse, validate, manipulate, and display dates and times in JavaSc ...