メニューを閉じる

テクノデジタルグループ

メニューを開く

2017.12.08

プログラミング

BoopstrapのDateRangePickerを使っているとページが重くなる

坂東です。

特定のWebページをブラウザで閲覧していると、だんだん重くなるという報告が クライアントありました。
そのページはAJAXバリバリで、画面遷移なしで数時間も開きっぱなしになる類の設計です。

こういうときの原因は大体メモリリーク。
ChromeのDeveloper Toolsで調べると、たしかに発生している。
でもGoogle MapsやSocket.ioなど自分の実装外の所で、しかもリークは軽微なので3日開きっぱなしでも大丈夫なくらい。

いろいろやってると、カレンダーを開く操作をするたびbody直下にこれが延々と増えてく。

<div class="daterangepicker dropdown-menu single opensright show-calendar" ・・・

カレンダーの表示にBootStrapのdaterangepickerを使っています。

$('#ELEMENT').daterangepicker({…})

このELEMENTはAJAXで何度も作っては消してをする部分なのですが、消した後にdaterangepickerだけが残っていたわけですね。
こうやって明示的に消すようにしました。

$('#ELEMENT').data('daterangepicker').remove();

おわり。

 


【記事への感想募集中!】

記事への感想・ご意見がありましたら、ぜひフォームからご投稿ください!
  • こんな記事が読んでみたい、こんなことが知りたい、調べてほしい!という意見も募集中!
  • いただいた感想は今後の記事に活かしたいと思います!

感想フォームはこちら


【テクノデジタルではエンジニア/デザイナーを積極採用中です!】

下記項目に1つでも当てはまる方は是非、詳細ページへ!
  • 自分でアプリを作ってみたい
  • ITで世の中にワクワクを生み出したい
  • 使いやすさ、デザインにこだわったWebサイトを開発したい

採用情報の詳細はこちら


Qangaroo(カンガルー)

  • 徹底した見やすさと優れた操作性で、テストの「見える化」を実現。
  • テストの進捗が見える。開発がスマートに進む。
  • クラウド型テスト管理ツール『Qangaroo(カンガルー)』

【テクノデジタルのインフラサービス】

当社では、多数のサービスの開発実績を活かし、
アプリケーションのパフォーマンスを最大限に引き出すインフラ設計・構築を行います。
AWSなどへのクラウド移行、既存インフラの監視・運用保守も承りますので、ぜひご相談ください。
詳細は下記ページをご覧ください。

https://www.tcdigital.jp/infrastructure/

最近の記事