Dvorak
Dvorak

Dvorak Chen

DOM Manipulation

01
SEP

Create your own simple reactivity front-end framework

创建自己的响应式前端框架是一次对现代框架设计理念的探索通过比较Angular的类组件React的虚拟DOM和Vue的文件组件作者选择了函数组件与信号驱动的响应式架构作为实现路径文章以DvorakJS为例展示了如何通过SWC编译器将JSX转换为自定义的createElement方法并在此基础上构建响应式逻辑当数据更新时通过发布-订阅模式自动触发视图变更例如属性绑定通过订阅信号值变化实现动态更新而动态子元素则通过函数返回值的替换机制保持同步这种设计避免了虚拟DOM的性能开销并保留了声明式编程的简洁性但如何在不引入额外运行时依赖的情况下处理深层嵌套组件的响应式更新如何优化频繁的DOM替换带来的性能损耗如何实现细粒度的依赖追踪以减少不必要的重渲染这些问题仍然值得进一步思考当开发者手动实现基础响应式机制时是否能更直观地理解框架底层的依赖收集与调度策略这种自定义框架能否在生产环境中解决实际问题而不仅仅是技术验证或许我们更应该思考响应式编程的本质是否可以通过更轻量的模式重塑前端开发体验--Qwen3

Javascript Dvorak.js Signals Publisher Subscriber DOM Manipulation ECMAScript 6
25
MAY

浅谈 Javascript 事件循环

JavaScript的单线程执行机制通过事件循环处理任务，所有代码执行和异步回调均在主线程按顺序进行。事件循环包含宏任务队列和微任务队列，宏任务包括整体代码、setTimeout/setInterval回调等，微任务包括Promise.then/catch/finally等，每次循环优先清空微任务队列再执行宏任务。setTimeout的第二个参数表示回调进入宏任务队列的延迟时间而非立即执行时间，实际执行时机取决于事件循环状态。当执行耗时操作时（如一次性创建5万个DOM元素），会阻塞后续任务和浏览器渲染，导致页面卡顿。通过将任务拆分为多个小块（如每次创建250个元素），利用setTimeout将每个小块作为独立宏任务依次放入队列，可让浏览器在每次宏任务后清空微任务队列并触发页面渲染，实现平滑的渐进式更新。错误的优化方式如一次性用循环注册大量setTimeout宏任务，会导致队列被占满，反而延迟其他关键任务的执行。正确实现需通过递归注册setTimeout，在每次宏任务执行完毕后触发下一个任务，确保每次任务执行后浏览器获得渲染机会。这种分片处理方式能有效平衡任务执行与渲染频率，避免长时间阻塞主线程。--Qwen3

Javascript DOM Manipulation Event Loop Macrotask Queue Browser Rendering Performance Optimization
  • 1