什么是 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. ubuntu 环境变量设置

    一:用于当前终端:在当前终端中输入:export PATH=$PATH:<你的要加入的路径>不过上面的方法只适用于当前终端,一旦当前终端关闭或在另一个终端中,则无效.export NDK_ ...

  2. JavaPersistenceWithMyBatis3笔记-第5章Configuring MyBatis in a Spring applications-001

    一. 1.Mapper /** * */ package com.mybatis3.mappers; import java.util.List; import org.apache.ibatis.a ...

  3. Linux gtypist

    一.简介 Typist (gtypist)是一个打字练习软件,用来提升打字的速度.   二.安装 1)源码方式 http://ftp.gnu.org/gnu/gtypist/   三.使用 http: ...

  4. javascript DES加密

    研究联通wifi登陆中,发现了一个名为"encryption.js"的文件.这个文件一看即知是加密过的,首先自己尝试去手工解密,看到太烦琐了,忽然想到网上有js解密工具,遂决定用来 ...

  5. 2012年长春网络赛（hdu命题）

    为迎接9月14号hdu命题的长春网络赛 ACM弱校的弱菜,苦逼的在机房(感谢有你)呻吟几声: 1.对于本次网络赛,本校一共6名正式队员,训练靠的是完全的自主学习意识 2.对于网络赛的群殴模式,想竞争现 ...

  6. orcad找不到dll

    如果运行Capture.exe找不到cdn_sfl401as.dll,如果运行allegro.exe找不到cnlib.dll,(上面俩个库文件都在C:/Cadence/SPB_16.3/tools/b ...

  7. css3的那些高级选择器一

    css大家都不陌生了,从1996年12月css1正式推出,经历了1998年5月css2,再到2004年2月css2.1,最后一直到2010年推出的css3.css的推出给web带来巨大 的改变,使我们 ...

  8. Spring MVC Hibernate MySQL Integration（集成） CRUD Example Tutorial【摘】

    Spring MVC Hibernate MySQL Integration(集成) CRUD Example Tutorial We learned how to integrate Spring ...

  9. 关于VBS的一个怪现象

    今天一个同学让我帮忙写一个程序,要求是: 输入一个n,返回从0到n中任意个数的组合,返回取异或结果为0的组合.来看VBS代码 n = p = "" ^n - s = s = s ) ...

  10. arp欺骗进行流量截获-1

    这边博文主要讲一下怎么使用arp欺骗进行流量截获,主要用于已经攻入内网以后,进行流量监听以及修改. 一.什么是arp     arp协议是以太网的基础工作协议,其主要作用是是一种将IP地址转化成物理地 ...