javascript实现多线程提升项目加载速度
以前大家都认为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实现多线程提升项目加载速度的更多相关文章
- 【Android优化篇】提升Activity加载速度的方法
文章转自:http://www.jianshu.com/p/2007ca0290d3 作者: CoderFan 前言 这个也是我面试遇到的问题,当时只回答了一种情况,异步加载数据,没想到别的方式,回来 ...
- Nginx开启Gzip压缩提升页面加载速度
1.在 nginx 的conf 目录下新建 gzip.conf 文件 #开启gzip压缩 gzip on; #设置允许压缩的页面最小字节数 gzip_min_length 1k; #申请4个单位为16 ...
- 优化JavaScripe 提升首页加载速度的几种方案解析
优化目的: 1. 减少load量. 2. 优化js,加快页面加载速度. 网站中最影响网站打开速度的是什么?我会告诉是网站中的javascript,简称JS.模板中引用的JS文件越多,打开速度越慢,细读 ...
- 用 Flask 来写个轻博客 (28) — 使用 Flask-Assets 压缩 CSS/JS 提升网页加载速度
Blog 项目源码:https://github.com/JmilkFan/JmilkFan-s-Blog 目录 目录 前文列表 扩展阅读 Flask-Assets 将 Flask-Assets 应用 ...
- Blazor 发布WebAssembly使用Brotli 压缩提升初次加载速度
使用Brotli提高网站访问速度 在优化网站打开速度上,我们有很多的方法,而其中一个就是减少诸如Javascript和CSS等资源文件的大小,而减少文件大小的方法除了在代码上下功夫外,最常用的方法就是 ...
- js延迟加载，提升网页加载速度
JS延迟加载,简单例子,不多说: 代码如下: 程序代码 <script language="JavaScript" src="" id="my& ...
- Web前端性能优化总结——如何提高网页加载速度
一.提高网页加载速度的必要性 国际知名的一组来自Jupiter Research的数据显示:购物者在访问网站过程中的不满会导致销售损失和品牌受损,其中 77%的人将不再访问网站 ,62%的人不再从该网 ...
- web前端性能优化，提升静态文件的加载速度
原文地址:传送门 WeTest 导读 此文总结了笔者在Web静态资源方面的一些优化经验. 如何优化 用户在访问网页时, 最直观的感受就是页面内容出来的速度,我们要做的优化工作, 也主要是为了这个目标. ...
- 转： web 页面加载速度优化实战-100% 的飞跃提升
前言 一个网站的加载速度有多重要? 反正我相信之前来 博主网站 的人至少有 50% 在加载完成前关闭了本站. 为啥捏? 看图 首页完整加载时间 8.18s,看来能进来看博主网站的人都是真爱呀,哈哈. ...
随机推荐
- NASA的CTO——开源软件使我们诚实
Chris C.Kemp,谷歌设置新职位CTO让他领导 原文: NASA's CTO: Open source software keeps us honest 作者: Shawn Freeman 译 ...
- 关于Android项目中，突然就R类找不到已存在的资源文件的解决方法
项目代码早上打开正常,下午开的时候突然提示R类找不到已存在的布局文件,于是试了各种方法,CLEAN啊,重启啊,均无效,然后去网上搜了下,遇到这个问题的人还不少. 看到其中有这么一条解决方法,删除导入的 ...
- [Windows]获取系统版本号
1 string GetMainProgInfo() 2 { 3 string strRet; 4 TCHAR szPath[MAX_PATH]; 5 GetModuleFileName(NULL,s ...
- Maven核心知识
什么是Maven? Maven是基于项目对象模型(POM), 可以通过一小段描述信息来管理项目的构建和文档的软件项目管理工具 目录结构如下 src main java package test jav ...
- MySQL的CURRENT_DATE()，NOW()，DATE_FORMAT()函数的应用，类型转换及操作汇总
内容简介 datetime类型和timestamp类型的取值范围,CURRENT_DATE()函数应用,NOW()函数应用,DATE_FROMAT()函数取星期,日期.字符串.时间戳相互转换等. 时间 ...
- 数据绑定—Source（绑定到静态类的静态属性）
<UserControl x:Class="绑定.绑定Source" xmlns="http://schemas.microsoft.com/winfx/2006/ ...
- Git Reference
Installing and upgrading Git https://confluence.atlassian.com/bitbucketserver056/installing-and-upgr ...
- Django反向解析与分组命名
1.图书管理系统中使用分组或命名分组.URL的命名和反向解析: 2.删除功能三合一: urls.py文件 from app_book import views urlpatterns = [ url( ...
- tomcat mamcached session共享方法
下载后输入命令安装命令: c:\memcached\memcached.exe -d install 然后再输入如下命令把其作为win service常驻启动: c:\memcached\memcac ...
- 从sql中获取表名
<dependency> <groupId>com.github.jsqlparser</groupId> <artifactId>jsqlparser ...