前端进阶（十八）js多线程

忘是亡心i 2022-01-07 05:57 526阅读 0赞

HTML5引入Web Works，让js支持多线程。

一、多线程demo

1、先写一个add函数

function(a, b){
        if(a && b){
            return a + b;
        }
        return 0;
    }

把这个函数写到works,js中

2、使用web works的钩子函数onmessage和postMessage，在钩子onmessage中监听接收主线程的数据，在钩子postMessage中发送数据。

console.log('work.js is start!');
    onmessage = function(event){
        var num = event.data;
        postMessage(num.a, num.b);
    }

3、主线程先启动一个works子线程，把数据发给它，同时监听onmessage，取到子线程传递给他的结果。

console.log('main.js is start!');
    var worker = new Worker("work.js");
    worker.onmessage = function(event){
        console.log(`receive result: ${event.data}`);
    }
    
    var a = 1, b = 2;
    worker.postMessage({
        a,
        b
    });

注意：（1）js的多线程是OS级别的。（2）Web Workers是不能操作DOM的，线程同步主要靠锁实现。

二、多线程-锁

1、互斥锁-Mutext

var mutext = new Mutext();
    function changeWidth(width){
        mutext.lock();
        $('#my-div').style.width = width + 'px';
        mutext.unlock();
    }
    
    //worker1
    changeWidth(300);
    
    //worker2
    changeWidth(400);

互斥锁太多会导致性能下降，因为线程需要查询那个锁能不能用，要占用cpu的。

2、读写锁-ReadWriteRock

var lock = new ReadWriteLock();
    function changeWidth(width){
        lock.lockForWrite();
        $('#my-div').style.width = width + 'px';
        lock.unlock();
    }
    
    function getWidth(){
        //允许多个线程同时读，但是不允许任何线程写
        lock.lockForRead();
        var width = $('#my-div').style.width;
        lock.unlock();
        return width;  
    }

当有一个线程在读，其他都可以读，但其他所有线程都不能写；当有一个线程在写，其他所有线程都不能读写。

3、条件变量

条件变量是为了解决生产者和消费者问题，由于用互斥锁和读写锁都会导致线程一直在那里堵塞并占用cpu，而使用信号通知的方式可以让堵塞的线程进入睡眠模式，等生产者生产出东西后再通知消费者，然后唤醒线程进行消费。

三、同步

js没有线程同步的的概念。js的多线程无法操作DOM，没有window对象，每个线程都是独立的。主线程传给子线程的数据时拷贝复制，铜线子线程传给主线程的数据也是拷贝复制，而不是共享同一片内存存储区域。

1、js是单线程模式，chrome是多线程的

2、node.js的单线程模式

node的异步是借助于数据库和io的多线程。

优点是不需要启动新的线程，不需要开辟新线程的空间，不需要进行线程的上下文切换。所以当服务类型不是计算类型的，使用node.js会更快。缺点是不能够提供很耗cpu的服务，如图形算法、复杂的计算等。

注：也可以通过H5的新的数据类型Blob将webworks写成内联形式。