Which method will make the page load faster?

Forum Moderators: open

Message Too Old, No Replies

Which method will make the page load faster?

peterinwa

5:04 am on May 12, 2011 (gmt 0)

I have a single webpage that contains information on all 50 U.S. states. There are 50 links at the top to jump down to the state you want, and at the bottom of the information for each state a Back to Top link.

I'm making the Back to Top link into something more complex, and it will require three or four lines of code.

So that I don't have to repeat the code 50 times, and create a burden when I need to edit it, I want to place it in a .js file and call it x. Then below the information for each state I'll simply have:

<script language="JavaScript">document.write(x)</script>

Does calling code from a .js file 50 times slow down the page load? Which method would load faster?

Or is the difference negligible?

Thank you,

Peter

JAB Creations

5:36 pm on May 12, 2011 (gmt 0)

Whoa, WHOA! It's not 1997 any more!

There is NO valid language attribute on the script element, don't use that!

Don't use document.write, it will not work with XHTML.

If you're using bad code it won't matter how you implement something.

Keep all your scripting in a separate file. I keep two script files, index.js and onload.js. The index.js file changes rarely and has all the functions that I use in my work. The onload.js file contains the anonymous onload function (you can not have more than one instance of the onload event) and the file also contains global variables for user preferences that can change over the course of the time; if the user updates their preferences the much smaller onload.js file is forced to reload overriding the cache (onload.js?245425454 Unix date/time stamp).

You really do not want to put any other script elements on the page and the two I mentioned should be in the head element. If you want to force the page layout to finish before the script files are downloaded use the defer attribute.

<head>
<title>Example</title>
<script defer="defer" src="scripts/index.js" type="application/javascript"></script>
<script defer="defer" src="scripts/onload.js" type="application/javascript"></script>
</head>

Do this and you'll set yourself up for much more advanced stuff that will give you a LOT of freedom in the future should you choose to continue to refine your skill. In example my site loads on dial-up initially in ten seconds with each successive page load within two to three seconds. I've offloaded a lot of scripting for optional components that a small percentage of users actually use though I could not do this if I had poor or no coding practices.

Think standards first and then performance and if you also code server side code remember that a server's performance effects every client. However at this point if you're posting code like that you really should focus on using better code. Lastly don't use the innerHTML method which is akin to crowning a queen by throwing the crown at her face like a football. If you stick strictly to these practices you're going to go a lot further than you can imagine. :)

- John

peterinwa

6:43 pm on May 12, 2011 (gmt 0)

I have always kept my script in common.js, which is where I would define x, and then in my header I've had:

<script src="common.js"></script>

I did learn from books in about 1997 and while I greatly appreciate your input, it's over my head. I guess I need to get new books and start over.

Though I don't understand why my dozen websites, all using document.write, work with the half dozen broswers I test them with?

Thank you very much,

Peter

londrum

6:51 pm on May 12, 2011 (gmt 0)

what you could do is this: if the links are all going to appear in the same place (ie, after the same kind of <div> each time), then give each one of those <div>s the same class name.
then create a function which searches through the document for every element with that class name, and add the new link after them.

if you run that function after everything else on the page has loaded, then the users shouldn't notice any slowdown.

and you wont have to add any extra <script> elements to the page either.

Fotiman

7:17 pm on May 12, 2011 (gmt 0)

If you want to force the page layout to finish before the script files are downloaded use the defer attribute.

GAH! Don't do that, it's a proprietary MS-only attribute. There's no need to user defer. Just put all your scripts before the closing </body> tag. Because the browser will only load script files 1 at a time, place them just before the closing </body> tag so that other resources can load in tandem.

JAB Creations

12:42 am on May 24, 2011 (gmt 0)

Fotiman, the defer attribute was standardized in XHTML so it is technically valid and it does have a valid application. Plus by keeping your scrips inside the head element it prohibits poor coding habits such as copying and pasting from w3cschools directly. ;)

- John

Fotiman

12:47 pm on May 24, 2011 (gmt 0)

It may have been standardized, but IE is still the only browser that supports it. It is NOT a good cross-browser solution. And keeping your scripts in the head does not prohibit poor coding habits.

rocknbil

5:29 pm on May 24, 2011 (gmt 0)

So that I don't have to repeat the code 50 times, and create a burden when I need to edit it, I want to place it in a .js file and call it x.

You should do this server side in PHP or any other server side language, if you can. That way it's available if JS is disabled. Javascript uses the client's memory, and while it probably won't be too taxing, it's one more thing to load on your page - and document.write is probably the worst choice in that respect.

The central editing would remain the same, instead you have

<?php include($_SERVER['DOCUMENT_ROOT'] . "/includes/state-dropdown-list.php); ?>

... anywhere you need it.

No PHP? You could use SSI. If you must use JS, do an ajax request that loads a static file or something.