Introduction When
you create rich Ajax application, you use external JavaScript
frameworks and you have your own homemade code that drives your
application. The problem with well known JavaScript framework is, they
offer rich set of features which are not always necessary in its
entirety. You may end up using only 30% of jQuery but you still
download the full jQuery framework. So, you are downloading 70%
unnecessary scripts. Similarly, you might have written your own
javascripts which are not always used. There might be features which
are not used when the site loads for the first time,
resulting in unnecessary download during initial load. Initial loading
time is crucial - it can make or break your website. We did some
analysis and found that every 500ms we added to initial loading, we
lost approx 30% traffic who never wait for the whole page to load and
just close browser or go away. So, saving initial loading time, even by
couple of hundred milliseconds, is crucial for survival of a startup,
especially if it's a Rich AJAX website.
You must have noticed Microsoft's new tool Doloto which helps solve the following problem:
Modern
Web 2.0 applications, such as GMail, Live Maps, Facebook and many
others, use a combination of Dynamic HTML, JavaScript and other Web
browser technologies commonly referred as AJAX to push page generation
and content manipulation to the client web browser. This improves the
responsiveness of these network-bound applications, but the shift of
application execution from a back-end server to the client also often
dramatically increases the amount of code that must first be downloaded
to the browser. This creates an unfortunate Catch-22: to create
responsive distributed Web 2.0 applications developers move code to the
client, but for an application to be responsive, the code must first be
transferred there, which takes time.
Microsoft Research looked at this problem and published this research paper in 2008 ,
where they showed how much improvement can be achieved on initial
loading if there was a way to split the javascripts frameworks into two
parts - one primary part which is absolutely essential for initial
rendering of the page and one auxiliary part which is not essential for
initial load and can be downloaded later or on-demand when user does
some action. They looked at my earlier startup Pageflakes and reported:
2.2.2 Dynamic Loading: Pageflakes A contrast to Bunny Hunt is the Pageflakes application, an industrial-strength mashup page providing portal-like functionality. While the download size for Pageflakes is over 1 MB, its initial execution time appears to be quite fast. Examining network activity reveals that Pageflakes downloads only a small stub of code with the initial page, and loads the rest of its code dynamically in the background. As illustrated by Pageflakes, developers today can use dynamic code loading to improve their web application's performance. However, designing an application architecture that is amenable to dynamic code loading requires careful consideration of JavaScript language issues such as function closures, scoping, etc. Moreover, an optimal decomposition of code into dynamically loaded components often requires developers to set aside the semantic groupings of code and instead primarily consider the execution order of functions. Of course, evolving code and changing user workloads make both of these issues a software maintenance nightmare.
Back
in 2007, I was looking at ways to improve the initial load time and
reduce user dropout. The number of users who would not wait for the
page to load and go away was growing day by day as we introduced new
and cool features. It was a surprise. We thought new features will keep
more users on our site but the opposite happened. Analysis concluded it
was the initial loading time that caused more dropout than it retained
users. So, all our hard work was essentially going to drain and we had
to come up with something ground breaking to solve the problem. Of
course we had already tried all the basic stuffs - IIS compression , browser caching , on-demand loading of JavaScript, css and html when user does something, deferred JavaScript execution
- but nothing helped. The frameworks and our own hand coded framework
was just too large. So, the idea tricked me, what if we could load
functions inside a class in two steps. First step will load the class
with absolutely essential functions and second step will inject more
functions to the existing classes.
I published a codeproject
article which shows you 7 tricks to significantly improve page load
time even if you have large amount of Javascript used on the page.
7 Tips for Loading JavaScript Rich Web 2.0-like Sites Significantly Faster
Use Doloto Split a Class into Multiple JavaScript Files Stub the Functions Which Aren't Called During Initial Load JavaScript Code in Text Break UI Loading into Multiple Stages Always Grow Content from Top to Bottom, Never Shrink or Jump Deliver Browser Specific Script from Server If you like these tricks, please vote for me!
Language
More
Chinese
Taiwan
Deutsch
Italian
Janpanese
Korean
Turkish
Indonesian
Ukraine
Polish
Spanish
Slovenian
Recent articles How to open a car sharing service Vue developer as a vital part of every software team Vue.js developers: hire them, use them and get ahead of the competition 3 Reasons Why Java is so Popular Migrate to Angular: why and how you should do it The Possible Working Methods of Python Ideology JavaScript Research Paper: 6 Writing Tips to Craft a Masterpiece Learning How to Make Use of New Marketing Trends 5 Important Elements of an E-commerce Website How To Create A Successful Prototype For Your PCB
Top view articles Top 10 Beautiful Christmas Countdown Timers 65 Free JavaScript Photo Gallery Solutions Adding JavaScript to WordPress Effectively with JavaScript Localization feature Best Free Linux Web Programming Editors Top 10 Best JavaScript eBooks that Beginners should Learn 16 Free Code Syntax Highlighters by Javascript For Better Programming Top 50 Most Addictive and Popular Facebook mini games More 30 Excellent JavaScript/AJAX based Photo Galleries to Boost your Sites Top 10 Free Web Chat box Plug-ins and Add-ons The Ultimate JavaScript Tutorial in Web Design