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, Jul 12 '15 at 19:10
I found the recommendation here ( http://stackoverflow.com/questions/18712338/make-header-and-footer-files-to-be-included-in-multiple-html-pages ). 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, Jul 12 '15 at 19:12
Well, for example, in PHP it'd be ``. 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, Jul 12 '15 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, Jul 12 '15 at 19:15
Thanks, that makes more sense. Am I missing something else? When I changed `
` to `` it breaks everything. — drjrm3, Jul 12 '15 at 19:16

nalinc · Accepted Answer · 2015-07-12T19:33:17.560

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

score 0 · Answer 2 · answered Jul 12 '15 at 19:19

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>

Slow javascript loading html file

2 Answers2