Web Worker 案例

什么是 Web Worker?

当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成。

web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 在后台运行。

检测浏览器是否支持 Web Worker

在创建 web worker 之前,请检测用户的浏览器是否支持它:

if(typeof(Worker)!=="undefined")
{
    // 是的! Web worker 支持!
    // 一些代码.....
}
else
{
    //抱歉! Web Worker 不支持 
}


<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<p>计数: <output id="result"></output></p>
<button onclick="startWorker()">开始工作</button>
<button onclick="stopWorker()">停止工作</button>

<p><strong>注意:</strong> Internet Explorer 9 及更早 IE 版本浏览器不支持 Web Workers.</p>

<script>
var w;

function startWorker() {
    if(typeof(Worker) !== "undefined") {
        if(typeof(w) == "undefined") {
            w = new Worker("demo_workers.js");
        }
        w.onmessage = function(event) {
            document.getElementById("result").innerHTML = event.data;
        };
    } else {
        document.getElementById("result").innerHTML = "抱歉,你的浏览器不支持 Web Workers...";
    }
}

function stopWorker()
{
    w.terminate();
    w = undefined;
}
</script>

</body>
</html>
时间: 2024-12-16 14:39:52

Web Worker 案例的相关文章

html5之Web Worker -- js多线程编程

什么是Web Worker? web worker 是运行在后台的 JavaScript,不占用浏览器自身线程,独立于其他脚本,可以提高应用的总体性能,并且提升用户体验. 一般来说Javascript和UI页面会共用一个线程,在HTML页面中执行js脚本时,页面的状态是不可响应的,直到脚本已完成.而这段代码可以交给Web Worker在后台运行,那么页面在Javascript运行期间依然可以响应用户操作.后台会启动一个worker线程来执行这段代码,用户可以创建多个worker线程. 有两种 W

JS线程模型&amp;Web Worker

js线程模型 客户端javascript是单线程,浏览器无法同时运行两个事件处理程序 设计为单线程的理论是,客户端的javascript函数必须不能运行太长时间,否则会导致web浏览器无法对用户输入做出响应.这也是为什么Ajax的API都是异步的,以及为什么客户端Javascript不能使用一个简单的异步load()或者require()函数来加载javascript库 如果应用程序不得不执行太多的计算而导致明显的延迟,应该允许文档在执行这个计算之前完全载入,并且确保告诉用户正在进行计算并且浏览

HTML5 Web Worker简单使用

Web Workers 是 HTML5 提供的一个javascript多线程解决方案,我们可以将一些大计算量的代码交由web Worker运行而不冻结用户界面. 一:如何使用Worker Web Worker的基本原理就是在当前javascript的主线程中,使用Worker类加载一个javascript文件来开辟一个新的线程,起到互不阻塞执行的效果,并且提供主线程和新线程之间数据交换的接口:postMessage,onmessage. 那么如何使用呢,我们看一个例子: //worker.jso

HTML5新增的一些属性和功能之八——web Worker

Web Workers 为什么用web workers? 浏览器的原理中决定了页面打开只有一个主线程--UI渲染线程,如果线程中有耗时的程序(js)会阻塞线程,使得页面中其他的UI无法渲染,我们一般把js文件放在body结束之前,或者优化算法复杂度.但是根本上解决还是线程的问题.在HTML5中新增了web Workers的方法,用来解决JavaScript多线程的问题.把一些耗时的程序放在单独的js中,和浏览器的UI渲染线程同步执行. 如何用: 1.首先把需要单独执行的js代码单独放在一个js文

web socket and web worker 基础原理及使用

个人认为HTML5最吸引人的两大功能, web socket 和 worker为构建高效能的web应用提供了新的参考方案. 大体来说,web socket提供更高效的传输协议,web worker提供多线程提高web应用计算效率.最近项目有用到,对应两个问题的解决,目前运行效果来看还是很不错. 这里主要是总结这两个技术的基础原理,和常用API.备忘,也列举关键掌握点,入门和基础使用足以. Web Socket websocket是一种协议,本质上和http,tcp一样.协议是用来说明数据是如何传

web worker 的 self

A self object, which is the global object representing the worker in this scope. 对self对象的译法,未知妥否. 1 // Call the invertImage method when this worker receives a message from the calling script. 2 // The ‘self’ object contains the only methods a web wor

HTML5 Web Worker的使用

Web Workers 是 HTML5 提供的一个javascript多线程解决方案,我们可以将一些大计算量的代码交由web Worker运行而不冻结用户界面. 一:如何使用Worker Web Worker的基本原理就是在当前javascript的主线程中,使用Worker类加载一个javascript文件来开辟一个新的线程,起到互不阻塞执行的效果,并且提供主线程和新线程之间数据交换的接口:postMessage,onmessage. 那么如何使用呢,我们看一个例子: JavaScript 1

Web Worker

web worker 是运行在后台的 JavaScript,不会影响页面的性能. 什么是web worker? 当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成. web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能.您可以继续做任何愿意做的事情:点击.选取内容等等,而此时 web worker 在后台运行. 所有主流浏览器均支持 web worker,除了 Internet Explorer. 使用之前,检测浏览器是否支持? i

web worker在WebKit中的实现机制

web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能.这是HTML5的一个标准:实现上讲,浏览器为wokrer启动了新的线程,从而实现了异步操作的功能; 下面是woker的一个简单例子,在html页面中,以worker.js为源文件,创建了名为"worker"的Worker对象,通过worker.postMessage()接口向worker线程发送消息: worker线程将JSON格式化传递的两个数据相加后,再通过postMessage()接口