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性能公式: 声明式的更新性能消耗 = 找出差异的性能消耗 + 直接修改的性能消耗。

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

总结

相关推荐
烛阴37 分钟前
Mix
前端·webgl
代码续发1 小时前
前端组件梳理
前端
试图让你心动2 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
_Kayo_2 小时前
VUE2 学习笔记6 vue数据监测原理
vue.js·笔记·学习
陈不知代码2 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记2 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏2 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数3 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante3 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端
Carlos_sam3 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript