什么是 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  及更早 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 案例的更多相关文章

  1. Web Worker javascript多线程编程（一）

    什么是Web Worker? web worker 是运行在后台的 JavaScript,不占用浏览器自身线程,独立于其他脚本,可以提高应用的总体性能,并且提升用户体验. 一般来说Javascript ...

  2. 【转】Web Worker javascript多线程编程（一）

    原文:https://www.cnblogs.com/peakleo/p/6218823.html -------------------------------------------------- ...

  3. Web Worker: Shared Worker的使用

    Web Worker: Shared Worker的使用 参考资料: JavaScript高级程序第四版 https://juejin.cn/post/7064486575916187656 http ...

  4. JavaScript多线程之HTML5 Web Worker

    在博主的前些文章Promise的前世今生和妙用技巧和JavaScript单线程和浏览器事件循环简述中都曾提到了HTML5 Web Worker这一个概念.在JavaScript单线程和浏览器事件循环简 ...

  5. Web Worker javascript多线程编程（二）

    Web Worker javascript多线程编程(一)中提到有两种Web Worker:专用线程dedicated web worker,以及共享线程shared web worker.不过主要讲 ...

  6. 过段时间逐步使用HTML5新增的web worker等内容

    想来快2017年了,2013年前的手机应该很少有人用了,以后逐渐使用HTML5新增的高级API吧. 先把web worker的内容再熟悉一下,因为微软虚拟学院的'面向有经验开发人员的 JavaScri ...

  7. web Worker使js实现‘多线程’？

    大家都知道js是单线程的,在上一段js执行结束之前,后面的js绝对不会执行,那么为什么标题说js实现‘多线程’,虽然说加了引号,可是标题也不能乱写不是,可恶的标题党? 姑且抛开标题不说,先说我们经常会 ...

  8. HTML5：web socket 和 web worker

    a:hover { cursor: pointer } 做练习遇到了一个选择题,是关于web worker的,问web worker会不会影响页面性能?补习功课之后,答案是不会影响. 查阅了相关资料学 ...

  9. javascript 多线程Web Worker不引用外部js文件的方法

    最近在Android开发中 Webview通过调用JavascriptInterface的方式与App交互 在交互的过程中,有些App上的操作时间会比较长,Web中调用的话会造成程序假死的情况 于是想 ...

随机推荐

  1. jquery dropdownlist.js

    $.fn.extend({ SetDict: function (option) { var txtControl = $(this); if (!txtControl.hasClass(" ...

  2. 第十三课 Actionlib(2)

    上节课讲到了客户端,这节课讲解一下服务器 1.创建服务器源文件touch fibonacciserver.cpp 2.编写源文件 3.修改CMakeLists.txt 4.编译之catkin_make ...

  3. js精度（摘）

    Math.formatFloat = function (f, digit) {    var m = Math.pow(10, digit);    return parseInt(f * m, 1 ...

  4. SpringMVC——RequestMapping

    一.@RequestMapping 映射请求 Spring MVC 通过@RequestMapping注解可以定义不同的处理器映射规则. @RequestMapping放在类名上边,设置请求前缀 方法 ...

  5. hadoop2.2分布式环境搭建

    hadoop2.2的分布式环境需要配置的参数更多.但是需要安装的系统软件和单节点环境是一样的. 运行hadoop在非安全环境 hadoop的配置文件有两类: 1:只读的默认配置文件: core-def ...

  6. hdu 4681 String(转载)

    #include <stdio.h> #include <string.h> #include <algorithm> #include <iostream& ...

  7. [存储过程]中的事务(rollback)回滚

    在编写SQL Server 事务相关的存储过程代码时,经常看到下面这样的写法: begin tran update statement 1 ... update statement 2 ... del ...

  8. threading学习

    多线程类似于同时执行多个不同程序,多线程运行有如下优点: 使用线程可以把占据长时间的程序中的任务放到后台去处理. 用户界面可以更加吸引人,这样比如用户点击了一个按钮去触发某些事件的处理,可以弹出一个进 ...

  9. java 异常捕获与异常处理

    try{会产生异常的代码 }catch(出现异常的类型 e){ 异常出现后处理的方法 } 一旦异常出现又没有异常处理,程序就会中断. public static void main(String[] ...

  10. （转）每位设计师都应该拥有的50个CSS代码片段

    原文地址:http://www.cnblogs.com/fengyuqing/archive/2013/06/15/css_50.html 面对每年如此多的 新趋势 ,保持行业的领先是个很困难问题. ...