Skip to content

Instantly share code, notes, and snippets.

View adi518's full-sized avatar
🌴
On vacation

Adi adi518

🌴
On vacation
View GitHub Profile
@adi518
adi518 / what-forces-layout.md
Created July 13, 2018 23:50 — forked from paulirish/what-forces-layout.md
What forces layout/reflow. The comprehensive list.

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Element

Box metrics
  • elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
  • elem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeight
  • elem.getClientRects(), elem.getBoundingClientRect()
(function(){
var me, myself, irene
// logic
}())
(function(){
var me, myself, irene
// logic
})()
Uncaught SyntaxError: Unexpected token (
function(){
var me, myself, irene
// logic
}()
var myCode = function(){
var me, myself, irene
// logic
}()
/* global scope */
// third-party code
// our code
var myCode = function(){
var me, myself, irene
// logic
/* global scope */
// third-party code
// our code
var awesome
var myFunc = function() {
var awesome
}