首页 web前端 css教程 '关闭主线程”

'关闭主线程”

Apr 17, 2025 am 09:14 AM

JavaScript是单线程的,这意味着它只有一个调用栈和一个内存堆。这经常会导致性能卡顿以及页面元素或整个网站的无响应。如果给JavaScript分配大量任务,它就会忙于处理这些任务,而无法快速处理其他事情,例如事件处理程序。

最近围绕这个问题出现了一些有趣的观点和反驳。

Das Surma一直提倡尽可能多地将JavaScript任务从主线程转移出去。事实上,在使用Web Workers时,他建议:始终使用Web Workers。Web Workers是将JavaScript从主线程中分离出来的主要方法。Paul Lewis将这个问题比作早高峰:一天中最糟糕的出行时间。许多人无法在其他时间出行,因为他们必须在9点前到达工作地点。这正是许多Web代码如今的样子:所有内容都在单线程(主线程)上运行,流量很大。事实上,情况比这更糟:从市中心到郊区只有一条车道,几乎每个人都在路上,即使他们不需要在9点前到达办公室。

Surma将其他语言中经常将“主线程”称为“UI线程”的做法进行了比较。如果你的任务与UI相关,就在主线程上执行;如果不是,就在其他线程上执行。他在《Web Platform Podcast – 194: Off the Main Thread》这一期节目中深入探讨了这个问题。我认为这可能会改变JavaScript开发人员的态度和思维方式。

将任务从UI线程中分离的一个例子是状态管理。

David Gilbertson可能读到了这篇文章,并写道:我最近看到一篇文章认为更新Redux存储是Web Workers的理想选择,因为它不是UI工作(非UI工作不属于主线程)。将数据处理转移到工作线程听起来很合理,但这个想法让我觉得有点学术性。

David的主要观点似乎是,我们需要处理的一些繁重的JavaScript任务是对用户发起的操作的响应,用户无论如何都需要等待任务完成,因此在此期间UI无响应是可以接受的。但对于任何非用户发起的任务——并且耗时超过100毫秒——他同意使用Web Worker会有所帮助。

(关于这100毫秒,值得注意的是,Surma的一个主要观点是,世界上有很多低端手机——谁知道高端手机上的100毫秒在低端手机上会是什么样的。)

在JavaScript中将任务从主线程中分离出来的主要技巧是使用Web Workers。它不是什么hack,Web Workers确实是为JavaScript带来多个后台线程的原生API。与Service Worker类似,它们通常位于另一个文件中:

var myWorker = new Worker('worker.js');
登录后复制

但它们不必如此——你可以内联它们或使用库。API并不糟糕,但也并不出色。Surma为此创建了一个库:Comlink。

Surma在这方面的努力是长期的。这是2018年Chrome峰会上的一个特色,主题是《A Quest to Guarantee Responsiveness: Scheduling On and Off the Main Thread》,并在2019年再次出现,主题是《The main thread is overworked & underpaid》,但这次的观看次数几乎是当时的六倍:

而且他并非孤军奋战。Alex MacArthur也谈到了调整他对事件处理程序的看法以适应在非主线程上执行任务。

以上是'关闭主线程”的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

热门话题

Java教程
1655
14
CakePHP 教程
1414
52
Laravel 教程
1307
25
PHP教程
1255
29
C# 教程
1228
24
Google字体可变字体 Google字体可变字体 Apr 09, 2025 am 10:42 AM

我看到Google字体推出了新设计(Tweet)。与上一次大型重新设计相比,这感觉更加迭代。我几乎无法分辨出区别

如何使用HTML,CSS和JavaScript创建动画倒计时计时器 如何使用HTML,CSS和JavaScript创建动画倒计时计时器 Apr 11, 2025 am 11:29 AM

您是否曾经在项目上需要一个倒计时计时器?对于这样的东西,可以自然访问插件,但实际上更多

HTML数据属性指南 HTML数据属性指南 Apr 11, 2025 am 11:50 AM

您想了解的有关HTML,CSS和JavaScript中数据属性的所有信息。

如何通过CSS选择第一个类名为item的子元素? 如何通过CSS选择第一个类名为item的子元素? Apr 05, 2025 pm 11:24 PM

在元素个数不固定的情况下如何通过CSS选择第一个指定类名的子元素在处理HTML结构时,常常会遇到元素个数不�...

为什么Flex布局中的紫色斜线区域会被误认为是'溢出空间”? 为什么Flex布局中的紫色斜线区域会被误认为是'溢出空间”? Apr 05, 2025 pm 05:51 PM

关于Flex布局中紫色斜线区域的疑问在使用Flex布局时,你可能会遇到一些令人困惑的现象,比如在开发者工具(d...

使Sass更快的概念证明 使Sass更快的概念证明 Apr 16, 2025 am 10:38 AM

在一个新项目开始时,Sass汇编发生在眼睛的眨眼中。感觉很棒,尤其是当它与browsersync配对时,它重新加载

我们如何创建一个在SVG中生成格子呢模式的静态站点 我们如何创建一个在SVG中生成格子呢模式的静态站点 Apr 09, 2025 am 11:29 AM

格子呢是一块图案布,通常与苏格兰有关,尤其是他们时尚的苏格兰语。在Tar​​tanify.com上,我们收集了5,000多个格子呢

在前端开发中,如何使用CSS和JavaScript实现类似Windows 10设置界面的探照灯效果? 在前端开发中,如何使用CSS和JavaScript实现类似Windows 10设置界面的探照灯效果? Apr 05, 2025 pm 10:21 PM

在前端开发中如何实现类似Windows...

See all articles