以前大家都认为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. [Manacher+bit]Palindrome

    https://nanti.jisuanke.com/t/15428 题目大意:离散表示的字符串,求其最长回文串长度. 解题关键:若只用Manacher算法,在统计sum时会超时,所以加一个树状数组来 ...

  2. sell02 展现层编写

    # API ###商品列表 ``` GET /sell/buyer/product/list ``` 参数 ``` 无 ``` 返回 ``` { "code": 0, " ...

  3. NPM run start使用本地的http-server

    在项目开发过程中,Visual Studio 2015 一个Solution中有一个前端项目 Myproject.FrontEnd,我们使用node.js, npm来进行管理 在这个项目中,有一个pa ...

  4. 15. Bypass 360主机卫士SQL注入防御（多姿势）

    在服务器客户端领域,曾经出现过一款 360 主机卫士,目前已停止更新和维护,官网都打不开了,但服务器中依然经常可以看到它的身影. 从半年前的测试虚拟机里面,翻出了 360 主机卫士 Apache 版的 ...

  5. jquery提供的数据提交方式2-ajax

    以前介绍过ajax提交方式.但仅仅是个例子,今天将详细介绍jquery中的$.ajax,$.get,$.post方法. 一,首先介绍$.ajax方法参数(以下参数来自:http://www.cnblo ...

  6. 又见GCD （HDU 2504）

    这个题真的很水,但我竟然连错,在此警醒自己!!! 写代码改了东边,忘了西边,“认真”这两个字又被我吃了,打脸啪啪啪啪. #include<iostream> using namespace ...

  7. 网页游戏开发秘笈 PDF扫描版

    精选10种常见的游戏类型,透过典型实例,深入剖析游戏引擎及工具的选用技巧,详细讲解每款游戏的制作过程,为快速掌握网页游戏开发提供系统而实用的指南. 网页游戏开发秘笈 目录: 译者序  前 言  导 言 ...

  8. 【IDEA下使用tomcat部署web项目】

    1.IDEA下的WEB项目新建就不说了. 2.配置tomcat:file-->settings-->Build,Execution,Deployment-->Application ...

  9. （linux）修改MySQL密码方法

    1,在/etc/my.cnf末尾  加入skip-grant-tables,保存,跳过身份验证. 2,重启MySql,使刚才修改的配置生效. 3,终端输入mysql,然后再输入use mysql; 4 ...

  10. 51nod 1354【DP】

    (我一定是A了一题假DP) 给定序列a[0],a[1],a[2],...,a[n-1] 和一个整数K时, 有多少子序列所有元素乘起来恰好等于K. K<=1e8; 思路: 感觉 k 的 约数是突破 ...