Page 1 of 1

Newbie Ajax | theoretical question

Posted: Mon Jan 30, 2006 12:14 pm
by MadMaster
Hello everybody!

I'm a PHP web developer, as all of you, but haven't messed up with AJAX before. I've got a (may be) simple question on designing an applicatin, based on AJAX. For example consider an administrative system. I use prototype library for the JS functionality and plan to include Behaviour library also. On the page start I load them and on every request by AJAX I include some inline JS to be executed.

1. The first question is - is it a good approach to load all the JS as inline <SCRIPT> code or should I include external file with all the code inside to separate JS from HTML and PHP (and how to include dynamically an external JS file).

2. Second: When several pages use inserted JS code to work, isn't it possible to "flood" the browser with JS code and make it slowlier? If so I would appreciate any solution.

Written material on any of the problems will be grealty appreciated.

TIA,

MadMaster

Re: Newbie Ajax | theoretical question

Posted: Mon Jan 30, 2006 4:23 pm
by Christopher
MadMaster wrote:but haven't messed up with AJAX before.
Don't you mean "messed with" ;)
MadMaster wrote:I use prototype library for the JS functionality and plan to include Behaviour library also.
Good choices, but not the simplest.
MadMaster wrote:1. The first question is - is it a good approach to load all the JS as inline <SCRIPT> code or should I include external file with all the code inside to separate JS from HTML and PHP (and how to include dynamically an external JS file).
It really doesn't matter as far as the functioning of the page is concerned. I prefer external files because there is then only one copy to update to fix bugs and add features.
MadMaster wrote:2. Second: When several pages use inserted JS code to work, isn't it possible to "flood" the browser with JS code and make it slowlier? If so I would appreciate any solution.
Not that I know of. It is possible to write Javascript that slow down the browser but it is usually the data transfer that takes the time -- not the Javascript code.

Re: Newbie Ajax | theoretical question

Posted: Mon Jan 30, 2006 4:58 pm
by Roja
MadMaster wrote:1. The first question is - is it a good approach to load all the JS as inline <SCRIPT> code or should I include external file with all the code inside to separate JS from HTML and PHP (and how to include dynamically an external JS file).
No, you should use an external file. Reasons to do so:

- Clients that do not support javascript can predictively avoid loading the file entirely. Several cellphone browsers do, saving them lots of download speed. Ditto to at least one of the search engines out there. All good stuff.
- Seperate files = cached files. If the javascript isnt changing, it can be cached (both by browsers and proxies inbetween). Inline in a dynamic file, it cannot be.
- Speed. If done correctly, a browser can render the html first, and then the javascript, *if* it is a seperate file. If not, it will wait until the js is loaded (because it should/must be in the top portion of the page generally). That means a slower perceived loading time for users
- Compression. By having a seperate file, you can gzip that file with a little php magic, shrinking the js quite a bit. (of course, if you gzip everything, this isnt an advantage).

I'm leaving out all the advantages in maintenance, organization, and so forth. Many of the advantages are dependent on how you've set things up, but they are still advantages.

including external js is easy:

Code: Select all

<script type="text/javascript" defer="defer" src="addloadevent.js"></script>
MadMaster wrote:2. Second: When several pages use inserted JS code to work, isn't it possible to "flood" the browser with JS code and make it slowlier? If so I would appreciate any solution.
Right result, wrong cause.

Its possible to cause the browser to appear to crawl, based on including too many *seperate* files. Just like there is an advantage to splitting the js apart from the html, there is an advantage to keeping the js together as much as is logical.

More includes means more http requests. Lets say you are on a broadband connection, and you do a request for a page with several includes (a flash movie, a few js files, some images, etc). Each request may only take 0.5 seconds, roundtrip.

Now, try that same routine on a 56k modem. Now each request adds a full second. With 17 requests for a single page, you end up with 20+ seconds to render a page between all the requests, the rendering, and so on. Thats unacceptable. Keep adding more requests (more js files) and the number will only get higher - eventually to the point where the browser will give up, or your connection will.

So yes, you can cause a browser to crawl, if you structure your js poorly.

Plan well. :)

Thanks a lot.

Posted: Tue Jan 31, 2006 1:28 am
by MadMaster
Thanks a lot, especially to Roja.
First I really meant "Messed UP" :D

But may be I had another concearn about the flood. I didn't mean the amount of requests, but the loaded javascript (anyway it was useful that with the files amount). An example. I load a javascript, anyhow, for example after login. After that I click on the menu, and AJAX loads another HTML portion with JS (inline or JS file). If all is done into a single DIV (for example containing the content), then will the JS from the first request (that was loaded and parsed by the browser from that DIV) be unloaded (and free its memory) or just the new JS will be loaded and thus after 2-3 hours of clicks to cause the browser to have 2MB for example of loaded JS? (sory for the long sentence).

That was what I actually meant when said "flooding" the browser. May be it's more a browser question, than an AJAX one, but anyways.

Thanks again.

Re: Thanks a lot.

Posted: Tue Jan 31, 2006 1:40 am
by Roja
MadMaster wrote:Thanks a lot, especially to Roja
Happy to help.
MadMaster wrote:I didn't mean the amount of requests, but the loaded javascript (anyway it was useful that with the files amount). An example. I load a javascript, anyhow, for example after login. After that I click on the menu, and AJAX loads another HTML portion with JS (inline or JS file). If all is done into a single DIV (for example containing the content), then will the JS from the first request (that was loaded and parsed by the browser from that DIV) be unloaded (and free its memory) or just the new JS will be loaded and thus after 2-3 hours of clicks to cause the browser to have 2MB for example of loaded JS? (sory for the long sentence).
It all depends on the code. You are asking a very specific question about a very abstract scenario.

First and foremost, 2mb of js shouldnt be acting on just one div! But ignoring that, it depends on whether your js/ajax is *replacing* elements, creating new ones, or what. The devil is in the details, and there are no details given here.

Is it possible to use js to slow down a browser? Sure. Is it possible to avoid doing so? Absolutely.

If you want specific advice, share the code, and we'll take a look.

Posted: Tue Jan 31, 2006 1:44 am
by josh
If all of your pages are referencing an external file your browser does not need to unload anything, it simply continues on with the version it has. If you load it inline you are going to get problems with your script colliding variable names with itself, etc... There is no reason to do that


edit = slowness

Re:

Posted: Tue Jan 31, 2006 2:35 am
by MadMaster
Thanks. That probably means that I needn't worry about that.
There was a comment above, that prototype is not the simplest solution. Would you suggest any? I mean not the simpliest solution hence it's gonna set limitations. Something that you've used and tested in various situations and that has proved as "perfect".

I've heard of XOAD. Is it good?