当在 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. jQuery Validate 验证成功时的提示信息

    大多数时候我们使用validate进行前台验证的时候,都是验证错误的时候给出提示信息,最近在做一个项目的时候,想这验证成功后给出一个验证成功的提示.于是在网上找了一些资料. <!doctype ...

  2. AOP 代理类的创建

    AOP 代理类的创建 入口:AnnotationAwareAspectJAutoProxyCreator#postProcessAfterInitialization 和 AnnotationAwar ...

  3. 浏览器端-W3School-HTML：HTML DOM Style 对象

    ylbtech-浏览器端-W3School-HTML:HTML DOM Style 对象 1.返回顶部 1. HTML DOM Style 对象 Style 对象 Style 对象代表一个单独的样式声 ...

  4. 浏览器端-W3School-HTML：HTML DOM Audio 对象

    ylbtech-浏览器端-W3School-HTML:HTML DOM Audio 对象 1.返回顶部 1. HTML DOM Audio 对象 Audio 对象 Audio 对象是 HTML5 中的 ...

  5. 浏览器端-W3School-JavaScript：JavaScript String 对象

    ylbtech-浏览器端-W3School-JavaScript:JavaScript String 对象 1.返回顶部 1. JavaScript String 对象 String 对象 Strin ...

  6. python - yeild

    带有yield的函数不仅仅只用于for循环中,而且可用于某个函数的参数,只要这个函数的参数允许迭代参数.比如array.extend函数,它的原型是array.extend(iterable). 带有 ...

  7. json -- fastjson如何序列化@Transient的字段

    今天把fastjson包改成了1.2.58,发现@Transient标注的字段序列化后不见了,但是项目需要把@Transient字段序列化,处理方法: 原文:https://github.com/al ...

  8. iOS 图表工具charts之CombinedChartView

    关于charts的系列视图介绍传送门: iOS 图表工具charts介绍 iOS 图表工具charts之LineChartView iOS 图表工具charts之BarChartView iOS 图表 ...

  9. Linux监控命令之==>lsof

    一.命令说明 lsof 命令的原始功能是列出打开的文件的进程,但LINUX 下,所有的设备都是以文件的行式存在的,所以,lsof 的功能很强大. 二.参数说明 -a :列出打开文件存在的进程 -c&l ...

  10. frei0r-20190715-118a589 编译 frei0r 时注意事项

    如果滤镜是 CPP 编写,需要选择 gcc Thread model: win32 模式,如果选择 posix 模式时,提示错误: 无法找到 dll 文件: frei0r-1.6.1-dlls-201 ...