Skip to content

Instantly share code, notes, and snippets.

@desandro
Created January 28, 2013 18:13
Show Gist options
  • Save desandro/4657744 to your computer and use it in GitHub Desktop.
Save desandro/4657744 to your computer and use it in GitHub Desktop.
layout thrashing in jQuery

Re: On layout & web performance by Kelly Norton

#lazyweb Is there any documentation about which jQuery functions/effects trigger layout? re: kellegous.com/j/2013/01/26/l…

— Dave Rupert (@davatron5000) January 28, 2013
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

getWidthOrHeight() used in jQuery.fn.width/height

clientLeft

  • 3180 jQuery.event.mousehooks.filter
  • 9355 jQuery.fn.offset

clientTop

  • 3181 jQuery.event.mousehooks.filter
  • 9354 jQuery.fn.offset

getBoundingClientRect

  • 9349-9350 jQuery.fn.offset
  • 9420 jQuery.fn.position

innerText

  • 4826 Sizzle.pseudos.contains

offsetHeight

  • 1456 support test
  • 1463 support test
  • 7039 getWidthOrHeight
  • 7230 jQuery.expr.filters.hidden

offsetParent

offsetTop

offsetWidth

  • 1462-1468 support test
  • 7039 getWidthOrHeight
  • 7124 jQuery.cssHooks.width/height
  • 7230 jQuery.expr.filters.hidden

scrollLeft and scrollTop

  • 3180 jQuery.event.mousehooks.filter
  • 9048 Tween.propHooks.scrollTop, Tween.propHooks.scrollLeft
  • 9354-9355 jQuery.fn.offset
  • 9457-9458 jQuery.fn.scrollLeft/Top

offsetX & offsetY

  • 3168 jQuery.event.mousehooks.props?

getComputedStyle

scrollTo

  • 9472 jQuery.fn.scrollLeft/Top
@davatron5000
Copy link

You are a web hero and a saint!

@paulirish
Copy link

Hero!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment