Single and multiple files

I have recently received some feedback on a project I did called Notifier.js, in which you can see I have included all of the source images and styles in the JavaScript file. The feedback I received was that having it all bundled up together may be cool, but it is in fact not as performant and harder to maintain (which, if you know JS and CSS is not true... but that is to be debated later).

My reasoning for doing the script this way was two parts:

• fewer requests

• single file include means no mucking about with "where did I store the images, ohh now I have to alter the CSS file... and the JS file.." kind of business.. the KISS principal (Keep It Simple, Stupid!).

Have I in fact taken the wrong approach? Are the downfalls of doing it my way worse than the benefits? I can't see how it would be that much slower just to load the base64 images and style the elements with JS (am I wrong?).

While you are looking, any other feedback would be greatly appreciated.

```
var Notifier = (function() {
var apply_styles = function(element, style_object) {
for (var prop in style_object) {
element.style[prop] = style_object[prop];
}
};
var fade_out = function(element) {
if (element.style.opacity && element.style.opacity > 0.05) {
element.style.opacity = element.style.opacity - 0.05;
} else if (element.style.opacity && element.style.opacity <= 0.1) {
if (element.parentNode) {
element.parentNode.removeChild(element);
}
} else {
element.style.opacity = 0.9;
}
setTimeout(function() {
fade_out.apply(this, [element]);
}, 1000 / 30);
};
var config = { / How long the notification stays visible /
default_timeout: 5000,
/ container for the notifications /
container: document.createElement('div'),
/ container styles for notifications /
container_styles: {
p

Site loading performance depends on the number of HTTP request in many cases. The less of them, the better. This rule justify your reasoning to keep everything in one file that is being loaded with one request.

There are, however, two things that should also be considered:

-
Caches. In normal case, your CSS and image files will be cached and
this should prevent browser from doing too much requests. This, of
course, needs some server side configuration but if anybody cares
about performance, ensuring proper cache configuration is probably
one of the most important things anyway. Of course javascript file
can be cached too but it's not always possible so it just depends on
your workload.

-
Dynamic change of styles and DOM. When all the styles are in single
file, browser may read, parse and apply them all at the same time,
causing only one reflow. When you set them individually, it may do
reflow each time you do the change. Now, in most cases, browsers
will queue some changes before doing reflow, letting changes to be
applied in groups. But this is browser specific and you have no
control over this. Since you are changing styles using properties,
you are actually doing a lot of small changes. It is why it is
generally faster to switch CSS classes instead of changing
individual properties but you can't do this with your approach. You
can, however, use CSS classes as I mentioned still having whole CSS
embedded in your code. Here's how:

var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = "YOUR WHOLE CSS";
document.getElementsByTagName('head')[0].appendChild(style);

Just replace "YOUR WHOLE CSS" with your values. This way whole CSS is loaded at once, you have CSS classes and can apply them easily at once instead of changing each property one by one.

All this is theoretical. You may get different performances on different browsers (or even on different versions of one browser) sine each of them implement some other optimisations techniques. So the only proper way of optimising your scripts is to try and measure. On as many browsers as you can.

StackExchange Code Review Q#15551, answer score: 6