View Full Version : Memory Usage

22 Feb 2011, 5:33 AM
I am implementing a custom panel type for a project I am working on and am having serious memory usage issues when I expand from a simple toy example to a case more likely to be seen in actual use.

What I am trying to do is build an application that lets users upload a text file and graphically cut it into smaller text files at whitespace breaks. My method has been to place a "space" object between each word. A space object is nothing more than an extended Container with some functions to make it look and work correctly. Each word also gets a container so it can be colored. This would be just one component of many to manage texts.

I have the toy example running at: http://cs.wheatoncollege.edu/~amos/divi/cutterpanel.php

It worked like it was too good to be true with only 400 words. Unfortunately, it gets very expensive in both memory and speed in a 17,000 word text file with 16,999 whitespaces. Chrome was using 750MB for that tab alone and it took over 40 seconds to load. For my purposes (and hopefully everybody's) this is very unacceptable. I would not even consider 17,000 words a large text either.

Profiling the code, rendering is the biggest time sink. I had figured it would be the coloring or possibly initialization that was the time sink but whatever I thought it was, the problem wasn't explicitly my code, but the sheer mass of data.

So, my question is, how can I make clickable things with as little overhead as possible? Or am I going to have to re-engineer my use model from the ground up?

I have been working on a second solution where I keep track of spaces manually and insert my own html into a single Container in the Panel, but Ext keeps track of those too without explicitly creating the element, thus using a lot of memory. It uses only half the memory and runs decently quick, but that does not include word objects and I haven't come up with a good way to color it.

BTW, I am quite new to ExtJS, and building any large project on the web.