菜单
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

HTML 教程

HTML 首页 HTML 简介 HTML 编辑器 HTML 基础 HTML 元素 HTML 属性 HTML 标题 HTML 段落 HTML 样式 HTML 格式化 HTML 引用 HTML 注释 HTML 颜色 HTML CSS HTML 链接 HTML 图像 HTML 收藏夹图标 HTML 页面标题 HTML 表格 HTML 列表 HTML 块级 & 行内元素 HTML Div HTML 类 HTML Id HTML Iframe HTML JavaScript HTML 文件路径 HTML Head HTML 布局 HTML 响应式设计 HTML 计算机代码 HTML 语义化 HTML 样式指南 HTML 实体 HTML 符号 HTML 表情符号 HTML 字符集 HTML URL 编码 HTML vs. XHTML

HTML 表单

HTML 表单 HTML 表单属性 HTML 表单元素 HTML 输入类型 HTML 输入属性 输入表单属性

HTML 图形

HTML Canvas HTML SVG

HTML 媒体

HTML 媒体 HTML 视频 HTML 音频 HTML 插件 HTML YouTube

HTML API

HTML 地理定位 HTML 拖放 HTML Web 存储 HTML Web Workers HTML SSE

HTML 示例

HTML 示例 HTML 编辑器 HTML 测验 HTML 练习 HTML 网站 HTML 面试准备 HTML 新兵训练营 HTML 证书 HTML 摘要 HTML 无障碍性

HTML 参考

HTML 标签列表 HTML 属性 HTML 全局属性 HTML 浏览器支持 HTML 事件 HTML 颜色 HTML Canvas HTML 音频/视频 HTML 文档类型 HTML 字符集 HTML URL 编码 HTML 语言代码 HTTP 消息 HTTP 方法 PX 到 EM 转换器 键盘快捷键

HTML Web Workers API


Web Worker 是一种在后台运行的 JavaScript,不影响页面性能。


什么是 Web Worker?

在 HTML 页面中执行脚本时,页面会变得无响应,直到脚本完成。

Web Worker 是一种在后台运行的 JavaScript,独立于其他脚本,不影响页面性能。您可以继续做任何您想做的事情:点击、选择等等,而 Web Worker 在后台运行。


浏览器支持

表中数字指定了完全支持 Web Workers 的第一个浏览器版本。

API
Web Workers 4.0 10.0 3.5 4.0 11.5

HTML Web Workers 示例

以下示例创建了一个简单的 Web Worker,用于在后台计数

示例

计数:

自己动手试一试 »

检查 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 的数据存储在 event.data 中。


终止 Web Worker

创建 Web Worker 对象后,它将继续监听消息(即使外部脚本已完成),直到被终止。

要终止 Web Worker 并释放浏览器/计算机资源,请使用 terminate() 方法

w.terminate();

重用 Web Worker

如果您在终止 Worker 变量后将其设置为 undefined,则可以重用代码

w = undefined;

完整的 Web Worker 示例代码

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

示例

<!DOCTYPE html>
<html>
<body>

<p>计数: <output id="result"></output></p>
<button onclick="startWorker()">启动 Worker</button>
<button onclick="stopWorker()">停止 Worker</button>

<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 Worker。";
  }
}

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

</body>
</html>
自己动手试一试 »

Web Workers 和 DOM

由于 Web Worker 位于外部文件中,它们无法访问以下 JavaScript 对象

  • window 对象
  • document 对象
  • parent 对象

×

联系销售

如果您想将 W3Schools 服务用于教育机构、团队或企业,请发送电子邮件给我们
sales@w3schools.com

报告错误

如果您想报告错误,或想提出建议,请发送电子邮件给我们
help@w3schools.com

W3Schools 经过优化,旨在方便学习和培训。示例可能经过简化,以提高阅读和学习体验。教程、参考资料和示例会不断审查,以避免错误,但我们无法保证所有内容的完全正确性。使用 W3Schools 即表示您已阅读并接受我们的使用条款Cookie 和隐私政策

版权所有 1999-2024 Refsnes Data。保留所有权利。W3Schools 由 W3.CSS 提供支持