js 性能优化 - web worker
当在 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的更多相关文章
- js性能优化-事件委托
js性能优化-事件委托 考虑一个列表,在li的数量非常少的时候,为每一个li添加事件侦听当然不会存在太多性能方面的问题,但是当列表非常的长,长到上百上千甚至上万的时候(当然只是一个解释,实际工作中很少 ...
- js 性能优化利器：prepack
1. js 性能优化 js 本身是没有像 python 一样的预编译功能,更没有像 java 一样的编译功能,所以,这里所说的 js 代码预编译 只是通过工具实现的类似功能而已. 这就要提到 prep ...
- js 性能优化 篇一
JS性能优化 摘自:http://www.china125.com/design/js/3631.htm 首先,由于JS是一种解释型语言,执行速度要比编译型语言慢得多.(注:,Chrome是第一款内 ...
- js性能优化文章集锦
总结的js性能优化方面的小知识http://www.it165.net/pro/html/201503/35336.html 如何优化你的JS代码http://www.php100.com/html/ ...
- Web篇之JS性能优化
首先,性能优化分好几个方面,本章我们从js方面来优化. 1:垃圾收集 日常中的某些情况下垃圾收集器无法回收无用变量,导致的一个结果就是——内存使用率不断增高,以下为对应的情况以及处理方法. ①对象相互 ...
- JS性能优化笔记搜索整理
通过网上查找资料了解关于性能优化方面的内容,现简单整理,仅供大家在优化的过程中参考使用,如有什么问题请及时提出,再做出相应的补充修改. 一. 让代码简洁:一些简略的表达方式也会产生很好的优化 eg:x ...
- 性能优化——Web前端性能优化
核心知识点: 1.排查网站性能瓶颈的手法:分析各个环节的日志,找出异常部分 2.Web前端:网站业务逻辑之前的部分(浏览器.图片服务.CDN) 3.优化手段 1)浏览器优化 (1)减少http请求 a ...
- js性能优化--学习笔记
<高性能网站建设进阶指南>: 1.使用局部变量,避免深入作用域查找,局部变量是读写速度最快的:把函数中使用次数超过一次的对象属性和数组存储为局部变量是一个好方法:比如for循环中的.len ...
- JS线程模型&Web Worker
js线程模型 客户端javascript是单线程,浏览器无法同时运行两个事件处理程序 设计为单线程的理论是,客户端的javascript函数必须不能运行太长时间,否则会导致web浏览器无法对用户输入做 ...
随机推荐
- [翻译]C#中异步方法的性能特点
翻译自一篇博文,原文:The performance characteristics of async methods in C# 异步系列 剖析C#中的异步方法 扩展C#中的异步方法 C#中异步方法 ...
- vue项目使用cropperjs制作图片剪裁，压缩组件
项目中裁剪图片效果 代码部分:(将上传部分 封装成一个组件直接调用当前组件) <template> <div id="demo"> <!-- 遮罩层 ...
- 利用 IntelliJ IDEA 进行代码对比的方法
Sometimes,我们会有这样的需求,即:想对比出两个不同版本代码的区别.如何实现? 第 1 种:如果我们是从 SVN 检出的项目,并且想比较本地代码与从 SVN 检出时的代码相比都有那些区别,可以 ...
- LeetCode 152. 乘积最大子序列（Maximum Product Subarray）
题目描述 给定一个整数数组 nums ,找出一个序列中乘积最大的连续子序列(该序列至少包含一个数). 示例 1: 输入: [2,3,-2,4] 输出: 6 解释: 子数组 [2,3] 有最大乘积 6. ...
- LeetCode 55. 跳跃游戏（Jump Game）
题目描述 给定一个非负整数数组,你最初位于数组的第一个位置. 数组中的每个元素代表你在该位置可以跳跃的最大长度. 判断你是否能够到达最后一个位置. 示例 1: 输入: [2,3,1,1,4] 输出: ...
- js函数收集
常见js函数收集: 转自:http://www.qdfuns.com/notes/36030/2eb2d45cccd4e62020b0a6f0586390af.html //运动框架 function ...
- 全面解读php-流程控制
一.PHP遍历数组的三种方式 示例: $arr = [1, 2, 3 4, 'five' => 5]; 1.for () for循环只能用于遍历纯索引数组!如果存在关联数组,count统计时会 ...
- java的replace和replaceAll
都是全部替换,只不过后者参数为正则 replaceFirst()是替换第一个
- 浏览器端-W3School-JavaScript：JavaScript RegExp 对象
ylbtech-浏览器端-W3School-JavaScript:JavaScript RegExp 对象 1.返回顶部 1. JavaScript RegExp 对象 RegExp 对象 RegEx ...
- Java学习之==>异常体系
一.定义 程序运行时总是会遇到各种各样的问题,Java中的异常体系就是针对这些问题提出的统一的处理方案.在Java中,将这些各种各样的问题进行归类后,统一称为异常. 二.分类 我们先来看看下面这个图: ...