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

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

[复制链接]
  • TA的每日心情
    开心
    2023-2-28 23:59
  • 签到天数: 191 天

    [LV.7]常住居民III

    636

    主题

    5185

    回帖

    6068

    积分

    管理员

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

    积分
    6068

    荣誉开发者管理员油中2周年生态建设者喜迎中秋

    发表于 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到底做了什么?

    这个我们下期再讲

    结语

    撒花~

    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
  • TA的每日心情
    难过
    2023-12-22 11:17
  • 签到天数: 18 天

    [LV.4]偶尔看看III

    16

    主题

    247

    回帖

    203

    积分

    荣誉开发者

    积分
    203

    荣誉开发者油中2周年

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

    使用道具 举报

  • TA的每日心情
    开心
    2023-12-7 14:51
  • 签到天数: 3 天

    [LV.2]偶尔看看I

    1

    主题

    3

    回帖

    8

    积分

    助理工程师

    积分
    8
    发表于 2023-11-14 09:21:53 | 显示全部楼层
    美女视频在哪呢?没看到啊
    回复

    使用道具 举报

    发表回复

    本版积分规则

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