On Demand Javascript Lazy loading
Download Javascript as and when required, instead of downloading it all on page load. This is a "lazy loading" approach applied to Javascript, and has several benefits:
- Initial page load is faster.
- Overall bandwidth usage is less, since only Javascript that's required is used.
- Deployment is easier as the code takes care of pulling in Javascript, with the coder only ensuring enough is there to kick the process off.
- You can produce snippets of Javascript on the fly - effectively sending back a kind of "behaviour message" advising the browser on its next action. This is a variant of the core pattern described at the end of this section.
- You can bypass the standard "same-domain" policy that normally necessitates a Cross-Domain Proxy. Provided a server exposes a segment of valid Javascript, it can be extracted by the browser.
Conventionally, best practice has been to include Javascript unobtrusively - by including it in one or more script tags.
<html>
<head>
<script type="text/javascript" src="search.js"></script>
<script type="text/javascript" src="validation.js"></script>
<script type="text/javascript" src="visuals"></script>
</head>
...
</html>
On-Demand Javascript builds on this approach to suggest just a minimal initialisation module in the initial HTML:
<html>
<head>
<script type="text/javascript" src="init.js"></script>
</head>
...
</html>
The initialisation module declares whatever behaviour is required to start up the page and perhaps enough to cover typical usage. In addition, it must perform a bootstrapping function, pulling down new Javascript on demand.
visit this link for more information
Tags: javascript, lazy loading, on demand javascript, page load, browser, best practice
posted by
eshwar at 2:44 pm
Comments on "On Demand Javascript Lazy loading"