以前大家都认为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. C++之Stack模板类

    假设有这样一种情况:某人将一车文件交给小王.倘若小王的抽屉是空的,那么小王从车上取出最上面的文件将其放入抽屉:倘若抽屉是满的,小王从抽屉中取出最上面的文件,放入垃圾篓:倘若抽屉即不空也未满,那么小王抛 ...

  2. ORA-12504:tns:监听程序在 CONNECT_DATA中未获得SERVICE_NAME

    在VS2008中创建一个数据源时,提示以下错误 “ORA-12504:tns:监听程序在 CONNECT_DATA中未获得SERVICE_NAME” 本机安装ORACLE客户端,找出以下路径的文件D: ...

  3. 高级查询子条件查询filter

    Filter Context 在查询过程中,只判断该文档是否满足条件,只有Yes或者No { "query":{ "bool":{ //布尔关键词 " ...

  4. 应用程序无法正常启动提示错误0xc000007b 问题的原因和解决方法

    应用程序无法正常启动提示错误0xc000007b 问题的原因和解决方法 前提条件: 你使用的是VS201x软件编写程序,你使用的电脑是X64位的,并且你在使用OpenCV库.你编写的程序可以正常编译, ...

  5. iObjects for java +weblogic

  6. sql获取上月同期

    select CONVERT(varchar(10), CONVERT(varchar(8),dateadd(month,-1,getdate()),23)+CONVERT(varchar(10),d ...

  7. 基于FormsAuthentication的用户、角色身份认证（转）

    一般情况下,在我们做访问权限管理的时候,会把用户的正确登录后的基本信息保存在Session中,以后用户每次请求页面或接口数据的时候,拿到 Session中存储的用户基本信息,查看比较他有没有登录和能否 ...

  8. webpack -- 多页面简单小例

    有时单页面并不能满足我们的业务需求,就需要去构建多页面应用,以下为简单小例: entry:{ index:'./src/module/index/index.js', student:'./src/m ...

  9. java排序算法（持续更新）

    package exception; import java.util.Arrays; public class Sort { public static void main(String[] arg ...

  10. [Xcode 实际操作]四、常用控件-(15)MKMapView加载简单视图

    目录:[Swift]Xcode实际操作 本文将演示地图视图的使用方法. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKit //首先往视图控制 ...