什么是 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. Auto Control 001 自动控制的一般概念

    自动控制的基本概念 一 . 自动控制系统的组成 自动控制装置:自动控制装置的组成当中涉及到了这样这样一些东西: 第1,需要有被控对象,那么这些被控对象需要有谁来控制呢?一定要有控制器,这些控制器,我们 ...

  2. 30.MIN() 函数

    MIN() 函数 MIN 函数返回一列中的最小值.NULL 值不包括在计算中. SQL MIN() 语法 SELECT MIN(column_name) FROM table_name 注释:MIN ...

  3. redirect_uri域名与后台配置不一致,错误码:10003

    登录公众平台,重新配置下网页授权域名就可以了 参考https://blog.csdn.net/haoxuexiaolang/article/details/79432073

  4. mysql_5.6内存过高问题解决

    MySQL 5.6安装完之后,每过一段时间就会莫名其妙挂掉.而且还很难启动.非要重启服务器,才能拉起mysql. 后来分析是由于mysql启动后内存过高,跑一段时间就会由于内存不足而被杀死. 今天分析 ...

  5. 随便写个bat存档

    @echo off @COLOR @echo ------------切换Hosts环境--------------- :Again @set /p choice="切换模式:A:应用环境, ...

  6. C#构造函数详解和析构函数详解

    首先来了解下构造函数的定义: C#构造函数是一种特殊的成员函数,它的作用主要用于为对象分配存储空间,对数据成员进行初始化. 接下来看一下他的语法定义形式: |访问修饰符| 标识符 (|参数列表|) | ...

  7. 为什么 kubernetes 天然适合微服务 （2）

    此文已由作者刘超授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验 三.微服务化的十个设计要点 微服务有哪些要点呢?第一张图是 SpringCloud 的整个生态. 第二张图是微服 ...

  8. C# LINQ（4）

    where作为LINQ的条件关键字. where的右面是表达式 表达式可以方法返回值,但是where的右面最终是一个可检测真假的表达式 代码: static void Main(string[] ar ...

  9. Struts2学习第一天--Struts2的概述、Struts2的入门、Struts2常见的配置、Struts2的Action的编写

    action的name要与访问路径对应.hello.action. 加到tomcat启动 访问:http://localhost:8080/struts2-1/demo1/demo1.jsp 改为su ...

  10. BeanShell Processor_使用Java处理脚本

    版权声明:本文为博主原创文章,未经博主允许不得转载. [try-catch] 建议使用Try----Catch块,这样Java语句出现问题时,日志更清晰: try { //java代码 } catch ...