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. Android开发有用技巧：推断当前系统语言版本号

    Locale locale = getResources().getConfiguration().locale; String language = locale.getLanguage(); 以上 ...

  2. log(n)在第一时间，以确定该阵列i小号码

    简介参考算法9.2 int partition(int *a,int p,int r){ int x=a[r]; int i=p-1; for(int j=p;j<=r-1;j++){ if(a ...

  3. OpenStack_Swift源代码分析——Ring基本原理及一致性Hash算法

    1.Ring的基本概念 Ring是swfit中最重要的组件.用于记录存储对象与物理位置之间的映射关系,当用户须要对Account.Container.Object操作时,就须要查询相应的Ring文件( ...

  4. Java、PHP训练场地选择成都传祺播客

    传智播客选择九类基础: 1 有不怕炫耀实力,我们会爱一本书,是一个开源项目 2 领先的新技术,让我们的学生走在别人前面,首先推出Hadoop.Unity3D.Nginx. 3 课程广博的知识,深入的技 ...

  5. Cordova探险系列（三）

    自从3.0之后.Cordova默认是关闭全部关于设备原生特性功能的,所以我们要通过加入插件来启动原生特性. 这里以Accelerometer(加速度感应器)为例,来学习怎样使用设备原生特性. 1.加入 ...

  6. EF 主键自增、级联删除

    一.主键自增 1.设置数据库中,主键自增 2.设置VS中Model1.edmx

  7. 重新想象 Windows 8 Store Apps (21) - 动画: ThemeTransition（过渡效果）

    原文:重新想象 Windows 8 Store Apps (21) - 动画: ThemeTransition(过渡效果) [源码下载] 重新想象 Windows 8 Store Apps (21) ...

  8. Jenkins详细安装与构建部署使用教程（转）

    Jenkins是一个开源软件项目,旨在提供一个开放易用的软件平台,使软件的持续集成变成可能.Jenkins是基于Java开发的一种持续集成工具,用于监控持续重复的工作,功能包括:1.持续的软件版本发布 ...

  9. BZOJ 2006 NOI2010 超级钢琴 划分树+堆

    题目大意:给定一个序列.找到k个长度在[l,r]之间的序列.使得和最大 暴力O(n^2logn),肯定过不去 看到这题的第一眼我OTZ了一下午... 后来研究了非常久别人的题解才弄明确怎么回事...蒟 ...

  10. 采用truelicense进行Java规划license控制 扩展可以验证后，license 开始结束日期，验证绑定一个给定的mac住址

    采用truelicense进行Java规划license控制 扩展可以验证后,license 开始结束日期,验证绑定一个给定的mac住址. Truelicense 它是一个开源java license ...