CHAPTER 6 Finding and Fixing Mobile Web Rendering Issues
However, if a page asks for the value of a property depending on
the layout (e.g. offsetWidth or offsetHeight), the browser is forced to
immediately and synchronously perform a page layout. These are called
forced synchronous layouts and can have a pretty significant reduction on
rendering performance, especially when performed repeatedly on larger
DOM trees. We call this scenario layout thrashing.^17
The Timeline can alert you when it discovers a forced synchronous lay-
out with a yellow warning icon next to the corresponding Timeline record.
If you hover over one of these records, it displays stack traces for the code
which invalidated the layout and the code that forced it.
So, in our Timeline, locate an “Animation Frame Fired” record and find
the yellow warning icon next to it indicating a forced synchronous layout.
The icon is slightly dimmed indicating that one of its child records con-
tains the offending code, rather than this record itself.Expand the “Animation Frame Fired” to view its children.17 http://smashed.by/layout-perf