首页 > 其他分享 >web-worker 独立线程,性能优化

web-worker 独立线程,性能优化

时间:2024-09-05 15:27:37浏览次数:10  
标签:function Web console web Worker sum worker 线程

ref: https://github.com/zjy4fun/web-worker

分别使用主线程和 worker 线程处理一个耗时计算,看看对主线程上的 UI 渲染有什么影响

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Web Worker</title>
</head>

<body>
    <script>
        function task() {
            let sum = 0;
            for (let i = 0; i < 1e9; i++) {
                sum += i;
            }
            return sum;
        }

        function mainThread() {
            console.time("主线程计算耗时");
            task();
            console.timeEnd("主线程计算耗时");
        }
        mainThread();
    </script>
    <h1>Main Thread</h1>
</body>

</html>

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Web Worker</title>
</head>

<body>
    <script>
        function workerThread() {
            console.time("Web Worker计算耗时");
            const worker = new Worker("worker.js");
            worker.postMessage("Hello, Web Worker!");
            worker.onmessage = function (event) {
                console.timeEnd("Web Worker计算耗时");
                console.log("Received message from worker:", event.data);
            }
        }
        workerThread();
    </script>
    <h1>Web Worker Thread</h1>
</body>

</html>
self.onmessage = function (event) {
    function task() {
        let sum = 0;
        for (let i = 0; i < 1e9; i++) {
            sum += i;
        }
        return sum;
    }
    const result = task();
    self.postMessage(result);
};

 

对比效果

 

可以看出使用 web worker 可以避免让主线程阻塞

 

标签:function,Web,console,web,Worker,sum,worker,线程
From: https://www.cnblogs.com/zjy4fun/p/18398533

相关文章

  • Go - Web Application 6
    StatefulHTTPAnicetouchtoimproveouruserexperiencewouldbetodisplayaone-timeconfirmation messagewhichtheuserseesafterthey’veaddedanewsnippet.Likeso:Aconfirmationmessagelikethisshouldonlyshowupfortheuseronce(immediat......
  • 基于C#网上购物商城管理系统,Web的网上购物商城的研究现状(源码+数据库+文档)
    目录一.研究目的1.1网上购物系统研究背景1.2网上购物系统开展研究的意义二.功能分析三,数据库分析四.界面展示五.源码获取方式一.研究目的1.1网上购物系统研究背景随着互联网技术的飞速发展,电子商务已成为全球经济的重要组成部分。网上购物商城作为电子商务的一种......
  • Web大学生网页作业成品——游戏阴阳师介绍网页设计与实现(HTML+CSS)(4个页面)
    ......
  • Web大学生网页作业成品——杭州西湖景点网页设计与实现(HTML+CSS)(3个页面)
    ......
  • 多线程7
    多线程知识点概述1.什么是多线程1)一个进程中往往有多条程序执行路径,该程序可以理解为多线程程序2)java程序的入口是main方法,从操作系统的角度看,main方法的启动意味着启动了一个java进程。main方法所在的程序执行路径即为主线程,同时,main线程的启动,会伴随着其他线程的创建和启动,......
  • 多线程5
    102.final如果修饰的是集合,则没有办法保证线程安全103.通过Executors返回的线程池对象存在的弊端:·FixedThreadPool和SingleThreadPool:允许的请求队列长度为Integer.MAX_VALUE,可能会堆积大量的请求,从而导致OOM·CachedThreadPool和ScheduledThreadPool:允许的创建线程数量为......
  • SD WebUI 中也能用上实时绘画了!支持接入PS/Blender 等设计工具
    大家好,我是程序员晓晓今天给大家推荐一种在StableDiffusionWebUI中实现实时绘画的方法。而且最重要的是,该插件的使用可以让SD支持接入PS/Blender等设计工具,让设计师、插画师、原画师等图形工作者在工作中效率提升巨大!一、插件简介SDWebUI的实时绘画功能需要借助一......
  • WebApi使HttpPut/HttpDelete有效
    405-不允许用于访问此页的HTTP谓词。您要查找的页面无法显示,因为尝试访问时使用了无效方法(HTTP谓词)。解决办法:在将应用程序从经典模式迁移到集成模式时,可以保留经典模式下的自定义模块和处理程序注册,也可以将这些注册移除。如果不移除经典模式下使用的httpModules......
  • WebShell流量特征检测_哥斯拉篇
    80后用菜刀,90后用蚁剑,95后用冰蝎和哥斯拉,以phpshell连接为例,本文主要是对这四款经典的webshell管理工具进行流量分析和检测。什么是一句话木马?1、定义顾名思义就是执行恶意指令的木马,通过技术手段上传到指定服务器并可以正常访问,将我们需要服务器执行的命令上传并执行2、特点......
  • web期末作业网页设计——我的家乡黑龙江(网页源码)
     一、......