Elm 的 Html.Lazy 背后的缓存

主要观点:

  • Html.Lazy是Elm性能的神奇模块,介绍了其工作原理及特性。
  • 详细阐述了从调用view函数到虚拟DOM差异比较、渲染以及缓存机制的整个过程。
  • 提出了新的设计思路,如深度相等检查、记住更多之前的运行结果、使用全局缓存等。

关键信息:

  • Html.Lazy.lazy创建“thunk”节点,存储计算虚拟DOM节点的函数,通过比较refs确定是否重新计算。
  • 虚拟DOM差异比较时,相同类型节点会尝试更精细的比较,不同类型则丢弃旧节点并添加新节点到补丁列表。
  • 缓存机制以函数和参数为键,存储计算结果到虚拟DOM树,用于比较和转移到新的虚拟DOM树。
  • 新设计思路包括深度相等检查可能提高检查成功率但有性能影响,记住更多之前运行结果需考虑内存增加,使用全局缓存需注意内存增长和泄漏。

重要细节:

  • view函数返回Html msg,是虚拟DOM节点树,Html.span等函数返回描述HTML节点的JavaScript对象。
  • _VirtualDom_thunk函数创建“thunk”节点,refs存储函数及参数用于后续比较。
  • 初始渲染时,Elm会创建虚拟DOM并与挂载的DOM节点比较,之后根据补丁修改真实DOM。
  • 对于懒节点,可能在渲染过程中才计算其DOM树,缓存机制的内存开销较小,但有一些局限性,如懒节点消失缓存消失等。
  • 新设计思路中深度相等检查在大多数情况下性能尚可,记住更多运行结果需考虑内存管理,使用全局缓存需谨慎避免内存问题。
阅读 12
0 条评论