Web Worker 案例
什么是 Web Worker？
当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。
web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。
检测浏览器是否支持 Web Worker
在创建 web worker 之前，请检测用户的浏览器是否支持它：
{
// 是的! 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 及更早 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>
Web Worker 案例的更多相关文章
- Web Worker javascript多线程编程（一）
什么是Web Worker? web worker 是运行在后台的 JavaScript,不占用浏览器自身线程,独立于其他脚本,可以提高应用的总体性能,并且提升用户体验. 一般来说Javascript ...
- 【转】Web Worker javascript多线程编程（一）
原文:https://www.cnblogs.com/peakleo/p/6218823.html -------------------------------------------------- ...
- Web Worker: Shared Worker的使用
Web Worker: Shared Worker的使用 参考资料: JavaScript高级程序第四版 https://juejin.cn/post/7064486575916187656 http ...
- JavaScript多线程之HTML5 Web Worker
在博主的前些文章Promise的前世今生和妙用技巧和JavaScript单线程和浏览器事件循环简述中都曾提到了HTML5 Web Worker这一个概念.在JavaScript单线程和浏览器事件循环简 ...
- Web Worker javascript多线程编程（二）
Web Worker javascript多线程编程(一)中提到有两种Web Worker:专用线程dedicated web worker,以及共享线程shared web worker.不过主要讲 ...
- 过段时间逐步使用HTML5新增的web worker等内容
想来快2017年了,2013年前的手机应该很少有人用了,以后逐渐使用HTML5新增的高级API吧. 先把web worker的内容再熟悉一下,因为微软虚拟学院的'面向有经验开发人员的 JavaScri ...
- web Worker使js实现‘多线程’？
大家都知道js是单线程的,在上一段js执行结束之前,后面的js绝对不会执行,那么为什么标题说js实现‘多线程’,虽然说加了引号,可是标题也不能乱写不是,可恶的标题党? 姑且抛开标题不说,先说我们经常会 ...
- HTML5：web socket 和 web worker
a:hover { cursor: pointer } 做练习遇到了一个选择题,是关于web worker的,问web worker会不会影响页面性能?补习功课之后,答案是不会影响. 查阅了相关资料学 ...
- javascript 多线程Web Worker不引用外部js文件的方法
最近在Android开发中 Webview通过调用JavascriptInterface的方式与App交互 在交互的过程中,有些App上的操作时间会比较长,Web中调用的话会造成程序假死的情况 于是想 ...
随机推荐
- 符合mvc思维的分页思想
.Model Student.cs namespace WebApplication14.Models { public class Student { public int Id { get; se ...
- SQL之TCL
TCL(Transaction Control Language)事务控制语言 COMMIT 提交SAVEPOINT 设置保存点ROLLBACK 回滚SET TRANSACTION
- 11款PHP集成开发环境
1. Zend Studio Zend Studio 来自 Zend —— PHP 幕后的精英团队. 它真的是很不错.它运行于三大系统:Windows.Mac OS X 和 Linux.而且绝对能够提 ...
- angular resolve路由
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from "@angular/router&q ...
- [转]解读Unity中的CG编写Shader系列3——表面剔除与剪裁模式
在上一个例子中,我们得到了由mesh组件传递的信息经过数学转换至合适的颜色区间以颜色的形式着色到物体上.这篇文章将要在此基础上研究片段的擦除(discarding fragments)和前面剪裁.后面 ...
- 864. Shortest Path to Get All Keys
We are given a 2-dimensional grid. "." is an empty cell, "#" is a wall, "@& ...
- 杨辉三角的Python实现
杨辉三角的Python实现 1 1 1 1 2 1 1 3 3 1 1 4 6 4 1 1 5 10 10 5 1 Python生成器实现杨辉三角: # python def yanghui_tr ...
- luoguP3224 [HNOI2012]永无乡
https://www.luogu.org/problemnew/show/P3224 考虑对每个岛维护一颗平衡树,用并查集维护连通性,启发式合并即可 这东西其实是一个大暴力,每次把节点少的平衡树合并 ...
- [BZOJ2879][Noi2012]美食节（费用流）
题目描述 CZ市为了欢迎全国各地的同学,特地举办了一场盛大的美食节.作为一个喜欢尝鲜的美食客,小M自然不愿意错过这场盛宴.他很快就尝遍了美食节所有的美食.然而,尝鲜的欲望是难以满足的.尽管所有的菜品都 ...
- 老男孩Day15作业：商城列表页面（静态）
一. 一.作业需求: 1.完成商城列表静态页面的抒写 二.博客地址:https://www.cnblogs.com/catepython/p/9205636.html 三.运行环境 操作系统:Win1 ...