paulirish

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.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

blech

#!/usr/bin/python
# TODO make range command line arguments

import sys, codecs
sys.stdout = codecs.getwriter('utf-8')(sys.stdout) # if your terminal can't do utf-8, well...

import time
import urllib2

import BeautifulSoup

phloe

The following outlines a technique combining floating blocks and inline-blocks allowing for fairly interesting layouts without the need to use nested rows and avoids some problems when using pure floats.

The technique itself only uses three classnames:

• combine-layout - defines the containing element.
• break - starts a new row when in floating block context.
• divide - starts off the inline-block context.