Author avatar

Vivek Kumar

Benchmarking Raw CSS and Inline Styles in ReactJS

Vivek Kumar

  • Jun 18, 2019
  • 8 Min read
  • 54 Views
  • Jun 18, 2019
  • 8 Min read
  • 54 Views
Web Development
React

Introduction

When we look around for the ideal frameworks that can render effective results in ReactJS, we often find that there are certain options which can do the task professionally and proficiently. While making the comparison between raw CSS and inline styles in the same regard, it is essential to make a comparison based on certain criteria before reaching a conclusion.

In this guide, we will make this comparison specifically in terms of browser performance. The elements that we will be comparing are save, parse, and the application of a few inline styles in comparison to distinctive CSS style sheets.

When and Which Framework To Use?

Both types of frameworks are useful in one way or the other. As Michael Chan proposed in the following React Europe video:

  • The application of CSS stylesheets can be used for the layout. For example, bootstrap layout classes like row-fluid and span*. Basically, the layout is of a fixed type and creates the static part in a website.
  • For the state-styles, the application of inline styles needs to be used. Here, the style will change as per the state. It is basically implemented as a dynamic segment of the website.

Comparing Frameworks with an Illustration

Let us create an example where we produce two large <table> - first by using inline styles and then, second, by CSS stylesheets. Here, the content would remain identical.

Next, we need to verify the smoothness, performance, and size, as well as the time of rendering taken by both simultaneously.

However, the given test may not offer pertinent results, as it is not feasible to create a table that large in size in Document Object Model and, therefore, a certain type of lazy rendering/ virtual scrolling is needed.

Anyway, to test the demonstrated example, let's say we are generating a table <table> with nine columns and 1,000 rows. The content will remain identical in all of them. We can consider the content with AnUndergoingTest. It is required to be repeated in 10,000 rows simultaneously in order to verify the trend.

Within the test, we're going to focus on the following tasks:

  • Smoothness: It is determeined while scrolling down the page via Chrome DevTools Timeline.
  • Document Object Model (DOM): It is critical to understand the universal JS application. It falls in the server-side rendering.
  • Mounting the DOM timing: We are going to apply componentDidMount- a point where DOM is accessible after the point render is asked for.
  • Rendering time: Here, we are going to apply requestAnimationFrame in order to understand when the subsequent frame will appear after render gets ready.

Here, the framework of React JS component is displayed as shown below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const createOneInlineStyleRow = (i) => <tr key={i} >
                                        <td style={style} > AnUndergoingTest </ td>
                                        ...repeat...
                                       </ tr>

export default class AppInline extends React.Component {
    componentDidMount() {
        console.timeEnd('didMount')
    }
    render() {
        console.time('render');
        console.time('didMount');
        requestAnimationFrame(function() { console.timeEnd('render'); })
        
        const rows = times(NB_ROWS, createOneInlineStyleRow)
        return <table style = {TABLE_STYLE} > <tbody > {rows} </ tbody></ table>
    }
}
javascript

The Certain random style for <td>:

1
2
3
4
5
6
7
8
9
10
11
12
13
const style = {
    fontFamily: 'Consolas',
    padding: 10,
    color: "#444",
    border: "3px solid orange",
    position: "relative",
    width: "15%",
    height: "25px",
    letterSpacing: 0,
    overflow: "hidden",
    fontSize: 10,
    fontVariant: "small-caps"
}
javascript

The identical for the CSS stylesheet is given below:

1
2
3
4
5
6
7
8
9
10
11
12
13
.tableCss td {
    font-family: Consolas;
    padding: 10px;
    color: #444;
    border: none;
    border: 3px solid orange;
    position: relative;
    width: 15%; height: 25px;
    letter-spacing: 0;
    overflow: hidden;
    font-size: 10px;
    font-variant: small-caps;
}
css

Benchmark Results

The Timeline

There is no distinction to be found when it comes to the scrolling. Plus, there is definite support from Chrome DevTools Timeline to upkeep the viewpoint that we are discussing in this guide; i.e. no frame per second drop, and thus, no difference.

The reason that DOM will be inline or, rather, in the outside CSS stylesheet, won't make any difference. It is generally due to the fact that there is already a browser memory in existence at the time of rendering, so it will not impact the seamlessness in one way or the other.

The Size of Document Object Model (DOM)

The size of DOM will be massive, comprised of inline styles, and will be linearly proportional in terms of the number of rows.

The basic table would look like the following:

Type1000 rows10,000 rowsRatio
CSS517,725 chars~5,177,250 charsx10
Inline2,283,742 chars~22,837,420 charsx10
x4.4x4.4

If you are applying universal JS, then the size of 2,000,000 will consume 2 MB data. If we talk about the compression of the table then, in the absence of the table's random content, the DOM of 2 MB will look like 200k.

CSS stylesheet can be downloaded only once, whereas inline styles are downloaded separately each time. Here, the user can have the edge with CSS stylesheets primarily because of the browser's cache.

Time Taken to Mount the DOM

We can initiate with the timer in the render method and stop it by the time componentDidMount is called upon.

React JS functions well, by converting virtual DOM to DOM and then placing it on the mounted node.

The table below will help you understand it in a better way:

Type1000 rows10,000 rowsRatio
CSS (debug)650 ms - 750 ms6,000 ms~x10
Inline (debug)1,000 ms - 1,100 ms10,000 ms~x10
CSS310 ms2,300 ms~x7.5
Inline600 ms4,900 ms~x8
x2x2.1

It usually takes double the time in order to convert virtual DOM, in the case of inline styles, and then mount it.

The delta curtails with fewer rows, yet it is important as the delta decreases with fewer rows but it's still significant: 70 ms (CSS) opposite of 105 ms (inline) about 100 rows.

The Render Time

Once DOM is mounted, the browser requires time to render the table. Let's assume rendering will take longer in inline styles, due to the fact that it has additional parse as well as can store each style attribute with respect to every <td>.

Type1000 rows10,000 rowsRatio
CSS (debug)1,100 ms - 1,200 ms9,500 ms~x10
Inline (debug)1,500 ms - 1,600 ms14,000 ms~x10
CSS720 ms6,000 ms~x8
Inline1,080 ms9,400 ms~x8.7
x1.5x1.56

Hence, you can observe that the performance is quite dependent on the browser.

Conclusion

In this guide, you've learned that Inline styles consume more space in the DOM and gradually get converted into VDOM and demand additional time for the browser to function with it as compared to CSS. Once rendered, there will be no impact on the performance at all either one way or the other.

References

While writing this guide, the following resource has been referenced:

0