react18中，为什么选择messagechannel来让出执行权？

最新推荐文章于 2025-06-17 09:58:35 发布
最新推荐文章于 2025-06-17 09:58:35 发布
阅读量160 收藏
点赞数 2
CC 4.0 BY-SA版权
分类专栏： React面试题第一版 文章标签： react.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangguo2002/article/details/147633601

一、浏览器部分

浏览器：

帧率：我们一般所理解的动画，是一帧一帧的图片就行快速切换得到的

一般浏览器是60帧，16.666ms为一帧

人的眼睛一般20帧左右就可以感觉比较流畅的动画了

浏览器一帧里做了哪些事情？

|-------------------------------------16.666ms-----------------------------------------------------|

| 宏任务 | 微任务 | requestAnimationFrameWork | layout | requestIdelCallback |

稳定是16.666ms吗？

不一定，可能宏任务因复杂任务执行时间过长，导致layout没有执行，会造成一个输入延迟的问题，给人的体验感为浏览器卡顿

二、messagechannel部分

react源码分析：实现react时间分片
weixin_59558923的博客
12-05 760
我们常说的调度，可以分为两大模块，时间分片和优先级调度本节将从时间分片的实现剖析的异步渲染原理，阅读本文你讲可以了解上文提到过，时间分片其实就是一个固定而连续且有间隔的时间区间固定：时间分片是工作时长是固定的 连续：分片之间是连续的，当前分片内有工作没做完，会留到下个分片继续 有间隔：在进入下一个分片前，会有一定时间的间隔这些解释比较抽象，可以更加通俗去理解固定：每天固定工作8小时 连续：每天都要上班 有间隔：明天上班前会休息一段时间我们知道，最重要，也是最耗时的任务是节点遍历。设想一个页面上有一万个DOM
React18源码: schedule任务调度messageChannel
Wang的专栏
02-23 1488
看完这8个内部函数，最后浏览一下完整的 performWorkUntilDeadline 回调的实现。调度中心最核心的代码，在 SchedulerHostConfig.default.js 中。这4个函数代码都很简洁，其功能在注释中都有解释.1 ）调度相关：请求或取消调度。
五、为什么React中选择MessageChannel来创建任务
weixin_43854624的博客
10-01 537
MessageChannel
React Scheduler 时间分片为什么选择使用 MessageChannel 实现
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
05-08 2675
点击上方前端瓶子君，关注公众号回复算法，加入前端编程面试算法每日一题群来源：MoonBallhttps://juejin.cn/post/6953804914715803678本文包括：...
react原理篇-requestidlecallback和MessageChannel
最新发布
weixin_47002803的博客
06-17 1011
能较快执行，在 0～1ms 内触发，像 setTimeout 即便设置 timeout 为 0 还是需要 4～5ms。然后将任务添加到队列里面，并且添加进去的时候还需要根据优先级进行排序，然后调用workLoop 执行任务。它提供了两个端口（port1 和 port2），通过这些端口，消息可以在两个独立的线程之间双向传递。它提供了一种机制，允许开发者在浏览器空闲时运行低优先级的任务，而不会影响关键任务和动画的性能。的原因，是首先异步得是个宏任务，因为宏任务中会在下次事件循环中执行，不会阻塞当前页面的更新。
【React架构 - Scheduler中的MessageChannel】
weixin_44273311的博客
02-28 1720
【React架构 - Scheduler中的MessageChannel】
React 源码中的 MessageChannel 到底是什么
梓沐666的博客
02-25 1454
哈喽大家好，我是 **SuperYing**。最近看 `React` 源码的时候，发现了一个我不太常用的玩意儿 - `MessageChannel`，这是什么东西呢？到底是用来做什么的呢？如我一般好奇的小伙伴们请跟着我一起往下看......
【react】什么是fiber？fiber解决了什么问题？从源码角度深入了解fiber运行机制与diff执行
热门推荐
行星飞行的博客
07-03 1万+
我在[react] 什么是虚拟dom？虚拟dom比操作原生dom要快吗？虚拟dom是如何转变成真实dom并渲染到页面的?一文中，介绍了虚拟的概念，以及中虚拟的使用场景。那么按照之前的约定，本文来聊聊中另一个非常重要的概念，也就是。那么通过阅读本文，你将了解到如下几个知识点：同样，若文中涉及到的源码部分，我依然会使用的版本，保证文章的结论不会过于老旧；其次，的概念理解起来其实比较枯燥，但我会尽量描述的通俗易懂一点，那么本文开始。我们学习任何东西，一定会经历两个阶段，一是这个东西是什么？二是这个东西有什么用（解
react中如何做到中断diff过程和恢复
qq_42931285的博客
02-16 1059
react中如何做到中断diff过程和恢复
【React Scheduler源码第三篇】React Scheduler原理及手写源码
lzc的博客
09-07 602
手写react scheduler源码，彻底搞懂什么是任务切片，什么是时间切片，以及为什么使用MessageChannel而不是setTimeout实现任务调度
React 底层 Fiber 架构 简单理解
xbczrz的博客
11-04 906
JS 是引擎是的；严格来说，JS 引擎和页面渲染引擎在同一渲染线程，两者。那么就会遇到这样的一种情况：当前面一个任务长期霸占CPU，后面啥事也干不了，浏览器卡死，造成极差的用户体验。
2024 React 面试问答十连
油墨香^-^的博客
05-07 123
在性能、可预测性、浏览器兼容性和代码可维护性方面都具有一些优势。因此，在某些情况下，使用 MessageChannel 可能会比使用 Promise 更有优势。
【React】React源码梳理笔记（九）
不忘初心，坚定道路！
05-01 436
前言 本篇梳理下fiber架构的基础知识。 requestIdleCallback 这玩意只在浏览器中有，一般情况，浏览器在解析js时，如果任务太耗时，就会阻塞用户操作，界面成卡死状态。就像我前面无聊写的那个对账工具，计算量太大页面完全定住没法动。 而 requestIdleCallback，虽然不能解决js卡死问题，但如果将大的js任务拆解成一个个小的js任务，然后通过这个api进行...
js不一样的深拷贝思路
前端阿玉博客
01-09 449
MessageChannel 允许两个不同的脚本运行在同一个文档的不同浏览器上下文（例如两个 iframe，文档主体和一个 iframe，使用的两个文档，或两个 worker）来直接通讯，在每端使用一个端口（port）通过双向频道（channel）向彼此传递消息。MessageChannel 是以DOM Event的形式发送消息，所以它属于异步的宏任务。
MessageChannel API
你的博客
07-24 1958
  MessageChannel接口允许我们创建一个新的消息通道，并通过它的两个MessagePort 属性发送数据，返回的两个属性为只读属性 MessageChannel API在Web Worker中同样可以使用 使用： let channel = new MessageChannel(); channel.port1; //只读 channel.port2; //只读 返回两...
react websocket实现消息推送
jonychen1的博客
02-28 3432
最近在做项目的过程中，需要用到websocket来实现消息推送的功能，百度了一下，找到一个免费的websocket第三方框架【GoEasy】，地址：https://www.goeasy.io/ 试用过后，总的来说效果不错，根据网站提供的教程，上手还是很快的。 根据GoEasy网站的介绍，目前提供完整的websocket前后端解决方案，简单的几行代码集成，即可快速搭建您的专属websocket服...
MessageChannel和BroadcastChannel
weixin_34107955的博客
05-07 1126
MessageChannel 是一种点对点的通信方式，可以理解为管道，消息从一端进入另一端输出，最基本的使用方式如下： const mc = new MessageChannel() mc.port1.onmessage = function(eve){ console.log(eve.data) } mc.port2.postMessage('hi jack') // 'hi jac...
MessageChannel 消息通道
weixin_33946605的博客
04-02 1699
一、初识MessageChannel 对象 通过构造函数MessageChannel() 可以创建一个消息通道，实例化的对象会继承两个属性：port1 和 port2 port1 和 port2 都是MessagePort 对象，在这里是只读的，无法对其进行字面量赋值 不过可以给 port 添加属性 上图还体现了 MessagePort 对象具有 onmessage 和 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值