🧵JavaScript单线程
type
status
date
slug
summary
tags
category
icon
password
URL
- JavaScript是单线程的：到目前为止，JavaScript语言没有多线程的API，它的执行引擎只支持单线程。
- 与DOM的交互：如果存在多线程操作DOM，必须引入同步机制来保证线程安全。
- 事件循环：事件循环是执行线程不断地从队列中取任务、处理任务的过程，广泛应用于如NIO模型等场景。
- 宏任务与微任务：JS运行模型有两种任务类型，宏任务包括点击事件、定时器和IO事件；微任务主要是Promise。
- 任务执行顺序：每处理完一个宏任务，就会处理微任务队列中的所有任务。
- 任务的生成和插入队列：宏任务和微任务的生成由浏览器线程负责，例如页面按钮点击、setTimeout计时结束、HTTP响应等。
- 生成器和执行器：生成器和执行器用于优化异步操作的结构，避免嵌套Promise导致的代码冗长问题。
- async/await关键字：这两个关键字是生成器和执行器的语法糖，简化了异步操作的编写。await不会阻塞线程，它只是语义上的阻塞，保证任务的有序执行。
- Web Worker：Web Worker允许在浏览器中开启一个新的进程，实现多线程处理，但Worker线程无法访问DOM。
- Web Worker的应用场景：例如轮询后端接口、处理大量计算任务等。
- 页面“很卡”的原因：主线程被长时间占用，导致渲染任务无法及时执行，影响页面刷新频率。
- 掉帧：一个流畅的用户体验通常要求页面能够至少以60FPS的速度渲染，这意味着浏览器需要每16毫秒（1秒/60帧）更新一次页面。如果浏览器无法在这个时间内完成必要的计算、布局和绘制工作，用户就会感觉到页面的卡顿或掉帧。
- “响应慢”和“掉帧”的区别：响应慢指操作成功但耗时较长，掉帧指帧率下降到肉眼可见的卡顿。
- 优化方法：针对后端处理慢、资源加载慢和客户端渲染慢等问题，分别采取缓存、CDN、增量刷新等优化措施。
- 推荐阅读：文章最后推荐了一个视频解析资源，但由于需要翻墙，所以提供了链接供有兴趣的读者参考。