避免对模块化视图模型

问题描述:

全球重绘我将如何能够避免全球重绘=呼叫到主视图函数 而在主模块视图方法改变的子模块的视图,如:避免对模块化视图模型

m("body", [ 
      m("#head", {...}), 
      Menu.show(this), 
      Footer.show(this) 
]) 

在静态展示方法是这样的:

function show(app) 
    { 
     if (inst == null) 
      inst = new Footer(app); 
     return inst.view(app); 
    } 

现在应该加大对已经很好的性能,如果没有一个运行的 观点方法的子画面,而不在的情况下运行的主视图方式在变化的方法子视图有局部影响。这有意义吗?

阿克塞尔

重绘是秘银全球运营,这迫使你进入结构决定是由设计。 Mithril并没有公开允许从应用程序中的任何给定点对视图渲染过程进行精细控制的API,而是通过比较优化虚拟DOM模型的迭代的专门差异算法来处理整个过程。

话虽如此,还有影响的版本比较逻辑和渲染的实现依赖于上下文的方式:

  1. 调用m.redraw.strategy在正确的时间nonediff的参数可以完全阻止重绘或避免会是什么否则分别完整DOM重绘。在我的应用程序中,一个特别复杂的模块会触发并作出反应以连续发送更改(多个列表,其中每个项目本身是一个子模块DOM结构,可选的额外小部件等) - 通过在控制器中设置m.redraw.strategy('diff'),我设法保持性能〜55FPS,即使只修改DOM不同的块(尽管如此也是大块!)。
  2. 调用{ subtree : 'retain' }您希望从差异例程中移除的虚拟DOM的某些部分。如果你想让DOM算法忽略大块DOM(因此不会被后续重绘所触及),可以在视图中指定这个特殊参数。请注意,如果您稍后决定删除子树保留指令,则整个内部DOM树必须重新呈现至少一次,因为之前的迭代不会被diff引擎注册 - 所以我不会建议尝试使用这个猜测或差异算法。
  3. 使用{ key : 'uniqueIdentifier' }突出显示diff算法可能另外识别为新的元素。如果你有一块视图在重绘之间相对于DOM中旧位置移动,那么差异算法将破坏旧视图并从头开始渲染新视图。指定一个独特的key将允许它确定它应该移动现有的DOM结构,并在其中应用任何修补程序。如果一个庞大而复杂的DOM结构已经改变了它的位置,但是如果在大量的小物件上使用它时开始反对性能,这是非常有用的。例如,在我的应用程序中,我将键添加到每个列表项(每个列表项都至少有8个元素的子模块,事件处理程序等),以避免重绘仅移动到列表中的项目。事实证明,删除key并且只是在他们将改进的性能提高100%时从零开始创建元素。

但我的建议是让米索莉做它认为最好的。 Mithril比其他MVC库的视图组件的主要优点之一是Mithril可以让你在90%的时间内忘记重绘周期,并在需要时让它发生。这是一个优点!另外需要记住的是,无数人花费无数开发人员的时间来尝试让Javascript MVC渲染速度更快 - 而秘银是最快的之一。很可能,在大多数情况下,秘银核心可能比猜测其内部逻辑更优化。正如我上面的经验表明,引入额外的代码来提高性能实际上违背了我的期望。秘银的速度非常快 - 这应该让我们把我们的创造力花在其他问题上!

+1

'm.redraw.stragegy('diff')'中有一个输入错误。 – 2016-06-28 09:11:00

+0

斑点@StephanHoyer! – Barney 2016-06-28 09:12:04

+1

我复制并粘贴,它没有工作,但pssst;) – 2016-06-29 09:28:38

你不能阻止全球重绘,但你可以选择使视图的某些部分不使用subtree directives

然而请注意,这是禁用重绘受影响的子树性能优化重绘,并因此,除非您再次用子树替换该指令,否则您将无法更新其视图。