Skip to content

Instantly share code, notes, and snippets.

Curiosity is about annihilating itself; it doesn't seek a response.

Severan Rayraegah

Curiosity is about annihilating itself; it doesn't seek a response.
View GitHub Profile
Rayraegah /
Created Sep 24, 2015 — forked from paulirish/
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.


Box metrics
  • elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
  • elem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeight
  • elem.getClientRects(), elem.getBoundingClientRect()
Rayraegah / a.html
Last active Aug 29, 2015 — forked from mbostock/.block
View a.html
<!DOCTYPE html>
<div id="main">
<li><a href="b.html">Baobao</a></li>
<li><a href="c.html">Cuttlefish</a></li>
Anteaters, also known as antbear, are the four mammal species of the suborder Vermilingua (meaning "worm tongue") commonly known for eating ants and termites. Together with the sloths, they compose the order Pilosa. The name "anteater" is also colloquially applied to the unrelated aardvark, numbat, echidna, and pangolin.
View index.html
<div class="loadcenter">
<div class="loadcenter_wrap">
<svg class="l1" width="320px" height="320px">
<path d="M160,0.5C212.9,53.4,319.5,160,319.5,160 L160,319.5L0.5,160L160,0.5z"></path>
<svg class="l2" width="320px" height="320px">
<path d="M160,40.5C184,64.5,279.5,160,279.5,160 L160,279.5L40.5,160L160,40.5z"></path>
<svg class="l3" width="320px" height="320px">
<path d="M160,80.5c21.7,21.7,79.5,79.5,79.5,79.5 L160,239.5L80.5,160L160,80.5z"></path>