From ef7c006a38c92334834808c1ecd43bf8ad272a81 Mon Sep 17 00:00:00 2001 From: Tobias Lidskog Date: Thu, 26 Apr 2018 18:00:37 +0200 Subject: [PATCH 1/3] Support counting events up until a mark. --- .../durationEvents/durationProcessor.js | 26 +++++++++++++++---- 1 file changed, 21 insertions(+), 5 deletions(-) diff --git a/lib/eventProcessors/durationEvents/durationProcessor.js b/lib/eventProcessors/durationEvents/durationProcessor.js index c55ddb9..854d516 100644 --- a/lib/eventProcessors/durationEvents/durationProcessor.js +++ b/lib/eventProcessors/durationEvents/durationProcessor.js @@ -51,9 +51,10 @@ function roundAndFilter(timePerType) { }, {}); } -module.exports = function createProcessor(name, keyFromEvent) { +module.exports = function createProcessor(name, keyFromEvent, endMark) { const eventSyntesizer = createEventSyntesizer(); const eventsPerThread = {}; + let cutoffTime = undefined; return { processEvent(event) { @@ -62,6 +63,13 @@ module.exports = function createProcessor(name, keyFromEvent) { } switch (event.ph) { + case 'R': + { + if (endMark === event.name) { + cutoffTime = event.ts; + } + } + break; case 'B': return eventSyntesizer.processBeginEvent(event); case 'E': @@ -76,17 +84,25 @@ module.exports = function createProcessor(name, keyFromEvent) { } } }, - getResult: function() { + getResult() { const timePerThread = {}; for (const [threadId, events] of Object.entries(eventsPerThread)) { - const sortedEvents = events.sort((a, b) => a.ts - b.ts); + let sortedEvents = events.sort((a, b) => a.ts - b.ts); + if (cutoffTime !== undefined) { + sortedEvents = sortedEvents.filter(e => e.ts < cutoffTime).map(e => { + if (e.ts + e.dur > cutoffTime) { + e.dur = cutoffTime - e.ts; + } + return e; + }); + } let eventStack = []; const timePerType = sortedEvents.reduce((result, event) => { - result[keyFromEvent(event)] = - (result[keyFromEvent(event)] || 0) + event.dur; + const key = keyFromEvent(event); + result[key] = (result[key] || 0) + event.dur; eventStack = findParentEvents(eventStack, event); From fafd72e39c477c3bdc545d4700b1cfc3d28dcacb Mon Sep 17 00:00:00 2001 From: Tobias Lidskog Date: Mon, 30 Apr 2018 21:46:57 +0200 Subject: [PATCH 2/3] =?UTF-8?q?Include=20time=20per=20category=20up=20unti?= =?UTF-8?q?l=20'firstPaint=E2=80=99.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit NOTE: this does not yet produce output that aligns with Chrome DevTools. Include a test with a known failure. --- CHANGELOG.md | 2 ++ lib/eventProcessors/eventCategoryTime.js | 8 ++++++-- lib/eventProcessors/index.js | 11 ++++++----- test/tests.js | 18 ++++++++++++++++++ 4 files changed, 32 insertions(+), 7 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index ea538fd..5b752bb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,8 @@ # CHANGELOG - Chrome-trace ## UNRELEASED +### Added +* Include time per category up until the 'firstPaint' mark in the output. ### Fixed * Improve categorization of events to more closely match Chrome DevTools. diff --git a/lib/eventProcessors/eventCategoryTime.js b/lib/eventProcessors/eventCategoryTime.js index 1251eda..619c518 100644 --- a/lib/eventProcessors/eventCategoryTime.js +++ b/lib/eventProcessors/eventCategoryTime.js @@ -16,6 +16,10 @@ const eventCategory = event => { return category; }; -module.exports = function createProcessor() { - return durationProcessor('eventCategoryTime', eventCategory); +module.exports = function createProcessor(cutoffMark) { + let key = 'eventCategoryTime'; + if (cutoffMark) { + key += `|${cutoffMark}`; + } + return durationProcessor(key, eventCategory, cutoffMark); }; diff --git a/lib/eventProcessors/index.js b/lib/eventProcessors/index.js index e58e894..37cc8fd 100644 --- a/lib/eventProcessors/index.js +++ b/lib/eventProcessors/index.js @@ -6,12 +6,13 @@ const cpuEventsPerThread = require('./eventTypeTime'); const cpuCategoriesPerThread = require('./eventCategoryTime'); module.exports = { - createProcessors(options = {}) { + createProcessors() { return [ - mainThread(options), - threadName(options), - cpuEventsPerThread(options), - cpuCategoriesPerThread(options) + mainThread(), + threadName(), + cpuEventsPerThread(), + cpuCategoriesPerThread(), + cpuCategoriesPerThread('firstPaint') ]; } }; diff --git a/test/tests.js b/test/tests.js index dd2fcef..de35485 100644 --- a/test/tests.js +++ b/test/tests.js @@ -105,6 +105,24 @@ test('Can categorize events per category in www.google.ru file', async t => { ); }); +test.failing('Can filter events before firstPaint', async t => { + const parsed = await parseTracelog('www.google.ru.json'); + const categories = parsed['eventCategoryTime|firstPaint'][parsed.mainThread]; + // Within 5% of what Chrome DevTools reports + t.true( + roughlyEquals( + categories, + { + Loading: 5.9, + Painting: 0.3, + Rendering: 1.8, + Scripting: 38.7 + }, + 5 + ) + ); +}); + test.todo('Counts time for nested events'); test.todo('Handles X events out of order'); From a322d9caffccb03fb5f0f149bbb58125f757b2d8 Mon Sep 17 00:00:00 2001 From: Tobias Lidskog Date: Mon, 30 Apr 2018 22:02:13 +0200 Subject: [PATCH 3/3] Update incorrectly added test reference numbers. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Looked at wrong numbers when entering test reference data from DevTools for ”time before firstPaint”. Now the generated numbers are still wrong, but not by just as much as before. --- test/tests.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/test/tests.js b/test/tests.js index de35485..c24d4cc 100644 --- a/test/tests.js +++ b/test/tests.js @@ -113,10 +113,10 @@ test.failing('Can filter events before firstPaint', async t => { roughlyEquals( categories, { - Loading: 5.9, + Loading: 9.2, Painting: 0.3, - Rendering: 1.8, - Scripting: 38.7 + Rendering: 27.1, + Scripting: 40.8 }, 5 )