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中调用的话会造成程序假死的情况 于是想 ...
随机推荐
- rosbag数据记录及转换图片、视频
博客转载自: https://blog.csdn.net/u012706484/article/details/78495896 rosbag常见的使用参数和配置 1.查看.bag中包含的信息 : r ...
- 默默的发现在网上找到的hook NtQueryDirectoryFile......
默默的发现在网上找到的hook NtQueryDirectoryFile...... hook NtQueryDirectoryFile是为了实现文件隐藏,然后就发现在网上发现的代码版本似乎同一个 ...
- 复习action委托
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- [GO]变量内存和变量地址
package main import "fmt" func main() { //每个变量都有两层含义,变量的内存和变量的地址 fmt.Printf("a = %d\n ...
- 现代C++学习笔记之一入门篇：智能指针（C++ 11）
原始指针:通过new建立的*指针 智能指针:通过智能指针关键字(unique_ptr, shared_ptr ,weak_ptr)建立的指针 在现代 C++ 编程中,标准库包含智能指针,该指针用于确保 ...
- ArcGIS坐标转换
我忘了怎么设置坐标系了- 定义投影ArcCatalog设置? -arctoolbox好像都可以 感觉不用想的那么复杂]直接定义投影就行了 选这一个吗 这个就行了' 然后? 应该是先定义成 ...
- 【2008nmj】BP二元分类
在人的大脑里有数以万计的神经元,它们之间通过神经突触来连接.用以判断. BP神经网络 MATLAB实现:
- delphi 创建DLL文件 及其调用和注意事项
首先创建一个DLL文件,项目自带的代码为: library ProjectPnr; { Important note about DLL memory management: ShareMem mus ...
- C# -- 泛型（1）
简介: 先看看泛型的概念--“通过参数化类型来实现在同一份代码上操作多种数据类型.利用“参数化类型”将类型抽象化,从而实现灵活的复用”. 很多初学者在刚开始接触泛型的时候会比较难理解 “泛型” 在这里 ...
- IIS将http强转为https（重定向和重写）
最近接到一个需求,客户希望无论是http还是https请求都可以访问,并且http能转换成https.研究了一圈发现iis的重定向和重写都可以实现http强转https,记录一下. 用到的东东: In ...