1.vue权衡的艺术

性能对比

javascript创建10000个字段,要比dom创建10000节点快很多,所以,如果能将主要的工作放到js中去,就能节省掉大量的性能

所以,使用js创建虚拟的dom,然后当数据发生变化时,在js中进行数据的比对(diff),要比dom破坏性的重建性能优越很多

js运算 虚拟dom innerHTML
dom运算 创建新的js对象+数据变化的比对(diff) 渲染innerHTML字符串
动作 和变化有关的DOM进行更新 销毁所有旧DOM,新建所有新DOM
性能因素 和数据变化量有关 与模板大小有关
innerHTML(模板) 虚拟DOM 原生js
心智负担中等,性能差 心智负担小,可维护强,性能不错 心智负担大,可维护性差,性能高

虚拟dom的精髓

虚拟dom性能公式: 声明式的更新性能消耗 = 找出差异的性能消耗 + 直接修改的性能消耗。

虚拟的意义就在于使找出差异的性能消耗最小化。

总结

相关推荐
tinker2 分钟前
使用 Syncthing 2.0 搭建私有同步服务器
开源
然我11 分钟前
别再只用 base64!HTML5 的 Blob 才是二进制处理的王者,面试常考
前端·面试·html
NanLing13 分钟前
【纯前端推理】纯端侧 AI 对象检测:用浏览器就能跑的深度学习模型
前端
断剑重铸之日13 分钟前
Android开发:GoogleMap电子围栏与联想地址搜索
开源
呆呆的心15 分钟前
前端必学:从盒模型到定位,一篇搞定页面布局核心 🧩
前端·css
小飞悟15 分钟前
前端高手才知道的秘密:Blob 居然这么强大!
前端·javascript·html
小old弟15 分钟前
用Sass循环实现炫彩文字跑马灯效果
前端
code_YuJun15 分钟前
Promise 基础使用
前端·javascript·promise
Codebee16 分钟前
OneCode自主UI设计体系:架构解析与核心实现
前端·javascript·前端框架
GIS之路19 分钟前
GIS 空间关系:九交模型
前端