Html5基础知识之WebWorker基本应用

先上效果图。

简单的小功能

Html5 新增了 WebWorker ，可以把用时长的任务放在后台线程运行，而不影响前台的操作。 想必小伙伴们都不想因为网页加载而一个网页内的按钮都点不了吧。 在 Html4 和 JavaScript 创建的网页程序中，处理是单线程的。很容易出现超时无响应的情况。 如以下代码。

Web前端学习笔记

如果你是用纯的文本编辑器，没有任何代码提示和补全，而且用的是手机，那么应该小心翼翼的检查自己有没有输错代码。说多了都是泪，在手机上眼睛一花，都不容易知道错在哪里 上面代码运行后，100亿的数字相加。卡顿效果明显，而且不能点击网页。

心算大佬考虑参战吗

在计算过程中，两个文本框都不能点击，处于卡屏状态。 那么接下来使用worker类。 var worker = new Worker(URL); //URL表示在后台线程执行脚本的地址 worker.postMessage(message); //向后台线程发送消息 worker.onmessage = function(e){alert(e.data);}; //从后台返回数据 worker.terminate(); //终止WebWorker对象

改成这样

然后加上worker.js就可以了。

worker.js

这样网页一些耗时的操作就可以尽量少的影响用户体验… 适用范围 ①预先抓取数据缓存本地。 ②后台I/O处理。 ③大数据分析或计算处理。 ④Canvas绘图中的图形数据运算及生成处理。 ⑤本地数据库中的数据存放及计算处理。