前言

极度投入，深度沉迷，边界清晰

前端小菜鸡一枚，分享的文章纯属个人见解，若有不正确或可待探讨点可随便评论，与各位同学一起学习~

欢送关注 『前端进阶圈』 公众号 ，一起摸索学习前端技术......

公众号回复 加群 或 扫码, 即可退出前端交流学习群，长期交流学习......

公众号回复 加好友，即可添加为好友

热点面试题：Virtual DOM 相干问题？

什么是 Virtual DOM？

  • VDOM 是对实在 DOM 的一种映射，自身是一个 JS 对象，蕴含了标签名(tag), 属性(attrs)，子元素(children)。

VDOM 是如何批改实在 DOM？

  • VDOM 是与实在 DOM 的 JS 对象，如果扭转了某个元素的状态，首先会在 VDOM 上进行扭转，而不是间接去操作实在 DOM，当有新的批改产生时，新的 VDOM 与 旧的 VDOM 进行比拟失去差别，而后将差别映射到实在 DOM 上，达到批改实在 DOM 的成果。

VDOM 如何生成？如何成为实在 DOM？

  • vue 中通过模板编译器(template compiler) 编译为渲染函数(render), 在挂载(mount) 过程中调用渲染函数(render)，此时返回的对象就是 VDOM。但这并不是实在 DOM，要通过 patchVnode() 办法转换为实在 DOM。

Vue 中为什么要才应用 VDOM？

  1. 为理解耦 HTML 的依赖，不在依赖 HTML compiler 进行模板编译
  2. VDOM 更缩小不必要的重绘和回流
  3. 解决 View 与 Status 的同步问题
  4. VDOM 的跟踪变动
  5. 进步我的项目的可维护性
  6. VDM 把渲染过程抽象化了，使组件的形象能力失去的晋升
  7. 可跨平台：SSR, Weex，同构渲染

VDOM 的中 diff 算法？

  • 次要实现办法是：递归 + 双指针
  • 在前端中，很少存在跨层级挪动 DOM Element, 所以 VDOM 只会对同一个层级的元素进行比对，才应用深度优先遍历的办法，来记录差别。

VDOM 的作用是什么？

  1. 保护 View 和 Status 的状态
  2. 能在简单的状况下晋升 Rendering Performance

  3. 跨平台(Cross Platform)

    1. 浏览器端渲染 DOM
    2. 服务端渲染 SSR：Nuxt.js，Next.js
    3. 原生利用：Weex，React native
    4. 小程序：mpvue，uni-app

VDOM 的长处？

  1. 无效缩小实在 DOM 的操作次数，进步性能
  2. VDOM 不会引起回流和重绘
  3. 不便跨平台

VDOM 的毛病？

  1. 无奈进行极致优化
  2. 在首次 render 大量 DOM 时，多了一层 VDOM 的计算

对于 VDOM 的库？

  1. Snabbdom

    • vue2 内用的 VDOM 就是革新后 Sanbbdom
    • 可通过模块进行开发
    • 应用 TypeScript 开发
    • 最快的 VDOM 之一
  2. virtual-dom

文章特殊字符形容：

  1. 问题标注 Q(question)
  2. 答案标注 R(result)
  3. 注意事项规范：A:(attention matters)
  4. 详情形容标注：D:(detail info)
  5. 总结标注：S:(summary)
  6. 剖析标注：Ana:(analysis)
  7. 提醒标注：T:(tips)

往期回顾：

  • 热点面试题：过程系列问题？
  • 热点面试题：Node.js 中的垃圾回收机制？
  • 热点面试题：简述 http3.0~http1.0 别离有什么改良？
  • JavaScript中的AMD和CMD标准
  • Vue数据监听Object.definedProperty()办法的实现

最初：

  • 欢送关注 『前端进阶圈』 公众号 ，一起摸索学习前端技术......
  • 公众号回复 加群 或 扫码, 即可退出前端交流学习群，长期交流学习......
  • 公众号回复 加好友，即可添加为好友