Minimizing browser reflow

Key Takeaways

[Music] hello my name is Lindsay Simon I'm a developer on the user experience team here at Google and I work on the front end for Google app engine at Google we care about speed and one of the factors that influences speed is the rendering of your web page in a web browser Reflow is a process where the browser calculates the positions and geometries of all the elements in the document Tre for visual presentation Reflow can be an expensive operation in the browser requiring CPU a change deep in the Dom tree also requires changes or may require changes all the way up through the parents of that element as well as changes to Elements which come after the one you've changed when the browser is performing these calculations Reflow is a user blocking operation and may hurt the user experience of your page so now I want to talk about ways in which you might decrease the time it takes for your browser to perform reflows one way is to minimize unnecessary Dom depth in your page every level of hierarchy that you add causes more time to be taken in order to perform Reflow avoid using unnecessarily complex CSS selectors descendant selectors particularly these require more CPU power in order to do selector matching in general you want to trade smoothness for Speed in your UI you may want to make changes which make your browser feel like a 3D game but sometimes it's better to make small changes which have the same effect on your user continue to Delight them but don't disappoint them stay fast minimizing browser Reflow is one way to speed up your page there are many others that's not the whole story go to code.google.com/speed for more