EchoEcho.Com : D-Zine : Speed Pages

Speed Pages :

Javascript

The code for most webpages consists of 50% navigation, 50% content.
The content is usually unique for the page while the navigation most often is the same across the site (or corners thereof).

Now, if only it was possible to save code pieces in external files, we could have the entire navigation cached on the visitor's local machine and seriously speed up the loading time.

Unfortunately it isn't, so we need to be a little creative. While browsers do not allow for client side insertion of HTML code pieces they do allow for insertion of javascript.

So if we could just turn our navigation into javascript pieces, we can achieve what we want.
Fortunately that is easy! All we need to do is change our HTML pieces to javascript document.write sentences.

Look at this example:

HTML:

Hello world<br>
<h1>I AM HAPPY!</h1>

JavaScript:

document.write('Hello world<br>');
document.write('<h1>I AM HAPPY!</h1>');

Simple isn't it?

Okay - one thing to keep in mind is - The HTML code pieces are enclosed in single quotes.
If we have this in HTML: "Simple isn't it?", then the "isn't" part will cause trouble when embedded in a document.write because the single quote will confuse javascript into thinking that the quoting ends there.
To avoid this confusion you need to place a " \ " in front of the apostrophe like this:

document.write('Simple isn\'t it?');

The " \ " tells javascript that whatever follows should be interpreted as text, not javascript.

Look at this example:

First a plain HTML example:

<html>
<head>
<title>Plain HTML example</title>
</head>
<body>
<table><tr><td bgcolor="yellow">
This is the Top Banner!
</td></tr></table>
<br>
This is the content for the page.<br>
bla bla bla...
</body>
</html>

Assume that we wanted to place the top banner in an external javascript.
In that case we'd write this to a file called banner.js:

document.write('<table><tr><td bgcolor="yellow">');
document.write('This is the Top Banner!');
document.write('</td></tr></table>');

The HTML file would look like this:

<html>
<head>
<title>Plain HTML example</title>
</head>
<body>
<script type="text/javascript" src="banner.js"></script>
<br>
This is the content for the page.<br>
bla bla bla...
</body>
</html>

In this example, the banner is just 3 lines of HTML - but you could easily picture an example with 57 lines of HTML that were used to create the page tops of all pages on the site.
Keeping reusable navigation elements in external files can easily decrease loading times to half or less!

A slightly more advanced example:

First look at this plain HTML code that has both a header and a footer:

In this case we can't just save the code in a single javascript file like
we did above.
An obvious solution would be to save the header to "header.js" and the footer to "footer.js".

In that case the resulting page would be:

<html>
<head>
<title>Plain HTML example</title>
</head>
<body>
<script type="text/javascript" src="header.js"></script>
<br>
This is the content for the page.<br>
bla bla bla...<br>
<script type="text/javascript" src="footer.js"></script>
</body>
</html>

The above example would work smooth, but it might be a bit complex to handle each external code piece as a script of its own.
What if we wanted to keep all the code pieces in a single javascript file?

Look at this example for an external javascript file:

function header()
{
document.write('<table><tr><td bgcolor="yellow">');
document.write('This is the Top Banner!');
document.write('</td></tr></table>');
}

function footer()
{
document.write('<table><tr><td bgcolor="yellow">');
document.write('This is the Bottom Banner!');
document.write('</td></tr></table>');
}

If we saved the above code as external.js we could insert the code pieces in the plain HTML file.
The trick is to write each codepiece as a function in the external.js file, then link to external.js in the head of our HTML pages.
Finally, wherever the code pieces are needed, we just insert a function call in our HTML body.

The HTML page would look like this:

<html>
<head>
<title>Plain HTML example</title>
<script type="text/javascript" src="external.js"></script>
</head>
<body>
<script type="text/javascript">header();</script>
<br>
This is the content for the page.<br>
bla bla bla...<br>
<script type="text/javascript">footer();</script>
</body>
</html>

<< PREVIOUS