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


Posted in Javascript onAugust 09, 2011

案例背景:

整个功能其实就是从数据库取出数据,然后在界面上播放,简单地说就是类似网上在线看视频,听音乐,只不过我取的是字符串数据,而他们取的是流文件数据。把整体数据分成十份,十个线程同时向数据库取数据(并发提高速度)放在十个队列中,另外一个线程从队列中取数据拿出来到界面上播放,可以拖动播放进度,停止,暂停,重新播放,控制播放速度。恩,功能听起来似乎很简单,做起来也不是很难。但是后面发现的一些问题,以及顺着这些问题往下挖掘,挖掘了一些我认为值得记住的东西。
关键东西:

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引擎一直等待着任务队列中任务的到来.由于单线程关系,这些任务得进行排队,一个接着一个被引擎处理。所以在播放数据的时候,操作界面的是会被加到任务队列中,会得到执行,自然用户角度感受到整个页面也不卡了。

Javascript 相关文章推荐
JavaScript 学习小结(适合新手参考)
Jul 30 Javascript
拥抱模块化的JavaScript
Mar 07 Javascript
js给dropdownlist添加选项的小例子
Mar 04 Javascript
JQuery给网页更换皮肤的方法
May 30 Javascript
跟我学习javascript的隐式强制转换
Nov 16 Javascript
Javascript复制实例详解
Jan 28 Javascript
Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)
May 09 Javascript
protractor的安装与基本使用教程
Jul 07 Javascript
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
Mar 28 jQuery
微信小程序实现的3d轮播图效果示例【基于swiper组件】
Dec 11 Javascript
vue 点击展开显示更多(点击收起部分隐藏)
Apr 09 Javascript
使用PreloadJS加载图片资源的基础方法详解
Feb 03 Javascript
javascript 主动派发事件总结
Aug 09 #Javascript
JsDom 编程小结
Aug 09 #Javascript
IE 当eval遇上function的处理
Aug 09 #Javascript
取得窗口大小 兼容所有浏览器的js代码
Aug 09 #Javascript
Javascript实现的类似Google的Div拖动效果代码
Aug 09 #Javascript
基于Jquery的文字自动截取(提供源代码)
Aug 09 #Javascript
JQuery动态创建DOM、表单元素的实现代码
Aug 09 #Javascript
You might like
php实现基于微信公众平台开发SDK(demo)扩展的方法
2014/12/22 PHP
在WordPress中使用wp_count_posts函数来统计文章数量
2016/01/05 PHP
php实现文章评论系统
2019/02/18 PHP
PHP二维索引数组的遍历实例分析【2种方式】
2019/06/24 PHP
给moz-firefox下添加IE方法和属性
2007/04/10 Javascript
百度留言本js 大家可以参考下
2009/10/13 Javascript
统计出现最多的字符次数的js代码
2010/12/03 Javascript
javascript中IE浏览器不支持NEW DATE()带参数的解决方法
2012/03/01 Javascript
jquery配合css简单实现返回顶部效果
2013/09/30 Javascript
jquery实现多级下拉菜单的实例代码
2013/10/02 Javascript
JavaScript将页面表格导出为Excel的具体实现
2013/12/27 Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
2015/07/17 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
2016/07/27 Javascript
JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome
2017/01/05 Javascript
jQuery实现获取form表单内容及绑定数据到form表单操作分析
2018/07/03 jQuery
详解如何在Angular优雅编写HTTP请求
2018/12/05 Javascript
vue指令做滚动加载和监听等
2019/05/26 Javascript
[04:48]DOTA2上海特锦赛小组赛第三日 TOP10精彩集锦
2016/02/28 DOTA
Python程序中设置HTTP代理
2016/11/06 Python
python3之模块psutil系统性能信息使用
2018/05/30 Python
Python函数any()和all()的用法及区别介绍
2018/09/14 Python
在PyCharm导航区中打开多个Project的关闭方法
2019/01/17 Python
kafka-python 获取topic lag值方式
2019/12/23 Python
新建文件时Pycharm中自动设置头部模板信息的方法
2020/04/17 Python
python爬虫使用requests发送post请求示例详解
2020/08/05 Python
Python实现冒泡排序算法的完整实例
2020/11/04 Python
荷兰DOD药房中文官网:DeOnlineDrogist
2020/12/27 全球购物
extern在函数声明中是什么意思
2014/01/19 面试题
团购业务员岗位职责
2014/03/15 职场文书
留学顾问岗位职责
2014/04/14 职场文书
机电一体化应届生求职信
2014/08/09 职场文书
2014和解协议书范文
2014/09/15 职场文书
升学宴家长致辞
2015/07/27 职场文书
《唯一的听众》教学反思
2016/02/18 职场文书
【TED出品】天梯非主流开心游1700 划水骑士
2022/03/31 魔兽争霸
Nginx流量拷贝ngx_http_mirror_module模块使用方法详解
2022/04/07 Servers