I need a friendly place to ask this question. What is the optimum order to include js and css. I have also had many issues that have boiled down to the incorrect order of plugins (especially Summernote). I have the following at this time:
If I could have advice on this please I will be able to optimise all my other html pages.
Instead of using script tags like that, I recommend using a dependency manager and module loader. For instance, use NPM in your project to declare a dependency on Summernote, and then use it in one of your webpage's scripts like this:
This makes sure that your dependencies aren't declared in the global scope, and will just be available for the scripts in which you need them. Their transitive dependencies are also automatically loaded.
The only script you need to load in the <head> of your page is an implementation of AMD (the module loader, a.k.a. the thing that provides the require() function). I believe you can use RequireJS for this.
For more information, I suggest you look up an NPM and an AMD tutorial, and that you Google around to see if Summernote has a module available that's compatible with AMD.
Here's something that everyone looking for page performance should be aware of. Most modern web clients do not make their requests serially. In other words, fetch CSS #1, JS #1, CSS 2, and so forth. Instead they run multiple requests in parallel. Last time I checked Firefox, for example, it would have up to 10 requests in process by default.
And, since network processes are indeterminate in duration, that means that the exact order in which they complete is also indeterminate.
So when you absolutely positively must assure that some things are there when other things need them, you have two choices:
1. Have the need-er include logic that causes it to wait on the need-ee.
2. Set up a dependency chain as Stephan demonstrated so that the need-er doesn't begin to get get fetched until the need-ee is ready for it.
Either option is good. Which one is best for your situation may vary.
This sort of thing dates way back. Nothing more annoying that trying to manipulate a DOM that hasn't been fully build yet.
Some people, when well-known sources tell them that fire will burn them, don't put their hands in the fire.
Some people, being skeptical, will put their hands in the fire, get burned, and learn not to put their hands in the fire.
And some people, believing that they know better than well-known sources, will claim it's a lie, put their hands in the fire, and continue to scream it's a lie even as their hands burn down to charred stumps.