Is loading dynamic javascript and CSS files a bad idea?

Question

The reason i'm asking this is because i want to write my own javascript framework from scratch. But as my code scales so does my the amount of code to navigate through.

In order to keep a clear overview I thought it'd be wise to split my code into separate files and let the framework load the files by adding the files to the header of my document.

It's not that big yet (<50kb) but considering the fact that it could get bigger; is there a big performance penalty in doing this or is there a better way to do this?

Update @Antony

Bundling and minifying is definitely on my to-do list. I do expect a speed bump in doing so. Still, wouldn't adding files to the header dynamically during the parsing cause the browser to rethink it's parsing and painting process? Is there a penalty here?

function

If you came here looking for a way to load external files via javascript

var loadExternalFile = function (id, filename, filetype, target, callback) {
    if (typeof target === "undefined") {
        target = "head";
    }
    if (filetype === "js") { //if filename is an external JavaScript file
        var fileref = document.createElement('script');
        fileref.type = "text/javascript";
        fileref.src = filename;
        fileref.id = id;
        if (typeof callback === "function") {
            fileref.onload = callback;
        }
    }
    else if (filetype === "css") { //if filename is an external CSS file
        var fileref = document.createElement("link");
        fileref.rel = "stylesheet";
        fileref.type = "text/css";
        fileref.href = filename;
        fileref.id = id;
        if (typeof callback === "function") {
            fileref.onload = callback;
        }
    }
    if (typeof fileref !== "undefined") {
        document.getElementsByTagName(target)[0].appendChild(fileref);
    }
};

// Example
loadExternalFile("example_id", "js/examplefile.js", "js", "document.body");

I'd suggest one of the frameworks already existing for that task like RequireJS or SystemJS. — Sirko, Jan 25 '17 at 18:15
^^ this. Because amongst other things, you can use them to build a pre-bundled production script (singular). And/or, look at jQuery's build chain: https://github.com/jquery/jquery Cloning that project and getting up-and-running with it is dead easy, so you could use that as inspiration for tooling for yours. — T.J. Crowder, Jan 25 '17 at 18:16
I figured there were out-of-the-box solutions for this but wouldn't this create more overhead? The function i wrote does what I need. I'll look into the frameworks you propose, but my purpose is to write my own framework. A framework in a framework sounds ridiculous — DerpyNerd, Jan 25 '17 at 18:21
Your function is simple now, but will get more complicated as your framework grows. Right now you have, eg., problems when a module requires another module to work. The script loading you implemented is asynchronous and there is no (decent) way for the caller module to know, when this is finished. Another framework already solved those problems. — Sirko, Jan 25 '17 at 18:27
Regarding "framework in framework" - have a look at angular, which also includes a jQuery lite to handle the DOM manipulation. — Sirko, Jan 25 '17 at 18:28
@Sirko I could listen to the `onload` or `onreadystatechanged` event of my script tag. But for now there's no need to wait for my externally loaded scripts because they would do what they need to on their own. — DerpyNerd, Jan 25 '17 at 18:35

Kornel · Accepted Answer · 2017-01-25T18:47:31.613

Loading anything using JS hides these resources from browser's preload scanner. Preload scanner runs very early, before any JS is ran at all, before even real DOM is constructed, and schedules resources to be loaded in a way that browser deems to be optimal.

Loading resources with JS might be justified in some situations, e.g.

not all files are loaded for all users (but keep in mind that media can be used on link), and they're large enough that bandwidth savings are more important than latency.
you've measured and found that the browser doesn't load these resources in sensible order (and some of unimportant resources are blocking loading of critical ones). You still might not need JS for it in some cases, e.g. unimportant styles can be in <link> in <body> (it's valid HTML now), theres' <link rel=preload as=…>, etc.

In older browsers (IE, Android) there are bugs in handling of load events for scripts and CSS, so use an existing loader that has already dealt with the edge cases.

Alright, bandwidth and latency are important to me so I will look into RequireJS and see what their approach is. Thanks — DerpyNerd, Jan 25 '17 at 18:47
@RobbieVercammen check out WebPack with require.ensure (chunking) feature. It allows you to have a middle ground between one monolith and thousands of files. — Kornel, Jan 25 '17 at 18:48

score 1 · Answer 2 · edited May 23 '17 at 12:01

1

Performance-wise, it will add perhaps dozen of js files in the page but shouldn't have a huge impact.

I would suggest using this approach while doing development, then compiling your whole library into one minified file before using it into production.

Refer to this post if you would like to see the various ways of doing so :
How do I include a JavaScript file in another JavaScript file?

edited May 23 '17 at 12:01

Community

1
1

answered Jan 25 '17 at 18:19

Antony

1,253
11
19

This technique would have been ok in old days, now with http2 all those practices are harmfull and will make your site slower and not faster Resources: - https://www.youtube.com/watch?v=CSjL1lrNAx4 -https://mattwilcox.net/web-development/http2-for-front-end-web-developers – John Balvin Arias Mar 03 '19 at 03:44

Is loading dynamic javascript and CSS files a bad idea?

2 Answers2