Angular ng重复缓存(避免在状态更改时重新渲染)

Angular ng-repeat cache (avoid re-rendering on state change)

本文关键字:状态 新渲染 ng 缓存 Angular      更新时间:2023-09-26

我们在Angular应用程序中有巨大的渲染峰值和ng重复。主页面显示了一个巨大的封面图片列表("::"answers"track by"已就位)。第一次加载时,它可以正常工作。

但如果用户更改状态(我们使用UI路由器),然后返回主页,那么桌面上的延迟约为2秒,移动设备上的延迟可达10秒。

它应该是即时的:所有json查询都被缓存。而ng repeat已经渲染过该内容一次。

作为临时解决方案,我们使用angular ux数据网格(https://github.com/obogo/ux-angularjs-datagrid)它可以即时返回到首页,但不应该在水平模式下工作。使用专用网格来缓存ng重复(或它在幕后所做的事情)似乎有些过头了。

因此,问题来了:如何才能避免ng在状态更改时重复重新渲染内容?

如果禁用ng repeat所在作用域的作用域,那么它将不再呈现。它本质上变成了静态内容。这使您可以实际控制渲染的时间。

ux-datagrid实际上使用了这个概念来关闭视图之外的dom,这样angular就不知道它,也无法渲染它。然后当它在视图中时,它会将其挂起。

每个作用域都在一个摘要循环中工作。在摘要周期中,它处理作用域上的$watcher。

如果你去掉那些观察者,它不会消化它,或者它是孩子。

这是ux数据网格在其代码中用于激活和停用作用域的两种方法。您可以将这些复制到另一个对象,并将它们用于相同的事情。

/**
 * ###<a name="deactivateScope">deactivateScope</a>###
 * One of the core features to the datagrid's performance is the ability to make only the scopes
 * that are in view to render. This deactivates a scope by removing its $$watchers that angular
 * uses to know that it needs to digest. Thus inactivating the row. We also remove all watchers from
 * child scopes recursively storing them on each child in a separate variable to activate later.
 * They need to be reactivated before being destroyed for proper cleanup.
 * $$childHead and $$nextSibling variables are also updated for angular so that it will not even iterate
 * over a scope that is deactivated. It becomes completely hidden from the digest.
 * @param {Scope} s
 * @param {number} index
 * @returns {boolean}
 */
function deactivateScope(s, index) {
    // if the scope is not created yet. just skip.
    if (s && !isActive(s)) { // do not deactivate one that is already deactivated.
        s.$emit(exports.datagrid.events.ON_BEFORE_ROW_DEACTIVATE);
        s.$$$watchers = s.$$watchers;
        s.$$watchers = [];
        s.$$$listenerCount = s.$$listenerCount;
        s.$$listenerCount = angular.copy(s.$$$listenerCount);
        subtractEvents(s, s.$$$listenerCount);
        if (index >= 0) {
            s.$$nextSibling = null;
            s.$$prevSibling = null;
        }
        return true;
    }
    return false;
}
/**
 * ###<a name="activateScope">activateScope</a>###
 * Taking a scope that is deactivated the watchers that it did have are now stored on $$$watchers and
 * can be put back to $$watchers so angular will pick up this scope on a digest. This is done recursively
 * though child scopes as well to activate them. It also updates the linking $$childHead and $$nextSiblings
 * to fully make sure the scope is as if it was before it was deactivated.
 * @param {Scope} s
 * @param {number} index
 * @returns {boolean}
 */
function activateScope(s, index) {
    if (s && s.$$$watchers) { // do not activate one that is already active.
        s.$$watchers = s.$$$watchers;
        delete s.$$$watchers;
        addEvents(s, s.$$$listenerCount);
        delete s.$$$listenerCount;
        if (index >= 0) {
            s.$$nextSibling = scopes[index + 1];
            s.$$prevSibling = scopes[index - 1];
            s.$parent = scope;
        }
        s.$emit(exports.datagrid.events.ON_AFTER_ROW_ACTIVATE);
        return true;
    }
    return !!(s && !s.$$$watchers); // if it is active or not.
}

我不确定这是否能完全回答您的问题,因为您正在使用UI路由器。如果视图被重新创建并且没有缓存,那么它仍然会在编译中重新渲染所有视图。然而,如果不是这样,这不仅仅是一次监视,当您禁用此作用域时,它也会禁用该作用域的所有子级。从本质上讲,将它从摘要和所有子节点中分离出来。

重新启用它会将它们全部添加回来。所以你只需一个调用即可关闭ng repeat和其中的所有内容。它一直保持静态,直到您重新启用它。