Why Require.js load jQuery based script after all DOM is loaded?

Question

Recently I have included require.js to my project. I thought it will help me manage my scripts and speed up page loading, adding only this files which are necessary. But result was quite oposite.

My question is, why after added AMD framework all scripts are loading at the end? (see photo) When I was including script via script tag js was loading properly, after DOM (without images etc.) was loaded. When I've added require.js, all scripts were loading after everything on page was loaded (with images), which results in pretty big delay.

I'm concerned, what is the difference between require.js and normal scripts including and then concatenating them into one single file?

My code below, for reference:

require.js scripts structure:

|- main.r.js
|- lib/
   |- config.js
   |- require.js
   |- sliders.js

main.r.js:

require(['./lib/config'], function() {
  require([
    'jquery',
    'modernizr',
    './lib/sliders'
    ], function($, modernizr, sliders) {
      sliders.init();
 });
});

config.js:

require.config({
    baseUrl: 'scripts/',
  paths: {
    jquery: '../assets/jquery/jquery.min',
    modernizr: '../assets/modernizr/modernizr',
    bxslider: '../assets/bxslider-4/jquery.bxslider.min'
  },
  shim: {
    bxslider: {
      deps: ['jquery'],
      exports: 'jQuery.fn.bxSlider'
    }
  }
});

sliders.js:

define(['jquery', 'bxslider'], function($) {
  var maxiSlider = function() {
    var $mSlider = $('.maxi-slider');
    // init slider
    var slider = $mSlider.bxSlider({
      // auto: true,
      pager: false,
      onSliderLoad: function(currentIndex) {
        $mSlider.find('li').eq(currentIndex).addClass('banner-animation');
      },
      onSlideAfter: function($slideElement, oldIndex, newIndex) {
        $('.banner-animation').removeClass('banner-animation');
        $mSlider.find('li').eq(newIndex + 1).addClass('banner-animation');
      }
    });
 }
 return {
   init: function() {
     maxiSlider();
   }
 }
});

Answer 1

When you use a <script> tag and you don't set the async attribute on it, the script is loaded synchronously. Basically, the browser pauses it's interpretation of the HTML at that point, gets the script and executes it right away. You can test that the HTML after the script is not yet parsed with code like this:

<script>
    console.log(document.getElementById("foo"));
</script>
<div id="foo">blah</div>

Assuming there is no element earlier with id="foo", the value printed on the console will be null.

Now, RequireJS loads data asynchronously. There is only so much RequireJS can do to load things early. It can ask the browser to load some data but there's little it can do if the browser decides that finishing parsing the DOM is more important. Actually, in many cases it is probably not that the browser decided anything: it's just that parsing the DOM is fast enough that it completes before the data load. And consider that if you have not optimized your application with r.js, then RequireJs discovers what it needs to load in a piecemeal fashion:

• Module A is required.
• RequireJS loads module A, discovers that it depends on B and C.
• It loads module B, discovers that it depends on D.
• It loads module C.
• It loads module D.

If you use the optimizer, all this loading would (in the most common scenario) be done once. So using the optimizer should help make things snappier. You might want to try it.

There are some use-case scenarios where just using the optimizer is still not enough. For these cases, you can use almond to load your optimized bundle in a synchronous fashion (see this answer.)

You wrote:

I thought [RequireJS] will help me manage my scripts and speed up page loading, adding only this files which are necessary.

The reason we use RequireJS is not primarily to speed up loading but to help manage our scripts. It allows us to modularize our code base, which helps isolating concerns, designing interchangeable components, etc. It is true that in some cases using it would speed up loading, but this depends on the specific characteristics of each application. For instance, if you have an application that supports 25 languages, chances are that your user will use only one so you could load the language-specific files only for one language instead of 25. On the other hand, I'm working on an application with a large core of modules that must always be loaded no matter what. RequireJS does not make things speedier in this case, it just helps me modularize my code.