以前大家都认为js是单线程执行的，假如我们要执行一些耗时的操作，比如加载一张很大的图片，我们可能需要一个进度条来让用户进行等待，在等待的过程中，整个js线程会被阻塞，后面的代码不能正常运行，这可能大大的降低用户体验，这时候我们就期望拥有一个工作线程来处理这些耗时的操作。在传统的html时代是基本不可能实现的，而现在，我们拥有一种叫做worker的东西。它是js里的一个类，而我们只需要创建它的实例就可以使用它。

 var worker = new Worker(js file path);

构造函数的参数填上你的js文件的路径，这个js文件将会在浏览器新开的线程里运行，而与原先的js引擎的线程并不影响。

下面看个例子

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8" />

         <title></title>

     </head>

     <body>

         <input type="text" name="ipt" id="ipt" value="" />

         <button id="start">start</button>

         <button id="stop">stop</button>

         <button id="ale">alert</button>

         <script type="text/javascript">

             var ipt = document.getElementById("ipt");

             var stop = document.getElementById("stop");

             var start = document.getElementById("start");

             var ale = document.getElementById("ale");

             var worker = new Worker("js/test22.js");

             worker.onmessage = function(){

                 ipt.value = event.data;

             };

             stop.addEventListener("click",function(){

                 //用于关闭worker线程

                 worker.terminate();

             });

             start.addEventListener("click",function(){

                 //开起worker线程

                 worker = new Worker("js/test22.js");

             });

             ale.addEventListener("click",function(){

                 alert("i'm a dialog");

             });

         </script>

     </body>

 </html>

下面是test22.js里的代码，也就是存在于worker线程里的代码

 var i = 0;

 function mainFunc(){

     i++;

     //把i发送到浏览器的js引擎线程里

     postMessage(i);

 }

 var id = setInterval(mainFunc,1000);

运行起来我们会发现

点击确定后，它的数值并非2，而是一个比2更大的数

虽然dialog的弹出会阻塞js引擎线程，但是并不影响worker线程的运行，所以，在我们点击确定后，只是在js引擎线程上更新了新的内容，而数值是一直在跑动的，这就说明worker线程和原本的js线程互不影响.

那么既然互不影响，两个线程之间要怎么来联系呢，答案其实已经在代码里了，那就是onPostMessage 和 onmessage这两个函数，其中onPostMessage（data）的参数是你要传递的数据，而onmessage是一个回调函数，只有在接受到数据时，onmessage会被回调，onmessage有一个隐藏的参数，那就是event，我们可以用event.data获取到传递过来的数据来更新主线程。

使用worker线程应注意的是，所有js里集成的对象都在js线程里，而并非worker线程。
例如我们在worker线程里写上：

 var a = document.getElementById("a");

结果你会得到一条Error，告诉你找不到document,或者document is undefined。所以我们尽量把需要的东西都写到主线程里，而只把耗时的操作写到worker线程里。

javascript实现多线程提升项目加载速度的更多相关文章

  1. 【Android优化篇】提升Activity加载速度的方法

    文章转自:http://www.jianshu.com/p/2007ca0290d3 作者: CoderFan 前言 这个也是我面试遇到的问题,当时只回答了一种情况,异步加载数据,没想到别的方式,回来 ...

  2. Nginx开启Gzip压缩提升页面加载速度

    1.在 nginx 的conf 目录下新建 gzip.conf 文件 #开启gzip压缩 gzip on; #设置允许压缩的页面最小字节数 gzip_min_length 1k; #申请4个单位为16 ...

  3. 优化JavaScripe 提升首页加载速度的几种方案解析

    优化目的: 1. 减少load量. 2. 优化js,加快页面加载速度. 网站中最影响网站打开速度的是什么?我会告诉是网站中的javascript,简称JS.模板中引用的JS文件越多,打开速度越慢,细读 ...

  4. 用 Flask 来写个轻博客 (28) — 使用 Flask-Assets 压缩 CSS/JS 提升网页加载速度

    Blog 项目源码:https://github.com/JmilkFan/JmilkFan-s-Blog 目录 目录 前文列表 扩展阅读 Flask-Assets 将 Flask-Assets 应用 ...

  5. Blazor 发布WebAssembly使用Brotli 压缩提升初次加载速度

    使用Brotli提高网站访问速度 在优化网站打开速度上,我们有很多的方法,而其中一个就是减少诸如Javascript和CSS等资源文件的大小,而减少文件大小的方法除了在代码上下功夫外,最常用的方法就是 ...

  6. js延迟加载，提升网页加载速度

    JS延迟加载,简单例子,不多说: 代码如下: 程序代码 <script language="JavaScript" src="" id="my& ...

  7. Web前端性能优化总结——如何提高网页加载速度

    一.提高网页加载速度的必要性 国际知名的一组来自Jupiter Research的数据显示:购物者在访问网站过程中的不满会导致销售损失和品牌受损,其中 77%的人将不再访问网站 ,62%的人不再从该网 ...

  8. web前端性能优化，提升静态文件的加载速度

    原文地址:传送门 WeTest 导读 此文总结了笔者在Web静态资源方面的一些优化经验. 如何优化 用户在访问网页时, 最直观的感受就是页面内容出来的速度,我们要做的优化工作, 也主要是为了这个目标. ...

  9. 转： web 页面加载速度优化实战-100% 的飞跃提升

    前言 一个网站的加载速度有多重要? 反正我相信之前来 博主网站 的人至少有 50% 在加载完成前关闭了本站. 为啥捏? 看图 首页完整加载时间 8.18s,看来能进来看博主网站的人都是真爱呀,哈哈. ...

随机推荐

  1. [poj1459]Power Network(多源多汇最大流)

    题目大意:一个网络,一共$n$个节点,$m$条边,$np$个发电站,$nc$个用户,$n-np-nc$个调度器,每条边有一个容量,每个发电站有一个最大负载,每一个用户也有一个最大接受量.问最多能供给多 ...

  2. Learning Python 008 正则表达式-002 findall()方法

    Python 正则表达式 - findall()方法 重点 findall()方法的使用 - 程序讲解 简单的符号的使用 正则表达式的库文件是re,先导入库文件: import re .的使用举例 # ...

  3. 转：Linux下用Jmeter做接口测试

    本地设计 首先在本地设计 Apache JMeter 测试计划,大家可以参考<接口测试之 JMeter 初探> ,这里不再重复. 服务器配置 确保服务器已经安装了JDK和Python. 在 ...

  4. supervisor启动worker源码分析-worker.clj

    supervisor通过调用sync-processes函数来启动worker,关于sync-processes函数的详细分析请参见"storm启动supervisor源码分析-superv ...

  5. Netty 线程模型与Reactor 模式

    前言 Netty 的线程模型是基于NIO的Selector 构建的,使用了异步驱动的Reactor 模式来构建的线程模型,可以很好的支持成百上千的 SocketChannel 连接.由于 READ/W ...

  6. day13列表推导式作业详解

    1.day13题目 2,用列表推导式做下列小题 (1)过滤掉长度小于3的字符串列表,并将剩下的转换成大写字母 (2)求(x,y)其中x是0-5之间的偶数,y是0-5之间的奇数组成的元祖列表 (3)求M ...

  7. idea dao使用@Mapper注解 业务类使用@Autowired 注入dao 爆红问题

    实际项目跑起来无影响,但是看起来不太爽. 可以在dao类添加org.springframework.stereotype.Repository 注解 或者可以在service类中使用 javax.an ...

  8. input[checkbox],input[radiobox]的一些问题

    复选框和文字对不齐:checkbox复选框的一些深入研究与理解: 解决方案:复选框或单选框与文字对齐的问题的深入研究与一 实例:实例.

  9. vue中比较完美请求的栗子（使用 axios 访问 API）

    vue中比较完美请求的栗子(使用 axios 访问 API) 官网地址:https://vuejs.bootcss.com/v2/cookbook/using-axios-to-consume-api ...

  10. saltstack执行结果存储到MySQL

    saltstack执行结果保存到MySQL中,以便进行命令安全审计必须是python2.7以上的环境安装相关模块ubuntu系统安装 apt-get install -y python-mysqldb ...