当前位置 : IT培训网 > Web前端 > Web教程 > HTML5 Web Workers是如何运行的

HTML5 Web Workers是如何运行的

时间:2016-12-09 15:51:33  来源:web前端培训网  作者:IT培训网  已有:名学员访问该课程
标签(Tag):   html5(196)
好了,看到这里你懂了吗,这些 JavaScript脚本的运行不会影响页面的性能,它只是在后台运行而已,如果你想要学习HTML5 web workers方面的知识,那就赶紧关注IT培训网小编吧!

在HTML5 web页面中有这样一些功能,那就是用脚步JavaScript控制的特效或者功能在运行着,这些功能的运行会影响页面打开速度吗,会拖慢用户的浏览速度吗,想要知道的话,赶紧看下面吧!

HTML5 Web Workers

web worker 是运行在后台的 JavaScript,不会影响页面的性能。

什么是 Web Worker

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

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

浏览器支持

HTML5 Web Workers是如何运行的_www.cnitedu.cn

Internet Explorer 10, Firefox, Chrome, Safari 和 Opera 都支持Web workers.

HTML5 Web Workers 实例

下面的例子创建了一个简单的 web worker,在后台计数:

源代码:

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>IT培训网(www.cnitedu.cn)</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>

运行结果:

HTML5 Web Workers是如何运行的_www.cnitedu.cn

demo_workers.js 文件代码:

var i=0;

function timedCount()

{

    i=i+1;

    postMessage(i);

    setTimeout("timedCount()",500);

}

timedCount();

检测浏览器是否支持 Web Worker

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

if(typeof(Worker)!=="undefined")

{

    // 是的! Web worker 支持!

    // 一些代码.....

}

else

{

    //抱歉! Web Worker 不支持

}

创建 web worker 文件

现在,让我们在一个外部 JavaScript 中创建我们的 web worker。

在这里,我们创建了计数脚本。该脚本存储于 "demo_workers.js" 文件中:

var i=0;

function timedCount()

{

    i=i+1;

    postMessage(i);

    setTimeout("timedCount()",500);

}

timedCount();

以上代码中重要的部分是 postMessage() 方法 - 它用于向 HTML 页面传回一段消息。

注意: web worker 通常不用于如此简单的脚本,而是用于更耗费 CPU 资源的任务。

创建 Web Worker 对象

我们已经有了 web worker 文件,现在我们需要从 HTML 页面调用它。

下面的代码检测是否存在 worker,如果不存在,- 它会创建一个新的 web worker 对象,然后运行 "demo_workers.js" 中的代码:

if(typeof(w)=="undefined")

{

    w=new Worker("demo_workers.js");

}

然后我们就可以从 web worker 发生和接收消息了。

向 web worker 添加一个 "onmessage" 事件监听器:

w.onmessage=function(event){

    document.getElementById("result").innerHTML=event.data;

};

终止 Web Worker

当我们创建 web worker 对象后,它会继续监听消息(即使在外部脚本完成之后)直到其被终止为止。

如需终止 web worker,并释放浏览器/计算机资源,请使用 terminate() 方法:

w.terminate();

完整的 Web Worker 实例代码

我们已经看到了 .js 文件中的 Worker 代码。下面是 HTML 页面的代码:

实例

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>IT培训网(www.cnitedu.cn)</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>

运行结果:

HTML5 Web Workers是如何运行的_www.cnitedu.cn

Web Workers DOM

由于 web worker 位于外部文件中,它们无法访问下例 JavaScript 对象:

window 对象

document 对象

parent 对象

好了,看到这里你懂了吗,这些脚本的运行不会影响页面的性能,它只是在后台运行而已,如果你想要学习HTML5 web workers方面的知识,那就赶紧关注IT培训网小编吧!

顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
------分隔线----------------------------
Web 教程
1、HTML 教程
1.1 HTML 简介
1.2 HTML 编辑器
1.3 HTML 基础
1.4 HTML 元素
1.5 HTML 属性
1.6 HTML 标题
1.7 HTML 段落
1.8 HTML 文本格式化
1.9 HTML 链接
1.10 HTML 头部
1.11 HTML CSS
1.12 HTML 图像
1.13 HTML 表格
1.14 HTML 列表
1.15 HTML 区块
1.16 HTML 布局
1.17 HTML 表单
1.18 HTML 框架
1.19 HTML 颜色
1.20 HTML 颜色名
1.21 HTML 颜色值
1.22 HTML 脚本
1.23 HTML 字符实体
1.24 HTML URL
1.25 HTML 速查列表
1.26 HTML 总结
1.27 HTML 简介
2、HTML5
2.1 HTML5 教程
2.2 HTML5 浏览器支持
2.3 HTML5 新元素
2.4 HTML5 Canvas
2.5 HTML5 内联 SVG
2.6 HTML5 MathML
2.7 HTML5 拖放
2.8 HTML5 地理定位
2.9 HTML5 Video(视频)
2.10 HTML5 Audio(音频)
2.11 HTML5 Input 类型
2.12 HTML5 表单元素
2.13 HTML5 表单属性
2.14 HTML5 语义元素
2.15 HTML5 Web 存储
2.16 HTML5 Web SQL
2.17 HTML5 应用程序缓存
2.18 HTML5 Web Workers
2.19 HTML5 SSE
2.20 HTML5 WebSocket
2.21 HTML5 代码规范
3、HTML 媒体
3.1 HTML 媒体(Media)
3.2 HTML 插件
3.3 HTML 音频(Audio)
3.4 HTML视频(Videos)播放