当在 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. 了解一下urlencode()函数

    urlencode()函数 在PHP官方网站中的解释如下: 编码 URL 字符串——就是对特殊字符进行编码转移(.  _  -  除外): string urlencode ( string $str ...

  2. leetcode-easy-others-190. Reverse Bits-NO

    mycode 不会... 参考: 1. 思路: 将十进制的n转换成二进制(str) -> 利用切片.反向获取不包含0b的反转后的二进制字符串 -> 补上0(共32位) 2. class S ...

  3. html 绘图

    <html> <head> <title>canvas绘制图形</title> <style> body{ margin: 0px; pad ...

  4. HTML5 WebRTC API无需网络获取本地IP

    因需求需要获取客户端的本机IP,国内资料基本上都是通过向一个IP网站发送请求并获取IP,这样有一定几率泄露自己的IP,在内网环境下也并不适用. 后来在stackoverflow上找到一种解决办法,用W ...

  5. 创建策略(Creation Policy )和生命周期(Life Cycle)

    前言 在前面的介绍中我们已经知道:导入和导出的匹配成功需要ContractType,ContractName,Metadata都匹配,这里我们还要介绍一个新的东西:创建策略(creation poli ...

  6. Horizon Web管理界面

    一.horizon 介绍: Horizon 为 Openstack 提供一个 WEB 前端的管理界面 (UI 服务 )通过 Horizone 所提供的 DashBoard 服务 , 管理员可以使用通过 ...

  7. Selenium+java自动化测试常用知识点

    一.元素的定位 1.通过ID定位元素: findElement(By.id(element)); 2.通过元素的名称定位元素: findElement(By.name(element)); 3.通过元 ...

  8. Python学习之并发基础知识

    8 并发编程 8.1 基础知识 8.1.1 操作系统的定义 操作系统是存在于硬件与软件之间,管理.协调.调度软件与硬件的交互. 资源管理解决物理资源数量不足和合理分配资源这两个问题, 通俗来说,操作系 ...

  9. 意想不到的JavaScript（每日一题2）

    问题一: 答案: 解析:

  10. 关于java中设计原则总结（7）

    开闭原则: 对于类,模块函数等扩展要开放,对于修改要关闭. 依赖倒置: 接口或抽象是高层,要面向高层编程,不应该面向实现类(实现类是低层)去变成. 单一职责: 对一个类,或者一个功能,只用负责一个职责 ...