当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。

web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。

您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。

细节：

所有主流浏览器均支持 web worker，除了 Internet Explorer。 （包括 edge ）

由于 web worker 位于外部文件中，它们无法访问下例 JavaScript 对象：

  • window 对象
  • document 对象
  • parent 对象

过程：

w=new Worker("demo_workers.js");      -     postMessage()  （event.data）      -      w.terminate();
<!DOCTYPE html>

<html>

<body>

<p>Count numbers: <output id="result"></output></p>

<button onclick="startWorker()">Start Worker</button>

<button onclick="stopWorker()">Stop Worker</button>

<br /><br />

<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="Sorry, your browser

 does not support Web Workers...";

}

}

function stopWorker()

{

w.terminate();

}

</script>

</body>

</html>

js 性能优化 - web worker的更多相关文章

  1. js性能优化-事件委托

    js性能优化-事件委托 考虑一个列表,在li的数量非常少的时候,为每一个li添加事件侦听当然不会存在太多性能方面的问题,但是当列表非常的长,长到上百上千甚至上万的时候(当然只是一个解释,实际工作中很少 ...

  2. js 性能优化利器：prepack

    1. js 性能优化 js 本身是没有像 python 一样的预编译功能,更没有像 java 一样的编译功能,所以,这里所说的 js 代码预编译 只是通过工具实现的类似功能而已. 这就要提到 prep ...

  3. js 性能优化 篇一

    JS性能优化 摘自:http://www.china125.com/design/js/3631.htm  首先,由于JS是一种解释型语言,执行速度要比编译型语言慢得多.(注:,Chrome是第一款内 ...

  4. js性能优化文章集锦

    总结的js性能优化方面的小知识http://www.it165.net/pro/html/201503/35336.html 如何优化你的JS代码http://www.php100.com/html/ ...

  5. Web篇之JS性能优化

    首先,性能优化分好几个方面,本章我们从js方面来优化. 1:垃圾收集 日常中的某些情况下垃圾收集器无法回收无用变量,导致的一个结果就是——内存使用率不断增高,以下为对应的情况以及处理方法. ①对象相互 ...

  6. JS性能优化笔记搜索整理

    通过网上查找资料了解关于性能优化方面的内容,现简单整理,仅供大家在优化的过程中参考使用,如有什么问题请及时提出,再做出相应的补充修改. 一. 让代码简洁:一些简略的表达方式也会产生很好的优化 eg:x ...

  7. 性能优化——Web前端性能优化

    核心知识点: 1.排查网站性能瓶颈的手法:分析各个环节的日志,找出异常部分 2.Web前端:网站业务逻辑之前的部分(浏览器.图片服务.CDN) 3.优化手段 1)浏览器优化 (1)减少http请求 a ...

  8. js性能优化--学习笔记

    <高性能网站建设进阶指南>: 1.使用局部变量,避免深入作用域查找,局部变量是读写速度最快的:把函数中使用次数超过一次的对象属性和数组存储为局部变量是一个好方法:比如for循环中的.len ...

  9. JS线程模型&Web Worker

    js线程模型 客户端javascript是单线程,浏览器无法同时运行两个事件处理程序 设计为单线程的理论是,客户端的javascript函数必须不能运行太长时间,否则会导致web浏览器无法对用户输入做 ...

随机推荐

  1. JS利用XMLHttpRequest拦截ajax请求

    function XMLHttpRequestBreak(fun=()=>false){ let f = XMLHttpRequest.prototype.open; let add = fun ...

  2. 20175215 2018-2019-2 第五周java课程学习总结

    第六章学习内容 1.接口 使用interface来定义一个接口. 接口体中包含常量的声明(没有变量)和抽象方法两部分.接口体中只有抽象方法,没有普通的方法,而且接口体中所有的常量的访问权限一定都是pu ...

  3. SAP MaxDB日常运维—启动、关闭、磁盘扩容

    SAP MaxDB日常维护1.检查MaxDB状态,并启动su - pe0csccd /sapdb/SDB/db/bin./dbmcli -d SDB -u superdba,Mypassword db ...

  4. Uep的保存操作

    wzStoreInfoDefineService.update(neWzStoreInfo,updateList,insertList,deleteListpublic void update(WzS ...

  5. Web01_HTML

    语法和规范: 1.所有的HTML文件后缀名都是以.html或者.htm结尾的,建议使用.html结尾 2.整个html文件分别由头部分<head></head>和体部分< ...

  6. 源码安装zabbix4.0.1

    本篇是纯粹安装zabbix4.0.1, 前提需要安装lnmp请安装 https://www.cnblogs.com/effortsing/p/9982028.html 环境准备: 一台虚拟机 192. ...

  7. PHP LDA off 解决

    搭建完zabbix初始登录zabbix显示 PHP LDAP off 解决 不需要重新编译php 就可以增加 LDAP 模块 .首先进入自己的 PHP 安装目录中找到 ldap 文件夹 [root@b ...

  8. python3下import MySQLdb出错问题

    原因:python2下是使用的MySQLdb,python3下用的是pymysql 安装 pip install pymysql

  9. JS获取表单元素的value

    <!-- 1.option selected属性,如果我们在下拉列表里面选择了一个option那么他的selected="true" ,如果我们想设置当前的option是选中 ...

  10. Centos7 修改系统时间和硬件时间不一致的问题

    查看系统时间 [root@localhost ~]# dateSat Feb 24 14:41:22 CST 2018 查看硬件时间 [root@localhost ~]# hwclock --sho ...