3

I have a php script that reads an XML file and modifies it with SimpleXML. After all the modifications are done script saves the file (size ~ 2.8 mb).
I need to load this XML file with jQuery and it takes quite some time. Is there a way to compress/minify my XML file to reduce loading time in my AJAX call.

UPDATE:

The XML file contains SVG for the webpage (large metabolic map) therefore it has to preserve all the contents of XML-nodes.

lanan
  • 2,602
  • 2
  • 20
  • 29
  • Maybe try using less redundant format like json or even bson if you want smaller file sizes. if you want even smaller file sizes you need to create you own specific binary format. – Dani Aug 08 '11 at 17:37

2 Answers2

7

EDIT The OP made clear that this is about an SVG file after I wrote my answer.


Don't transport 2.5MB of XML to the client if you do not absolutely need all of it on the client (and I doubt you do). A better strategy is to use the XML file like a database:

  • Create a proxy page in PHP that accepts XPath expressions and returns relevant parts of the XML only.
  • Use jQuery to issue Ajax requests that fetch those relevant parts when it becomes necessary (i.e. when the user triggers an action).
  • Use memcached or another caching technique to prevent full XML parsing on the server for every request.
  • Depending on your application use profile, use memcached to cache individual Ajax responses, as well. Additionally, set HTTP caching headers so that the client does not re-request stuff that is still valid.
  • Enable gzip compression for the PHP Ajax responses to save response time and bandwidth.

It's a little more work that way. but it will boost speed — probably by several orders of magnitude.

Tomalak
  • 306,836
  • 62
  • 485
  • 598
  • My XML contains large SVG that I load into my webpage (inline) after user submits a form (SVG file is modified with PHP according to the form data). So I guess I do absolutely need all of it on the client....right? – lanan Aug 08 '11 at 17:47
  • @Shvetusya: Yes, that sounds like an exception to the rule. ;) But if it's "only" a graphic, why do you parse it with jQuery? — *(Enabling gzip compression for the transfer is a good idea, though. XML is pretty repetitive and therefore responds well to zipping.)* – Tomalak Aug 08 '11 at 17:49
  • I have to make it "zoomable", add tooltips for graphics elements, highlighting on mouseover etc. Basically I was looking for something to help me to remove all the white-space in my XML since I think that wil reduce file-size significantly. – lanan Aug 08 '11 at 17:53
  • @Shvetusya: Well, zipping will also help with the white-space. The file size is only a problem for transfer, not so much for parsing. Depending on how you *create* the SVG (library?), you can try to prevent whitespace from being created in the first place? – Tomalak Aug 08 '11 at 17:58
  • So I guess I should try to zip XML with PHP ZipArchive and then use [this method](http://stackoverflow.com/questions/2095697/unzip-files-using-javascript/2097303#2097303) to extract in JS. I don't create SVG from scratch but modify contents of existing file (no SVG library) therefore all the whitespace is already there. – lanan Aug 08 '11 at 18:18
  • @Shvetusya: Don't! What I mean is transparent HTTP gzip compression, like with this: http://php.net/manual/en/function.ob-gzhandler.php — This should bring down resonse size quite a bit and is completely transparent to the client, no need for a change there. – Tomalak Aug 08 '11 at 18:58
  • Alright! Thank you for your help. Ill try that method seems like it will be sufficient for my project. – lanan Aug 08 '11 at 19:10
  • @Shvetusya: If you have measurable success I'd be interested to hear about it. Also if yout don't, of course. – Tomalak Aug 08 '11 at 21:35
1

Don't transport 2.5MB of XML to the client - period. There MUST be a better way to do what you are trying to do. Perhaps you can add pagination so you don't have to load all the results at the same time - but can instead only send 20 or so to the client as needed.

Second, don't use XML - use JSON since it will be at least 20% smaller and in a native format for JavaScript which will cut back on client-side processing.

Xeoncross
  • 50,836
  • 73
  • 238
  • 351