Skip to content

Instantly share code, notes, and snippets.

@paulirish
paulirish / what-forces-layout.md
Last active June 26, 2024 20:47
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
@ericelliott
ericelliott / essential-javascript-links.md
Last active May 17, 2024 03:38
Essential JavaScript Links
/**
* @method: PubSub
* */
;(function(global) {
'use strict';
function PubSub () {
this.topics = {};
};
@patriciogonzalezvivo
patriciogonzalezvivo / GLSL-Noise.md
Last active June 29, 2024 13:05
GLSL Noise Algorithms

Please consider using http://lygia.xyz instead of copy/pasting this functions. It expand suport for voronoi, voronoise, fbm, noise, worley, noise, derivatives and much more, through simple file dependencies. Take a look to https://github.com/patriciogonzalezvivo/lygia/tree/main/generative

Generic 1,2,3 Noise

float rand(float n){return fract(sin(n) * 43758.5453123);}

float noise(float p){
	float fl = floor(p);
  float fc = fract(p);
@ktmud
ktmud / gulpfile.js
Last active February 28, 2022 10:39
An example gulpfile.js with bower components and live reload support
var BatchStream = require('batch-stream2')
var gulp = require('gulp')
var coffee = require('gulp-coffee')
var uglify = require('gulp-uglify')
var cssmin = require('gulp-minify-css')
var bower = require('gulp-bower-files')
var stylus = require('gulp-stylus')
var livereload = require('gulp-livereload')
var include = require('gulp-include')
var concat = require('gulp-concat')

Snow in canvas land

Other people's code is awful, and your own code from months previous counts as someone else's. With this and the festive spirit in mind, I dug up a canvas snow demo I made two years ago to see how bad my code really was.

Turns out the performance landscape has changed quite a bit, but after applying a couple of workarounds, best practices, and memory management, I got the demo running smoother than it ever did.

Ugh, I can't believe I just wrote "performance landscape". Anyway...

How does the demo work?