美文网首页
web Workers

web Workers

作者: 刘宏儿 | 来源:发表于2019-01-11 19:13 被阅读0次

菜鸟文档 web worker 是运行在后台的 JavaScript,不会影响页面的性能。

JavaScript 是单线程,一个时期只能做一件事情,做完一件再做一件,就好比一个人做饭,不能边摘菜边洗米,必须做完一件再做一件。也就是有排队的概念。

什么是异步请求?

异步请求就是先发请求,然后该干嘛干嘛,等到发的请求有结果了,再执行对应的操作,就好比做饭,先把米放到电饭锅,在等米饭熟的过程中,你可以炒菜,等米饭熟了,再盛出来吃。

所以实际开发中,多线程和异步请求是能提高网页性能的。

实际上计时器setInterval和SetTimeout都是异步请求,他们都会排到队列的后面,就算时间是0,只要出现就是要排到队列的后面。

所以会有面试问代码输出的顺序,在计时器里的一定是最后输出的,就算时间是0,就算写在最前面,都没啥用。

所以总结下来

Web Workers 就是多线程执行javascript

任务分配下来,它会分配给其他人去做,等到有结果了,接收
比如寒假作业布置下来, 你直接分配给其他人去做,一个人做语文,一个人做数学,等他们做完了,你把作业收回来就行了,这样你就很轻松了。

步骤:1.分配任务,让谁执行

var w=new Worker("xiaoming.js");//new一下,分配给小明做

2.接收结果 onmessage

w.onmessage=function(e){
        console.log(e.data);//e.data就是结果
        if(e.data.flag){
            w.terminate();//结束进程
        }
    }

结束进程要慎重,因为有时候不是一次响应就可以,要等到执行完才停止,所以要加判断条件
3.被分配做任务的那个人要发信息 postMessage,这样才可以接收到啊
xiaoming.js如下

var total=0;
for(var i=1;i<100;i++){

    postMessage({
        val:i,
        flag:i==99?true:false//意思是当i是99的时候,为true,结束进程
    });
    total+=i;
}

e.data拿到的就是postMessage括号里面的值。

相关文章

  • 初探 HTML5 Web Workers

    原文:初探 HTML5 Web Workers 一、Web Workers是什么 Web Worker为Web内容...

  • JavaScript是如何工作的:Web Workers的构建块

    摘要: 理解Web Workers。 原文:JavaScript是如何工作的:Web Workers的构建块 + ...

  • Web Workers

    12月20号发布的Safri浏览器内核webkit表示自己开始支持service workers,这就意味的主流浏...

  • Web Workers

    当浏览器切换到后台运行,操作系统会把浏览器挂起,挂起之后,比如定时器,在回到原来页面的时候,会出现获取秒有重复的问...

  • Web Workers

    什么是Web Worker? 我们都知道HTML页面在执行script的时候是unresponsive的,直到sc...

  • Web Workers

    1.JS单线程 说起Web Workers,首先必须了解因为JS运行在浏览器中,是单线程的,每个window一个J...

  • Web Workers

    web worker JavaScript是单线程的,遇到计算密集型或高延迟的任务时,会影响整个页面的运行。Web...

  • Web Workers

    Web Workers 分类及 5 个使用场景 how-javascript-works 作者:Troland链接...

  • web Workers

    菜鸟文档 web worker 是运行在后台的 JavaScript,不会影响页面的性能。 JavaScript...

  • Web Workers

    随着 web 应用的复杂性的与时俱增,越来越复杂的计算在所难免。长时间运行的JavaScript进程会导致浏览器冻...

网友评论

      本文标题:web Workers

      本文链接:https://www.haomeiwen.com/subject/vuexdqtx.html