KnockoutJS 3.X API 第七章 其他技术(3) 延迟更新

注意:本文档适用于Knockout 3.4.0及更高版本。 对于先前版本,“延迟更新”插件提供类似的支持。

在复杂的应用程序中,由于具有多个交织的依赖关系,更新单个observable可能会触发计算的observable,手动订阅和UI绑定更新的级联。 如果将不必要的中间值推送到视图或产生额外的计算的可观察评估,则这些更新可能是昂贵的和低效的。 即使在简单的应用程序中,更新相关的可观察量或单个可观察的多次(例如填充可观察的数组)也可以具有类似的效果。

使用延迟更新可确保仅在计算的可观察量和绑定的依赖性稳定后才更新。 即使可观察者可能经历多个中间值,也只使用最新的值来更新其依赖性。 为了方便这一点,所有通知变为异步,使用Knockout微任务队列进行调度。 这听起来非常类似于速率限制,这也有助于防止额外的通知,但延迟更新可以在整个应用程序中提供这些好处,而不会增加延迟。 以下是标准,延迟和速率限制模式之间通知调度的不同之处:

  • Standard (标准)– 通知立即并同步。 通常通知中间值的依赖关系。
  • Deferred (延迟)– 通知异步发生,紧接在当前任务之后,通常在任何UI重绘之前发生。
  • Rate-limited (速率限制)– 通知发生在指定的时间段之后(根据浏览器的不同,最小值为2-10 ms)。

启用延迟更新

延迟更新默认关闭,以提供与现有应用程序的兼容性。 要为应用程序使用延迟更新,必须在通过设置以下选项初始化视图模型之前启用它:

ko.options.deferUpdates = true;

当deferUpdates选项打开时,所有observable,computed observable和绑定都将设置为使用延迟更新和通知。 在开始创建基于Knockout的应用程序时启用此功能意味着您不需要担心解决中间值问题,因此可以促进更清洁,纯粹的反应性设计。 但是,当启用现有应用程序的延迟更新时,应该注意,因为它会破坏依赖于同步更新或中间值通知的代码(尽管您可能可以解决这些问题)。

示例:避免多个UI更新

以下是一个有用的示例来演示延迟更新消除中间值的UI更新的能力,以及如何提高性能。

     

UI怨骂:


<div class="example">
    <table>
        <tbody data-bind='foreach: data'>
            <tr>
                <td data-bind="text: name">td>
                <td data-bind="text: position">td>
                <td data-bind="text: location">td>
            tr>
        tbody>
    table>
    <button data-bind="click: flipData, text: 'Flip ' + type">button>
    <div class="time" data-bind="text: (data(), timing() + ' ms')">div>
div>

                    

你可能感兴趣的:(KnockoutJS 3.X API 第七章 其他技术(3) 延迟更新)