Performance Difference Between JavaScript Created Inline Styles and JavaScript Created Stylesheets

Performance difference between JavaScript created inline styles and JavaScript created stylesheets

I don't have a good general answer to your question (and I'm not sure there is one), but I've run some experiments with the example you posted on Chrome 57.0.2987.98 beta, using the dev tools timeline.

Here is a breakdown of the work done in the single frame which updates 10,000 <p> elements with inline styles (left) and a dynamic stylesheet (right):

inline
stylesheet

For comparison, here are the results for the same test with 100 <p> elements:

inline
stylesheet

In summary, for a small number of elements, the difference is negligible. For a large number of elements, when using inline styles, the browser spends more time scripting (which is to be expected, since there is a heavy loop) and recalculating styles (I think this can be explained by the browser having to parse one style rule per-element rather than a single common style rule).

All other steps take approximately the same amount of time. In particular, the paint time does not increase when using inline styles.

For reference, I had used the following test page.

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <button id="add-stylesheet">Stylesheet</button>
    <button id="add-inline-styles">Inline</button>
    <script type="text/javascript">
        let stylesheet = document.getElementById('add-stylesheet');
        let inline = document.getElementById('add-inline-styles');

        stylesheet.addEventListener('click', addStylesheet);
        inline.addEventListener('click', addInlineStyles);

        function addStylesheet() {
            let style = document.createElement("style");
            style.appendChild(document.createTextNode(""));
            document.head.appendChild(style);
            style.sheet.insertRule('p { text-align: center }', 0);
        }

        function addInlineStyles() {
            let nodes = document.getElementsByTagName('p');
            for (let node of nodes) {
                node.style.textAlign = 'center';
            }
        }

        // initialize <p> elements
        init(10000);
        function init(numElements) {
            for (let i = 0; i < numElements; ++i) {
                let p = document.createElement('p');
                p.innerText = 'testing'
                document.body.appendChild(p);
            }
        }
    </script>
</html>

What is the actual difference between using an inline-style and using a css-in-js library like styled components in React?

First, your styled.div example is wrong, as in CSS-in-JS you write actual CSS and not an Object-like style:

// "Real CSS"
const Div= styled.div`
  background: blue;
  color: white;
`

Second, CSS classes are generally better, also, inline styles are considered bad practice as it is hard to re-use and maintain styles.

CSS classes are generally better for performance than inline styles.

So in conclusion:

In inline styles, you write Object-like styles vs. actual CSS
Writing CSS allows all the benefits of CSS (like selectors).
Re-use and maintaining CSS is much easier than inline styles.
The real debate is between CSS-in-JS vs. CSS modules vs. SASS vs. Normal CSS (for that you can google or read related questions in SO).
Inline styles considered bad-practice as in addition they override all defined styles.
Inline-styles are limited in their functionality (try animating something in inline style or even implementing a media query).

External CSS vs inline style performance difference?

The performance boost that your friend mentioned is probably too trivial compared to the amount of performance boost (through other factors) using a CSS file.

Using the style attribute, the browser only paints the rule for that particular element, which in this case is the <div> element. This reduces the amount of look up time for the CSS engine to find which elements match the CSS selector (e.g. a.hover or #someContainer li).

However, putting styling at element level would mean that you cannot cache the CSS style rules separately. Usually putting styles in CSS files would allow the caching to be done, thus reducing the amount of load from the server each time you load a page.

Putting style rules at the element level will also make you lose track of what elements are styled what way. It might also backfire the performance boost of painting a particular element where you can repaint multiple elements together. Using CSS files separates the CSS from HTML, and thus allows you to make sure that your styles are correct and it's easier to modify later on.

Therefore if you look at the comparison, you would see that using a CSS file has much more benefit than styling at element level.

Not to forget when you have an external CSS stylesheet file, your browser can cache the file which increases your application efficiency!

Are there any performance issues with inlining CSS rather than using chunks?

For anyone wondering, although I wasn't able to do very extensive testing, there does seem to be some performance issues taking this approach. Also it leads to layout shifts (CLS) since the CSS is loaded at different times.

Good to avoid doing in general, as it seems to bring no discernible benefits. The approach I finally went with was to regex out all the inline component CSS and combine it into one large inline chunk of CSS, which cut out the HTTP request.

Changing inline style vs. changing external stylesheet style using JS

When temporarily accessing or modifying an element's style using Javascript, there is no difference involved in whether that style was defined inline or in css - you will get the style that is applied by precedence and Javascript changes will override any declared style.

However, general best practice is to have a separate stylesheet (or maybe several if you intend to have conditional stylesheets for IE9 and below, or to split up lots of styles into manageable chunks)

This method is less complicated when it comes to debugging and changing styles in real time.

With external stylesheets you can change the entire site in seconds by dropping a new .css file in place. You can't do that with inline styles.

Performance Difference Between JavaScript Created Inline Styles and JavaScript Created Stylesheets