上一主题 下一主题
ScriptCat,新一代的脚本管理器脚本站,与全世界分享你的用户脚本油猴脚本开发指南教程目录
返回列表 发新帖

[油猴脚本开发指南]简明diff(一)

[复制链接]

159

主题

1105

帖子

618

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
618
发表于 2021-10-8 22:36:05 | 显示全部楼层 | 阅读模式

FBI WARNING

本文为加强篇

相对小白较为硬核,适合前端入门基础学员看。

非战斗人员请勿下滑

看完美女视频就撤吧(mk不能播gif,收工了)

开始

战斗开始

这节课我们来学习key的意义

先要了解虚拟dom

虚拟dom

为什么存在虚拟dom

为了抽象dom树,因为正常的dom是极其复杂的,我们并不需要那么多操作,所以以js对象创造了虚拟的dom对象,更方便我们进行操作,同时摒弃的api的依赖,更注重于逻辑

就像一个冷笑话

一个工厂经常有空肥皂盒,一个博士花了上万元搞了一套ai设备来抓取空肥皂盒,但老板选择了5块钱的吹风机

实际ai设备已经具备了抽象的能力,不仅仅可以用作抓肥皂盒,还可以用来抓各种东西

虚拟dom也是如此。

虚拟dom树的绘制

在vue挂载到对应的dom树时

vue会根据真实的dom树,同时建立一个虚拟的dom树

并对其数据建立了监听器

而在模板等需要数据的地方,建立了观察器。

一旦数据发生了改变,就会触发监听器

这时候监听器会通知所有依赖于自己的观察器。

观察器通过diff算法来计算自己到底需要修改什么。

为什么需要diff

我们该怎么判断节点的改变?

粗糙的一点的方法就是将节点互相比较。

比如

图片.png

这时候每个节点需要比较三次

每一次新增节点都会极大的消耗性能来进行计算。

而diff算法不存在这个问题,diff只对同级进行比较

图片.png

这时候的复杂度是极低的

如果不断的新增节点

其比较的损耗性能是呈现一个线性增长,而之前的是呈现一个指数增长。

那diff到底做了什么?

这个我们下期再讲

结语

撒花~

图片.png
混的人。

7

主题

66

帖子

29

积分

新手上路

Rank: 1

积分
29

三好学生中秋纪念章国庆纪念章

发表于 2021-10-8 23:58:57 | 显示全部楼层
哥哥牛逼,美女真好看
回复

使用道具 举报

发表回复

本版积分规则

快速回复 返回顶部 返回列表