大量のテキストデータをjsの変数に入れたときのメモリデバッグ方法

Question

いつもお世話になっております。

只今開発中の機能で、jsの変数に大量の文字を入れようとしています。

大体文字は1万 ~ 10万文字くらいです。
やりたいことはこの文字列から最初の1000文字だけ取り出す。
その後に次の1000文字を取り出す。
などです。

ただ、この実装を行っているとjsの操作が非常に重くなったりします。
なんとなくjavascriptの変数に巨大なStringを入れているからだろうなぁと思っています。

ただ、ブラウザにメモリが非常に喰われているなどをなんとなくでしか判断できません。
こういうときはどのようにしてjsの操作が重くなっている原因等を突き止めればよいのでしょうか。

ご教示いただけると幸いです。

Answer 1

Chromeの開発ツール(devTools)で説明すると、開発ツールにいくつかタブがある中、"Timeline"というタブがあります。このタブではどの処理が時間がかかっているのかやメモリやDOMに関する情報も見れます。左上の黒い●をクリックして記録開始します。"Timeline"という名の通り、視覚的に時系列でグラフで表示してくれます。
あと"Profiles"というタブもあり、"Take Snapshot"ボタンを押した時点での各種のスナップショットをとります。メモリですと"Take Heap Snapshot"となるでしょう。あまり視覚的なわかりやすさはありませんが、Timelineよりも具体的なメモリ使用状況を把握することが可能です。

あと、ちょっと聞きたいのですが、1000文字ごとに取得するということですが、取得したものは蓄積していくのでしょうか？

Comments

[MasakazuFukami]

ご回答ありがとうございます！！！

僕の理解不足で申し訳ないのですが蓄積とはどういった意味でしょうか？

約10000万文字をjsの変数に入れておき、

```
1ページ目: 1000文字
2ページ目: 1001 - 2000文字
3ページ目: 2001 - 3000文字

...
```

の用にpagerを押したら次の1000文字を表示しようとしています。

マイページajaxでDBからテキストを引っ張り出してきても良いのですが、一括で取得して出し分けしたら一回の通信で済むのでいいかなぁと思ったりしてます！