Jacob Beltran jacob-beltran

How to make faster scroll effects?

Avoid too many reflows (the browser to recalculate everything)
Use advanced CSS3 for graphic card rendering
Precalculate sizes and positions

Beware of reflows

The reflow appens as many times as there are frames per seconds. It recalculate all positions that change in order to diplay them. Basically, when you scroll you execute a function where you move things between two reflows. But there are functions that triggers reflows such as jQuery offset, scroll... So there are two things to take care about when you dynamically change objects in javascript to avoid too many reflows:

Each of these commands will run an ad hoc http static server in your current (or specified) directory, available at http://localhost:8000. Use this power wisely.

Discussion on reddit.

Python 2.x

$ python -m SimpleHTTPServer 8000


	/*
	I've wrapped Makoto Matsumoto and Takuji Nishimura's code in a namespace
	so it's better encapsulated. Now you can have multiple random number generators
	and they won't stomp all over eachother's state.

	If you want to use this as a substitute for Math.random(), use the random()
	method like so:

	var m = new MersenneTwister();

	// Ported from Stefan Gustavson's java implementation
	// http://staffwww.itn.liu.se/~stegu/simplexnoise/simplexnoise.pdf
	// Read Stefan's excellent paper for details on how this code works.
	//
	// Sean McCullough [email protected]

	/**
	* You can pass in a random number generator object if you like.
	* It is assumed to have a random() method.
	*/

	#!/bin/bash

	# This way you can customize which branches should be skipped when
	# prepending commit message.
	if [ -z "$BRANCHES_TO_SKIP" ]; then
	BRANCHES_TO_SKIP=(master develop test)
	fi

	BRANCH_NAME=$(git symbolic-ref --short HEAD)
	BRANCH_NAME="${BRANCH_NAME##*/}"

	/*
	* This work is free. You can redistribute it and/or modify it under the
	* terms of the Do What The Fuck You Want To Public License, Version 2,
	* as published by Sam Hocevar. See the COPYING file for more details.
	*/
	/*
	* Easing Functions - inspired from http://gizma.com/easing/
	* only considering the t value for the range [0, 1] => [0, 1]
	*/
	EasingFunctions = {

	var p1 = {
	x: 20,
	y: 20
	};

	var p2 = {
	x: 40,
	y: 40
	};

	/* Modern Font Stacks */

	/* System */
	font-family: system, -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif;

	/* System (Bootstrap 5.2.0) */
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

	/* Times New Roman-based serif */
	font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;

	// Created by Alexey Kopytko in 2013.
	// Public domain with no warranty whatsoever.

	// Extends the UIImage class to support scaling

	@interface UIImage (Scale)
	- (UIImage *)imageScaledToQuarter;
	- (UIImage *)imageScaledToHalf;
	- (UIImage *)imageScaledToScale:(CGFloat)scale;
	- (UIImage *)imageScaledToScale:(CGFloat)scale

	Per https://code.google.com/p/v8/codesearch#v8/trunk/src/runtime.cc


	%CreateSymbol
	%CreatePrivateSymbol
	%CreateGlobalPrivateSymbol
	%NewSymbolWrapper
	%SymbolDescription
	%SymbolRegistry
	%SymbolIsPrivate