Lazy loaded image
技术分享
框架设计的权衡
00 min
2023-8-1
2024-11-25
type
status
date
slug
summary
tags
category
icon
password

命令式和声明式

命令式关注过程,声明式关注结果
  • 性能:命令式 > 声明式
  • 可维护性:声明式 > 命令式
所以 Vuejs 内部实现用的是命令式,暴露给用户的是声明式。
框架设计者要做的:在保持可维护性的同时让性能损失最小化

虚拟 DOM 的性能

更新一个面页的性能消耗:
  • vdom:创建 vnode 对象(js)+ diff 算法(js) + 必要的 dom 更新(dom)
  • innerHTML:创建 HTML 字符串(js)+ 全量的 dom 更新(dom)
js 的计算远快于 dom 的计算,忽略 js 层面的计算,则性能上:虚拟 DOM > InnerHTML

运行时和编译时

Vuejs 采用了编译时 + 运行时
  • 编译时:将 HTML 编译为 VDOM 树
  • 运行时:将 VDOM 树渲染为 DOM
 
 
上一篇
框架设计的核心要素
下一篇
SQL 必知必会