Forward declaration of javascript functions in index.html

May I ask you to look at the following Stack Overflow article:

 Could you please advise me how to modify an  index.html with boostrap.min.js and jquery-2.1.4.min.js placed at the end of index.html so that HTML  pages load faster so that I can use forward declaration-in-javascript?
camster123Senior C++ Software EngineerAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Dave BaldwinFixer of ProblemsCommented:
As they say in that article, JavaScript doesn't work that way.  JavaScript Frameworks and libraries need to go in the head section in the order that they are used.  JavaScript does not have an intelligent compiler that will put things in the correct order for you.
Julian HansenCommented:
so that I can use forward declaration-in-javascript?
Is this so you can issue in page jQuery without having to place it in a <script> section at the end after the jQuery / BS include?
camster123Senior C++ Software EngineerAuthor Commented:
Julian Hansen, Yes I would like to issue in page jQuery without having to place it in a <script> section at the end after the jQuery / BS include. Thank you.
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Julian HansenCommented:
As Dave says - out of the box you can't do it the way you want.

First step - ask yourself why you are doing in page queries - it seems odd you are taking the trouble to place scripts at the end of the page and then going and putting jQuery in the middle - seems like you are defeating the purpose of relocating your jquery and bs scripts. If you are going to do in page scripting - might as well include your scripts at the top. Personally I am not sold on the placement at the bottom as being that much of a time saver - if your scripts are common most likely they are cached and if not the first page load might be slower after that cache kicks in. That coupled with variance on network speed doesn't really (in my view) make for a solid enough argument that placing them at the end is of enough benefit to warrant re-engineering your site to fit around that. An finally, most pages using script are doing so for interactive interfaces - so while the page may appear to load quicker - in essence it does not really become active until the scripts have downloaded and run.

Having said that - and being a firm believer in solid design - random scripts throughout the page is something that screams bad design. There are 101 reasons why you should not be doing this - it makes it harder to debug your page - there is risk of some embedded code somewhere in the page messing around with other code etc etc. Yes there is the argument that doing it this way allows you to modularise code (pluggin) etc so you can include everything related in one place - but that is not enough of a benefit to make it an attractive option.

If you are going with the bottom of the page for performance approach then you should be structuring your script in a single script file that is loaded at the end. All in page script you put in that file and minimize it.

What about variable script you say? Good point - there are many instances where script output is dependent on page state - or at least data input to script is dynamic. This can be achieved in a number of ways.
1. Output of plain javascript that dumps variables or data structures that can be then used by script
2. Better - a function in your code to register variable output - this is effectively an array that is added to server side with variable and data output. The script checks for collisions on variable names. A process runs to dump the variables to <script> tags at the end of the document before the inclusion of the custom scripts.

Bottom line - if you are not specifically designing your page to cater for structured script output then I wouldn't be worrying about where you place your jquery and bootstrap scripts - bad in page design will nullify any benefits the former might bring.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
camster123Senior C++ Software EngineerAuthor Commented:
Dave and Julian's solutions were very useful to me.
Julian HansenCommented:
You are welcome.
Dave BaldwinFixer of ProblemsCommented:
Glad to help.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.