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

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

[复制链接]
  • TA的每日心情
    开心
    前天 00:00
  • 签到天数: 49 天

    [LV.5]常住居民I

    350

    主题

    3064

    帖子

    3077

    积分

    荣誉开发者

    非物质文化遗产社会摇传承人

    Rank: 10Rank: 10Rank: 10

    积分
    3077

    猫咪币纪念章国庆纪念章中秋纪念章荣誉开发者家财万贯

    发表于 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
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
  • TA的每日心情
    郁闷
    2022-7-25 15:21
  • 签到天数: 10 天

    [LV.3]偶尔看看II

    12

    主题

    206

    帖子

    151

    积分

    荣誉开发者

    Rank: 10Rank: 10Rank: 10

    积分
    151

    三好学生中秋纪念章国庆纪念章活跃会员荣誉开发者

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

    使用道具 举报

    发表回复

    本版积分规则

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