Durandal - 使用许多小部件会导致 UI 加载“抖动”答案

【问题标题】：Durandal - using many widgets causes UI to load "jittery"Durandal - 使用许多小部件会导致 UI 加载“抖动”
【发布时间】：2014-02-07 05:35:20
【问题描述】：

我们的应用程序中有多种表单，它们广泛使用了小部件。

不幸的是，这会导致表单以非常“紧张”的方式加载。它仍然加载得很快，但是您可以感知地看到每个小部件“弹出”到视图中。

这是小部件基础结构的预期副作用，还是有一种技术可以强制 Durandal 在附加之前构建整个视图（小部件和所有），这似乎是部分视图的工作方式？（我们能够将其中许多小部件转换为局部视图以减轻这种现象）。

如何轻松重现行为

使用 HTML 示例，找到 app/widgets/index.html 并进行小修改以创建一个包含大量小部件的视图：

<div>
    <h1>Widgets Sample</h1>
    <!-- ko foreach: new Array(100) -->
    <div data-bind="expander:{items:$root.projects}">
        <h3 data-part="header">Project: <span data-bind="text: name"></span></h3>
    </div>
    <!-- /ko -->
    <button class="btn" data-bind="click: addNewProject">Add</button>
</div>

刷新页面时，您会看到滚动条明显“缩小”。我怀疑这是因为每个单独的小部件一次都被添加到 DOM 中，而不是部分视图的工作方式“一次全部与父视图一起”。

注意：这个非常简单的标记的影响是相当微妙的，但是 UI 元素越复杂，“studdering”就越明显和刺耳（尤其是当您在各种小部件之间嵌套了非小部件内容时）。

【问题讨论】：

您的应用程序是否在生产模式下运行（main-build.js）？否则，必须在第一次使用时加载每个相关小部件的视图/视图模型 html/js。
它通过主构建运行，是的。但是，它似乎仍然在整个生命周期中运行每个小部件，并在父元素已经附加到 DOM 之后将它们一个接一个地附加（导致抖动影响）。
小部件是否在本质上做异步操作？如果是这样，请确保从 activate 返回一个承诺，以便 Durandal 知道何时保存以继续。
不，没有异步，这不是问题。我已更新问题以包括如何重现。
我试图重现这个：转到dfiddle.github.io/dFiddle-2.0/#so，然后单击so21566358链接以加载示例。在 Chrome 和 FF 中测试，没有看到描述的行为。让我知道我是否应该使用其他浏览器/版本来重现。

标签： durandal

【解决方案1】：

目前似乎没有明显的答案，但https://github.com/BlueSpire/Durandal/issues/434 有一个问题与此问题相关联。

【讨论】：

是的，我今天补充说，因为它看起来只是与实现的小部件相关的固有性能损失。感谢您的帮助。