Revert "Revert "More performance improvements + etc.""

bench/resources/benchmark-runner.js

@@ -0,0 +1,268 @@
+(function (global) { // eslint-disable-line max-statements
+	"use strict"
+	var m = global.m
+
+	window.onhashchange = function () {
+		location.reload()
+	}
+
+	global.BenchmarkTestStep = BenchmarkTestStep
+	function BenchmarkTestStep(name, run) {
+		this.name = name
+		this.run = run
+	}
+
+	global.BenchmarkRunner = BenchmarkRunner
+	function BenchmarkRunner(suites, client) {
+		this._suites = suites
+		this._prepareReturnValue = null
+		this._measuredValues = {}
+		this._client = client
+	}
+
+	BenchmarkRunner.prototype.waitForElement = function (selector) {
+		var deferred = m.deferred()
+		var contentDocument = this._frame.contentDocument
+
+		function resolveIfReady() {
+			var element = contentDocument.querySelector(selector)
+			if (element) {
+				return deferred.resolve(element)
+			}
+			setTimeout(resolveIfReady, 50)
+		}
+
+		resolveIfReady()
+		return deferred.promise
+	}
+
+	BenchmarkRunner.prototype._removeFrame = function () {
+		if (this._frame) {
+			this._frame.parentNode.removeChild(this._frame)
+			this._frame = null
+		}
+	}
+
+	BenchmarkRunner.prototype._appendFrame = function () {
+		var frame = document.createElement("iframe")
+		frame.style.width = "800px"
+		frame.style.height = "600px"
+		document.body.appendChild(frame)
+		this._frame = frame
+		return frame
+	}
+
+	BenchmarkRunner.prototype._waitAndWarmUp = function () {
+		var startTime = Date.now()
+
+		function Fibonacci(n) {
+			if (Date.now() - startTime > 100) return
+			else if (n <= 0) return 0
+			else if (n === 1) return 1
+			else return Fibonacci(n - 2) + Fibonacci(n - 1)
+		}
+
+		var deferred = m.deferred()
+		setTimeout(function () {
+			Fibonacci(100)
+			deferred.resolve()
+		}, 200)
+		return deferred.promise
+	}
+
+	var now = window.performance && window.performance.now ?
+		function () { return window.performance.now() } :
+		function () { return +new Date() }
+
+	function logResults(document, expected, suite, test, callback) {
+		var count = document.querySelectorAll(".view").length
+		if (count !== expected) {
+			console.error([ // eslint-disable-line no-console
+				suite.name,
+				test.name,
+				"expected",
+				expected,
+				"got",
+				count
+			])
+			callback(NaN, NaN)
+		}
+	}
+
+	// This function must be as simple as possible, so it doesn't interfere
+	// with reading the times
+	BenchmarkRunner.prototype._runTest = function (
+		suite,
+		test,
+		prepareReturnValue,
+		callback
+	) {
+		var testFunction = test.run
+
+		var window = this._frame.contentWindow
+		var document = this._frame.contentDocument
+		var expected = this._client.numberOfItemsToAdd
+
+		var startTime = now()
+		testFunction(prepareReturnValue, window, document)
+		var endTime = now()
+		var syncTime = endTime - startTime
+
+		startTime = now()
+		setTimeout(function () {
+			setTimeout(function () {
+				var endTime = now()
+
+				// if the DOM count is wrong after a test, don't report its
+				// results.
+				if (/Adding|Completing/.test(test.name)) {
+					logResults(document, expected, suite, test, callback)
+				}
+
+				if (/Deleting/.test(test.name)) {
+					logResults(document, 0, suite, test, callback)
+				}
+
+				callback(syncTime, endTime - startTime)
+			}, 0)
+		}, 0)
+	}
+
+	function BenchmarkState(suites) {
+		this._suites = suites
+		this._suiteIndex = -1
+		this._testIndex = 0
+		this.next()
+	}
+
+	BenchmarkState.prototype.currentSuite = function () {
+		return this._suites[this._suiteIndex]
+	}
+
+	BenchmarkState.prototype.currentTest = function () {
+		var suite = this.currentSuite()
+		return suite ? suite.tests[this._testIndex] : null
+	}
+
+	BenchmarkState.prototype.next = function () {
+		this._testIndex++
+
+		var suite = this._suites[this._suiteIndex]
+		if (suite && this._testIndex < suite.tests.length) {
+			return this
+		}
+
+		this._testIndex = 0
+
+		var i = this._suiteIndex
+		var suites = this._suites
+
+		do {
+			i++
+		} while (i < suites.length && suites[i].disabled)
+
+		this._suiteIndex = i
+
+		return this
+	}
+
+	BenchmarkState.prototype.isFirstTest = function () {
+		return !this._testIndex
+	}
+
+	BenchmarkState.prototype.prepareCurrentSuite = function (runner, frame) {
+		var suite = this.currentSuite()
+		var deferred = m.deferred()
+		frame.onload = function () {
+			suite.prepare(runner, frame.contentWindow, frame.contentDocument)
+				.then(function (result) {
+					deferred.resolve(result)
+				}, function (err) {
+					deferred.reject(err)
+				})
+		}
+		frame.src = suite.url
+		return deferred.promise
+	}
+
+	BenchmarkRunner.prototype.step = function (state) {
+		if (!state) {
+			state = new BenchmarkState(this._suites)
+		}
+
+		var suite = state.currentSuite()
+		if (!suite) {
+			this._finalize()
+			var deferred = m.deferred()
+			deferred.resolve()
+			return deferred.promise
+		}
+
+		if (state.isFirstTest()) {
+			this._masuredValuesForCurrentSuite = {}
+			var self = this
+			return state.prepareCurrentSuite(this, this._appendFrame())
+			.then(function (prepareReturnValue) {
+				self._prepareReturnValue = prepareReturnValue
+				return self._runTestAndRecordResults(state)
+			})
+		}
+
+		return this._runTestAndRecordResults(state)
+	}
+
+	BenchmarkRunner.prototype._runTestAndRecordResults = function (state) {
+		var deferred = m.deferred()
+		var suite = state.currentSuite()
+		var test = state.currentTest()
+
+		if (this._client && this._client.willRunTest) {
+			this._client.willRunTest(suite, test)
+		}
+
+		var self = this
+		setTimeout(function () {
+			self._runTest(suite, test, self._prepareReturnValue,
+			function (syncTime, asyncTime) {
+				var suiteResults
+				if (self._measuredValues[suite.name]) {
+					suiteResults = self._measuredValues[suite.name]
+				} else {
+					suiteResults = {tests: {}, total: 0}
+				}
+
+				self._measuredValues[suite.name] = suiteResults
+
+				suiteResults.tests[test.name] = {
+					Sync: syncTime,
+					Async: asyncTime
+				}
+
+				suiteResults.total += syncTime + asyncTime
+
+				if (self._client && self._client.willRunTest) {
+					self._client.didRunTest(suite, test)
+				}
+
+				state.next()
+				if (state.currentSuite() !== suite) {
+					self._removeFrame()
+				}
+
+				deferred.resolve(state)
+			})
+		}, 0)
+		return deferred.promise
+	}
+
+	BenchmarkRunner.prototype._finalize = function () {
+		this._removeFrame()
+
+		if (this._client && this._client.didRunSuites) {
+			this._client.didRunSuites(this._measuredValues)
+		}
+
+		// FIXME: This should be done when we start running tests.
+		this._measuredValues = {}
+	}
+})(this)

bench/resources/manager.js

@@ -0,0 +1,239 @@
+/* global m */
+/* eslint no-console: 0 */
+
+(function (global) { // eslint-disable-line max-statements
+	"use strict"
+
+	var numberOfItemsToAdd = (~~location.hash.slice(1)) || 250
+	var runs = []
+	var timesRan = 0
+	var runButton
+
+	function forOwn(object, f) {
+		for (var key in object) {
+			if ({}.hasOwnProperty.call(object, key)) {
+				f(object[key], key)
+			}
+		}
+	}
+
+	var append = Function.call.bind(function append() {
+		/* eslint-disable no-invalid-this */
+		for (var i = 0; i < arguments.length; i++) {
+			var arg = arguments[i]
+			if (Array.isArray(arg)) append.apply(this, arg)
+			else this.appendChild(arg)
+		}
+		return this
+		/* eslint-enable no-invalid-this */
+	})
+
+	function n(type, attrs) {
+		var el = document.createElement(type)
+		if (!attrs) return el
+		forOwn(attrs, function (value, attr) {
+			if (attr === "style") {
+				forOwn(value, function (k, v) { el.style[k] = v })
+			} else {
+				el[attr] = value
+			}
+		})
+		return el
+	}
+
+	function createButton(text, onclick) {
+		return n("button", {textContent: text, onclick: onclick})
+	}
+
+	function createTest(suite, test) {
+		return append(n("li"),
+			append(test.anchor = n("a", {id: suite.name + "-" + test.name}),
+				document.createTextNode(suite.name + "/" + test.name)))
+	}
+
+	function createSuiteCheckbox(suite) {
+		return n("input", {
+			id: suite.name,
+			type: "checkbox",
+			checked: true,
+			onchange: function () {
+				suite.disabled = !this.checked
+			}
+		})
+	}
+
+	function createSuiteLabel(suite) {
+		return append(n("label", {htmlFor: suite.name}),
+			document.createTextNode(suite.name + " " + suite.version))
+	}
+
+	function createSuite(suite) {
+		return append(n("li"),
+			createSuiteCheckbox(suite),
+			createSuiteLabel(suite),
+			append(n("ol"), suite.tests.map(createTest.bind(null, suite))))
+	}
+
+	function createUIForSuites(suites, onstep, onrun) {
+		return append(n("nav"),
+			createButton("Step Tests", onstep),
+			runButton = createButton("Run All", onrun),
+			append(n("ol"), suites.map(createSuite)))
+	}
+
+	function generateResults(measured, timesToRun) {
+		var result = ""
+		var total = 0 // FIXME: Compute the total properly.
+
+		forOwn(measured, function (suiteResults, suite) {
+			forOwn(suiteResults.tests, function (testResults, test) {
+				forOwn(testResults, function (subtestResults, subtest) {
+					result += suite + " : " + test + " : " + subtest + ": " +
+						subtestResults + " ms\n"
+				})
+			})
+			result += suite + " : " + suiteResults.total + " ms\n"
+			total += suiteResults.total
+		})
+		return result + "Run " + (runs.length + 1) + "/" + timesToRun +
+			" - Total : " + total + " ms\n"
+	}
+
+	function reportFastest() {
+		var results = {}
+		runs.forEach(function (runData) {
+			forOwn(runData, function (data, key) {
+				results[key] = Math.min(
+					results[key] || Infinity,
+					data.total
+				)
+			})
+		})
+		return results
+	}
+
+	global.google.load("visualization", "1", {packages: ["corechart"]})
+	function drawChart(results) {
+		var V = global.google.visualization
+
+		var raw = []
+		forOwn(results, function (result, key) {
+			raw.push([key, Math.round(result), colorify(key)])
+		})
+		raw.sort(function (a, b) { return a[1] - b[1] })
+		raw.unshift(["Project", "Time", {role: "style"}])
+
+		var runWord = "run" + (runs.length > 1 ? "s" : "")
+		var title = "Best time in milliseconds over " + runs.length + " " +
+			runWord + " (lower is better)"
+
+		var view = new V.DataView(V.arrayToDataTable(raw))
+		view.setColumns([0, 1, {
+			calc: "stringify",
+			sourceColumn: 1,
+			type: "string",
+			role: "annotation"
+		}, 2])
+
+		document.getElementById("analysis").style.display = "block"
+
+		new V.BarChart(document.getElementById("barchart-values")).draw(view, {
+			title: "TodoMVC Benchmark",
+			width: 600,
+			height: 400,
+			legend: {position: "none"},
+			backgroundColor: "transparent",
+			hAxis: {title: title},
+			min: 0,
+			max: 1500
+		})
+	}
+
+	function colorPart(n, pre) {
+		return Math.max(
+			0,
+			((n.toLowerCase().charCodeAt(pre % n.length) - 97) / 26 * 255) | 0
+		)
+	}
+
+	function colorify(n) {
+		return "rgb(" +
+			colorPart(n, 3) + ", " +
+			colorPart(n, 4) + ", " +
+			colorPart(n, 5) + ")"
+	}
+
+	function shuffle(ary) {
+		for (var i = 0; i < ary.length; i++) {
+			var j = Math.floor(Math.random() * (i + 1))
+			var tmp = ary[i]
+			ary[i] = ary[j]
+			ary[j] = tmp
+		}
+	}
+
+	window.addEventListener("load", function () {
+		var match = window.location.search.match(/[\?&]r=(\d+)/)
+		var timesToRun = match ? +(match[1]) : 1
+
+		var Suites = global.Suites.map(function (suite) {
+			suite = suite(numberOfItemsToAdd)
+			suite.disabled = false
+			return suite
+		})
+
+		var runner = new global.BenchmarkRunner(Suites, {
+			numberOfItemsToAdd: numberOfItemsToAdd,
+
+			willRunTest: function (suite, test) {
+				if (test.anchor.classList) {
+					test.anchor.classList.add("running")
+				}
+			},
+
+			didRunTest: function (suite, test) {
+				if (test.anchor.classList) {
+					test.anchor.classList.remove("running")
+					test.anchor.classList.add("ran")
+				}
+			},
+
+			didRunSuites: function (measured) {
+				var results = generateResults(measured, timesToRun)
+				if (results) {
+					console.log(results)
+
+					runs.push(measured)
+					timesRan++
+					if (timesRan >= timesToRun) {
+						timesRan = 0
+						drawChart(reportFastest())
+						shuffle(Suites)
+					} else {
+						setTimeout(function () {
+							runButton.click()
+						}, 0)
+					}
+				}
+			}
+		})
+
+		var currentState = m.prop()
+		function callNextStep(state) {
+			runner.step(state).then(currentState).then(function (newState) {
+				if (newState) callNextStep(newState)
+			})
+		}
+
+		// Don't call step while step is already executing.
+		document.body.appendChild(createUIForSuites(Suites,
+			function () {
+				runner.step(currentState()).then(currentState)
+			},
+			function () {
+				document.getElementById("analysis").style.display = "none"
+				localStorage.clear()
+				callNextStep(currentState())
+			}))
+	})
+})(this)

bench/resources/tests.js

@@ -0,0 +1,51 @@
+(function (global) {
+	"use strict"
+
+	var BenchmarkTestStep = global.BenchmarkTestStep
+	var Suites = global.Suites = []
+
+	Suites.push(function (numberOfItemsToAdd) {
+		return {
+			name: "Mithril (TodoMVC 1.3)",
+			url: "app/index.html",
+			version: "next (dev version)",
+			prepare: function (runner) {
+				return runner.waitForElement("#new-todo")
+				.then(function (element) {
+					element.focus()
+					return element
+				})
+			},
+			tests: [
+				new BenchmarkTestStep("Adding" + numberOfItemsToAdd + "Items",
+				function (newTodo) {
+					for (var i = 0; i < numberOfItemsToAdd; i++) {
+						var inputEvent = document.createEvent("Event")
+						inputEvent.initEvent("input", true, true)
+						newTodo.value = "Mithril ------- Something to do " + i
+						newTodo.dispatchEvent(inputEvent)
+
+						var keydownEvent = document.createEvent("Event")
+						keydownEvent.initEvent("keyup", true, true)
+						keydownEvent.keyCode = 13 // VK_ENTER
+						newTodo.dispatchEvent(keydownEvent)
+					}
+				}),
+				new BenchmarkTestStep("CompletingAllItems",
+				function (newTodo, contentWindow, document) {
+					var checkboxes = document.getElementsByClassName("toggle")
+					for (var i = 0; i < checkboxes.length; i++) {
+						checkboxes[i].click()
+					}
+				}),
+				new BenchmarkTestStep("DeletingAllItems",
+				function (newTodo, contentWindow, document) {
+					var buttons = document.getElementsByClassName("destroy")
+					for (var i = buttons.length - 1; i > -1; i--) {
+						buttons[i].click()
+					}
+				})
+			]
+		}
+	})
+})(this)