Scripts - Load all or split?

Asked

Viewed 56 times

5

I have a page with several static elements, these which, load dynamic elements, basically all in body distributed in divs, via Ajax.

These dynamic elements use several functions, relative to each of them.

When I then load element X, I need functions X. When I load element Y, functions Y.

Doubts:

  • Is it "correct" to load part of the script (which would each function refer to the loaded element) only when loading such an element? (because the scripts would be inside the Divs)
  • Or the ideal would be a script with all functions, by clicking on head? (but this would carry too much unnecessary function)
  • There is an "autoload" or some dynamic way of loading scripts?
javascript jquery

  • As a form of study I would recommend that you do both ways and test the result.

  • So, it worked normal, in both cases... But scripts in the middle of the content, would be right? It gets weird, but it works.

2 answers

4


I don’t have a testing environment to validate this technique, but it exists and is even described in that article by Google itself. But as I’m saying it’s up to you to test for the result...

What we’re gonna do is a preload of script. This way you can have a main script that will load with priority, and on script href="carrega-depois.js" you do the preload for it to load after the first rendering is complete.

The value preload of the attribute rel of the element <link> allows you to write declarative search requests in your element <head> of HTML, specifying features that your pages will need right after loading.

Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content

The value of the attribute rel="preload" can be applied to various file formats including CSS, JS, fonts, images and more. You should define the corresponding attribute as depending on the file type. For CSS, the value should be as="style" and for Javascript as="script". Article with more details

<link rel="preload" href="carrega-depois.js" as="script">

<script>
  // Mais tarde, depois de alguma condição ter sido atendida, nós executamos o pré-carregado 
  // JavaScript inserindo uma tag <script> no DOM.
  var usedLaterScript = document.createElement('script');
  usedLaterScript.src = 'carrega-depois.js';
  document.body.appendChild(usedLaterScript)
</script>

This is a very thorough article about preload and prefetch that might help you, I recommend you read: https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf

0

Hello. I usually minify all my scripts in a single javascript file, this speeds up when it comes to Load and improves the performance of the page. I recommend doing it that way. If you want to load the scripts "dynamically", below is an example of a function that I already used in a project to do what you need.

function dynamicallyLoadScript(url, callback) {
        // Adding the script tag to the head as suggested before
        var head = document.head;
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = url;

        // Then bind the event to the callback function.
        // There are several events for cross browser compatibility.
        script.onreadystatechange = callback;
        script.onload = callback;

        // Fire the loading
        head.appendChild(script);
    }

In the example I posted, as the first parameter, you will pass the URL of the file you want to load, and in the second parameter, some callback function to be executed as soon as the file is loaded if you want.

I hope I helped. Hugs.

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.