大きなコンテンツでAngularsのパフォーマンスの問題を回避する方法
スダカール
私はAngularのダイジェストサイクルと、それが長いリストと大きなモデル値でパフォーマンスにどのように影響するかをよく知っています。私の場合に特に問題の回避策があるかどうか、私はただ興味があります。ユーザーがエラーログなどの大きなテキストを入力する必要がある場合とない場合があるアプリを構築していますが、大きなモデルでのtextarea双方向データバインディングに関連する角度固有の問題が原因で、アプリがハングします。
現在、ファイルに大きなコンテンツを添付するようにユーザーに求めています。しかし、私はこの問題を回避する方法があるかどうか疑問に思いました。私が考えることができる1つの潜在的な回避策は、テキストフィールドでモデルを使用せず、angularの軽量jqueryapiを使用してテキストにアクセスすることですangular.element('#mytext').val()。ただし、このアプローチには、JSコードをDOMに緊密にバインドするという欠点があります。これは適切な方法ではありません。もっと「角度のある」スタイルのソリューションに興味があります。
これがパフォーマンスの問題を示すプランカーです。ハングを確認するには、テキスト領域に入力を開始すると、深刻な遅延が発生します
http://plnkr.co/edit/0wccRJjjlhJqZtdipDLv?p=preview
フラスコになります
The bottleneck is not a digest (which would contribute but could be effectively fought with ngModelOptions 'debounce' option) but a listener added by textarea directive when ng-model is used on the element.
This kind of performance issues suggests the usage of custom directive instead of built-in ones (ngModel in this case). For two-way binding it may be
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
}
};
});
The important part in maintaining two-way bindings manually is using internalChange flag, it prevents getting old value from outer scope as newVal on digest (chicken/egg dilemma).
Some things may also be learned from the treatment that Angular directives give to input events for performance and compatibility.
同様のパフォーマンスの問題は、AngularアプリケーションではなくChromeのバグが原因である可能性があることに注意してください。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
編集
関連記事
Related 関連記事
- 1
Springの@Autowiredは大きなパフォーマンスの問題ですか？
- 2
挿入を伴う大きなテーブルでのmysqlのパフォーマンスの問題
- 3
大きなテーブルでループを使用したPythonのパフォーマンスの問題
- 4
大きなデータでパフォーマンスの問題を引き起こすwhere条件のSQLIN句
- 5
非常に大きな IN (ids) ステートメントによるパフォーマンスの問題
- 6
ローカルでの大きなテキストファイルの結合に関連するパフォーマンスの問題
- 7
反応ネイティブでthis.props.childrenを使用して大きなコンポーネントをロードする際のパフォーマンスの問題はありますか？
- 8
C ++での大きなCSVファイルのパフォーマンスの問題を読み込む
- 9
xslt2を介したxmlへの大きなテキストファイル変換に関するパフォーマンスの問題
- 10
表示：Deck.glReactコンポーネントになしは大きなパフォーマンスの問題を引き起こします
- 11
大きなサイズのパフォーマンス低下で複数のアイコンを描画すると
- 12
Photoshopで大きな画像を操作するときのパフォーマンス
- 13
パフォーマンス-Pythonで文字列の2つの大きなリストを比較する最速の方法
- 14
変数でインデックスを作成するときのSD []のパフォーマンスの問題
- 15
ビューページャーのrecyclerviewに大きなデータをロードする際のパフォーマンスの問題
- 16
Oracleテーブルのレコードを更新する際のEntityFrameworkのパフォーマンスの問題
- 17
単純な更新/選択でのMysqlテーブルのパフォーマンスの問題（大きなテーブル、多くの接続）
- 18
結合を使用した大きな csv ファイルの処理に関する Clover ETL のパフォーマンスの問題
- 19
最大のパフォーマンスで非常に大きな整数を格納する正しい方法は？
- 20
関数を使用するときにeXSLTのパフォーマンスの問題を改善する方法
- 21
パフォーマンスの問題の原因を確認する方法
- 22
パフォーマンスの問題のクエリを特定する方法 - MYSQL
- 23
大きなファイルを含むTempDB-パフォーマンスの問題
- 24
akka リモート アクターを介して大きなメッセージを送信するパフォーマンスの問題
- 25
DynamicResourceでいっぱいの大きなCanvasを使用したローカリゼーションでのWPFパフォーマンスの問題
- 26
SwiftUIで1000要素のリストを作成するときのパフォーマンスの問題
- 27
SwiftUIで1000要素のリストを作成するときのパフォーマンスの問題
- 28
最終的にメモリとパフォーマンスの問題につながる大きなテキストファイルの解析
- 29
静的コンテンツとしての角度 ng-repeat (パフォーマンスの問題)
コメントを追加