javascript - UI线程是否优先于网络 worker ？-6ren

javascript - UI线程是否优先于网络 worker ？

转载作者：行者123 更新时间：2023-11-30 14:39:48

26

4

如果我在 Web Worker 中进行了数秒长的计算，我是否可以期望 UI 不会因此卡顿？包括手机？如果没有，我该怎么办？工作负载很容易分成更小的 block ，但大约一半的站点在计算完成之前无法工作。

最佳答案

...can I expect the UI to not stutter because of it?

在浏览器和设备的能力范围内，在很大程度上，是的，您可以。毕竟，这是网络 worker 的存在理由:将长时间运行的进程移出 UI 线程，以便 UI 可以保持响应。没有任何保证，但是……根据经验:我做过测试，其中工作人员在主 UI 更新时忙循环 30 秒以上，它在桌面、Android 和 iOS 上运行良好。

这样的测试并不难:

Live on plnkr

实时片段(由于我创建工作人员的方式，可能无法在所有设备上运行):

const chars = "|/-\\".split("");
let charindex = -1;
const spinner = document.getElementById("spinner");
setInterval(() => {
    charindex = (charindex + 1) % chars.length;
    spinner.innerHTML = chars[charindex];
}, 50);
function log(msg) {
    const p = document.createElement("pre");
    p.appendChild(document.createTextNode(msg));
    document.body.appendChild(p);
}
function main() {
    const url = URL.createObjectURL(
      new Blob([
        document.getElementById("worker").textContent
      ], {type: "text/javascript"})
    );
    const w = new Worker(url);
    w.onmessage = function(event) {
        if (event.data === "ready") {
            w.postMessage("start");
        } else {
            log(event.data);
        }
    };
}
main();

<div id="spinner"></div>
<script id="worker" type="worker">
this.addEventListener("message", e => {
    if (e.data === "start") {
        let last = Date.now();
        const stop = last + 20000;
        let now;
        while ((now = Date.now()) < stop) {
            if (now - last > 1000) {
                postMessage("tick");
                last = now;
            }
        }
    }
});
postMessage("ready");
</script>

worker.js:

this.addEventListener("message", e => {
    if (e.data === "start") {
        let last = Date.now();
        const stop = last + 30000;
        let now;
        while ((now = Date.now()) < stop) {
            if (now - last > 1000) {
                postMessage("tick");
                last = now;
            }
        }
    }
});
postMessage("ready");

host.html:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Worker Host</title>
<style>
body {
    font-family: sans-serif;
}
</style>
</head>
<body>
<div id="spinner"></div>
<script>
const chars = "|/-\\".split("");
let charindex = -1;
const spinner = document.getElementById("spinner");
setInterval(() => {
    charindex = (charindex + 1) % chars.length;
    spinner.innerHTML = chars[charindex];
}, 50);
function log(msg) {
    const p = document.createElement("pre");
    p.appendChild(document.createTextNode(msg));
    document.body.appendChild(p);
}
function main() {
    const w = new Worker("worker.js");
    w.onmessage = function(event) {
        if (event.data === "ready") {
            w.postMessage("start");
        } else {
            log(event.data);
        }
    };
}
main();
</script>
</body>
</html>

关于javascript - UI线程是否优先于网络 worker ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49839861/

26

4

0

文章推荐： c - 使用 open() 只读和只写

文章推荐： javascript - 为什么要从标签名称中删除空格？

文章推荐： javascript - MXGraph 添加边

文章推荐： javascript - 将子菜单定位在菜单容器的顶部

php - Lumen中间件排序(优先)
我正在使用“laravel/lumen-framework”:“5.7.*” 我有两个中间件，第一个 AuthTokenAuthenticate 应该应用于所有路由，因此它在 bootstrap/ap
java - 如何修复我的音频？ (优先)
当同时播放两个音频时...声音会相互抵消。如何解决这个奇怪的现象？我有一些代码，其中单击按钮时有音频，并且每隔十秒就有音频(在后台服务中)。我有以下代码来在十秒间隔播放时停止按钮音频，并且工作正常:
MySQL搜索用户， friend 优先
我有一个功能可以在我的网站上搜索用户，我的网站上还有一个面向 friend 的功能。我有一个查询要在我的网站上搜索正确的用户，并且我有一个查询可以确定用户的 friend ，他们都按应有的方式工
MySQL GROUP BY 优先
是否可以对记录使用 GROUP BY？例如，我有一大堆联系人数据，可能包含也可能不包含所有信息 - 在 CSV 意义上，如果可能看起来像这样: Test User, Address1, Addres
javascript - 让 UI 优先
如何在客户端 JavaScript 中创建一个环境，其中与用户界面和 View 相关的任何代码优先于其他代码？我知道你可以使用 setTimeout([function],0); 将事情推到下一个刻
javascript - Jasmine 测试 - 优先
Jasmine 有没有办法定义测试失败的概率？例如，现在 500'ing 的服务比不显示在页面上的简单内容更糟糕。谢谢! 最佳答案这不是单元或集成测试的工作方式。以太测试是否失败。并且您的套件中
symfony - “API 优先”安全最佳实践
我正在为我参与的一个项目开发一个 API。该 API 将由 Android 应用、iOS 应用和桌面网站使用。几乎所有 API 都只有注册用户才能访问。该 API 允许通过 WSSE 进行身份验证，这
javascript - 函数覆盖、onload 优先
我正在开发一些库并创建了这个有缺陷的代码: //------------------- Gmaps = {}; Gmaps.map = new Gmaps4RailsGoogle(); //there
ios - objective-c 自定义比较:优先
我有一个使用[NSLocale ISOCountryCodes]获得的国家/地区的NSArray。如何排序此NSArray，以便可以将某些常用国家(地区)放在列表的顶部，同时将其余国家/地区按字母顺序
javascript - CSS 或 JS 优先
我正在为注册表编写代码，因为我正在从另一个文件中为电话号码列导入代码，但是当我将该代码放入其中时，您可以看到@include('layouts.phone');它显示为当我放置@include('l
JavaScript 优先。变量1 = 变量2 < 100；
我刚刚遇到了 javascript 代码 file_upload_started = progress < 100; 我不知道如何阅读它，谷歌也没有真正出现太多。我什至不知道该怎么调用它，所以很难进行
CLA 认证考试中 C 运算符(operator)优先
目前，我正在 cppinstitute.org 学习 C 语言认证类(class)。在其中一个测验中，有一个如下的问题来识别输出。 int i = 1,j= 1; int w1,w2; w1 = (i
c++ - 将 MSB 优先转换为 LSB 优先
我想将无符号短值从 MSB 优先转换为 LSB 优先。做了下面的代码，但它不工作。有人可以指出我所做的错误吗 #include using namespace std; int main() {
maven - Tycho 解决了我自己的 list 优先 Artifact 的错误版本
考虑以下场景:我的应用程序有一些依赖于我自己的 POM 优先 Artifact (使用纯 Maven 构建)和一些依赖于我自己的 list 优先 Artifact (使用 Tycho 构建)。对于 P
task-parallel-library - 优先 TPL 数据流 BufferBlock
拥有它应该是很自然的事情，我想知道是否有来自 TPL DataFlow 库的优先级缓冲区块的现成实现？最佳答案似乎实现这一目标的最佳方法是使用专门的任务调度器，而不是实现您自己的 Buffer
sql - 如何在 PostgreSQL 中按与现在()( future 优先)的距离排序
我有一个 date 字段，它显示为从今天开始的天数。因此 2055-01-01 和 1950-01-01 将分别显示为正数和负数。现在我希望对这些进行排序，以便非负数按升序排在第一位，然后负数按降序排
jQuery Droppable Hover 和 Active Class 优先？
我遇到一个问题，我看到我的事件类和悬停类正在 Firebug 中应用，但它没有优先于现有样式。因此，如果我的元素设置了背景颜色，则事件和悬停背景颜色不会更改元素。我该如何解决这个问题？最佳答案
c# - 用于 Salesforce 出站消息传递的契约(Contract)优先 WCF
我正在考虑为 Salesforce Outbound Messaging 实现监听器应用程序。 walk through 使用已弃用的 ASMX Web 服务实现它。代码是使用带有/serverInt
c# - Entity Framework DB 优先 - 私有(private) setter
对于每个表，EF 都会生成一个部分类，其中所有字段都可以公开访问，例如 public int ID { get; set; } 是否可以将 set 设为私有(private)？然后，我将只允许调用我的
android - (优先)如何在 FragmentActivity 中对特定 ListView 使用 setListAdapter
我正在为水电站编写一个数据评估应用程序。我需要从服务器下载数据，该数据就在那里 - 作为 MySQL 表，格式化为 JSON 数组。现在，经过无数个小时的工作，我已经完成了连接到服务器、下载数据并将其

首页

博学

6Ren·AI

商城

javascript - UI线程是否优先于网络 worker ？