Klemen Slavič KrofDrakula

Rendering performance on WebKit

Please send any feedback on this article to Klemen Slavič

UPDATE: I'm currently in the process of updating the article, as my assumptions about the inner workings of WebKit are incorrect. I will update this article with the relevant facts and provide concrete information in place of my guesstimates below.

I've recently stumbled upon an interesting discovery regarding image rendering performance in most WebKit browsers. Namely, I've been developing a sprite animation component to implement a GIF animation replacement with better compression and performance, where I noticed that some animations appeared to be janky when using multi-frame spritesheets and clipping rectangles. Here's what I found out.

But first, a quick rundown of the basic functioning of the WebKit engine as I understand it.

Install node. Install grunt globally:

npm install grunt -g

Go to the project directory and run:

grunt default watch

	body { font-size: 120%; }
	td, th { font: inherit; }
	td { padding: 0.2em 0.5em; border: 1px solid black; }
	@media screen and (max-width: 240px) {
	table, tbody, tr, td { display: block; }
	tr:nth-child(2n) { background: #ccc; }
	}

	//
	// Email address must be of form [email protected] ... in other words:
	// * there must be at least one character before the @
	// * there must be at least one character before and after the .
	// * the characters @ and . are both required
	function isValidEmail(s)
	{
	if (isEmpty(s)) return false;

	// is s whitespace?

	<html>
	<head>
	<title>Canvas bootstrap</title>
	<style>body { text-align: center; } canvas { border: 1px solid black; margin: auto;}</style>
	<script src="raf.js"></script>
	</head>
	<body>
	<canvas id="canvas" width="500" height="500"></canvas>
	<script>
	var helpers = {

	// Scripting Chrome for awesome

	// This script finds all matching history entries
	// in the chrome://chrome/history/ panel and turns
	// the checkboxes on so you don't have to click through
	// all of them.

	// Retrieve all entries from the currently displayed
	// history list (use the Search history to limit your
	// list first).

	// Outputs 0
	console.log(Math.min(null, 1234));

	// Outputs NaN
	console.log(Math.min('null', 1234));

	// Outputs 1
	console.log(Math.min('1', 1234));

	// DAFUQ?

	(function() {
	var ZINDEX_MAX = 2147483647;

	if (window === window.top) {
	// Host page code
	var wrapper = document.createElement('div');
	wrapper.style.cssText = [
	'display:block; position: fixed; z-index: ' + ZINDEX_MAX + ';',
	'left: 0; bottom: 0; right: 0; box-sizing: border-box;',
	'background: rgba(0,0,0,0.8); color: white; font-size: 8px;',

	[color]
	ui = auto
	[color "branch"]
	current = yellow reverse
	local = yellow
	remote = green
	[color "diff"]
	meta = yellow bold
	frag = magenta bold
	old = red bold