以前大家都认为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. 关于Android进程的启动和消亡

    在打开一个应用程序的时候,packagemanager会根据manifest文件去查找有没有相应的进程已启动,若果没有启动,那么就启动一个新的进程 进程退出有两种方式,用finish结束主activi ...

  2. AES算法的c++实现

    该模板无填充操作. 1.AES.h #include<cstdio> #include<cstring> #include<algorithm> #include& ...

  3. [tyvj1860]后缀数组

    题目链接:http://www.tyvj.cn/p/1860 解题关键:模板题.贴一个代码详解 http://www.cnblogs.com/staginner/archive/2012/02/02/ ...

  4. crontab简易入门

    前言 crontab是Unix和Linux用于设置周期性被执行的指令,是互联网很常用的技术,很多任务都会设置在crontab循环执行,如果不使用crontab,那么任务就是常驻程序,这对你的程序要求比 ...

  5. p2661 信息传递（Tarjan模板）

    传送门 题目 有 nnn 个同学(编号为 111 到 nnn )正在玩一个信息传递的游戏.在游戏里每人都有一个固定的信息传递对象,其中,编号为 iii 的同学的信息传递对象是编号为 TiT_iTi​ ...

  6. c#中Marshal.Copy()方法的使用

    c#中Marshal.Copy方法的使用 Marshal.copy()方法用来在托管对象(数组)和非托管对象(IntPtr)之间进行内容的复制 函数有很多重载,如下所示: Copy(array< ...

  7. BZOJ 3211【线段树】

    题意: n个数,m个操作. 1,L,R  询问[L , R] 的总和. 2,L,R  将区间所有数都开根号. 思路: 区间和简单. 主要就是一个 区间所有元素相同的标记Same ,但是这样是不是要求太 ...

  8. validate验证注册表单

    点击预览; <%@ page language="java" contentType="text/html; charset=UTF-8" pageEnc ...

  9. bzoj 3123: [Sdoi2013]森林（45分暴力）

    3123: [Sdoi2013]森林 Time Limit: 20 Sec  Memory Limit: 512 MBSubmit: 4184  Solved: 1235[Submit][Status ...

  10. Cogs 1995. Yukari

    1995. Yukari ★★☆   输入文件:camera.in   输出文件:camera.out   简单对比时间限制:1 s   内存限制:128 MB 题目背景: 幻想乡的创始人之一,八云紫 ...