フォーカス設定でメモリリークしてしまう

[Masanori Saki]

初めまして、佐木と申します。

画面内の任意の入力要素にフォーカスを設定するディレクティブを作成しましたが、

element.focus() にてフォーカスを設定する処理を実行すると、

ブラウザの使用メモリが数MByte増えて、画面リフレッシュしても解放されずにいます。

どなたか同じような問題を解決された方いらっしゃれば、対応方法についてご教授頂けませんでしょうか。

【ディレクティブ】

function xxAutofocus() {
  return {
    restrict: 'A',
    link: function(scope, element, attr) {
      ・・・
      element.focus();
    }
  };
}

【HTML】

<input ng-model="xxx.xxxx.xxxx" xx-autofocus >

※ngModelを指定した場合のみ数Mのメモリリークが発生するようです。

【環境】

ブラウザ：IE 11

Angular：1.2.28

JQuery：2.1.1

jQuery UI：v1.11.3

Bootstrap：v3.3.1

[Masanori Saki]

自己レスです。

あれからいろいろ試しているのですが、

発生条件について新しくわかった項目もありますので、

以下にまとめさせていただきます。

【発生条件】

• AngularJS 1.2.28 を使用
• ngSanitizeモジュールをインストール済み
• ngModel を設定した テキストボックス（type=text のinput要素） に フォーカス設定する
  （チェックボックスやリストボックスへのフォーカス設定では発生しない）

何かわかる方がいれば、宜しくお願い致します。

[Shunpei Ootani]

はじめまして、大谷(@tanipee323)と申します。

難しい問題ですね。
手元に同等の環境を用意できないので、動作確認等をしたわけではありませんが

お役に立てればと思い投稿させてもらいます。

最初の投稿文から感じたのは、ngModelがrequireされた時にリークが発生するのかな。

ということでした。

・ngModelは残しつつ、xxAutofocusを外したらどうなるでしょうか？

・ngSinitizeがInjectionされていない場合はどうなりますか？

また、AngularJS本体のVersionUPは検討されましたでしょうか。

1.2.28と1.3.0でもInputDirectiveの実装が少し変わっているのでもしかしたら解決するかもしれません。

2015年7月8日水曜日 18時02分49秒 UTC+9 Masanori Saki:

[Masanori Saki]

ご連絡ありがとうございます。

> 最初の投稿文から感じたのは、ngModelがrequireされた時にリークが発生するのかな。

⇒"requireされる" というのが理解できなかったのですが、もう少し詳細を教えていただいてもよろしいでしょうか。

上記以外で頂いた質問について確認してみました。

> ・ngModelは残しつつ、xxAutofocusを外したらどうなるでしょうか？

⇒input要素にフォーカスされない場合はメモリリークは発生しませんでした。

　まあディレクティブを介さずに、直接 "document.getElementById('xxxx').focus() とした場合はリークしました。

> ・ngSinitizeがInjectionされていない場合はどうなりますか？

⇒ngSinitizeを外してみましたが、メモリリークは発生していました。

　ngSinitizeはリークとは関係ないようです。

またAngularJSのバージョンを1.3（最新版）にあげてみましたが、同様の問題が発生するようです。

上記に加えて、 angular.js の内部処理を追って、原因箇所を絞り込んでみたのですが、

リークの発生は、angular 標準の input ディレクティブ（= textInputType 関数）内で、element に対して

いくつかのイベントを設定していますが、このイベントを設定した際に、リークするようです。

具体的には、'compositionstart'、'compositionend'、'input'、'change'のイベントのいずれかを

設定した際に発生しました。

input ディレクティブ（= textInputType 関数）では、上記以外に'keydown' や 'paste cut' のイベントも

設定していましたが、これらのイベントではリークは発生しないようです。

上記のイベントとフォーカス処理でのリークがどうしても結びつかず、

手詰まり状態になってしまいました。

JQueryも合わせて使用しているのですが、このあたりで何か問題があるのでしょうか。

引き続き調査してみます。

2015年7月9日木曜日 11時45分21秒 UTC+9 Shunpei Ootani:

[Shunpei Ootani]

調査ありがとうございます。

requireされるというのは、ng-modelディレクティブが設定されていることを指していました。

私の予想では、focusに関係無くinput type=textなDOMに対してngModelディレクティブがある時に

リークが起こるのではないかと思ったのですが。

そうではなさそうですね。

2015年7月9日木曜日 19時29分37秒 UTC+9 Masanori Saki:

[Masanori Saki]

自己解決しました。

AngularJSというよりはJQeuryによる問題でした。

画面のアンロード処理で、JQueryイベントを破棄する処理を追加することで解消しました。

お騒がせしました。

2015年7月10日金曜日 10時18分54秒 UTC+9 Shunpei Ootani: