zoukankan      html  css  js  c++  java
  • Diff算法

    Diff算法—前端篇

    当提起算法我们最熟悉的可能是在Linux中,如果需要比较两个文件就可以使用比较的命令 Diff 通常在 Git 提交代码的时候会使用这一算法原理提交代码

    而在前端当中的 Diff 算法,是指虚拟 DOM 变话的对比

    传统的 DOM 操作非常昂贵,数据的改变往往需要更新 DOM 树上的多个节点,可谓牵一发动全身,而虚拟 DOM 和 Diff 算法的诞生解决了这一问题

    Web 界面由 DOM 树来构成,当其中某一部分发生变化时,其实就是对应的某个 DOM 节点发生了变化。在 React 中,构建 UI 界面的思路是由当前状态决定界面。前后两个状态就对应两套界面,然后由 React 来比较两个界面的区别,本质是比较 DOM 节点差异当两个节点不同时,应该如何处理。这分为两种情况:节点类型不同 ,节点类型相同,但是属性不同。了解它们就需要对 DOM 树进行 Diff 算法分析

    img

    Diff算法的性能优势就是在对比新旧两个 DOM 的不同的时候只对比同一级别的 DOM 节点,一旦发现不同,后续 DOM 子节点将被删掉不作对比,由于前端DOM树的这一特性,算法对比的时间复杂度大大降低由标准的 O(n^3) 降低到 O(n)即一次对比后续节点不予考虑

    (对比样图如下)

    img

    在对比发现不同后,将不同的子节点进行简单的创建删除操作,看似简单粗暴的操作却十分有用,对这样的算法也让我们对 DOM 结构有了更深的了解,有的时候使用 css 样式隐藏 DOM 也会对整个页面的性能会有一定的提升。

  • 相关阅读:
    iOS开发UI篇—懒加载
    iOS开发UI篇—简单的浏览器查看程序
    iOS开发UI篇—transframe属性(形变)
    Files to be needed by importing the android application with eclipse
    Qualcomm Web Site For Android Development
    [Android]反编译apk + eclipse中调试smali
    [Open Projects Series] ViewPagerTransforms
    Android开源项目
    Xposed知识
    内核映像的形成 —— KBuild体系
  • 原文地址:https://www.cnblogs.com/baiyang2292/p/11591800.html
Copyright © 2011-2022 走看看