From 9a55a290cc1ea0adccefd7a124d12eed7d43b903 Mon Sep 17 00:00:00 2001 From: Pat Cavit Date: Thu, 13 Apr 2017 09:48:30 -0700 Subject: [PATCH] feat: perf testing (#1789) --- .travis.yml | 6 +- package.json | 6 +- performance/index.html | 23 +++ performance/test-perf.js | 336 ++++++++++++++++++++++++++++++++++++ test-utils/pushStateMock.js | 2 +- 5 files changed, 368 insertions(+), 5 deletions(-) create mode 100644 performance/index.html create mode 100644 performance/test-perf.js diff --git a/.travis.yml b/.travis.yml index 75e9b45c7..cc4576b53 100644 --- a/.travis.yml +++ b/.travis.yml @@ -18,8 +18,10 @@ install: # Bundle before running tests so the bundle is always up-to-date before_script: npm run build -# This is the default, but leaving so it is obvious -# script: npm test +# Run tests, lint, and then check for perf regressions +script: +- npm test +- npm run perf # After a successful build commit changes back to repo after_success: diff --git a/package.json b/package.json index 6ea29cd0e..4a93fd78a 100644 --- a/package.json +++ b/package.json @@ -13,10 +13,11 @@ "build-min": "node bundler/cli browser.js -o mithril.min.js -m", "lintdocs": "node docs/lint", "gendocs": "node docs/generate", - "lint": "eslint .", + "lint": "eslint . || true", "lint:fix": "eslint . --fix", + "perf": "node performance/test-perf.js", "test": "node ospec/bin/ospec", - "posttest": "npm run lint || true", + "posttest": "npm run lint", "cover": "istanbul cover --print both ospec/bin/ospec", "release": "npm version -m 'v%s'", "preversion": "npm run test", @@ -24,6 +25,7 @@ "postversion": "git push --follow-tags" }, "devDependencies": { + "benchmark": "^2.1.4", "eslint": "^3.16.1", "istanbul": "^0.4.3", "marked": "^0.3.6" diff --git a/performance/index.html b/performance/index.html new file mode 100644 index 000000000..a0f288c58 --- /dev/null +++ b/performance/index.html @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/performance/test-perf.js b/performance/test-perf.js new file mode 100644 index 000000000..2ba9b6228 --- /dev/null +++ b/performance/test-perf.js @@ -0,0 +1,336 @@ +/* global Benchmark */ +"use strict" + +/* Based off of preact's perf tests, so including their MIT license */ +/* +The MIT License (MIT) + +Copyright (c) 2017 Jason Miller + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. +*/ + +var browserMock = require("../test-utils/browserMock") + +// Do this silly dance so browser testing works +var B = typeof Benchmark === "undefined" ? require("benchmark") : Benchmark + +var m, scratch; + +// set up browser env on before running tests +var doc = typeof document !== "undefined" ? document : null + +if(!doc) { + var mock = browserMock() + if (typeof global !== "undefined") { global.window = mock } + + doc = mock.document +} + +// Have to include mithril AFTER browser polyfill is set up +m = require("../mithril") // eslint-disable-line global-require + +scratch = doc.createElement("div"); + +(doc.body || doc.documentElement).appendChild(scratch) + +// Initialize benchmark suite +var suite = new B.Suite("mithril perf") + +suite.on("start", function() { + this.start = Date.now(); +}) + +suite.on("cycle", function(e) { + console.log(e.target.toString()) + + scratch.innerHTML = "" +}) + +suite.on("complete", function() { + console.log("Completed perf tests in " + (Date.now() - this.start) + "ms") +}) + +suite.on("error", console.error.bind(console)) + +suite.add({ + name : "rerender without changes", + onStart : function() { + this.vdom = m("div", {class: "foo bar", "data-foo": "bar", p: 2}, + m("header", + m("h1", {class: "asdf"}, "a ", "b", " c ", 0, " d"), + m("nav", + m("a", {href: "/foo"}, "Foo"), + m("a", {href: "/bar"}, "Bar") + ) + ), + m("main", + m("form", {onSubmit: function onSubmit() {}}, + m("input", {type: "checkbox", checked: true}), + m("input", {type: "checkbox", checked: false}), + m("fieldset", + m("label", + m("input", {type: "radio", checked: true}) + ), + m("label", + m("input", {type: "radio"}) + ) + ), + m("button-bar", + m("button", + {style: "width:10px; height:10px; border:1px solid #FFF;"}, + "Normal CSS" + ), + m("button", + {style: "top:0 ; right: 20"}, + "Poor CSS" + ), + m("button", + {style: "invalid-prop:1;padding:1px;font:12px/1.1 arial,sans-serif;", icon: true}, + "Poorer CSS" + ), + m("button", + {style: {margin: 0, padding: "10px", overflow: "visible"}}, + "Object CSS" + ) + ) + ) + ) + ) + }, + fn : function() { + m.render(scratch, this.vdom) + } +}) + +suite.add({ + name : "construct large VDOM tree", + + onStart : function() { + var fields = [] + + for(var i=100; i--;) { + fields.push((i * 999).toString(36)) + } + + this.fields = fields; + }, + + fn : function () { + m("div", {class: "foo bar", "data-foo": "bar", p: 2}, + m("header", + m("h1", {class: "asdf"}, "a ", "b", " c ", 0, " d"), + m("nav", + m("a", {href: "/foo"}, "Foo"), + m("a", {href: "/bar"}, "Bar") + ) + ), + m("main", + m("form", + {onSubmit: function onSubmit() {}}, + m("input", {type: "checkbox", checked: true}), + m("input", {type: "checkbox"}), + m("fieldset", + this.fields.map(function (field) { + return m("label", + field, + ":", + m("input", {placeholder: field}) + ) + }) + ), + m("button-bar", + m("button", + {style: "width:10px; height:10px; border:1px solid #FFF;"}, + "Normal CSS" + ), + m("button", + {style: "top:0 ; right: 20"}, + "Poor CSS" + ), + m("button", + {style: "invalid-prop:1;padding:1px;font:12px/1.1 arial,sans-serif;", icon: true}, + "Poorer CSS" + ), + m("button", + {style: {margin: 0, padding: "10px", overflow: "visible"}}, + "Object CSS" + ) + ) + ) + ) + ) + } +}) + +suite.add({ + name : "mutate styles/properties", + + onStart : function () { + var counter = 0 + var keyLooper = function (n) { return function (c) { return c % n ? (c + "px") : c } } + var get = function (obj, i) { return obj[i%obj.length] } + var classes = ["foo", "foo bar", "", "baz-bat", null, "fooga"] + var styles = [] + var multivalue = ["0 1px", "0 0 1px 0", "0", "1px", "20px 10px", "7em 5px", "1px 0 5em 2px"] + var stylekeys = [ + ["left", keyLooper(3)], + ["top", keyLooper(2)], + ["margin", function (c) { return get(multivalue, c).replace("1px", c+"px") }], + ["padding", function (c) { return get(multivalue, c) }], + ["position", function (c) { return c%5 ? c%2 ? "absolute" : "relative" : null }], + ["display", function (c) { return c%10 ? c%2 ? "block" : "inline" : "none" }], + ["color", function (c) { return ("rgba(" + (c%255) + ", " + (255 - c%255) + ", " + (50+c%150) + ", " + (c%50/50) + ")") }], + ["border", function (c) { return c%5 ? ((c%10) + "px " + (c%2?"solid":"dotted") + " " + (stylekeys[6][1](c))) : "" }] + ] + var i, j, style, conf + + for (i=0; i<1000; i++) { + style = {} + for (j=0; j