background: red; } </style> </head> <body> <div id="root"></div> <style type='text/css'> .someClass { background: green; } </style> </body> </html> CSSOM is being build and DOM parsing is unblocked CSSOM is altered by a new one
highest priority in download queue for browser Async script tags have lower priority and there is no guarantee that script will be executed after DomContentLoaded event, but they don’t wait for CSSOM Defer script tags will be executed after parsing HTML is done, but before DomContentLoaded
top, left - requires layout to be recalculated, as those properties stand for geometry of element border-radius, box-shadow - combining these properties can triple the paint process time blur - it’s pretty fresh and very expensive operation for paint phase of rendering
value properties which are camel cased Already protects us from XSS security holes and style properties collisions In the docs of react you will find information that it’s not THAT performant - but WHY?
(styleName in lastProp) { if (lastProp.hasOwnProperty(styleName) && (!nextProp || !nextProp.hasOwnProperty(styleName))) { if (!styleUpdates) { styleUpdates = {}; } styleUpdates[styleName] = ''; } } When iterating over new props repeats the loop
nextProp) { if (nextProp.hasOwnProperty(styleName) && lastProp[styleName] !== nextProp[styleName]) { if (!styleUpdates) { styleUpdates = {}; } styleUpdates[styleName] = nextProp[styleName]; } After that iterates over new styles and alternates
in small chunks Don’t hide CSS from your browser Use async and defer for javascript Use preload rel for your assets Think about file sizes!!! Avoid inline css - specially big objects of rules