CODEWITHSUNDEEP
javascript
Federico
Federico

Reputation: 3920

Conditionally loading scripts

I want to conditionally load a couple of polyfills based on browser version. For example, if someone used a version of IE to access my site that doesn't support document.addEventListener, then it should load the corresponding polyfill.

Yepnope seemed the ideal tool for this, but it has been deprecated in favour of better practices. These are the reasons, according to its developers:

When it comes to loading things conditionally, we suggest that you output a build for each combination of the things you're testing. [...]. Then you can inline a script into your page that only loads (asynchronously!) a single built script that is tuned to the features of that user. All the performance win of conditional loading, and none of the latency problems of loading 100 things at once.

So, how this is different from the original approach of Yepnope? Isn't this exactly what Yepnope was intended for? Are there any other lightweight scripts that can do this without depending on Modernizr or JQuery?

What are the best practices regarding polyfill loading? Detecting browser version or deciding on a feature by feature basis?

Those are a lot of questions, but I think, they are all related to the same issue. Thanks!

Upvotes: 0

Views: 232

Answers (2)

The Spooniest
The Spooniest

Reputation: 2873

In the old approach, one can potentially load many scripts. The script loader (be that Yepnope or something else) tests features that you specify, and for each test, it selects a script to load.

As a simple example, let's say that you want to load your own script, plus a version of jQuery with support for IE<9 if needed, or a newer jQuery if possible:

yepnope({
    "test" : document.attachEvent,
    "yep" : 'jquery-1.11.3.js',
    "nope" : 'jquery-2.1.4.js'
});
yepnope({
    "load" : "myscript.js"
});

In the new approach, you only load one script: it might have several versions, but the browser only concerns itself with one of them. These different versions would to handle different combinations of browser features, but the browser (and user) only ever have to be concerned with one file. The script loader runs its tests, and based on the results, picks which build to download.

Doing this with the example above would require you to build myscript.js twice. One version would be concatenated with jQuery 2.x for modern browsers, and the other would be concatenated with jQuery 1.x for support in old browsers. You could make yepnope work in this situation, assuming you have some other way of creating the builds. It would look like something like this:

yepnope({
    "test" : document.attachEvent,
    "yep" : "myscript-oldie.js",
    "nope" : "myscript-modern.js"
});

But that leaves open the question of what to use for build tools. Many other script loaders -require.js, Browserify, webpack, and so on- already come with their own tools for building scripts. Yepnope doesn't, and the folks behind it decided that other loaders were already building better scripts than they could.

Why do this? Network latency. Many scripts -perhaps most- are small enough that it takes more time to set up and tear down an HTTP request than it does to do the actual work of downloading the file. If you can get them all into one file, then you can get your whole script with only one HTTP request, instead of having to make one request for each of your modules. This improves your performance, even though the amount of data being download hasn't really changed.

Upvotes: 1

smnbbrv
smnbbrv

Reputation: 24541

When it is only a couple of polyfills, it does not matter - the file will be quite small, so you can send it to every browser. Don't forget about caching and compressing - just set up your server properly and your polyfills file will only be loaded once and very fast. Don't overthink your application before you experience performance problems.

Additionally if you'd like to add it specifically for IE, use IE conditional tags

Upvotes: 0

Related Questions