avalon与双缓冲技术

avalon1.5一个重要技术升级是引进异步渲染。异步渲染在游戏界有一个更专业的名字,叫双缓冲。游戏界要刷新界面与我们刷新浏览器视图,面临的问题是一致的。视图是由许多存在套嵌关系的方块组成,它们每一个的改动,都可能引起reflow(其父节点,其父父节点的大小重新计算),这是造成性能问题的关键。

双缓冲技术的主要原理是:当一个动画争先显示时,程序又在改变它,前面的画面还没显示完,程序又要求重新绘制,这样屏幕就会不停闪烁。为了避免闪烁,可以使用双缓冲技术,将要处理的图片都放在内存中处理好过后,再将其显示到屏幕上。这样出来的就是完整的图像,不会出现闪烁现象。

MVVM框架带来一个革命性的优化是,用户只操作VM就行了,视图由框架来同步更新。因此这个同步过程,我们就可以加入优化。比如说angular,就是靠用户手动调用$apply来驱动脏检测,只有数据不一致的地方,才会操作DOM。于是没有了aaa.innerHTML = "xxx&"; aaa.innerHTML = "xxx"的愚蠢代码。

可能用户会说我怎么可能会这样写呢,那是你因为用于jquery,看到它是在同一个循环中对某个节点执行多次相同的操作。

再回过头来看avalon。avalon是基于事件驱动(通过Object.defineProperty劫持了对象的属性),当用户修改了某属性,就会立即同步视图。这种机制最大的好处是,方便与jQuery或其他操作DOM的库配合使用

avalon.config.async = false
        var vm = avalon.define({
            $id: "test",
            a: 1
        })
       setTimeout(function(){
           vm.a = 2
           alert(document.getElementById("aaa").innerHTML) //2
       }, 1000)
<div ms-controller="test">
     <div id="aaa">{{a}}</div> // 2
 </div>

坏处是可能会造成性能问题。作为测试,我们在avalon的text指令加入这样一行日志:

avalon.directive("text", {
    update: function (value) {
        console.log(value)