seen from Colombia
seen from Estonia
seen from United States
seen from Peru
seen from South Korea
seen from Thailand
seen from Russia
seen from Malaysia
seen from China
seen from China
seen from Japan
seen from Brazil
seen from Belarus
seen from Australia
seen from United Kingdom
seen from Finland
seen from France
seen from Japan
seen from Hong Kong SAR China
seen from United States
Rendering without lumpy bits - Jake Archibald - Front-Trends 2013
Slides: speakerdeck.com/jaffathecake/rendering-without-lumps Twitter: twitter.com/jaffathecake
Avoid fixed background images
No magic rules around layers. You just have to try it and test it. What works on the desktop may not work on mobile, i.e translateZ(0)
Learn how the GPU works
What causes the browser to layout?
When developers realize this problem exists, they rightly want to know all the properties and functions in the DOM APIs that can cause layout. There are a quite a few. I assembled a list in 2010 for WebKit, which I have included below. A harder question to answer, however, is what changes in an element’s style cause its layout to be invalidated. Answering that one often requires trial, error and good tools like the two I mentioned earlier.
Element
clientHeight
clientLeft
clientTop
clientWidth
focus
getBoundingClientRect
getClientRects
innerText
offsetHeight
offsetLeft
offsetParent
offsetTop
offsetWidth
outerText
scrollByLines
scrollByPages
scrollHeight
scrollIntoView
scrollIntoViewIfNeeded
scrollLeft
scrollTop
scrollWidth
MouseEvent
layerX
layerY
offsetX
offsetY
Window
getComputedStyle
scrollBy
scrollTo
scrollX
scrollY
Frame, Document & Image
height
width
Keep in mind that I only list HTML-related objects. I have intentionally ignored WebKit prefixed APIs and SVG objects, but many of those can cause layout as well. One surprising entry isElement.innerText. Maybe I can explain that one in another post. [Update: innerText vs textContent]
To Do: Jank Busting, Layout Thrashing, Reflow and Performance
Sunday reading
On Layout & Web Performance
Rendering: repaint, reflow/relayout, restyle
innerText vs textContent
Adventures in Jank Busting: Parallax, performance, and the new Flickr Home Page
Video
Rendering without lumpy bits - Jake Archibald - Front-Trends 2013
