Skip to content

Instantly share code, notes, and snippets.

@paulirish
paulirish / what-forces-layout.md
Last active May 6, 2024 07:54
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.

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
@mturjak
mturjak / SassMeister-input.scss
Created February 17, 2014 00:25
Generated by SassMeister.com.
// ----
// Sass (v3.3.0.rc.4)
// Compass (v1.0.0.alpha.18)
// ----
//recursive map-has-key() function
@function rmhk($m, $a){
@if type-of($m) == map {
@if map-has-key($m, $a) { @return true; };
@each $key,$e in $m {
@zenorocha
zenorocha / multiple-3rd-party-widgets.js
Last active November 14, 2022 12:18
Loading multiple 3rd party widgets asynchronously
(function() {
var script,
scripts = document.getElementsByTagName('script')[0];
function load(url) {
script = document.createElement('script');
script.async = true;
script.src = url;
scripts.parentNode.insertBefore(script, scripts);
@brianfeister
brianfeister / attach_heads.js
Created December 15, 2012 13:04
Sub-theming engine for Grunt.js + Roots Theme + Twitter Bootstrap
/**
* Task: attach_heads
* Description: Set the heads for all themes declared in themes.json
*/
module.exports = function(grunt) {
'use strict';
var fs = require('fs');
var path = require('path');