Quantcast



Docs


Blogs


Forums


Samples


Media


Labs


Resources

 




DevCentral > Weblogs > Lori MacVittie - Two Different Socks
 Speeding Up JavaScript
posted on Friday, August 17, 2007 9:55 AM

An interesting article on "How JavaScript is Slowing Down the Web (And What To Do About It)".

The basic premise is that Web 2.0 applications like blogs are using so much JavaScript to load widgets and perform other functions that it's causing the initial page load to be s l o w.

That's so true.

The author has many (okay, there are five) suggestions for improving performance, but one sticks out in my mind, probably because it's core to F5 and its products - and it's not entirely accurate.

3. Load-balance requests by generating different URLs

Most scripts these days give you back the same URL, for example: www.mycoolwidget.com. This is not easy to scale. As the widget becomes more wide-spread, the amount of concurrent requests going through the same server will be quite large. A better approach is to give out different URLs, like this: server1.mycoolwidget.com, server2.mycoolwidget.com, etc. Even though for now they can be pointing to the same domain, in the future there will be an option to split the traffic.

Let's dissect this, because there's a few things that need to be said about this particular suggestion and I'm going to say them.

1. This [a single URL] is not easy to scale

Not true at all. The whole point of load balancing is that a single URL can scale if it's handled by a solution like BIG-IP. A single URL is handled by the load balancer, which in turn intelligently determines which of X number of servers is best capable of handling the request at the time it is received. The load is therefore balanced across a pool of servers.

In fact, I'd argue that a single URL is the easiest thing in the world to scale, especially if you just want straight up, layer 4 load balancing. It's transparent, it's simple, and as long as you can add servers, you can scale to handle just about any load.

2. Give out different URLs

That's not really load balancing, that's purely traffic management and architecture; it's a distributed architectual solution to an age old problem. What this does help with is that it gets around the browser imposed limitations on the number of concurrent connections that can be open to a server.

The issue with modifying the application is that the URLs (another misconception, the author is actually suggesting that you modify the host, not the entire URL) are now hard coded and that makes future architectural changes more difficult because you have to change the code everywhere the URL is hard-coded. A much better option for achieving this functionality is to use an application acceleration product like BIG-IP WebAccelerator because it transparently performs this type of functionality and doesn't require any changes to your code.

The author also forgets to mention caching and compression, both of which can help speed up the delivery of JavaScript. When load balancing is coupled with an application acceleration technology like BIG-IP WebAccelerator you get even better performance because it can intelligently cache those scripts and deliver them, effectively offloading the burden from the server. This means the server has more CPU cycles and resources to respond to requests that can't be cached, like requests for truly dynamic, data-driven content.

I'm not disagreeing that load balancing can help improve the performance of web applications, especially those laden with JavaScript. Quite the contrary! What I am disagreeing with is the author's understanding (and presentation) of load balancing, and the fact that while load balancing and application delivery solutions will certainly speed up the delivery of applications and its JavaScript components, load balancing in and of itself cannot improve the execution of JavaScript once it's on the client, which is really the point of the author's post in the first place.

If you're trying to get content to the client faster and more efficiently, then a load balancing and application acceleration solution (or as we say in the 21st century, application delivery network) is definitely the way to go. As for speeding up the execution of JavaScript on the client?

That's a whole new technology, one that has yet to be invented. 

Imbibing: Pink Lemonade (made with real lemons, or so says the can)




Email This
  del.icio.us
      

Feedback


8/20/2007 1:01 AM
Gravatar Let's say that you want to do some dynamic content function on the web. You have several options, which I am going to loosely group
1) You can do it on the server side using, for example, CGI scripts, PHP, or mod_perl or Java Server Pages.

2) You can do it in a standard way on the client side using Javascript or Java or flash

3) You can marry Internet Explorer and use Active-X with all the risks pertaining thereto.

Option (1) obviously creates the most load on the servers, and the server managers will have to spend money and throw more servers at the problem. However, this is also the safest solution as it forces the server to validate the input, which is a good idea anyway.

Option (2) distributes the computational requirements out to the browsers. To get good performance, the browsers have to run fast processors, but the customers will probably buy them anyway to play games and run vista.

Option (3) is anathema for a couple of reasons. Active-X controls are snippets of PC code and they only run on x86-PCs or something that is forced to look like an x86 PC. In the case of devices that are not PCs, such as cell phones and the like, this is a demanding requirement and frequently not met. Also active-x controls have a history of security problems which are resolved by brute force methods, compared with the "sandbox" that a JVM or a Javascript interpret provides.

Now, I grew up in the aerospace business and in my mind, things have got to be reliable. That's one of the reason why I love BigIPs - they are intrinsically reliable. So I like option 1 because it is the safest. The code runs on a server which is configuration controlled and protected from harm by a front end. With the load balancing capabilities of a BigIP, you can throw a little expensive hardware at the problem or a lot of cheap hardware at the problem (or some combination of the two) and it will work well. I don't have to worry that there is a misconfigured client or a malicious client, and I don't have to worry about some hacker capturing my code and reverse engineering it to find a vulnerability.

Now, a little bit of Javascript or Java will make a page a lot more responsive and interesting, and that's not to be trivialized. But if the option exists of providing a function that is close to the user or far from the user, I recommend keeping it away from user in the server room.
Jeff Silverman

8/26/2007 9:25 PM
Gravatar The single URL strategy has a major downside, though it is certainly cleaner than having to deal with many URLs. Since HTTP 1.1 says that user agents and servers SHOULD have only two concurrent connections, requests for multiple resources can easily develop into blocking operations. If, say, I have a page that includes twenty images to download, my browser (in its default config) will only download 2 images at a time. If I put those images on multiple "servers" (e.g. a.images.example.com, b.images.example.com, c.images.example.com) then I'm able to download two images from *each* of the servers. Accomplishing this without a content management system - or some fancy HTTP response rewriting - could be onerous, but it's likely worth it for some media-rich sites/applications.

Best regards,
Scott
Scott Conroy

8/27/2007 4:36 PM
Gravatar This is a good discussion. There are definitely cases for all kinds of solutions. I have one more:

First, it's important to remember this key rule of user interface design:

End-User Responsiveness != Speed

In any application (web or otherwise) end-user responsiveness (define) is critical. Also note here.

With this in mind, sometimes what an app needs is to make a page immediately viewable/clickable, not so much "fully downloaded". Making the whole page download quickly is great too (and critical in many cases), but the solution for an "instantly" viewable/clickable page can be much simpler:
1) Statically declare the dimensions of all images on your page (this allows the browser to immediately display the page to the user, minus images, while the images are downloaded in the background).
2) Balance your use of javascript in-line vs. externally sourced-in. Reducing the number of separate files to be downloaded before the page can be displayed is key. If you've only got a few small lines of javascript, put it in-line (perhaps using server side includes). Or if you use several javascript files, consider combining them into a single file (this also helps to achieve better HTTP compression performance, by compressing more content at once).
3) Test your use of HTML tables in Internet Explorer and Firefox to make sure they can display the page without waiting for images to be downloaded. If not, test alternative table layouts/settings.

Mike Lowell
 Leave Feedback
Title  
Name  
Email
Url
Comments   
Please add 7 and 4 and type the answer here: