html5 – Web Worker的限制

请记住,我以前从未使用过网络工作者,而且在缠绕他们时遇到了一些麻烦.

这是对我正在做的简化版本的解释.

我的页面包含各种文件的链接 – 一些是文本,一些是图像等.每个文件都有一个显示通用文件图标的图像.

我希望脚本用文件内容的预览替换每个通用图标.

该脚本将从服务器请求文件(从而将其添加到缓存中,如预加载器),然后创建画布并在其上绘制预览(图像的缩略图,文本文件的摘录,更具体的图标)对于媒体文件…)最后使用数据URL用画布替换通用图标的源.

我很容易做到这一点.但是,我更喜欢在后台使用它,以便它在工作时不会干扰UI.

在我深入研究之前,我需要知道:工人可以使用画布,如果是这样,我将如何制作画布?我不认为document.createElement(‘canvas’)会起作用,因为Workers无法访问DOM,或者我误解了我发现的所有引用都说他们“无法访问DOM”?

解决方法

您无法从Web工作者访问DOM.您无法加载图片.您无法创建画布元素并从Web worker中绘制它们.目前,Web工作者几乎只限于执行ajax调用和执行计算密集型操作.请参阅有关Web工作者和画布对象的相关问题/答案: Web Workers and Canvas以及有关使用Webworkers加速图像处理的文章: http://blogs.msdn.com/b/eternalcoding/archive/2012/09/20/using-web-workers-to-improve-performance-of-image-manipulation.aspx

你最简单的选择是将你的工作分成小块(没有web工作者)并一次做一个块,做一个setTimeout(),然后处理下一部分工作.这将允许UI在仍然完成工作的同时做出响应.如果要进行任何CPU消耗计算(比如进行图像分析),可以将其归结为Web worker,结果可以通过消息发送回主线程以放入DOM,但如果没有,然后只需要在较小的块中进行工作以保持UI的活力.

部分任务,如加载图像,从服务器获取数据等等,也可以异步完成,因此如果正确完成,它不会干扰UI的响应性.

以下是分块的一般概念:

function doMyWork() {
    // state variables
    // initialize state
    var x,y,z;

    function doChunk() {
        // do a chunk of work
        // updating state variables to represent how much you've done or what remains

        if (more work to do) {
            // schedule the next chunk
            setTimeout(doChunk,1);
        }

    }
    // start the whole process
    doChunk();
}

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


HTML5和CSS3实现3D展示商品信息的代码
利用HTML5中的Canvas绘制笑脸的代码
Html5剪切板功能的实现
如何通过HTML5触摸事件实现移动端简易进度条
Html5移动端获奖无缝滚动动画实现
关于HTML5和CSS3实现机器猫的代码
HTML5使用DOM进行自定义控制
使用HTML5 Canvas绘制阴影效果的方法
使用PHP和HTML5 FormData实现无刷新文件上传
如何解决HTML5 虚拟键盘出现挡住输入框的问题
HTML5中div和section以及article的区别分析
html5和CSS 实现禁止IOS长按复制粘贴功能
html5 touch事件实现触屏页面上下滑动
canvas 模拟实现电子彩票刮刮乐的代码
HTML5 Plus 实现手机APP拍照或相册选择图片上传的功能
Android自定义环形LoadingView效果
HTML5 canvas绘制五角星的方法
html5使用html2canvas实现浏览器截图
使用Canvas处理图片的方法介绍
利用Canvas模仿百度贴吧客户端loading小球的方法