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)
        var elem = this.element
        value = value == null ? "" : value //不在页面上显示undefined null
        if (elem.nodeType === 3) { //绑定在文本节点上
            try { //IE对游离于DOM树外的节点赋值会报错
                elem.data = value
            } catch (e) {
            }
        } else { //绑定在特性节点上
            if ("textContent" in elem) {
                elem.textContent = value
            } else {
                elem.innerText = value
            }
        }
    }
})

` 测试页面为：



<html>

    <head>

        <title>TODO supply a title</title>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

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

        <script>

            avalon.config.async = false

            var vm = avalon.define({

                $id: "test",

                a: 1

            })

            setTimeout(function () {

                vm.a = 2

                vm.a = 3

                vm.a = 4

                vm.a = 5

                vm.a = 6

            })

        </script>

    </head>

    <body>

        <div ms-controller="test">

            <div id="aaa">{{a}}</div>

        </div>

    </body>

</html>

在avalon1.5中，打开 avalon.config.async = true开关后，就只输出两次。第一次扫描肯定立即出来，以后就是异步了。

avalon做到这个非常简单，因为经过多次重构优化，从VM到V的同步，都要经过notifySubscribers这个方法。它是用来执行当前属性对应的订阅数组中的每个对象的update方法。

function notifySubscribers(subs) {
    if (!subs)
        return
    if (new Date() - beginTime > 444 && typeof subs[0] === "object") {
        rejectDisposeQueue()  //如果这个绑定对象的节点已经被移出DOM树，那么需要对这sub对象进行GC回收处理
    }
    for (var i = 0, sub; sub = subs[i++]; ) {
            sub.update && sub.update() //最小化刷新DOM树
     }
}

` 现在改成这样了

function notifySubscribers(subs) {
    if (!subs)
        return
    if (new Date() - beginTime > 444 && typeof subs[0] === "object") {
        rejectDisposeQueue()//...
    }
    if (kernel.async) {
        buffer.render()
        for (var i = 0, sub; sub = subs[i++]; ) {
            if (sub.update) {
                avalon.Array.ensure(buffer.queue,sub)//这里有去重处理
            }
        }
    } else {
        for (var i = 0, sub; sub = subs[i++]; ) {
            sub.update && sub.update()//最小化刷新DOM树
        }
    }
}

buffer对象很简单

var buffer = {
    render: function () {
        if (!this.locked) {
            this.locked = 1
            avalon.nextTick(function () {
                buffer.flush()
            })
        }
    },
    queue: [],
    flush: function () {
        for (var i = 0, sub; sub = this.queue[i++]; ) {
            sub.update()
        }
        this.queue.length = this.locked = 0
    }
}

这是历次重构，精简入口带来的好处。换言之，做一样的东西，只有一个函数负责。那么要对功能做扩展，就直接对 此函数进行处理就行了。

只要减少了视图无效的刷新，那么avalon的性能就会立即上去，这对大表格的渲染刷新能立竿见影！

avalon的官网地址： avalonjs.github.io 有关双缓冲的实现可以这里：avalon2.buffer

avalon与双缓冲技术的更多相关文章

  1. OpenGL中实现双缓冲技术

    在OpenGL中实现双缓冲技术的一种简单方法: 1.在调用glutInitDisplayMode函数时, 开启GLUT_DOUBLE,即glutInitDisplayMode(GLUT_RGB | G ...

  2. 《MFC游戏开发》笔记六 图像双缓冲技术：实现一个流畅的动画

    本系列文章由七十一雾央编写,转载请注明出处.  http://blog.csdn.net/u011371356/article/details/9334121 作者:七十一雾央 新浪微博:http:/ ...

  3. Win32 GDI 非矩形区域剪裁，双缓冲技术

    传统的Win32通过GDI提供图形显示的功能,包括了基本的绘图功能,如画线.方块.椭圆等等,高级功能包括了多边形和Bezier的绘制.这样app就不用关心那些图形学的细节了,有点类似于UNIX上的X- ...

  4. 双缓冲技术（Double Buffering）（1、简介和源代码部分）

    这一节实在是有些长,翻译完后统计了一下,快到2w字了.考虑到阅读的方便和网络的速度,打算把这节分为5个部分,第一部分为双缓冲技术的一个 简介和所有的代码,如果能够看懂代码,不用看译文也就可以了.第二部 ...

  5. C#中利用双缓冲技术解决绘图闪屏问题。

    这段时间在做一个小型游戏,在界面显示的时候用到了一些图形.一开始涉及到的图形全都用控件的背景图片代替了.这样游戏运行的时候存在的一个很大的问题是游戏运行很慢.小组成员费尽周折,即将放弃,每一个成员都愁 ...

  6. c++双缓冲技术，以避免闪烁绘图

    当数据量非常大时,画图可能须要几秒钟甚至更长的时间,并且有时还会出现闪烁现象,为了解决这些问题.可採用双缓冲技术来画图. 双缓冲即在内存中创建一个与屏幕画图区域一致的对象,先将图形绘制到内存中的这个对 ...

  7. java的双缓冲技术

    Java的强大特性让其在游戏编程和多媒体动画处理方面也毫不逊色.在Java游戏编程和动画编程中最常见的就是对于屏幕闪烁的处理.本文从J2SE的一个再现了屏幕闪烁的Java Appilication简单 ...

  8. C# GDI+双缓冲技术

    我想有很多搞图形方面的朋友都会用到双缓冲技术的时候,而且有的时候她的确是个头疼的问题.最近我也要用双缓冲技术,程序怎么调试都不合适,当要对图形进行移动时,总是会出现闪烁抖动.在网上找了些资料,说得都不 ...

  9. Java中用双缓冲技术消除闪烁

    在Java编写具有连贯变化的窗口程序时,通常的办法是在子类中覆盖父类的paint(Graphics)方法,在方法中使用GUI函数实现窗口重绘的过程.连贯变换的窗口会不断地调用update(Graphi ...

随机推荐

  1. [Cocos2d-x v3.x]浅谈容器Vector

    转载请注明来自:star特530的CSDN博客 http://blog.csdn.net/start530/article/details/19170853 前两天有人问我说在3.0 beta2版本号 ...

  2. UVa 825 - Walking on the Safe Side

    题目:在一个N*M的网格中,从左上角走到右下角,有一些点不能经过,求最短路的条数. 分析:dp,帕斯卡三角.每一个点最短的就是走N条向下,M条向右的路. 到达每一个点的路径条数为左边和上面的路径之和. ...

  3. Oracle在不同的语言环境结果to_date错误的问题

    我写了一个存储过程,它使用了功能,有一些功能to_date(dateFrom, 'yyyy/mm/dd').执行发现数据插入错误后,数据插入"0001/9/14". 感觉莫名其妙, ...

  4. android学习经常使用的数据文件夹

    android工程实践 1.仿360一键清理实现(一) "一键清理"是一个桌面图标,点击图标后,显示一个视图.进行清理动画.之后显示清理了几个进程,释放了多少M内存.点击" ...

  5. oralce 获取自定义主键编码，有并发问题

    F_GET_SEQUENCE,功能函数,当多个服务同时调用此函数,可能产生并发问题,待解决,加主键. CREATE OR REPLACE Function f_Get_Sequence(As_Comp ...

  6. [webapi] 如何在查看api时 显示api的说明

    首先在Controller的方法中 写上相关注释,如下图 然后 右击webapi项目点属性.按照下图选择 红色框中内容要保持一致 然后保存. 在项目中找到到这个文件Areas/HelpPage/App ...

  7. 文章之间的基本总结：Activity生命周期

    孔子:温故而知新.它可以作为一个教师.<论语> 同样的学习技巧.对于技术文件或书籍的经典技术,期待再次看到它完全掌握,这基本上是不可能的,所以,我们常常回来几次,然后仔细研究,为了理解作者 ...

  8. Socket编程实践(4) --更复杂的过程server

    1.Socket地址复用 int getsockopt(int sockfd, int level, int optname, void *optval, socklen_t *optlen); in ...

  9. 使用AppCompat_v7 21.0.0d的几个兼容问题

    1.实现新的ActionBarDrawerToggle动画 ActionBarDrawerToggle使用最新的AppCompat_v7 21会出现一个非常帅的动画.使用方式在Androidstudi ...

  10. 第十二章——SQLServer统计信息（2）——非索引键上统计信息的影响

    原文:第十二章--SQLServer统计信息(2)--非索引键上统计信息的影响 前言: 索引对性能方面总是扮演着一个重要的角色,实际上,查询优化器首先检查谓词上的统计信息,然后才决定用什么索引.一般情 ...