Slow javascript loading html file

Question

This is my first time writing web pages, and I want to include 'header' files, 'navbar' files, and 'footer' files in each page I write.

There was a recommendation to use something like:

<script>
$(function(){
    $("#header").load("header.html");
    $("#navbar").load("navbar.html");
    $("#footer").load("footer.html");
});
</script>

and then just use <div id="header"></div> in place of my ~20 line header text and just place that text in the header file. That way, this header gets changed once and all pages reflect the change.

I have noticed, however, that when I load this file, instead of hardcoding the header in the page, it takes a split second for the navbar/header/etc. to load. Is there any way to speed this up?

"There was a recommendation to use something like..." Whoever recommended that is a bit of an ass. Don't do that. Load it server-side. Doing it client-side is bad for SEO, load times, usability, etc. — ceejayoz
– ceejayoz, Commented Jul 12, 2015 at 19:10
I found the recommendation here ( stackoverflow.com/questions/18712338/… ). Aside from that, I'm not sure what the difference is between loading server side and loading client side. How would the syntax change? — drjrm3
– drjrm3, Commented Jul 12, 2015 at 19:12
Well, for example, in PHP it'd be <?php include('header.html') ?>. It's faster because a) it doesn't involve a HTTP request and b) doesn't have to wait for the page to finish loading the DOM. — ceejayoz
– ceejayoz, Commented Jul 12, 2015 at 19:14
The only reason it's recommended there is because the question specifically says "Is there a way to do this using only html and JavaScript?" If you're restricted to those techs, you're kinda screwed on this front, but in most cases you can do server-side stuff anyways. — ceejayoz
– ceejayoz, Commented Jul 12, 2015 at 19:15
Thanks, that makes more sense. Am I missing something else? When I changed <div id="header"></div> to <?php include('header.html') ?> it breaks everything. — drjrm3
– drjrm3, Commented Jul 12, 2015 at 19:16

nalinc · Accepted Answer · 2015-07-12 19:33:17Z

I agree with @ceejayoz in comments. Just because something is possible, doesnt mean it is supposed to be done that way.

The reason why you are seeing the delay in loading your header/footer is because you are

sending a separate http request to load a template, and
the request is async which essentially means, browser will continue rendering the rest of the page until it gets the complete header.html

Depending on you network speed, this delay could vary from milliseconds to few seconds.

If you want to keep different views(in different files) for separate UI components(headers/footers/main-content) on client-side, I would recommend using some SPA framework(angularjs/ember)

On server-side, you may use php and do something like

<?php include('header.html') ?>
<?php include('body.html') ?>
<?php include('footer.html') ?>

or various templating engines to achieve the same.

As @ceejayoz said, the reason why server side templating would be faster is because:

it wouldn't involve a HTTP request and
it wouldn't have to wait for the page to finish loading. It'll render all templates first and send the compiled page on browser

Godwhacker · Accepted Answer · 2015-07-12 19:19:39Z

That's always going to be slow, and isn't particularly sensible- first, your page loads. Then, jQuery makes three separate ajax calls, each of which will be roughly as quick as loading your whole page.

If you really want to separate out your files into a header, body and footer, I'd suggest doing it with PHP rather than JavaScript.

A simpler solution would be to simply use HTML comments and a decent amount of whitespace to separate the parts of your file.

<html>

    <!-- HEADER -->

    <head>



    </head>






<body>


    <!-- Navbar -->

    <div class="navBar">

        <!-- ..... -->

    </div>








    <!-- Main -->

    <div class="container">


        <!-- ..... -->

    </div>









    <!-- Footer -->

    <div class="footer">

        <!-- ..... -->

    </div>


</body>

</html>

Collectives™ on Stack Overflow

Slow javascript loading html file

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related