3
\$\begingroup\$

I'm currently experimenting with async loading of JavaScript and came up with the following trick to detect when jQuery loads:

var jQueryPromise = new Promise(function(resolve) {
  Object.defineProperty(window, '$', {
    get: function() {
      return this.jQuery;
    },
    set: function(value) {
      if (typeof value === 'function') {
        resolve(value);
      }
    }
  });
  if (typeof jQuery === 'function') {
    $ = jQuery;
  }
});

jQueryPromise.then(function($) {
    // use $ normally here
});

The idea is to have a method which works regardless of how and when jQuery was loaded (via a script tag, async script tag, script created via document.createElement...)

My aim is really just to understand how to best utilise async loading in general - all comments are welcome, especially regarding possible quirks of this (hacky) approach.

In addition, I'm curious whether there are any performance advantages to loading jQuery async and then waiting for the Promise to resolve using this method over just loading it normally before the script (and in which cases would this performance boost happen)?

\$\endgroup\$
2
\$\begingroup\$

I agree with @joseph-the-dreamer. I'd say, requirejs or any other libraries which are implementing AMD, CommonJS or ES6 import approaches will be good choice.

Moreover, from architectural point of view it's quite strange to implement loading logic only for jQuery or any other specific dependency.

In general, I'd recommend you to look at Webpack or Browserify.

\$\endgroup\$
2
\$\begingroup\$

This is... hacky. It's extra code that could have just gone away if you just loaded your scripts through proper methods.

  • If jQuery is ubiquitous, it might be more beneficial to just load it up front.
  • If you have a build step, then compile it as a dependency of your app.
  • If you're doing asynchronous modules, consider using RequireJS.

In addition, browser cache will do its part to reduce loading times. Only the initial load will be slow. Also, async does not help in any way with load speed. It only reduces the time your script will block the HTML.

\$\endgroup\$
  • \$\begingroup\$ Thank you for the insight. My reasoning behind this is that, if I have it this way, I can load all scripts async and minimize blocking of the HTML to a bare minimum (the article you linked implies async pauses the parsing as well, but another claims this not to be the case). I assume systems like RequireJS actually load everything async and resolve dependencies on-the-fly, but I'm trying to replicate similar behaviour myself first, to figure out how things work underneath. \$\endgroup\$ – fstanis Oct 5 '16 at 11:01
  • \$\begingroup\$ @fstanis RequireJS works in a similar manner to async but with a tree of dependencies instead of just one script. It loads dependencies in parallel. When all dependencies are loaded, RequireJS starts your app. \$\endgroup\$ – Joseph Oct 5 '16 at 12:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.