From 89b546fe1b772e0f9f0b94da81b83513b6759e4b Mon Sep 17 00:00:00 2001 From: Stefan Krause Date: Tue, 4 Feb 2020 20:44:13 +0100 Subject: [PATCH] remove startMeasure/stopMeasure calls for keyed frameworks --- frameworks/keyed/angular-ivy/src/app.ts | 33 +---------- .../keyed/angular-ng/src/app/app.component.ts | 33 +---------- frameworks/keyed/angular-noopzone/src/app.ts | 32 +--------- frameworks/keyed/angular-optimized/src/app.ts | 32 +--------- frameworks/keyed/angular/src/app.ts | 32 +--------- .../keyed/angularjs/src/home.controller.js | 32 ---------- frameworks/keyed/apprun/src/main.tsx | 19 ------ frameworks/keyed/aurelia/src/app.js | 29 ---------- frameworks/keyed/bobril/src/app.ts | 22 ------- frameworks/keyed/choo/src/index.js | 11 ---- frameworks/keyed/choo/src/rowsView.js | 3 - frameworks/keyed/choo/src/utils.js | 21 ------- frameworks/keyed/datum/src/Main.js | 31 ---------- frameworks/keyed/etch/src/Main.jsx | 30 +--------- frameworks/keyed/fidan/app.tsx | 17 ------ frameworks/keyed/fidan/measure.ts | 16 ----- frameworks/keyed/hyperoop/src/index.tsx | 50 +++------------- frameworks/keyed/knockout/src/Main.js | 30 ---------- .../keyed/marionette-jquery/src/Main.js | 35 ----------- frameworks/keyed/marionette/src/Main.js | 33 ----------- frameworks/keyed/marko/src/main/component.js | 29 ---------- frameworks/keyed/mimbl/src/Main.tsx | 58 +++---------------- frameworks/keyed/mithril/src/controller.jsx | 28 --------- frameworks/keyed/petit-dom/src/index.js | 29 +--------- .../keyed/plastiq/src/entry/main.es6.jsx | 18 ------ frameworks/keyed/preact/src/Main.jsx | 38 +----------- .../keyed/ractive/src/main.ractive.html | 35 ----------- .../keyed/react-easy-state/src/appStore.js | 17 ------ .../keyed/react-easy-state/src/logPerf.js | 18 ------ frameworks/keyed/react-lite/src/Main.jsx | 35 ----------- frameworks/keyed/react-mobX/src/Main.jsx | 38 ------------ .../react-redux-combiner/src/controller.jsx | 47 --------------- frameworks/keyed/redom/src/app.js | 36 ------------ frameworks/keyed/riot/index.html | 17 ------ frameworks/keyed/riot/src/app.riot | 16 ----- frameworks/keyed/san/src/App.js | 33 ----------- frameworks/keyed/vanillajs-1/src/Main.js | 36 ------------ frameworks/keyed/vanillajs/src/Main.js | 37 ------------ frameworks/keyed/vidom/src/controller.jsx | 23 -------- frameworks/keyed/vue/src/App.vue | 33 ----------- 40 files changed, 27 insertions(+), 1135 deletions(-) delete mode 100644 frameworks/keyed/fidan/measure.ts delete mode 100644 frameworks/keyed/react-easy-state/src/logPerf.js diff --git a/frameworks/keyed/angular-ivy/src/app.ts b/frameworks/keyed/angular-ivy/src/app.ts index d13464dbe..2bf854143 100644 --- a/frameworks/keyed/angular-ivy/src/app.ts +++ b/frameworks/keyed/angular-ivy/src/app.ts @@ -6,25 +6,6 @@ interface Data { label: string; } -// Debugging performance not supported yet -let startTime: number; -let lastMeasure: string; -let startMeasure = function (name: string) { - startTime = performance.now(); - lastMeasure = name; -}; -let stopMeasure = function () { - var last = lastMeasure; - if (lastMeasure) { - window.setTimeout(function () { - lastMeasure = null; - var stop = performance.now(); - var duration = 0; - console.log(last + ' took ' + (stop - startTime)); - }, 0); - } -}; - @Component({ selector: 'my-app', template: ` @@ -88,7 +69,7 @@ let stopMeasure = function () { ` }) -export class AppComponent implements AfterViewChecked { +export class AppComponent { data: Array = []; selected: number = undefined; id: number = 1; @@ -122,7 +103,6 @@ export class AppComponent implements AfterViewChecked { } select(item: Data, event: Event) { - startMeasure('select'); event.preventDefault(); this.selected = item.id; detectChanges(this); @@ -130,7 +110,6 @@ export class AppComponent implements AfterViewChecked { delete(item: Data, event: Event) { event.preventDefault(); - startMeasure('delete'); for (let i = 0, l = this.data.length; i < l; i++) { if (this.data[i].id === item.id) { this.data.splice(i, 1); @@ -141,19 +120,16 @@ export class AppComponent implements AfterViewChecked { } run() { - startMeasure('run'); this.data = this.buildData(); detectChanges(this); } add() { - startMeasure('add'); this.data = this.data.concat(this.buildData(1000)); detectChanges(this); } update() { - startMeasure('update'); for (let i = 0; i < this.data.length; i += 10) { this.data[i].label += ' !!!'; } @@ -161,21 +137,18 @@ export class AppComponent implements AfterViewChecked { } runLots() { - startMeasure('runLots'); this.data = this.buildData(10000); this.selected = undefined; detectChanges(this); } clear() { - startMeasure('clear'); this.data = []; this.selected = undefined; detectChanges(this); } swapRows() { - startMeasure('swapRows'); if (this.data.length > 998) { var a = this.data[1]; this.data[1] = this.data[998]; @@ -183,10 +156,6 @@ export class AppComponent implements AfterViewChecked { } detectChanges(this); } - - ngAfterViewChecked() { - stopMeasure(); - } } // TODO: The properties would currently be dropped by closure compiler, figure it out diff --git a/frameworks/keyed/angular-ng/src/app/app.component.ts b/frameworks/keyed/angular-ng/src/app/app.component.ts index 883e0e3ab..257375ca5 100644 --- a/frameworks/keyed/angular-ng/src/app/app.component.ts +++ b/frameworks/keyed/angular-ng/src/app/app.component.ts @@ -5,30 +5,12 @@ interface Data { label: string; } -let startTime: number; -let lastMeasure: string; -let startMeasure = function (name: string) { - startTime = performance.now(); - lastMeasure = name; -} -let stopMeasure = function () { - var last = lastMeasure; - if (lastMeasure) { - window.setTimeout(function () { - lastMeasure = null; - var stop = performance.now(); - var duration = 0; - console.log(last + " took " + (stop - startTime)); - }, 0); - } -} - @Component({ selector: 'app-root', templateUrl: './app.component.html', styles: [] }) -export class AppComponent implements AfterViewChecked { +export class AppComponent { data: Array = []; selected: number = undefined; id: number = 1; @@ -60,14 +42,12 @@ export class AppComponent implements AfterViewChecked { } select(item: Data, event: Event) { - startMeasure("select"); event.preventDefault(); this.selected = item.id; } delete(item: Data, event: Event) { event.preventDefault(); - startMeasure("delete"); for (let i = 0, l = this.data.length; i < l; i++) { if (this.data[i].id === item.id) { this.data.splice(i, 1); @@ -77,44 +57,33 @@ export class AppComponent implements AfterViewChecked { } run() { - startMeasure("run"); this.data = this.buildData(); } add() { - startMeasure("add"); this.data = this.data.concat(this.buildData(1000)); } update() { - startMeasure("update"); for (let i = 0; i < this.data.length; i += 10) { this.data[i].label += ' !!!'; } } runLots() { - startMeasure("runLots"); this.data = this.buildData(10000); this.selected = undefined; } clear() { - startMeasure("clear"); this.data = []; this.selected = undefined; } swapRows() { - startMeasure("swapRows"); if (this.data.length > 998) { var a = this.data[1]; this.data[1] = this.data[998]; this.data[998] = a; } } - - ngAfterViewChecked() { - stopMeasure(); - // console.log("hello"); - } } /* console.log instead of stopMeasure: diff --git a/frameworks/keyed/angular-noopzone/src/app.ts b/frameworks/keyed/angular-noopzone/src/app.ts index be8eeaba4..b26c1df0f 100644 --- a/frameworks/keyed/angular-noopzone/src/app.ts +++ b/frameworks/keyed/angular-noopzone/src/app.ts @@ -6,24 +6,6 @@ interface Data { label: string; } -let startTime: number; -let lastMeasure: string; -let startMeasure = function (name: string) { - startTime = performance.now(); - lastMeasure = name; -}; -let stopMeasure = function () { - var last = lastMeasure; - if (lastMeasure) { - window.setTimeout(function () { - lastMeasure = null; - var stop = performance.now(); - var duration = 0; - console.log(last + ' took ' + (stop - startTime)); - }, 0); - } -}; - @Component({ selector: 'my-app', template: ` @@ -82,7 +64,7 @@ let stopMeasure = function () { ` }) -export class AppComponent implements AfterViewChecked { +export class AppComponent { data: Array = []; selected: number = undefined; id: number = 1; @@ -116,7 +98,6 @@ export class AppComponent implements AfterViewChecked { } select(item: Data, event: Event) { - startMeasure('select'); event.preventDefault(); this.selected = item.id; this.appRef.tick(); @@ -124,7 +105,6 @@ export class AppComponent implements AfterViewChecked { delete(item: Data, event: Event) { event.preventDefault(); - startMeasure('delete'); for (let i = 0, l = this.data.length; i < l; i++) { if (this.data[i].id === item.id) { this.data.splice(i, 1); @@ -135,19 +115,16 @@ export class AppComponent implements AfterViewChecked { } run() { - startMeasure('run'); this.data = this.buildData(); this.appRef.tick(); } add() { - startMeasure('add'); this.data = this.data.concat(this.buildData(1000)); this.appRef.tick(); } update() { - startMeasure('update'); for (let i = 0; i < this.data.length; i += 10) { this.data[i].label += ' !!!'; } @@ -155,21 +132,18 @@ export class AppComponent implements AfterViewChecked { } runLots() { - startMeasure('runLots'); this.data = this.buildData(10000); this.selected = undefined; this.appRef.tick(); } clear() { - startMeasure('clear'); this.data = []; this.selected = undefined; this.appRef.tick(); } swapRows() { - startMeasure('swapRows'); if (this.data.length > 998) { var a = this.data[1]; this.data[1] = this.data[998]; @@ -177,10 +151,6 @@ export class AppComponent implements AfterViewChecked { } this.appRef.tick(); } - - ngAfterViewChecked() { - stopMeasure(); - } } @NgModule({ diff --git a/frameworks/keyed/angular-optimized/src/app.ts b/frameworks/keyed/angular-optimized/src/app.ts index dcbe5a7cc..6a545c0e9 100644 --- a/frameworks/keyed/angular-optimized/src/app.ts +++ b/frameworks/keyed/angular-optimized/src/app.ts @@ -7,24 +7,6 @@ interface Data { label: string; } -let startTime: number; -let lastMeasure: string; -let startMeasure = function (name: string) { - startTime = performance.now(); - lastMeasure = name; -}; -let stopMeasure = function () { - var last = lastMeasure; - if (lastMeasure) { - window.setTimeout(function () { - lastMeasure = null; - var stop = performance.now(); - var duration = 0; - console.log(last + ' took ' + (stop - startTime)); - }, 0); - } -}; - @Component({ selector: 'my-app', template: ` @@ -86,7 +68,7 @@ let stopMeasure = function () { ` }) -export class AppComponent implements AfterViewChecked { +export class AppComponent { data: Array = []; selected: number = undefined; id: number = 1; @@ -123,7 +105,6 @@ export class AppComponent implements AfterViewChecked { } select(item: Data, event: Event) { - startMeasure('select'); event.preventDefault(); this.selected = item.id; this.appRef.tick(); @@ -131,7 +112,6 @@ export class AppComponent implements AfterViewChecked { delete(item: Data, event: Event) { event.preventDefault(); - startMeasure('delete'); for (let i = 0, l = this.data.length; i < l; i++) { if (this.data[i].id === item.id) { this.data.splice(i, 1); @@ -142,19 +122,16 @@ export class AppComponent implements AfterViewChecked { } run() { - startMeasure('run'); this.data = this.buildData(); this.appRef.tick(); } add() { - startMeasure('add'); this.data = this.data.concat(this.buildData(1000)); this.appRef.tick(); } update() { - startMeasure('update'); for (let i = 0; i < this.data.length; i += 10) { this.data[i].label += ' !!!'; } @@ -162,21 +139,18 @@ export class AppComponent implements AfterViewChecked { } runLots() { - startMeasure('runLots'); this.data = this.buildData(10000); this.selected = undefined; this.appRef.tick(); } clear() { - startMeasure('clear'); this.data = []; this.selected = undefined; this.appRef.tick(); } swapRows() { - startMeasure('swapRows'); if (this.data.length > 998) { var a = this.data[1]; this.data[1] = this.data[998]; @@ -184,10 +158,6 @@ export class AppComponent implements AfterViewChecked { } this.appRef.tick(); } - - ngAfterViewChecked() { - stopMeasure(); - } } @NgModule({ diff --git a/frameworks/keyed/angular/src/app.ts b/frameworks/keyed/angular/src/app.ts index 5e62127ed..1e01972c3 100644 --- a/frameworks/keyed/angular/src/app.ts +++ b/frameworks/keyed/angular/src/app.ts @@ -6,24 +6,6 @@ interface Data { label: string; } -let startTime: number; -let lastMeasure: string; -let startMeasure = function (name: string) { - startTime = performance.now(); - lastMeasure = name; -} -let stopMeasure = function () { - var last = lastMeasure; - if (lastMeasure) { - window.setTimeout(function () { - lastMeasure = null; - var stop = performance.now(); - var duration = 0; - console.log(last + " took " + (stop - startTime)); - }, 0); - } -} - @Component({ selector: 'my-app', template: `
@@ -69,7 +51,7 @@ let stopMeasure = function () {
` }) -export class AppComponent implements AfterViewChecked { +export class AppComponent { data: Array = []; selected: number = undefined; id: number = 1; @@ -100,14 +82,12 @@ export class AppComponent implements AfterViewChecked { } select(item: Data, event: Event) { - startMeasure("select"); event.preventDefault(); this.selected = item.id; } delete(item: Data, event: Event) { event.preventDefault(); - startMeasure("delete"); for (let i = 0, l = this.data.length; i < l; i++) { if (this.data[i].id === item.id) { this.data.splice(i, 1); @@ -117,43 +97,33 @@ export class AppComponent implements AfterViewChecked { } run() { - startMeasure("run"); this.data = this.buildData(); } add() { - startMeasure("add"); this.data = this.data.concat(this.buildData(1000)); } update() { - startMeasure("update"); for (let i = 0; i < this.data.length; i += 10) { this.data[i].label += ' !!!'; } } runLots() { - startMeasure("runLots"); this.data = this.buildData(10000); this.selected = undefined; } clear() { - startMeasure("clear"); this.data = []; this.selected = undefined; } swapRows() { - startMeasure("swapRows"); if (this.data.length > 998) { var a = this.data[1]; this.data[1] = this.data[998]; this.data[998] = a; } } - - ngAfterViewChecked() { - stopMeasure(); - } } @NgModule({ diff --git a/frameworks/keyed/angularjs/src/home.controller.js b/frameworks/keyed/angularjs/src/home.controller.js index 3ea40f2c5..b901c636c 100644 --- a/frameworks/keyed/angularjs/src/home.controller.js +++ b/frameworks/keyed/angularjs/src/home.controller.js @@ -1,16 +1,3 @@ -let startTime; -let lastMeasure; - -const startMeasure = (name) => { - startTime = performance.now(); - lastMeasure = name; -}; -const stopMeasure = () => { - window.setTimeout(() => { - const stop = performance.now(); - console.log(lastMeasure+" took "+(stop-startTime)); - }, 0); -}; export default class HomeController { $onInit() { @@ -29,66 +16,47 @@ export default class HomeController { } return data; } - printDuration() { - stopMeasure(); - } _random(max) { return Math.round(Math.random() * 1000) % max; } add() { - startMeasure("add"); this.start = performance.now(); this.data = this.data.concat(this.buildData(1000)); - this.printDuration(); } select(item) { - startMeasure("select"); this.start = performance.now(); this.selected = item.id; - this.printDuration(); } del(item) { - startMeasure("delete"); this.start = performance.now(); const idx = this.data.findIndex(d => d.id===item.id); this.data.splice(idx, 1); - this.printDuration(); } update() { - startMeasure("update"); this.start = performance.now(); for (let i=0;i 998) { var a = this.data[1]; this.data[1] = this.data[998]; this.data[998] = a; } - this.printDuration(); }; }; \ No newline at end of file diff --git a/frameworks/keyed/apprun/src/main.tsx b/frameworks/keyed/apprun/src/main.tsx index 13f36fd8f..b98c55ad7 100644 --- a/frameworks/keyed/apprun/src/main.tsx +++ b/frameworks/keyed/apprun/src/main.tsx @@ -1,19 +1,6 @@ import app, { Component } from 'apprun' import Store from './store'; -var startTime; -var lastMeasure; -var startMeasure = function (name) { - startTime = performance.now(); - lastMeasure = name; -} -var stopMeasure = function () { - window.setTimeout(function () { - var stop = performance.now(); - console.log(lastMeasure + " took " + (stop - startTime)); - }, 0); -} - const store = new Store(); const update = { @@ -143,19 +130,13 @@ document.body.addEventListener('click', e => { if (!t) return; if (t.tagName === 'BUTTON' && t.id) { e.preventDefault(); - startMeasure(t.id); component.run(t.id); - stopMeasure(); } else if (t.matches('.remove')) { e.preventDefault(); - startMeasure('remove'); component.run('remove', getId(t)); - stopMeasure(); } else if (t.matches('.lbl')) { e.preventDefault(); - startMeasure('select'); component.run('select', getId(t)); - stopMeasure(); } }); diff --git a/frameworks/keyed/aurelia/src/app.js b/frameworks/keyed/aurelia/src/app.js index 4791b27eb..ac2299012 100755 --- a/frameworks/keyed/aurelia/src/app.js +++ b/frameworks/keyed/aurelia/src/app.js @@ -1,64 +1,35 @@ import {Store} from './store'; -var startTime; -var lastMeasure; -var startMeasure = function(name) { - startTime = performance.now(); - lastMeasure = name; -} -var stopMeasure = function() { - window.setTimeout(function() { - var stop = performance.now(); - console.log(lastMeasure+" took "+(stop-startTime)); - }, 0); -} - export class App { constructor() { this.store = new Store(); } run() { - startMeasure("run"); this.store.run(); - stopMeasure(); } add() { - startMeasure("add"); this.store.add(); - stopMeasure(); } remove(item) { - startMeasure("delete"); this.store.delete(item.id); - stopMeasure(); } select(item) { - startMeasure("select"); this.store.select(item.id); - stopMeasure(); } update() { - startMeasure("update"); this.store.update(); - stopMeasure(); } runLots() { - startMeasure("runLots"); this.store.runLots(); - stopMeasure(); } clear() { - startMeasure("clear"); this.store.clear(); - stopMeasure(); } swapRows() { - startMeasure("swapRows"); this.store.swapRows(); - stopMeasure(); } } diff --git a/frameworks/keyed/bobril/src/app.ts b/frameworks/keyed/bobril/src/app.ts index 2125ea063..6c2232be8 100644 --- a/frameworks/keyed/bobril/src/app.ts +++ b/frameworks/keyed/bobril/src/app.ts @@ -4,24 +4,6 @@ import { Store } from "./store"; // For who ever will read this: in Bobril you normally don't use bootstrap or class names directly, you use b.styleDef instead. b.asset("../../../../css/currentStyle.css"); -var startTime: number; -var lastMeasure: string; -var startMeasure = function(name) { - startTime = performance.now(); - lastMeasure = name; -}; -var stopMeasure = function() { - var last = lastMeasure; - if (lastMeasure) { - window.setTimeout(function() { - lastMeasure = null; - var stop = performance.now(); - var duration = 0; - console.log(last + " took " + (stop - startTime)); - }, 0); - } -}; - function divWithClass(name: string, children: b.IBobrilChildren) { return { tag: "div", className: name, children }; } @@ -51,7 +33,6 @@ const Button = b.createVirtualComponent({ me.children = d.children; }, onClick(ctx: IButtonCtx): boolean { - startMeasure(ctx.data.id); ctx.data.action(); b.invalidate(); return true; @@ -114,7 +95,6 @@ const Header = b.createComponent({ const ClickSelect: b.IBobrilComponent = { onClick(ctx: b.IBobrilCtx, event: b.IBobrilMouseEvent): boolean { - startMeasure("select"); store.select(ctx.data); b.invalidate(); return true; @@ -123,7 +103,6 @@ const ClickSelect: b.IBobrilComponent = { const ClickRemove: b.IBobrilComponent = { onClick(ctx: b.IBobrilCtx, event: b.IBobrilMouseEvent): boolean { - startMeasure("delete"); store.delete(ctx.data); b.invalidate(); return true; @@ -179,7 +158,6 @@ b.init(() => { tag: "div", className: "container", component: { - postUpdateDom: stopMeasure }, children: [ Header(), diff --git a/frameworks/keyed/choo/src/index.js b/frameworks/keyed/choo/src/index.js index 32d07a67a..3dd4fdf7c 100644 --- a/frameworks/keyed/choo/src/index.js +++ b/frameworks/keyed/choo/src/index.js @@ -5,13 +5,8 @@ const app = choo(); const rowsView = require('./rowsView'); const store = require('./store'); const utils = require('./utils'); -const startMeasure = utils.startMeasure; -const stopMeasure = utils.stopMeasure; app.use(store); -app.emitter.addListener('render', () => { - stopMeasure(); -}); function view(state, emit) { return html` @@ -55,32 +50,26 @@ function view(state, emit) { `; function run() { - startMeasure('run'); emit('run'); } function runLots() { - startMeasure('runLots'); emit('runLots'); } function add() { - startMeasure('add'); emit('add'); } function update() { - startMeasure('update'); emit('update'); } function clear() { - startMeasure('clear'); emit('clear'); } function swapRows() { - startMeasure('swapRows'); emit('swapRows'); } } diff --git a/frameworks/keyed/choo/src/rowsView.js b/frameworks/keyed/choo/src/rowsView.js index 1def58e39..e13916540 100644 --- a/frameworks/keyed/choo/src/rowsView.js +++ b/frameworks/keyed/choo/src/rowsView.js @@ -1,6 +1,5 @@ const html = require('choo/html'); const utils = require('./utils'); -const startMeasure = utils.startMeasure; module.exports = function rowsView(state, emit) { const data = state.data; @@ -41,14 +40,12 @@ function row(state, emit) { function del(id, emit) { return e => { - startMeasure('delete'); emit('delete', { id: id }); }; } function click(id, emit) { return e => { - startMeasure('select'); emit('select', { id: id }); }; } diff --git a/frameworks/keyed/choo/src/utils.js b/frameworks/keyed/choo/src/utils.js index 7c8dc8554..7067ddd7b 100644 --- a/frameworks/keyed/choo/src/utils.js +++ b/frameworks/keyed/choo/src/utils.js @@ -1,25 +1,4 @@ exports.buildData = buildData; -exports.startMeasure = startMeasure; -exports.stopMeasure = stopMeasure; - -let startTime; -let lastMeasure; -function startMeasure(name) { - startTime = performance.now(); - lastMeasure = name; -} - -function stopMeasure() { - const last = lastMeasure; - if (lastMeasure) { - window.setTimeout(function metaStopMeasure() { - lastMeasure = null; - const stop = performance.now(); - const duration = 0; - console.log(last + ' took ' + (stop - startTime)); - }, 0); - } -} // diff --git a/frameworks/keyed/datum/src/Main.js b/frameworks/keyed/datum/src/Main.js index b702f1705..da0958eb8 100644 --- a/frameworks/keyed/datum/src/Main.js +++ b/frameworks/keyed/datum/src/Main.js @@ -1,20 +1,5 @@ const Datum = require('Datum'); -var startTime; -var lastMeasure; - -var startMeasure = function (name) { - startTime = performance.now(); - lastMeasure = name; -}; - -var stopMeasure = function () { - window.setTimeout(function () { - var stop = performance.now(); - console.log(lastMeasure + " took " + (stop - startTime)); - }, 0); -}; - var HomeViewModel = function () { this.data = []; @@ -48,48 +33,36 @@ var HomeViewModel = function () { } this.run = new Datum.Click(function () { - startMeasure("run"); this.data = buildData(1000); selected(null); - stopMeasure(); }); this.runLots = new Datum.Click(function () { - startMeasure("runLots"); this.data = buildData(10000); selected(null); - stopMeasure(); }); this.add = new Datum.Click(function () { - startMeasure("add"); this.data.push.apply(this.data, buildData(1000)); - stopMeasure(); }); this.update = new Datum.Click(function () { - startMeasure("update"); for (var i = 0; i < this.data.length; i += 10) { this.data[i].update(); } - stopMeasure(); }); this.clear = new Datum.Click(function () { - startMeasure("clear"); this.data = []; selected(null); - stopMeasure(); }); this.swapRows = new Datum.Click(function () { - startMeasure("swapRows"); if (this.data.length > 998) { var a = this.data[1]; var b = this.data.splice(998, 1, a)[0]; this.data.splice(1, 1, b); } - stopMeasure(); }); function ItemViewModel(id, itemLabel) { @@ -108,17 +81,13 @@ var HomeViewModel = function () { }; this.del = new Datum.Click(function () { - startMeasure("delete"); var index = self.data.indexOf(this); self.data.splice(index, 1); - stopMeasure(); }); this.select = new Datum.Binding({ click: function() { - startMeasure("select"); selected(this); - stopMeasure(); }, classes: { danger: function() { diff --git a/frameworks/keyed/etch/src/Main.jsx b/frameworks/keyed/etch/src/Main.jsx index 985837365..4da615a1f 100644 --- a/frameworks/keyed/etch/src/Main.jsx +++ b/frameworks/keyed/etch/src/Main.jsx @@ -5,24 +5,6 @@ var etch = require('etch'); const {Row} = require('./Row'); const {Store} = require('./Store'); -var startTime; -var lastMeasure; -var startMeasure = function(name) { - startTime = performance.now(); - lastMeasure = name; -} -var stopMeasure = function() { - var last = lastMeasure; - if (lastMeasure) { - window.setTimeout(function () { - lastMeasure = null; - var stop = performance.now(); - var duration = 0; - console.log(last+" took "+(stop-startTime)); - }, 0); - } -} - export class Main { constructor(props, children) { this.props = props; @@ -43,48 +25,38 @@ export class Main { } update (props, children) { - return etch.update(this).then(() => { - stopMeasure(); - }); + return etch.update(this); } run() { - startMeasure("run"); this.store.run(); this.update(); } add() { - startMeasure("add"); this.store.add(); this.update(); } updateRows() { - startMeasure("update"); this.store.update(); this.update(); } select(id) { - startMeasure("select"); this.store.select(id); this.update(); } delete(id) { - startMeasure("delete"); this.store.delete(id); this.update(); } runLots() { - startMeasure("runLots"); this.store.runLots(); this.update(); } clear() { - startMeasure("clear"); this.store.clear(); this.update(); } swapRows() { - startMeasure("swapRows"); this.store.swapRows(); this.update(); } diff --git a/frameworks/keyed/fidan/app.tsx b/frameworks/keyed/fidan/app.tsx index c6aea6d2c..6a3c7fca0 100644 --- a/frameworks/keyed/fidan/app.tsx +++ b/frameworks/keyed/fidan/app.tsx @@ -2,7 +2,6 @@ import { value, beforeCompute, FidanArray } from "@fidanjs/runtime"; import { buildData, BenchmarkDataRow } from "./data"; -import { startMeasure, stopMeasure } from "./measure"; import { jsxArrayMap } from "@fidanjs/jsx"; const dataArray = value([]) as FidanArray; @@ -18,69 +17,53 @@ beforeCompute( ); const run = () => { - startMeasure("run"); const data = buildData(1000); dataArray(data); - stopMeasure(); }; const runLots = () => { - startMeasure("run"); selectedTr(null); const data = buildData(10000); dataArray(data); - stopMeasure(); }; const add = () => { - startMeasure("add"); selectedTr(null); const currentData = dataArray(); const newData = buildData(1000); currentData.push.apply(currentData, newData); - stopMeasure(); }; const cleardata = () => { - startMeasure("cleardata"); selectedTr(null); dataArray([]); - stopMeasure(); }; const select = e => { - startMeasure("select"); selectedTr(e.target.parentNode.parentNode); - stopMeasure(); }; const del = e => { - startMeasure("del"); const id = parseInt(e.target.getAttribute("data-id")); const data = dataArray(); const idx = data.findIndex(item => item.id() == id); data.splice(idx, 1); - stopMeasure(); }; const update = () => { - startMeasure("update"); const data = dataArray(); for (let i = 0; i < data.length; i += 10) { data[i].label(data[i].label() + " !!!"); } - stopMeasure(); }; const swaprows = () => { - startMeasure("swaprows"); const data = dataArray(); const x = 1, y = 998; const sp1 = data.splice(x, 1, data[y])[0]; data.splice(y, 1, sp1); // dataArray().splice(y, 1, dataArray().splice(x, 1, dataArray()[y])[0]); - stopMeasure(); }; const itemView = (dataItem: BenchmarkDataRow) => { diff --git a/frameworks/keyed/fidan/measure.ts b/frameworks/keyed/fidan/measure.ts deleted file mode 100644 index ac0f1dcbc..000000000 --- a/frameworks/keyed/fidan/measure.ts +++ /dev/null @@ -1,16 +0,0 @@ -var startTime; -var lastMeasure; -export const startMeasure = function(name) { - startTime = performance.now(); - lastMeasure = name; -}; -export const stopMeasure = function() { - var last = lastMeasure; - if (lastMeasure) { - window.setTimeout(function() { - lastMeasure = null; - var stop = performance.now(); - console.log(last + " took " + (stop - startTime)); - }, 0); - } -}; diff --git a/frameworks/keyed/hyperoop/src/index.tsx b/frameworks/keyed/hyperoop/src/index.tsx index d66e90117..1cd904122 100644 --- a/frameworks/keyed/hyperoop/src/index.tsx +++ b/frameworks/keyed/hyperoop/src/index.tsx @@ -2,33 +2,7 @@ import * as ui from "hyperoop"; import { actions } from "./store"; import RowsView from "./rowsView"; -let startTime; -let lastMeasure; - -function startMeasure(name, cb) { - startTime = performance.now(); - lastMeasure = name; - cb(); -} - -function stopMeasure() { - const last = lastMeasure; - - if (lastMeasure) { - window.setTimeout( - function metaStopMeasure() { - lastMeasure = null; - const stop = performance.now(); - const duration = 0; - console.log(last + " took " + (stop - startTime)); - }, - 0 - ) - } -} - function view() { - stopMeasure(); return (
@@ -45,7 +19,7 @@ function view() { class="btn btn-primary btn-block" id="run" onclick={_ => - startMeasure("run", actions.run.bind(actions))}> + actions.run.bind(actions)()}> Create 1,000 rows
@@ -55,10 +29,8 @@ function view() { class="btn btn-primary btn-block" id="runlots" onclick={_ => - startMeasure( - "runLots", - actions.runLots.bind(actions) - )}> + actions.runLots.bind(actions)() + }> Create 10,000 rows @@ -67,8 +39,7 @@ function view() { type="button" class="btn btn-primary btn-block" id="add" - onclick={_ => - startMeasure("add", actions.add.bind(actions))}> + onclick={_ => actions.add.bind(actions)()}> Append 1,000 rows @@ -77,8 +48,7 @@ function view() { type="button" class="btn btn-primary btn-block" id="update" - onclick={_ => - startMeasure("update", actions.update.bind(actions))}> + onclick={_ => actions.update.bind(actions)()}> Update every 10th row @@ -87,8 +57,7 @@ function view() { type="button" class="btn btn-primary btn-block" id="clear" - onclick={_ => - startMeasure("clear", actions.clear.bind(actions))}> + onclick={_ => actions.clear.bind(actions)()}> Clear @@ -97,11 +66,8 @@ function view() { type="button" class="btn btn-primary btn-block" id="swaprows" - onclick={_ => - startMeasure( - "swapRows", - actions.swapRows.bind(actions) - )}> + onclick={_ => actions.swapRows.bind(actions)() + }> Swap Rows diff --git a/frameworks/keyed/knockout/src/Main.js b/frameworks/keyed/knockout/src/Main.js index f1e3602bb..358a38e5a 100644 --- a/frameworks/keyed/knockout/src/Main.js +++ b/frameworks/keyed/knockout/src/Main.js @@ -1,20 +1,6 @@ import ko from 'knockout'; -var startTime; -var lastMeasure; - -var startMeasure = function (name) { - startTime = performance.now(); - lastMeasure = name; -}; -var stopMeasure = function () { - window.setTimeout(function () { - var stop = performance.now(); - console.log(lastMeasure + " took " + (stop - startTime)); - }, 0); -}; - var HomeViewModel = function () { var self = this; self.id = 1; @@ -41,43 +27,32 @@ var HomeViewModel = function () { self.data = ko.observableArray(); self.run = function () { - startMeasure("run"); self.data(buildData(1000)); self.selected(null); - stopMeasure(); }; self.runLots = function () { - startMeasure("runLots"); self.data(buildData(10000)); self.selected(null); - stopMeasure(); }; self.add = function () { - startMeasure("add"); self.data.push.apply(self.data, buildData(1000)); - stopMeasure(); }; self.update = function () { - startMeasure("update"); var tmp = self.data(); for (let i = 0; i < tmp.length; i += 10) { tmp[i].label(tmp[i].label() + ' !!!'); } - stopMeasure(); }; self.clear = function () { - startMeasure("clear"); self.data.removeAll(); self.selected(null); - stopMeasure(); }; self.swapRows = function () { - startMeasure("swapRows"); var tmp = self.data(); if (tmp.length > 998) { var a = tmp[1]; @@ -85,21 +60,16 @@ var HomeViewModel = function () { tmp[998] = a; self.data(tmp); } - stopMeasure(); }; self.select = function (id) { - startMeasure("select"); self.selected(id); - stopMeasure(); }; self.del = function (item) { - startMeasure("delete"); var tmp = self.data(); const idx = tmp.findIndex(d => d.id === item.id); self.data.splice(idx, 1); - stopMeasure(); }; }; diff --git a/frameworks/keyed/marionette-jquery/src/Main.js b/frameworks/keyed/marionette-jquery/src/Main.js index d19b3513a..c662d1a76 100644 --- a/frameworks/keyed/marionette-jquery/src/Main.js +++ b/frameworks/keyed/marionette-jquery/src/Main.js @@ -5,25 +5,6 @@ import Bb from 'backbone'; import { View, CollectionView } from 'backbone.marionette'; import rowTemplate from './row.tpl'; -var startTime; -var lastMeasure; -var startMeasure = function(name) { - startTime = performance.now(); - lastMeasure = name; -} -var stopMeasure = function() { - var last = lastMeasure; - if (lastMeasure) { - // console.profileEnd(lastMeasure); - window.setTimeout(function () { - lastMeasure = null; - var stop = performance.now(); - var duration = 0; - console.log(last+" took "+(stop-startTime)); - }, 0); - } -} - function _random(max) { return Math.round(Math.random()*1000)%max; } @@ -46,61 +27,45 @@ const Store = Bb.Collection.extend({ return data; }, updateData(mod = 10) { - startMeasure("update"); for (let i=0;i model.off()); this._reset(); }, clear() { - startMeasure("clear"); this._clear(); this.trigger('reset', this); - stopMeasure(); }, swapRows() { - startMeasure("swapRows"); if (this.length > 998) { const a = this.models[1]; this.models[1] = this.models[998]; this.models[998] = a; this.trigger('swap', this.models[1], this.models[998]); } - stopMeasure(); } }); diff --git a/frameworks/keyed/marionette/src/Main.js b/frameworks/keyed/marionette/src/Main.js index 17bc1e656..00492ad66 100644 --- a/frameworks/keyed/marionette/src/Main.js +++ b/frameworks/keyed/marionette/src/Main.js @@ -10,23 +10,6 @@ import DomApi from './mn-domapi'; setDomApi(DomApi); -var startTime; -var lastMeasure; -var startMeasure = function(name) { - startTime = performance.now(); - lastMeasure = name; -} -var stopMeasure = function() { - var last = lastMeasure; - if (lastMeasure) { - window.setTimeout(function () { - lastMeasure = null; - var stop = performance.now(); - console.log(last+" took "+(stop-startTime)); - }, 0); - } -} - function _random(max) { return Math.round(Math.random()*1000)%max; } @@ -49,61 +32,45 @@ const Store = Bb.Collection.extend({ return data; }, updateData(mod = 10) { - startMeasure("update"); for (let i=0;i model.off()); this._reset(); }, clear() { - startMeasure("clear"); this._clear(); this.trigger('reset', this); - stopMeasure(); }, swapRows() { - startMeasure("swapRows"); if (this.length > 998) { const a = this.models[1]; this.models[1] = this.models[998]; this.models[998] = a; this.trigger('swap', this.models[1], this.models[998]); } - stopMeasure(); } }); diff --git a/frameworks/keyed/marko/src/main/component.js b/frameworks/keyed/marko/src/main/component.js index 622f7214f..26ff4736f 100644 --- a/frameworks/keyed/marko/src/main/component.js +++ b/frameworks/keyed/marko/src/main/component.js @@ -4,24 +4,6 @@ function _random(max) { return Math.round(Math.random()*1000)%max; } -var startTime; -var lastMeasure; -var startMeasure = function(name) { - startTime = performance.now(); - lastMeasure = name; -} -var stopMeasure = function() { - var last = lastMeasure; - if (lastMeasure) { - window.setTimeout(function () { - lastMeasure = null; - var stop = performance.now(); - var duration = 0; - console.log(last+" took "+(stop-startTime)); - }, 0); - } -} - var id = 1; module.exports = { @@ -31,9 +13,6 @@ module.exports = { data: [] }; }, - onUpdate() { - stopMeasure(); - }, buildData(count=1000) { var adjectives = ["pretty", "large", "big", "small", "tall", "short", "long", "handsome", "plain", "quaint", "clean", "elegant", "easy", "angry", "crazy", "helpful", "mushy", "odd", "unsightly", "adorable", "important", "inexpensive", "cheap", "expensive", "fancy"]; var colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"]; @@ -44,21 +23,17 @@ module.exports = { return data; }, run() { - startMeasure("run"); this.state.data = this.buildData(); this.state.selected = null; }, runLots() { - startMeasure("runLots"); this.state.data = this.buildData(10000); this.state.selected = null; }, add() { - startMeasure("add"); this.state.data = this.state.data.concat(this.buildData()); }, update() { - startMeasure("update"); let d = this.state.data; for (let i=0;i 998) { @@ -82,7 +55,6 @@ module.exports = { this.forceUpdate(); }, delete(item) { - startMeasure("delete"); var id = item.id; var data = this.state.data; var idx = data.findIndex(d => d.id === id); @@ -90,7 +62,6 @@ module.exports = { this.forceUpdate(); }, select(item) { - startMeasure("select"); this.state.selected = item.id; } }; diff --git a/frameworks/keyed/mimbl/src/Main.tsx b/frameworks/keyed/mimbl/src/Main.tsx index 797c2f0a8..811041c07 100644 --- a/frameworks/keyed/mimbl/src/Main.tsx +++ b/frameworks/keyed/mimbl/src/Main.tsx @@ -3,26 +3,6 @@ import {IMainContainer} from "./Row" import {Store} from "./Store" import {TBody} from"./TBody" - -// var startTime; -// var lastMeasure; -// var startMeasure = function(name) { -// //console.timeStamp(name); -// startTime = performance.now(); -// lastMeasure = name; -// } -// var stopMeasure = function() { -// var last = lastMeasure; -// if (lastMeasure) { -// window.setTimeout(function () { -// lastMeasure = null; -// var stop = performance.now(); -// var duration = 0; -// console.log(last+" took "+(stop-startTime)); -// }, 0); -// } -// } - export class Main extends mim.Component implements IMainContainer { store: Store; @@ -32,74 +12,54 @@ export class Main extends mim.Component implements IMainContainer { super(); - this.store = new Store(); + this.store = new Store(); this.tbody = new TBody( this); (window as any).app = this; } - // schedulePrintDuration() { - // this.callMe( () => stopMeasure(), false); - // } - run = () => { - // startMeasure("run"); this.tbody.run(); - // this.schedulePrintDuration(); } - + add = () => { - // startMeasure("add"); this.tbody.add(); - // this.schedulePrintDuration(); } - + update = () => { - // startMeasure("update"); this.tbody.update(); - // this.schedulePrintDuration(); } - + runLots = () => { - // startMeasure("runLots"); this.tbody.runLots(); - // this.schedulePrintDuration(); } - + clear = () => { - // startMeasure("clear"); this.tbody.clear(); this.tbody = new TBody( this); this.updateMe(); - // this.schedulePrintDuration(); } - + swapRows = () => { - // startMeasure("swapRows"); this.tbody.swapRows(); - // this.schedulePrintDuration(); } - + onSelectRowClicked( row) { - // startMeasure("select"); this.tbody.onSelectRowClicked(row); - // this.schedulePrintDuration(); } - + onDeleteRowClicked( row) { - // startMeasure("delete"); this.tbody.onDeleteRowClicked(row); - // this.schedulePrintDuration(); } - + render() { return (
diff --git a/frameworks/keyed/mithril/src/controller.jsx b/frameworks/keyed/mithril/src/controller.jsx index b4029502c..a6b844b57 100644 --- a/frameworks/keyed/mithril/src/controller.jsx +++ b/frameworks/keyed/mithril/src/controller.jsx @@ -7,23 +7,6 @@ var m = require('mithril'); var {Store} = require('./store'); -var startTime; -var lastMeasure; -var startMeasure = function(name) { - startTime = performance.now(); - lastMeasure = name; -}; -var stopMeasure = function() { - var last = lastMeasure; - if (lastMeasure) { - window.setTimeout(function () { - var stop = performance.now(); - var duration = 0; - console.log(lastMeasure+" took "+(stop-startTime)); - }, 0); - } -}; - var Row = { oninit: function(vnode) { this.click = function() { @@ -52,40 +35,29 @@ var Controller = { this.data = function() { return Store.data;}; this.selected = function() { return Store.selected;}; this.run = function() { - startMeasure("run") Store.run(); }; this.add = function() { - startMeasure("add") Store.add(); }; this.update = function() { - startMeasure("update") Store.update(); }; this.select = function(id) { - startMeasure("select"); Store.select(id); }; this.delete = function(id) { - startMeasure("delete") Store.remove(id); }; this.runLots = function() { - startMeasure("runLots") Store.runLots(); }; this.clear = function() { - startMeasure("clear") Store.clear(); }; this.swapRows = function() { - startMeasure("swapRows") Store.swapRows(); }; - this.done = function() { - stopMeasure(); - }; }, view: function(vnode) { diff --git a/frameworks/keyed/petit-dom/src/index.js b/frameworks/keyed/petit-dom/src/index.js index 253319364..7968f00a8 100644 --- a/frameworks/keyed/petit-dom/src/index.js +++ b/frameworks/keyed/petit-dom/src/index.js @@ -1,33 +1,14 @@ import { h, mount, patch } from "petit-dom" import { Store } from "./store" + +var store = new Store() + function startMeasure(name, meth) { - startTime = performance.now() - lastMeasure = name - // meth.call(store) updateView() - // - stopMeasure() } -function stopMeasure() { - const last = lastMeasure - - if (lastMeasure) { - window.setTimeout( - function metaStopMeasure() { - lastMeasure = null - const stop = performance.now() - const duration = 0 - console.log(last + " took " + (stop - startTime)) - }, - 0 - ) - } -} - - var runAction = () => startMeasure("run", store.run) var runLotsAction = () => startMeasure("runLots", store.runLots) var addAction = () => startMeasure("add", store.add) @@ -51,10 +32,6 @@ function updateView() { vel = vel2 } -let startTime -let lastMeasure - -var store = new Store() var main = document.getElementById("main") var vel = render() var el = mount(vel) diff --git a/frameworks/keyed/plastiq/src/entry/main.es6.jsx b/frameworks/keyed/plastiq/src/entry/main.es6.jsx index adf57f7f0..7f9516987 100755 --- a/frameworks/keyed/plastiq/src/entry/main.es6.jsx +++ b/frameworks/keyed/plastiq/src/entry/main.es6.jsx @@ -2,24 +2,6 @@ var plastiq = require('plastiq'); const {Store} = require('./store'); -var startTime; -var lastMeasure; -var startMeasure = function(name) { - startTime = performance.now(); - lastMeasure = name; -} -var stopMeasure = function() { - var last = lastMeasure; - if (lastMeasure) { - window.setTimeout(function () { - lastMeasure = null; - var stop = performance.now(); - var duration = 0; - console.log(last+" took "+(stop-startTime)); - }, 0); - } -} - var c = {}; function cache(key, render) { diff --git a/frameworks/keyed/preact/src/Main.jsx b/frameworks/keyed/preact/src/Main.jsx index 3682fad90..cf1f704ad 100644 --- a/frameworks/keyed/preact/src/Main.jsx +++ b/frameworks/keyed/preact/src/Main.jsx @@ -6,25 +6,6 @@ var { render, h, Component } = preact; const {Row} = require('./Row'); const {Store} = require('./Store'); -var startTime; -var lastMeasure; -var startMeasure = function(name) { - //console.timeStamp(name); - startTime = performance.now(); - lastMeasure = name; -} -var stopMeasure = function() { - var last = lastMeasure; - if (lastMeasure) { - window.setTimeout(function () { - lastMeasure = null; - var stop = performance.now(); - var duration = 0; - console.log(last+" took "+(stop-startTime)); - }, 0); - } -} - export class Main extends Component{ constructor(props) { super(props); @@ -39,55 +20,38 @@ export class Main extends Component{ this.swapRows = this.swapRows.bind(this); this.start = 0; this.length = 0; - + window.app = this; } - printDuration() { - stopMeasure(); - } - componentDidUpdate() { - this.printDuration(); - } - componentDidMount() { - this.printDuration(); - } run() { - startMeasure("run"); this.state.store.run(); this.setState({store: this.state.store}); } add() { - startMeasure("add"); this.state.store.add(); this.setState({store: this.state.store}); } update() { - startMeasure("update"); this.state.store.update(); this.setState({store: this.state.store}); } select(id) { - startMeasure("select"); this.state.store.select(id); this.setState({store: this.state.store}); } delete(id) { - startMeasure("delete"); this.state.store.delete(id); this.setState({store: this.state.store}); } runLots() { - startMeasure("runLots"); this.state.store.runLots(); this.setState({store: this.state.store}); } clear() { - startMeasure("clear"); this.state.store.clear(); this.setState({store: this.state.store}); } swapRows() { - startMeasure("swapRows"); this.state.store.swapRows(); this.setState({store: this.state.store}); } diff --git a/frameworks/keyed/ractive/src/main.ractive.html b/frameworks/keyed/ractive/src/main.ractive.html index e848e6fca..702a7c319 100644 --- a/frameworks/keyed/ractive/src/main.ractive.html +++ b/frameworks/keyed/ractive/src/main.ractive.html @@ -47,23 +47,6 @@

Ractive keyed

const Ractive = require('ractive'); Ractive.DEBUG = /unminified/.test(function(){/*unminified*/}); - var startTime; - var lastMeasure; - var startMeasure = function(name) { - startTime = performance.now(); - lastMeasure = name; - } - var stopMeasure = function() { - var last = lastMeasure; - if (lastMeasure) { - window.setTimeout(function () { - lastMeasure = null; - var stop = performance.now(); - console.log(last+" took "+(stop-startTime)); - }, 0); - } - } - let id = 1; function _random(max) { return Math.round(Math.random() * 1000) % max; @@ -82,18 +65,13 @@

Ractive keyed

oninit : function(options) { const that = this; this.on( 'run', function ( event) { - startMeasure("run"); this.splice('data', 0, this.get('data').length, ...buildData()); that.set("selected", undefined); - stopMeasure(); }); this.on( 'add', function ( event) { - startMeasure("add"); this.splice('data', this.get('data').length, 0, ...buildData(1000)); - stopMeasure(); }); this.on( 'partialUpdate', function ( event) { - startMeasure("update"); const data = this.get('data'); const len = data.length; const sets = {}; @@ -101,44 +79,31 @@

Ractive keyed

sets[`data.${i}.label`] = data[i].label + ' !!!'; } this.set(sets); - stopMeasure(); }); this.on('select', function (event, id) { - startMeasure("select"); this.set("selected", id); - stopMeasure(); }); this.on('runLots', function (event) { - startMeasure("runLots"); this.splice('data', 0, this.get('data').length, ...buildData(10000)); that.set("selected", undefined); - stopMeasure(); }); this.on('clear', function (event) { - startMeasure("clear"); this.splice('data', 0, this.get('data').length); that.set("selected", undefined); - stopMeasure(); }); this.on('swapRows', function (event) { - startMeasure("swapRows"); if(this.get('data').length > 998) { var a = this.get('data')[1]; this.splice('data', 1, 1, this.get('data')[998]); this.splice('data', 998, 1, a); } - stopMeasure(); }); }, remove(idx) { - startMeasure("delete"); this.splice('data',idx, 1); - stopMeasure(); }, select(id) { - startMeasure("select"); this.set("selected", id); - stopMeasure(); }, el: "#main", template: $TEMPLATE, diff --git a/frameworks/keyed/react-easy-state/src/appStore.js b/frameworks/keyed/react-easy-state/src/appStore.js index 679263460..e94b5d44f 100644 --- a/frameworks/keyed/react-easy-state/src/appStore.js +++ b/frameworks/keyed/react-easy-state/src/appStore.js @@ -1,6 +1,5 @@ import { store } from 'react-easy-state' import randomSentence from './randomSentence' -import { startMeasure, stopMeasure } from './logPerf' let idCounter = 1 @@ -19,54 +18,38 @@ const appStore = store({ appStore.deselectAll() }, run () { - startMeasure('run') appStore.rows = [] appStore.buildRows(1000) - stopMeasure('run') }, add () { - startMeasure('add') appStore.buildRows(1000) - stopMeasure('add') }, update () { - startMeasure('update') for (let i = 0; i < appStore.rows.length; i += 10) { appStore.rows[i].label += ' !!!' } - stopMeasure('update') }, select (row) { - startMeasure('select') appStore.deselectAll() appStore.selectedRow = row row.selected = true - stopMeasure('select') }, delete (row) { - startMeasure('delete') appStore.rows.splice(appStore.rows.indexOf(row), 1) - stopMeasure('delete') }, runLots () { - startMeasure('runLots') appStore.rows = [] appStore.buildRows(10000) - stopMeasure('runLots') }, clear() { - startMeasure('clear') appStore.rows = [] - startMeasure('clear') }, swapRows() { - startMeasure('swapRows') if (appStore.rows.length > 998) { const temp = appStore.rows[1] appStore.rows[1] = appStore.rows[998] appStore.rows[998] = temp } - stopMeasure('swapRows') } }) diff --git a/frameworks/keyed/react-easy-state/src/logPerf.js b/frameworks/keyed/react-easy-state/src/logPerf.js deleted file mode 100644 index f19f2eb83..000000000 --- a/frameworks/keyed/react-easy-state/src/logPerf.js +++ /dev/null @@ -1,18 +0,0 @@ -let startTime -let lastMeasure - -export function startMeasure (name) { - startTime = performance.now() - lastMeasure = name -} - -export function stopMeasure () { - let last = lastMeasure - if (lastMeasure) { - window.setTimeout(() => { - lastMeasure = null - let stop = performance.now() - console.log(last + " took " + (stop - startTime)) - }) - } -} diff --git a/frameworks/keyed/react-lite/src/Main.jsx b/frameworks/keyed/react-lite/src/Main.jsx index 71aa0dd69..53fd534a0 100755 --- a/frameworks/keyed/react-lite/src/Main.jsx +++ b/frameworks/keyed/react-lite/src/Main.jsx @@ -5,24 +5,6 @@ var ReactDOM = require('react-dom'); const {Row} = require('./Row'); const {Store} = require('./Store'); -var startTime; -var lastMeasure; -var startMeasure = function(name) { - startTime = performance.now(); - lastMeasure = name; -} -var stopMeasure = function() { - var last = lastMeasure; - if (lastMeasure) { - window.setTimeout(function () { - lastMeasure = null; - var stop = performance.now(); - var duration = 0; - console.log(last+" took "+(stop-startTime)); - }, 0); - } -} - export class Main extends React.Component{ constructor(props) { super(props); @@ -37,52 +19,35 @@ export class Main extends React.Component{ this.swapRows = this.swapRows.bind(this); this.start = 0; } - printDuration() { - stopMeasure(); - } - componentDidUpdate() { - this.printDuration(); - } - componentDidMount() { - this.printDuration(); - } run() { - startMeasure("run"); this.state.store.run(); this.setState({store: this.state.store}); } add() { - startMeasure("add"); this.state.store.add(); this.setState({store: this.state.store}); } update() { - startMeasure("update"); this.state.store.update(); this.setState({store: this.state.store}); } select(id) { - startMeasure("select"); this.state.store.select(id); this.setState({store: this.state.store}); } delete(id) { - startMeasure("delete"); this.state.store.delete(id); this.setState({store: this.state.store}); } runLots() { - startMeasure("runLots"); this.state.store.runLots(); this.setState({store: this.state.store}); } clear() { - startMeasure("clear"); this.state.store.clear(); this.setState({store: this.state.store}); } swapRows() { - startMeasure("swapRows"); this.state.store.swapRows(); this.setState({store: this.state.store}); } diff --git a/frameworks/keyed/react-mobX/src/Main.jsx b/frameworks/keyed/react-mobX/src/Main.jsx index b2a05b04c..305ec2b27 100644 --- a/frameworks/keyed/react-mobX/src/Main.jsx +++ b/frameworks/keyed/react-mobX/src/Main.jsx @@ -7,25 +7,6 @@ var {observer} = require("mobx-react"); var {observable, computed} = require ("mobx"); const {Store} = require('./Store'); - -var startTime; -var lastMeasure; -var startMeasure = function(name) { - startTime = performance.now(); - lastMeasure = name; -} -var stopMeasure = function() { - var last = lastMeasure; - if (lastMeasure) { - window.setTimeout(function () { - lastMeasure = null; - var stop = performance.now(); - var duration = 0; - console.log(last+" took "+(stop-startTime)); - }, 0); - } -} - @observer export class Main extends React.Component{ constructor(props) { @@ -40,47 +21,28 @@ export class Main extends React.Component{ this.swapRows = this.swapRows.bind(this); this.start = 0; } - printDuration() { - stopMeasure(); - } - componentDidUpdate() { - this.printDuration(); - } - componentDidMount() { - this.printDuration(); - } run() { - startMeasure("run"); this.props.store.run(); } add() { - startMeasure("add"); this.props.store.add(); } update() { - startMeasure("update"); this.props.store.update(); - stopMeasure(); } select(row) { - startMeasure("select"); this.props.store.select(row); - stopMeasure(); } delete(row) { - startMeasure("delete"); this.props.store.delete(row); } runLots() { - startMeasure("runLots"); this.props.store.runLots(); } clear() { - startMeasure("clear"); this.props.store.clear(); } swapRows() { - startMeasure("swapRows"); this.props.store.swapRows(); } render () { diff --git a/frameworks/keyed/react-redux-combiner/src/controller.jsx b/frameworks/keyed/react-redux-combiner/src/controller.jsx index 7bf8e54d1..b4638bf4f 100755 --- a/frameworks/keyed/react-redux-combiner/src/controller.jsx +++ b/frameworks/keyed/react-redux-combiner/src/controller.jsx @@ -14,34 +14,6 @@ import { swapRows } from './store'; - -var startTime; -var lastMeasure; -var startMeasure = function(name) { - performance.mark('mark_start_'+name); - startTime = performance.now(); - lastMeasure = name; -} -var stopMeasure = function() { - var last = lastMeasure; - if (lastMeasure) { - window.setTimeout(function () { - lastMeasure = null; - var stop = performance.now(); - var duration = 0; - performance.mark('mark_end_' + last); - window.performance.measure('measure_' + last, 'mark_start_' + last, 'mark_end_' + last); - var items = performance.getEntriesByType('measure'); - for (var i = 0; i < items.length; ++i) { - var req = items[i]; - duration = req.duration; - console.log(req.name + ' took ' + req.duration + 'ms'); - } - performance.clearMeasures(); - }, 0); - } -} - export class Row extends React.Component { constructor(props) { super(props); @@ -84,8 +56,6 @@ export class Controller extends React.Component{ this.runLots = this.runLots.bind(this); this.clear = this.clear.bind(this); this.swapRows = this.swapRows.bind(this); - this.componentDidUpdate = this.componentDidUpdate.bind(this); - this.componentDidMount = this.componentDidMount.bind(this); this.start = 0; } shouldComponentUpdate(nextProps, nextState) { @@ -95,45 +65,28 @@ export class Controller extends React.Component{ const nextSelected= nextProps.selected; return data !== nextData||selected!=nextSelected; } - printDuration() { - stopMeasure(); - } - componentDidUpdate() { - this.printDuration(); - } - componentDidMount() { - this.printDuration(); - } run() { - startMeasure("run"); this.props.run(); } add() { - startMeasure("add"); this.props.add(); } update() { - startMeasure("updater"); this.props.update(); } select(id) { - startMeasure("select"); this.props.select(id); } delete(id) { - startMeasure("delete"); this.props.remove(id); } runLots() { - startMeasure("runLots"); this.props.runLots(); } clear() { - startMeasure("clear"); this.props.clear(); } swapRows() { - startMeasure("swapRows"); this.props.swapRows(); } render () { diff --git a/frameworks/keyed/redom/src/app.js b/frameworks/keyed/redom/src/app.js index cac7d9f50..de5e39a7d 100644 --- a/frameworks/keyed/redom/src/app.js +++ b/frameworks/keyed/redom/src/app.js @@ -2,26 +2,6 @@ import { el, list } from 'redom'; const { performance, setTimeout } = window; -let startTime; -let lastMeasure; - -const startMeasure = (name) => { - startTime = performance.now(); - lastMeasure = name; -}; - -const stopMeasure = () => { - const last = lastMeasure; - - if (lastMeasure) { - setTimeout(() => { - lastMeasure = null; - const stop = performance.now(); - console.log(last + ' took ' + (stop - startTime)); - }, 0); - } -}; - export class App { constructor ({ store }) { this.store = store; @@ -74,52 +54,36 @@ export class App { ); } add () { - startMeasure('add'); this.store.add(); this.render(); - stopMeasure(); } remove (id) { - startMeasure('remove'); this.store.delete(id); this.render(); - stopMeasure(); } select (id) { - startMeasure('select'); this.store.select(id); this.render(); - stopMeasure(); } run () { - startMeasure('run'); this.store.run(); this.render(); - stopMeasure(); } update () { - startMeasure('update'); this.store.update(); this.render(); - stopMeasure(); } runLots () { - startMeasure('runLots'); this.store.runLots(); this.render(); - stopMeasure(); } clear () { - startMeasure('clear'); this.store.clear(); this.render(); - stopMeasure(); } swapRows () { - startMeasure('swapRows'); this.store.swapRows(); this.render(); - stopMeasure(); } render () { this.table.update(this.store.data); diff --git a/frameworks/keyed/riot/index.html b/frameworks/keyed/riot/index.html index 5fb3563c8..5bf129866 100644 --- a/frameworks/keyed/riot/index.html +++ b/frameworks/keyed/riot/index.html @@ -8,23 +8,6 @@
diff --git a/frameworks/keyed/riot/src/app.riot b/frameworks/keyed/riot/src/app.riot index 8ca0e5ed7..a3c026bbe 100644 --- a/frameworks/keyed/riot/src/app.riot +++ b/frameworks/keyed/riot/src/app.riot @@ -74,52 +74,36 @@ }) }, add() { - startMeasure('add') this.store.add() this.renderWithNewState() - stopMeasure() }, remove(item) { - startMeasure('remove') this.store.delete(item.id) this.renderWithNewState() - stopMeasure() }, select(item) { - startMeasure('select') this.store.select(item.id) this.renderWithNewState() - stopMeasure() }, run() { - startMeasure('run') this.store.run() this.renderWithNewState() - stopMeasure() }, updateRows() { - startMeasure('update') this.store.update() this.renderWithNewState() - stopMeasure() }, runLots() { - startMeasure('runLots') this.store.runLots() this.renderWithNewState() - stopMeasure() }, clear() { - startMeasure('clear') this.store.clear() this.renderWithNewState() - stopMeasure() }, swapRows() { - startMeasure('swapRows') this.store.swapRows() this.renderWithNewState() - stopMeasure() } } diff --git a/frameworks/keyed/san/src/App.js b/frameworks/keyed/san/src/App.js index 3d3243522..58ff89861 100644 --- a/frameworks/keyed/san/src/App.js +++ b/frameworks/keyed/san/src/App.js @@ -4,23 +4,6 @@ import san from 'san/dist/san.spa.modern.js'; var store = new Store(); -var startTime; -var lastMeasure; -var startMeasure = function (name) { - startTime = performance.now(); - lastMeasure = name; -}; -var stopMeasure = function () { - var last = lastMeasure; - if (lastMeasure) { - window.setTimeout(function () { - lastMeasure = null; - var stop = performance.now(); - console.log(last + " took " + (stop - startTime)); - }, 0); - } -}; - export default san.defineComponent({ trimWhitespace: 'all', autoFillStyleAndId: false, @@ -90,52 +73,36 @@ export default san.defineComponent({ window.app = this; }, add() { - startMeasure("add"); store.add(); this.sync(); - stopMeasure(); }, remove(id) { - startMeasure("remove"); store.delete(id); this.sync(); - stopMeasure(); }, select(id) { - startMeasure("select"); store.select(+id); this.sync(); - stopMeasure(); }, run() { - startMeasure("run"); store.run(); this.sync(); - stopMeasure(); }, update() { - startMeasure("update"); store.update(); this.sync(); - stopMeasure(); }, runLots() { - startMeasure("runLots"); store.runLots(); this.sync(); - stopMeasure(); }, clear() { - startMeasure("clear"); store.clear(); this.sync(); - stopMeasure(); }, swapRows() { - startMeasure("swapRows"); store.swapRows(); this.sync(); - stopMeasure(); }, sync() { this.dataChanges = []; diff --git a/frameworks/keyed/vanillajs-1/src/Main.js b/frameworks/keyed/vanillajs-1/src/Main.js index d74254aa4..f5b29113f 100644 --- a/frameworks/keyed/vanillajs-1/src/Main.js +++ b/frameworks/keyed/vanillajs-1/src/Main.js @@ -1,22 +1,5 @@ 'use strict'; -var startTime; -var lastMeasure; -var startMeasure = function(name) { - startTime = performance.now(); - lastMeasure = name; -} -var stopMeasure = function() { - var last = lastMeasure; - if (lastMeasure) { - window.setTimeout(function () { - lastMeasure = null; - var stop = performance.now(); - console.log(last+" took "+(stop-startTime)); - }, 0); - } -} - function _random(max) { return Math.round(Math.random()*1000)%max; } @@ -98,29 +81,20 @@ class Main { }); this.tbody = document.getElementById("tbody"); } - printDuration() { - stopMeasure(); - } run() { - startMeasure("run"); this.removeAllRows(); this.data = []; this.appendRows(buildData(1000)); this.unselect(); - stopMeasure(); } add() { - startMeasure("add"); this.appendRows(buildData(1000)); - stopMeasure(); } update() { - startMeasure("update"); for (let i=0;i { this.removeAllRows(); this.unselect(); - stopMeasure(); // }); } swapRows() { - startMeasure("swapRows"); if (this.data.length > 998) { let tmp = this.data[998]; @@ -212,7 +177,6 @@ class Main { // this.selectedRow.className = "danger"; // } // } - stopMeasure(); } appendRows(newData) { // Using a document fragment is slower... diff --git a/frameworks/keyed/vanillajs/src/Main.js b/frameworks/keyed/vanillajs/src/Main.js index 095c4be0a..a2e396c21 100644 --- a/frameworks/keyed/vanillajs/src/Main.js +++ b/frameworks/keyed/vanillajs/src/Main.js @@ -1,23 +1,5 @@ 'use strict'; -var startTime; -var lastMeasure; -var startMeasure = function(name) { - startTime = performance.now(); - lastMeasure = name; -} -var stopMeasure = function() { - var last = lastMeasure; - if (lastMeasure) { - window.setTimeout(function () { - lastMeasure = null; - var stop = performance.now(); - var duration = 0; - console.log(last+" took "+(stop-startTime)); - }, 0); - } -} - function _random(max) { return Math.round(Math.random()*1000)%max; } @@ -181,11 +163,7 @@ class Main { } return undefined; } - printDuration() { - stopMeasure(); - } run() { - startMeasure("run"); this.removeAllRows(); this.store.clear(); this.rows = []; @@ -193,21 +171,16 @@ class Main { this.store.run(); this.appendRows(); this.unselect(); - stopMeasure(); } add() { - startMeasure("add"); this.store.add(); this.appendRows(); - stopMeasure(); } update() { - startMeasure("update"); this.store.update(); for (let i=0;i { this.removeAllRows(); this.unselect(); - stopMeasure(); // }); } swapRows() { - startMeasure("swapRows"); if (this.data.length>10) { this.store.swapRows(); this.data[1] = this.store.data[1]; @@ -317,7 +281,6 @@ class Main { // this.selectedRow.className = "danger"; // } // } - stopMeasure(); } appendRows() { // Using a document fragment is slower... diff --git a/frameworks/keyed/vidom/src/controller.jsx b/frameworks/keyed/vidom/src/controller.jsx index 092d603ba..c04b024f1 100755 --- a/frameworks/keyed/vidom/src/controller.jsx +++ b/frameworks/keyed/vidom/src/controller.jsx @@ -39,18 +39,6 @@ export class Row extends Component { } } -var startTime; -var lastMeasure; -var startMeasure = function(name) { - startTime = performance.now(); - lastMeasure = name; -} -var stopMeasure = function() { - window.setTimeout(function() { - var stop = performance.now(); - console.log(lastMeasure+" took "+(stop-startTime)); - }, 0); -} export class Controller extends Component{ onInit() { this.state = {store: new Store()}; @@ -66,60 +54,49 @@ export class Controller extends Component{ var target = document.querySelector('#main'); } run() { - startMeasure("run"); this.state.store.run(); this.state = {store: this.state.store}; this.update(); } add() { - startMeasure("add"); this.start = performance.now(); this.state.store.add(); this.state = {store: this.state.store}; this.update(); } update10() { - startMeasure("update"); this.start = performance.now(); this.state.store.update(); this.state = {store: this.state.store}; this.update(); } select(id) { - startMeasure("select"); this.start = performance.now(); this.state.store.select(id); this.state = {store: this.state.store}; this.update(); } delete(id) { - startMeasure("delete"); this.start = performance.now(); this.state.store.delete(id); this.state = {store: this.state.store}; this.update(); } runLots() { - startMeasure("runLots"); this.state.store.runLots(); this.state = {store: this.state.store}; this.update(); } clear() { - startMeasure("clear"); this.state.store.clear(); this.state = {store: this.state.store}; this.update(); } swapRows() { - startMeasure("swapRows"); this.state.store.swapRows(); this.state = {store: this.state.store}; this.update(); } - onUpdate() { - stopMeasure(); - } onRender () { var rows = this.state.store.data.map((d,i) => { return diff --git a/frameworks/keyed/vue/src/App.vue b/frameworks/keyed/vue/src/App.vue index 67d5886f3..d14382245 100644 --- a/frameworks/keyed/vue/src/App.vue +++ b/frameworks/keyed/vue/src/App.vue @@ -55,23 +55,6 @@ import { Store } from './store'; var store = new Store(); -var startTime; -var lastMeasure; -var startMeasure = function(name) { - startTime = performance.now(); - lastMeasure = name; -} -var stopMeasure = function() { - var last = lastMeasure; - if (lastMeasure) { - window.setTimeout(function () { - lastMeasure = null; - var stop = performance.now(); - console.log(last+" took "+(stop-startTime)); - }, 0); - } -} - export default { data: () => ({ rows: store.data, @@ -85,52 +68,36 @@ export default { } }, add() { - startMeasure("add"); store.add(); this.sync(); - stopMeasure(); }, remove(id) { - startMeasure("remove"); store.delete(id); this.sync(); - stopMeasure(); }, select(id) { - startMeasure("select"); store.select(id); this.sync(); - stopMeasure(); }, run() { - startMeasure("run"); store.run(); this.sync(); - stopMeasure(); }, update() { - startMeasure("update"); store.update(); this.sync(); - stopMeasure(); }, runLots() { - startMeasure("runLots"); store.runLots(); this.sync(); - stopMeasure(); }, clear() { - startMeasure("clear"); store.clear(); this.sync(); - stopMeasure(); }, swapRows() { - startMeasure("swapRows"); store.swapRows(); this.sync(); - stopMeasure(); }, sync() { this.rows = Object.freeze(store.data);