记录
现阶段在前端开发领域，应用的复杂性不断攀升，大概率你已经碰到过页面卡顿甚至崩溃的情况了。
image.png
image.png
可能的原因一般有：
- 页面有个列表数据量太大
- HTTP请求查询了大量数据
- 执行复杂逻辑代码（一个计算密集型的函数）
- 下载一个大文件
-
动画效果
...
有很多种情况会引起性能问题。浏览器分配的内存资源是有限的，解析 HTML 和 CSS、执行JS脚本、图形渲染等。
然而Google推出的scheduler.yield可以暂停当前正在执行的任务，在浏览器的事件循环（Event Loop）这个复杂的 “赛道” 上，scheduler.yield就是这样一个工具，用于优化任务的执行顺序和资源分配。，避免阻塞主线程，从而确保诸如用户交互相关的及时响应任务等优先级较高的任务优先执行，提升用户体验。
image.png
示例代码：
async function drawComplexChart(data) {
let startIndex = 0;
const batchSize = 100;
while (startIndex < data.length) {
// 绘制一批数据点
drawDataPoints(data.slice(startIndex, startIndex + batchSize));
startIndex += batchSize;
// 检查并使用scheduler.yield
if (typeof scheduler && typeof scheduler.yield === "function") {
await scheduler.yield();
}
}
}
兼容性
image.png
总结
- scheduler.yield主要用于控制任务执行顺序，将控制权交还给主线程，以降低延迟并提高性能。
- 使用 postTask() 确定任务的优先级。
- 当用户交互任务完成后，长任务可以跳到队列的头部并再次开始运行。这种机制有助于提升网页的响应能力和用户体验。
