使用Web Worker提升JavaScript性能实践-CSDN博客

本文链接：https://blog.csdn.net/qq_43342124/article/details/122926650

web worker测试，可以参考一下：
https://www.ruanyifeng.com/blog/2018/07/web-worker.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>计数: <output id="result"></output></p>
    <input value="" type="search" />
    <!-- <button onclick="startWorker()">开始 Worker</button>  -->
    <button onclick="stopWorker()">停止 Worker</button>
    <br /><br />

</body>
<script>
    function creatWorker(url){
        if(typeof(Worker)!=="undefined"){
            this.worker=new Worker(url);
            if(typeof(this.worker)=="undefined"){
                throw new Error('创建失败,请检查url是否能获取')
            }
        }else{
            throw new Error('Sorry, your browser does not support Web Workers...')
        }
        
    }
    try {
        const w=new creatWorker('./index.js')
        const worker=w.worker
        const input= document.getElementsByTagName('input')[0]
        input.addEventListener('keyup',function(e){
            if(e.key==="Enter"){
                worker.postMessage(input.value);
                input.value=''
            }
        })
        function stopWorker(){
            w.worker.postMessage('stop');
            w.worker.terminate()
        }
        w.worker.onmessage=function(event){
            if(event.data==='stop'){
                stopWorker()
            }
            document.getElementById('result').innerHTML=event.data
        }
        w.worker.addEventListener('error',(e)=>{
            console.log(e);
        })
    } catch (error) {
        console.log(error);
    }
</script>
</html>