In what order do the different parts of Joomla insert javascript into the FIFO stack?

Question

There is a lot of confusion on J.S.E about how to include javascript into Joomla in the correct order. I’ve seen a number of questions on J.S.E about it, but they never cover everything completely. Those questions led me to this piece of information

The Joomla API (such as $doc->addScript) uses an array to store the JS files paths. They get rendered in the document in the same order they were inserted into the array (FIFO stack). Once a file path is included in the array, if another API tries to insert the same file, the insertion is ignored. This prevents duplicates, but it also means that the files will be rendered according to when they were first included in the FIFO stack. If the same files are attempted to be inserted again, the order of the files will not be altered.

ORIGINAL REFERENCE https://docs.joomla.org/Adding_JavaScript#Important_notes_for_3rd_party_developers

MY QUESTIONs

• 1: Which parts of Joomla insert javascript into the FIFO stack first?

• 2: What is the insertion order for each of the Joomla parts?i.e. plugins, modules, articles, etc.

I’ll include what I’ve already found out below.

extension files and template override files are processed first and the index.php file of your current template is processed last.

Answer 1

1. Joomla inserts Javascript from several places. It mostly coordinated from JDocument and JDocumentRendererHead. There is no way to know all callers addScript and it better to avoid any dependency on this order.

2. Concerning to insertion order, it mostly follow the execution order:

   • Plug-ings following the associated events (initialization, before render, etc),
   • modules called before the component,
   • main component and modules after the component (according to the template definition).
   • Plug-ings after render, etc

If you have load order dependencies, it is better to load your code at the end (jQuery.ready). It may be slower but it is safe.

Other advanced techniques can be implemented with a Dependency Manager (e.g. RequireJS) or just inserting by hand your Javascript script before < /body>.