row will be tree walked to additionally look for. This can get compounded even more when we deal with specificity and try to overwrite Discord's styles. So by adding your style you'll be causing the browser to walk the DOM tree several times over. You can read a bit more about this process in the article linked above.īut how might this affect performance? In a complex DOM tree like Discord there might be many instances of. container and if it isn't found, that means it will walk the entire tree. row it walks the ancestors of this element until it finds. row every time the browser encounters and element matching. But browsers do the opposite and process from the right-most to the left-most. row you might read or interpret it as 'from. If you're a developer using CSS, you probably think about descendant selectors from left to right or top to bottom. For some detailed information, take a look at how browsers perform style computations. Discord is definitely one of those applications. This is especially evident in applications with many moving parts and constantly shifting elements. But the way you write your CSS can have a serious effect on the performance of rendering the page. It's a stylesheet language not a programming language. CSS Performance įor many, the performance of CSS may sound crazy. This guide goes over what it means when we say CSS performance as well as some potential optimizations you can take advantage of.
