实现倒计时
- setIntervel，js原生实现
- setInterval可能会有误差
-
- [进程 vs 线程](#进程 vs 线程)
-
- [主进程 vs 主线程](#主进程 vs 主线程)
- 浏览器常见的线程
setIntervel，js原生实现
写一个函数，返回当前的时间
每隔一秒，运行这个函数
js
function clock(){
const now=new Date();
const pad=(num)=>String(num).padStart(2,"0")
const timeString=`${now.getHours()}:${now.getMinutes()}:${now.getSeconds()}`
return timeString
}
let timerId=setInterval(()=>{
console.log(clock())
},1000)
// 清理timer
setTimeout(()=>{
console.log(timerId)
clearInterval(timerId)
},5000)setInterval可能会有误差
上面代码运行起来，观察输出，可能会和系统的时针有一定的误差，time drift。有多方面的原因。
- 线程占用时间太长，setInterval产生的宏任务需要等待线程完成其他任务后再执行。
- 浏览器的节流策略。浏览器会限制非活跃的标签执行setInterval的频率，比如，setInterval(fun,1000),不会影响1s的本身倒计时，但是1s过后不会立刻进入宏任务，而是在节流策略限制下，比如，1mins只允许推入宏任务一次。
进程 vs 线程
浏览器会打开多个进程 ，一个进程有多个线程。
- CPU，一核同一时间处理一个
线程 - 以
进程为单位向CPU申请内存等资源，但是CPU调度是以线程为基本单位的
主进程 vs 主线程
- 浏览器不管开多少标签一定只有一个主进程，一个进程只有一个主线程。线程不会脱离进程而言。
- 常说的浏览器主进程：
browser process；主线程：main thread（中文叫渲染主线程）。有的时候我们会看到main thread指的是js thread，是因为main thread会运行js V8引擎，也就是js代码确实是在main thread上运行的。但main thread还会运行其他任务，比如构建DOM/CSSOM树，计算layout，painting等。 宏任务是一定由main thread执行的。也就是setInterval的注册是在timer thread中执行，时间到了，由event trigger推入宏任务队列，但是取出的时候，一定是main thread去取并执行。所以，当main thread任务繁忙阻塞等，会造成setInterval的回调不及时，导致不准确。- 为什么只允许main thread去取和优先执行？ 因为main thread才有dom操作等主要权限。
浏览器常见的线程
-
timer thread：setTimeout/setInterval等就是在这个线程里面进行倒数的；倒数完了就推入宏任务中
-
js enginer thread（main thread）：主要执行js代码
-
event tigger thread：把timer thread倒计时完成的任务搬运到宏任务队列中。
汇总：
- 核心系统级线程 (Browser Threads)
这些线程通常存在于浏览器的主进程中，负责全局控场：
GUI 渲染线程 (GUI Rendering Thread)：
作用：负责解析 HTML 生成 DOM 树，解析 CSS 生成 CSSOM，最后将两者合并并绘制在屏幕上。
关键点：它与 JS 引擎线程是互斥的。当 JS 执行时，GUI 渲染会挂起，这就是为什么 JS 长任务会导致页面"卡顿"。
JS 引擎线程 (JS Engine Thread)：
作用：负责解析、编译并运行 JavaScript 代码（如 V8 引擎）。
运行模式：单线程运行。它从任务队列中提取任务，交给 CPU 执行。
事件触发线程 (Event Trigger Thread)：
作用：充当"任务搬运工"。当用户点击、定时器到点、AJAX 请求完成时，它负责将对应的回调函数塞进任务队列中等待 JS 引擎执行。 - 异步辅助线程 (Helper Threads)
这些线程在后台默默工作，不占用主线程的时间：
定时触发线程 (Timer Thread)：
作用：专门负责 setTimeout 和 setInterval 的计时。由于 JS 是单线程的，如果它自己计时会因为代码阻塞而不准，所以必须由独立线程完成。
异步 HTTP 请求线程 (Network Thread)：
作用：处理所有的网络请求（XMLHttpRequest, Fetch）。当检测到状态变更（如请求成功）时，它会通知事件触发线程将回调入队。
合成线程 (Compositor Thread)：
作用：在 2026 年的现代架构中非常关键。它负责将页面分成不同的"层"并调用 GPU 进行合成。
优势：由于它独立于 JS 引擎，因此 CSS 动画（如 transform 和 opacity）即便在 JS 堵塞时依然能流畅运行。 - 开发者可控线程 (User-Defined Threads)
这是开发者为了提升性能主动开启的线程：
Web Worker 线程：
作用：允许开发者在后台运行耗时的计算任务（如大数运算、图像处理），而不会阻塞 UI 响应。
局限：无法直接操作 DOM，只能通过 postMessage 与主线程通信。
Service Worker 线程：
作用：常驻后台的代理。负责离线缓存、消息推送和网络请求拦截。它是实现 PWA（渐进式 Web 应用）的核心。
Shared Worker 线程：
作用：可以被多个标签页或 iframe 共享，常用于跨页面同步数据（如多个标签页共享一个聊天连接）。
- 核心系统级线程 (Browser Threads)