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. 你怎么知道你的网站K

    最近有朋友问我关于网站K问题,你怎么知道被提及哪些网站K方面.总结了六个方法后,,至于有没有其他办法.欢迎和我交流讨论. 检测方法是网站的搜索引擎惩罚:   首先要明白的是.搜索引擎不惩罚easy侦查 ...

  2. Python多线程的threading Event

    Python threading模块提供Event对象用于线程间通信.它提供了一组.拆除.等待用于线程间通信的其他方法. event它是沟通中最简单的一个过程之中,一个线程产生一个信号,号.Pytho ...

  3. struts2在&lt;s:select&gt;用动态标签

    后台传过来的必要性userlist成为一个下拉菜单.因此,认为使用<s:select>.但设置了很久设置的属性,在这个下跌. JSP代码: <s:select label=" ...

  4. 玩转Web之Json（四）---json与（Object/List/Map）的相互转化

    在做web应用时,经常需要将json转化成Object/list/map或者将Object/List/map转化成json,通过简单封装可以在写代码是减轻很多负担.本文将给出json转化的一系列方法. ...

  5. J2SE基础:7.系统经常使用类一

    1.Object对象 Object对象是全部对象的根类. 每一个对象都默认继承自Object类. equals():对象与对象之间是否相等. 逻辑上面的相等.equals 物理上面的相等(地址相等) ...

  6. leetcode——Evaluate Reverse Polish Notation 求算式值（AC）

    Evaluate the value of an arithmetic expression in Reverse Polish Notation. Valid operators are +, -, ...

  7. python udp编程实例

    与python tcp编程控制见 http://blog.csdn.net/aspnet_lyc/article/details/39854569 c++ udp/tcp 编程见 http://blo ...

  8. 一篇非常全面的freemarker教程

    copy自http://demojava.iteye.com/blog/800204 下面内容所有是网上收集: FreeMarker的模板文件并不比HTML页面复杂多少,FreeMarker模板文件主 ...

  9. Deploy Oracle 10.2.0.5 on Red Hat Enterprise Linux 6.4

    一.Linux系统安装和配置 1.安装系统时选Desktop 2.设置eth0网卡为静态IP,加入子网掩码,网关,DNS.并配置自己主动启动 3.改动/etc/hosts.加入主机名和相应IP 4.禁 ...

  10. yate.conf

    但档案.粘贴下面的例子.不解释!除去非常灵活!只保留sip电话! [general] ; General settings for the operation of Yate ; modload: b ...