Dynamically adding JavaScript and CSS: Speed and Performance (Need-to-Know)

Question

Does anyone know, in the grand scope of things, what are the costs of dynamically adding and removing style sheets from a webpage while it is live (real-time script actions as seen below). I understand that over all CSS compiling speeds are much faster than other compilers, but I would like to understand how fast and if/how that effects HTTP Requests while on the page. I would also like to know how JavaScript affects the page if initially there is a script loaded and then it is swapped out.

I am looking to ease the strain of having to switch from "Full-Screen" to "Mobile" in a browser and cross-platform webpages. I am using a combination of Media Queries through JavaScript and CSS in order to serve all (as many as I can) in different scripts and style sheets.

...
<head>
<meta charset="utf-8">
<title>...</title>
<script type="text/javascript">
function loadSecondary(){
    //For full screen do nothing.
    if(window.innerWidth > 652 && document.getElementsByTagName("link")[0].id == "mobile") {
        //Remove the current style sheet
        sheet = document.getElementById("mobile");
        sheet.parentNode.removeChild(sheet);
        //Load the page again.
        loadPrimary();
    } else if(window.innerWidth < 651 && document.getElementsByTagName("link")[0].id == "full") {
        //Remove the current style sheet
        sheet = document.getElementById("full");
        sheet.parentNode.removeChild(sheet);
        //Load the page again.
        loadPrimary();
    }
}
function loadPrimary() {
    var fileref = document.createElement("link");
    fileref.setAttribute("rel", "stylesheet");
    fileref.setAttribute("type", "text/css");

    if(window.innerWidth > 652) {
        fileref.setAttribute("id", "full");
        fileref.setAttribute("href", 'css/stylesFull.css');
        document.getElementsByTagName("head")[0].appendChild(fileref);
        console.log("Full");
    } else {
        fileref.setAttribute("id", "mobile");
        fileref.setAttribute("href", 'css/stylesMobile.css');
        document.getElementsByTagName("head")[0].appendChild(fileref);
        console.log("Mobile");
    }
}
</script>
</head>
<body onload="loadPrimary()" onresize="loadSecondary()">
...

Why can't you measure this using your browsers dev tools? The main issue here rather than media queries is that your browser won't be able to use a look ahead scanner to prefetch the css files, that may or may not be an issue. — Rich Bradshaw
– Rich Bradshaw, Commented Jul 25, 2014 at 20:33
it would be better not to wait until onload() to reshuffle the look of the page: you can even call it from the head section so that there is no visible re-adjusting — dandavis
– dandavis, Commented Jul 25, 2014 at 20:46
I would still have visible re-adjusting in the case that (in full screen mode > 652px) onload calls the primary(), the full screen sheet, when it is already loaded and the mobile sheet is not loaded. I understand where you are coming from though, these are all great suggesting and have helped a lot already. Thank you — Sam
– Sam, Commented Jul 25, 2014 at 20:58

Travis J · Accepted Answer · 2014-07-25 20:36:37Z

2

Unless the script contains an algorithm with high time or space complexity, the execution should be near instant (less than 10 milliseconds). The css will probably take effect even faster.

The only thing concerning speed or performance to consider is the loading itself of these files. If they are cached, it should also be very fast. However, if they are not cached and have not been accessed previously then their loading time will depend on several factors (such as connectivity, bandwidth, etc.).

These factors of downloading the actual files are all that should be considered with regards to speed and performance. To alleviate it, the files could be preloaded just to trigger the cache. If that is accomplished, there should be no negative hits to performance or speed using or swapping css and javascript files.

answered Jul 25, 2014 at 20:36

Travis J

82.5k43 gold badges213 silver badges280 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sam Over a year ago

That is a very articulate and understandable way to put it. Reducing server requests is the challenge. Thanks

Collectives™ on Stack Overflow

Dynamically adding JavaScript and CSS: Speed and Performance (Need-to-Know)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related