Skip to content

Instantly share code, notes, and snippets.

View ThaisRobba's full-sized avatar

Thais Robba ThaisRobba

68 followers · 13 following
View GitHub Profile
@ThaisRobba
ThaisRobba / what-forces-layout.md
Created March 29, 2018 21:02 — 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()
@ThaisRobba
ThaisRobba / index.html
Last active November 23, 2016 15:17 — forked from Spyryto/index.html
For loop vs For ... of benchmark (http://jsbench.github.io/#b8d20031108ec0b39f94e00061133d2e) #jsbench #jsperf
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>For loop vs For ... of benchmark</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/1.0.0/benchmark.min.js"></script>
<script src="./suite.js"></script>
</head>
<body>
<h1>Open the console to view the results</h1>