分享更有价值
被信任是一种快乐

Ivy编译器中增量DOM的示例分析

文章页正文上

这篇文章主要为大家展示了“Ivy编译器中增量DOM的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Ivy编译器中增量DOM的示例分析”这篇文章吧。作为“为大型前端项目”而设计的前端框架,Angular 其实有许多值得参考和学习的设计,本系列主要用于研究这些设计和功能的实现原理。本文围绕 Angular 的核心功能 Ivy 编译器,介绍其中的增量 DOM 设计。在介绍前端框架的时候,我常常会介绍到模板引擎。对于模板引擎的渲染过程,像 Vue/React 这样的框架里,使用了虚拟 DOM 这样的设计。在 Angular Ivy 编译器中,并没有使用虚拟 DOM,而且使用了增量 DOM。在 Ivy 编译器里,模板编译后的产物与 View Engine 不一样了,这是为了支持单独编译、增量编译等能力。比如,My name is {{name}}这句模板代码,在 Ivy 编译器中编译后的代码大概长这个样子:可以看到,相比于 View Engine 中的elementDef(0,null,null,1,'span',...),elementStart()elementEnd()这些 API 显得更加清爽,它们使用的便是增量 DOM 的设计。虚拟 DOM 想必大家都已经有所了解,它的核心计算过程包括:用 JavaScript 对象模拟 DOM 树,得到一棵虚拟 DOM 树。当页面数据变更时,生成新的虚拟 DOM 树,比较新旧两棵虚拟 DOM 树的差异。把差异应用到真正的 DOM 树上。虽然虚拟 DOM 解决了页面被频繁更新和渲染带来的性能问题,但传统虚拟 DOM 依然有免费云主机、域名以下性能瓶颈:在单个组件内部依然需要遍历该组件的整个虚拟 DOM 树在一些组件整个模版内只有少量动态节点的情况下,这些遍历都是性能的浪费递归遍历和更新逻辑容易导致 UI 渲染被阻塞,用户体验下降针对这些情况,React 和 Vue 等框架也有更多的优化,比如 React 中分别对 tree diff、component diff 以及 element diff 进行了算法优化,同时引入了任务调度来控制状态更新的计算和渲染。在 Vue 3.0 中,则将虚拟 DOM 的更新从以前的整体作用域调整为树状作用域,树状的结构会带来算法的简化以及性能的提升。而不管怎样,虚拟 DOM 的设计中存在一个无法避免的问题:每个渲染操作分配一个新的虚拟 DOM 树,该树至少大到足以容纳发生变化的节点,并且通常更大一些,这样的设计会导致更多的一些内存占用。当大型虚拟 DOM 树需要大量更新时,尤其是在内存受限的移动设备上,性能可能会受到影响。增量 DOM 的设计核心思想是:在创建新的(虚拟)DOM 树时,沿着现有的树走,并在进行时找出更改。如果没有变化,则不分配内存;如果有,改变现有树(仅在绝对必要时分配内存)并将差异应用到物理 DOM。这里将(虚拟)放在括号中是因为,当将预先计算的元信息混合到现有 DOM 节点中时,使用物理 DOM 树而不是依赖虚拟 DOM 树实际上已经足够快了。与基于虚拟 DOM 的方法相比,增量 DOM 有两个主要优势:增量特性允许在渲染过程中显着减少内存分配,从而实现更可预测的性能它很容易映射到基于模板的方法。控制语句和循环可以与元素和属性声明自由混合增量 DOM 的设计由 Google 提出,同时他们也提供了一个开源库 google/incremental-dom,它是一个用于表达和应用 DOM 树更新的库。JavaScript 可用于提取、迭代数据并将其转换为生成 HTMLElements 和 Text 节点的调用。但新的 Ivy 引擎没有直接使用它,而是实现了自己的版本。Ivy 引擎基于增量 DOM 的概念,它与虚拟 DOM 方法的不同之处在于,diff 操作是针对 DOM 增量执行的(即一次一个节点),而不是在虚拟 DOM 树上执行。基于这样的设计,增量 DOM 与 Angular 中的脏检查机制其实能很好地搭配。增量 DOM 的 API 的一个独特功能是它分离了标签的打开(elementStart)和关闭(elementEnd),因此它适合作为模板语言的编译目标,这些语言允许(暂时)模板中的 HTML 不平衡(比如在单独的模板中,打开和关闭的标签)和任意创建 HTML 属性的逻辑。在 Ivy 中,使用elementStartelementEnd创建一个空的 Element 实现如下(在 Ivy 中,elementStartelementEnd的具体实现便是elementStartelementEnd):其中,elementStart用于创建 DOM 元素,该指令后面必须跟有elementEnd()调用。可以看到,在elementStart创建 DOM 元素的过程中,主要依赖于LViewTViewTNode。在 Angular Ivy 中,使用了LViewTView.data来管理和跟踪渲染模板所需要的内部数据。对于TNode,在 Angular 中则是用于在特定类型的所有模板之间共享的特定节点的绑定数据(享元)。elementEnd()则用于标记元素的结尾:对于elementEnd()的详细实现不过多介绍,基本上主要包括一些对 Class 和样式中@input等指令的处理,循环遍历提供的tNode上的指令、并将要运行的钩子排入队列,元素层次的处理等等。在增量 DOM 中,每个组件都被编译成一系列指令。这些指令创建 DOM 树并在数据更改时就地更新它们。Ivy 在运行时编译一个组件的过程中,会创建模板解析相关指令:可见,在组件编译时,会被编译成一系列的指令,包括constvarsdirectivespipesstyleschangeDetection等等,当然也包括template模板里的相关指令。最终生成的这些指令,会体现在编译后的组件中,比如之前文章中提到的这样一个Component文件:经ngtsc编译后,产物包括该组件的.js文件:其中,elementStart()text()elementEnd()advance()textInterpolate1()这些都是增量 DOM 相关的指令。在实际创建组件的时候,其template模板函数也会被执行,相关的指令也会被执行。正因为在 Ivy 中,是由组件来引用着相关的模板指令。如果组件不引用某个指令,则我们的 Angular 中永远不会使用到它。因为组件编译的过程发生在编译过程中,因此我们可以根据引用到指令,来排除未引用的指令,从而可以在 Tree-shaking 过程中,将未使用的指令从包中移除,这便是增量 DOM 可树摇的原因。以上是“Ivy编译器中增量DOM的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注云技术行业资讯频道!

相关推荐: 有哪些Vue面试题

这篇文章主要讲解了“有哪些Vue面试题”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“有哪些Vue面试题”吧!  一、什么是MVVM?  MVVM是Model-View-ViewModel的缩写。MVVM是一种设…

文章页内容下
赞(0) 打赏
版权声明:本站采用知识共享、学习交流,不允许用于商业用途;文章由发布者自行承担一切责任,与本站无关。
文章页正文下
文章页评论上

云服务器、web空间可免费试用

宝塔面板主机、支持php,mysql等,SSL部署;安全高速企业专供99.999%稳定,另有高防主机、不限制内容等类型,具体可咨询QQ:360163164,Tel同微信:18905205712

主机选购导航云服务器试用

登录

找回密码

注册