我熟悉角的消化周期,以及它如何影响长列表和大模型值的性能。我只是好奇你有没有办法解决这个问题,特别是我的案子。我正在构建一个应用程序,它可能需要也可能不需要用户在textarea中输入大文本,例如错误日志,但是由于与大型模型上的双向数据绑定相关的角度固有问题,它会导致我的应用程序挂起。
目前,我要求用户在文件中附加大量内容。但我想知道是否有什么办法可以绕过这个问题。我可以想到的一个潜在的解决方法是不要在文本字段上使用模型,而使用角的轻量级jquery angular.element('#mytext').val()访问文本。但是这种方法的缺点是将JS代码与DOM紧密地绑定在一起,这不是一个好的实践。我对更多的“棱角”风格的解决方案感兴趣。
下面是演示性能问题的plunkr。要查看挂起,开始输入文本区域,您将经历严重的滞后
http://plnkr.co/edit/0wccRJjjlhJqZtdipDLv?p=preview

发布于 2016-02-13 14:34:36
当在元素上使用“借出”选项时,瓶颈不是摘要(这会有所贡献,但可以有效地解决),而是指令。

这种性能问题建议使用自定义指令而不是内置指令(本例中为ngModel)。对于双向绑定,可能是
app.directive('bigText', function () {
return {
scope: {
bigText: '='
},
template: '<textarea>',
link: function (scope, element) {
// .val(value) on directive init
var initialized = false;
// prevents .val(oldValueFromOutside) on input
var internalChange = false;
var $textarea = element.find('textarea');
scope.$watch('bigText', function (oldVal, newVal) {
if (internalChange || (initialized && oldVal === newVal)) return;
initialized = true;
$textarea.val(newVal);
});
// generic JS debounce,
// for ex. https://github.com/niksy/throttle-debounce
var handler = debounce(1000, function () {
var text = $textarea.val();
if (scope.bigText !== text) {
internalChange = true;
scope.$apply(function () {
scope.bigText = text;
});
internalChange = false;
}
});
$textarea.on('change keyup', handler);
// $textarea.off on scope destroy
}
};
});手动维护双向绑定的重要部分是使用internalChange标志,它防止从外部范围获取旧值,如摘要上的newVal (鸡/蛋困境)。
一些东西也可以从角度指令给输入事件为了表现和兼容性的处理中学到。
注意,类似的性能问题可能是由铬虫引起的,而不是由角度应用引起的。
https://stackoverflow.com/questions/35377092
复制相似问题