silverlight线程与基于事件驱动javascript引擎(实现轨迹回放功能)

案例背景:
    整个功能其实就是从数据库取出数据,然后在界面上播放,简单地说就是类似网上在线看视频,听音乐,只不过我取的是字符串数据,而他们取的是流文件数据。把整体数据分成十份,十个线程同时向数据库取数据(并发提高速度)放在十个队列中,另外一个线程从队列中取数据拿出来到界面上播放,可以拖动播放进度,停止,暂停,重新播放,控制播放速度。恩,功能听起来似乎很简单,做起来也不是很难。但是后面发现的一些问题,以及顺着这些问题往下挖掘,挖掘了一些我认为值得记住的东西。
关键东西:
    1. siliverlight 后台线程 BackgroundWorker m_GetReplayData= new BackgroundWorker();
2. 跨线程访问界面控件 ,this.Dispatcher.BeginInvoke( /访问界面UI);
3. javascript 式的函数指针: var ShowSIngleLog = function(){} ;(在父页面上)
4 .子页面注册父页面的事件: var fatharWindow = window.opener; ;
fatharWindow .ShowSIngleLog =function(){//播放数据 showTrace()};
5.javascript引擎线程,界面渲染线程,浏览器事件触发线程;
6.浏览器引擎是单线程,也就是所有东西都是同步的,不存在两个线程同时跑
问题所在:
通过silverlight线程的循环来调用JS方法达到播放界面数据的效果,因为silverlight只能调用本页面的JS方法,可是轨迹回放的页面是主页面弹出的一个子页面,于是我利用主页面的一个空的函数指针,子页面注册父页面的事件来达到Silverlight调用子页面方法目(上面提到的第3点)。经过我仔细的推敲和论证我确定没问题,做完后的也没什么问题。本地测试的都是用上百条,上千条数据,问题不大,停止,暂停,拖动进度,问题都不大,就是父页面界面有点卡,一开始我并没有重视这个问题。到了测试那边是2万多条数据播放,播放5分钟后主界面卡死了,轨迹回放页面上的,停止,拖动进度,暂停,播放按钮全部失效了。现象非常地诡异,我一度认为是测试的机器问题,最后发现是大数据量的问题。this.Dispatcher.BeginInvoke( /访问界面UI)这个调用看似很简单,很普通,但是有两    个特点:
1.它是异步的,也就是调一下不一定马上执行,先调不一定先执行,需要做同步控制;
2.这个方法要抢占浏览器界面渲染线程,而该线程与javascript引擎线程是互斥的.
    2万多数据,一开始我控制了播放速度,所以刚开始没什么问题,到后面很多数据都卡在这个方法上,导致不断地抢占浏览器界面渲染线程,导致主页面非常卡,直到卡死为止。点击主页面,浏览器事件触发线程要运行,但是这个时候界面渲染线程在跑,所以非常卡。
解决方案:
    this.Dispatcher.BeginInvoke( /访问界面UI),很明是这个东西造成,那就找替代方法。原来数据队列是放在silverlight上,我改成放在javascript 队列上。播放数据不依赖银光线程,利用setimeout (该方法在IE6下会内存泄露,所以一开始被我排斥)来定时播放数据。结果很漂亮,页面很顺畅,没有了异步的问题,不用去控制让数据同步播放,也比较简单。
分析原因:
为什么用silerlight来播放会很卡,但是setimeout来播不会卡,两个都是连续播放的,而且setimeout在播放的时候,点击页面,页面也能响应事件,这个问题我们要从事件驱动javascript引擎。页面卡的原因上面已经说了,主要是想解释一下setimeout播放为什么不卡。浏览器中的JavaScript引擎是基于事件驱动的,这里的事件可看作是浏览器派给它的各种任务,这些任务可以源自 JavaScript引擎当前执行的代码块,如调用setTimeout添加一个任务,也可来自浏览器内核的其它线程,如界面元素鼠标点击事件,定时触发器时间到达通知,异步请求状态变更通知等.从代码角度看来任务实体就是各种回调函数,JavaScript引擎一直等待着任务队列中任务的到来.由于单线程关系,这些任务得进行排队,一个接着一个被引擎处理。所以在播放数据的时候,操作界面的是会被加到任务队列中,会得到执行,自然用户角度感受到整个页面也不卡了。

(0)

相关推荐

  • Nginx学习笔记之事件驱动框架处理流程

    ngx_event_core_module模块的ngx_event_process_init方法对事件模块做了一些初始化.其中包括将"请求连接"这样一个读事件对应的处理方法(handler)设置为ngx_event_accept函数,并将此事件添加到epoll模块中.当有新连接事件发生时,ngx_event_accept就会被调用.大致流程是这样: worker进程在ngx_worker_process_cycle方法中不断循环调用ngx_process_events_and_time

  • C++事件驱动型银行排队模拟

    最近重拾之前半途而废的C++,恰好看到了<C++ 实现银行排队服务模拟>,但是没有实验楼的会员,看不到具体的实现,正好用来作为练习. 模拟的是银行的排队叫号系统,所有顾客以先来后到的顺序在同一个队列中等待,当有服务窗口空闲时,则队首的顾客接受服务,完成后则下一位顾客开始接受服务. 本实现是事件驱动型的,处理对象是事件而不是顾客:  有2种事件:顾客到事件和顾客离开事件.  有2个队列:顾客队列和事件队列. 程序的逻辑如下:  1.初始化事件队列,填充顾客到达事件:  2.处理事件队列的头部(总

  • Node.js中的事件驱动编程详解

    在传统程编程模里,I/O操作就像一个普通的本地函数调用:在函数执行完之前程序被堵塞,无法继续运行.堵塞I/O起源于早先的时间片模型,这种模型下每个进程就像一个独立的人,目的是将每个人区分开,而且每个人在同一时刻通常只能做一件事,必须等待前面的事做完才能决定下一件事做什么.但是这种在计算机网络和Internet上被广泛使用的"一个用户,一个进程"的模型伸缩性很差.管理多个进程时,会耗费很多内存,上下文切换也会占用大量资源,这些对操作系统是个很大的负担,而且随着进程数的递增,会导致系统性能

  • 驱动事件的addEvent.js代码

    复制代码 代码如下: Array.prototype.inArray = function (value) {      var i;      for (i=0; i < this.length; i++) {          if (this[i] === value) {              return true;          }      }      return false;  }; function addEvent( obj, type, fn ) {      

  • 你必须知道的Javascript知识点之"单线程事件驱动"的使用

    复制代码 代码如下: var intervalBody = function(){     console.log('interval'); } var startInterval = function(){     setInterval(intervalBody,1000); } var timeoutBody = function(){     console.log('timeout'); } var startTimeout = function(){     setTimeout(t

  • JScript|Event]面向事件驱动的编程(二)--实例讲解:将span模拟成超连接

    作者:泣红亭 在上一篇文章<面向事件驱动的编程>中我讲了三种将事件绑定到元素的方法,而推荐使用第三种方法,即使用attachEvent/addEventListener来绑定.上一篇文章的主旨是告诉大家如何使用事件,而这一篇文章的主旨是让大家弄懂如何灵活应用事件来批处理某一类的对象行为. 首先讲一讲事件传递的概念.什么是事件传递?举个现实的例子,有个人捏了一下你的手指,你可能会说他捏了你手指,也可能会说他捏了你的手,甚至可能会说他捏了你.事实上三种说法都没错,在浏览器事件的执行中亦有相似的情况

  • JScript面向事件驱动的编程

    世间万物,千变万化,面向对象的编程亦是对现实社会的模拟,而JavaScript是一种基于对象并且很接近面向对象编程的编程语言,而我们web设计师/程序员跟JavaScript打交道亦要直面JavaScript才能够把网页写得更加丰富多彩.在此先搞清楚一点就是:JavaScript并不仅仅用在Web上,它可以用在许多领域,当然我这里讨论的更多的是JavaScript在Web上的应用,并且主要是事件方面的应用. JavaScript并不能直接对Web对象进行操作,而是要通过浏览器提供的Documen

  • wxPython事件驱动实例详解

    本文实例讲述了wxPython的事件驱动机制,分享给大家供大家参考.具体方法如下: 先来看看如下代码: #!/usr/bin/python # moveevent.py import wx #导入wx库 class MoveEvent(wx.Frame): def __init__(self, parent, id, title): wx.Frame.__init__(self, parent, id, title, size=(250, 180)) #窗口大小为(250, 180) wx.St

  • window.addeventjs事件驱动函数集合addEvent等

    // written by Dean Edwards, 2005 // with input from Tino Zijdel, Matthias Miller, Diego Perini // http://dean.edwards.name/weblog/2005/10/add-event/ function addEvent(element, type, handler) {   if (element.addEventListener) {     element.addEventLis

  • 深入理解javaScript中的事件驱动

    javascript中的事件驱动是通过 鼠标或热键 的动作引发的  主要事件如下:1.鼠标单击事件 onclick   如:( <input type="button" value="鼠标单击" onclick="执行语句.处理" />) 通常用于如下控件:button 按钮对象checkbox 复选框或检查列表 --配合onclick单击事件,通常用于全选效果radio 单选按纽reset 重置按钮submit提交按钮 2.内容改变

随机推荐