-
Notifications
You must be signed in to change notification settings - Fork 9.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix(driver): wait for CPU idle #2473
Changes from 1 commit
4c37417
3989108
fa90a20
8840580
3bd40be
b17875c
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
<html> | ||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"> | ||
<body> | ||
Just try and figure out my TTCI | ||
|
||
<script> | ||
function stall(timeInMs) { | ||
const start = performance.now(); | ||
while (performance.now() - start < timeInMs) { | ||
for (let i = 0; i < 1000000; i++) ; | ||
} | ||
} | ||
|
||
setTimeout(() => stall(250), 1000); | ||
setTimeout(() => stall(500), 2000); | ||
setTimeout(() => stall(2000), 5000); | ||
</script> | ||
<script src="bogus.js?delay=2000"></script> | ||
</body> | ||
</html> |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
/** | ||
* @license Copyright 2017 Google Inc. All Rights Reserved. | ||
* Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 | ||
* Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. | ||
*/ | ||
'use strict'; | ||
|
||
/** | ||
* Expected Lighthouse audit values for --perf tests | ||
*/ | ||
module.exports = [ | ||
{ | ||
initialUrl: 'http://localhost:10200/tricky-ttci.html', | ||
url: 'http://localhost:10200/tricky-ttci.html', | ||
audits: { | ||
'first-interactive': { | ||
score: '<75', | ||
}, | ||
'consistently-interactive': { | ||
score: '<75', | ||
}, | ||
} | ||
}, | ||
]; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
#!/usr/bin/env bash | ||
|
||
node lighthouse-cli/test/fixtures/static-server.js & | ||
|
||
sleep 0.5s | ||
|
||
config="lighthouse-core/config/perf.json" | ||
expectations="lighthouse-cli/test/smokehouse/tricky-ttci/expectations.js" | ||
|
||
yarn smokehouse -- --config-path=$config --expectations-path=$expectations | ||
exit_code=$? | ||
|
||
# kill test servers | ||
kill $(jobs -p) | ||
|
||
exit "$exit_code" |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -13,8 +13,8 @@ module.exports = { | |
passName: 'defaultPass', | ||
recordTrace: true, | ||
pauseAfterLoadMs: 5250, | ||
networkQuietThresholdMs: 5000, | ||
pauseAfterNetworkQuietMs: 2500, | ||
networkQuietThresholdMs: 5250, | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Is the idea here to realign There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. the historical background to now that this role has been subsumed by a bona fide CPU idle check, we don't need it anymore, however, we still want a little bit of slack in our cutoff thus
|
||
cpuQuietThresholdMs: 5250, | ||
useThrottling: true, | ||
gatherers: [ | ||
'url', | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -18,8 +18,8 @@ const DevtoolsLog = require('./devtools-log'); | |
const DEFAULT_PAUSE_AFTER_LOAD = 0; | ||
// Controls how long to wait between network requests before determining the network is quiet | ||
const DEFAULT_NETWORK_QUIET_THRESHOLD = 5000; | ||
// Controls how long to wait after network quiet before continuing | ||
const DEFAULT_PAUSE_AFTER_NETWORK_QUIET = 0; | ||
// Controls how long to wait between longtasks before determining the CPU is idle, off by default | ||
const DEFAULT_CPU_QUIET_THRESHOLD = 0; | ||
|
||
const _uniq = arr => Array.from(new Set(arr)); | ||
|
||
|
@@ -424,6 +424,66 @@ class Driver { | |
}; | ||
} | ||
|
||
/** | ||
* Installs a PerformanceObserver in the page to monitor for longtasks and resolves when there have | ||
* been no long tasks for at least waitForCPUQuiet ms. The promise will not resolve until the | ||
* `markAsResolvable` function on the return object has been called. This is to prevent promise resolution | ||
* before some important point in time such as network quiet or document load. | ||
* @param {number} waitForCPUQuiet | ||
* @return {{promise: !Promise, cancel: function(), markAsResolvable: function()}} | ||
*/ | ||
_waitForCPUIdle(waitForCPUQuiet) { | ||
if (!waitForCPUQuiet) { | ||
return { | ||
markAsResolvable: () => undefined, | ||
promise: Promise.resolve(), | ||
cancel: () => undefined, | ||
}; | ||
} | ||
|
||
let lastTimeout; | ||
let isResolvable = false; | ||
function checkForQuiet(driver, resolve) { | ||
const tryLater = () => { | ||
lastTimeout = setTimeout(() => checkForQuiet(driver, resolve), 1000); | ||
}; | ||
|
||
if (!isResolvable) { | ||
return tryLater(); | ||
} | ||
|
||
return driver.evaluateAsync(`(${checkTimeSinceLastLongTask.toString()})()`) | ||
.then(timeSinceLongTask => { | ||
if (typeof timeSinceLongTask === 'number' && timeSinceLongTask >= waitForCPUQuiet) { | ||
log.verbose('Driver', `CPU has been idle for ${timeSinceLongTask} ms`); | ||
resolve(); | ||
} else { | ||
log.verbose('Driver', `CPU has been idle for ${timeSinceLongTask} ms`); | ||
tryLater(); | ||
} | ||
}); | ||
} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I'm not quite as close to this code as @brendankenny or @paulirish might be, but the general approach to using long-tasks here sgtm. |
||
|
||
log.verbose('Driver', `Installing longtask listener for CPU idle.`); | ||
this.evaluateScriptOnLoad(`(${installPerformanceObserver.toString()})()`); | ||
let cancel; | ||
const promise = new Promise((resolve, reject) => { | ||
checkForQuiet(this, resolve); | ||
cancel = () => { | ||
if (lastTimeout) clearTimeout(lastTimeout); | ||
reject(new Error('Wait for CPU idle cancelled')); | ||
}; | ||
}); | ||
|
||
return { | ||
markAsResolvable: () => { | ||
isResolvable = true; | ||
}, | ||
promise, | ||
cancel, | ||
}; | ||
} | ||
|
||
/** | ||
* Return a promise that resolves `pauseAfterLoadMs` after the load event | ||
* fires and a method to cancel internal listeners and timeout. | ||
|
@@ -460,27 +520,27 @@ class Driver { | |
* See https://github.com/GoogleChrome/lighthouse/issues/627 for more. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. this method description need an update. Can you flesh it out a bit so we won't have to look back up the PR when trying to read the code? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. done |
||
* @param {number} pauseAfterLoadMs | ||
* @param {number} networkQuietThresholdMs | ||
* @param {number} pauseAfterNetworkQuietMs | ||
* @param {number} cpuQuietThresholdMs | ||
* @param {number} maxWaitForLoadedMs | ||
* @return {!Promise} | ||
* @private | ||
*/ | ||
_waitForFullyLoaded(pauseAfterLoadMs, networkQuietThresholdMs, pauseAfterNetworkQuietMs, | ||
_waitForFullyLoaded(pauseAfterLoadMs, networkQuietThresholdMs, cpuQuietThresholdMs, | ||
maxWaitForLoadedMs) { | ||
let maxTimeoutHandle; | ||
|
||
// Listener for onload. Resolves pauseAfterLoadMs ms after load. | ||
const waitForLoadEvent = this._waitForLoadEvent(pauseAfterLoadMs); | ||
// Network listener. Resolves pauseAfterNetworkQuietMs after when the network has been idle for | ||
// networkQuietThresholdMs. | ||
const waitForNetworkIdle = this._waitForNetworkIdle(networkQuietThresholdMs, | ||
pauseAfterNetworkQuietMs); | ||
// Network listener. Resolves when the network has been idle for networkQuietThresholdMs. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Might be worth expanding comment to Network and CPU listeners or adding a similar line above There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. oops, meant to do that thanks! |
||
const waitForNetworkIdle = this._waitForNetworkIdle(networkQuietThresholdMs); | ||
const waitForCPUIdle = this._waitForCPUIdle(cpuQuietThresholdMs); | ||
|
||
// Wait for both load promises. Resolves on cleanup function the clears load | ||
// timeout timer. | ||
const loadPromise = Promise.all([ | ||
waitForLoadEvent.promise, | ||
waitForNetworkIdle.promise | ||
waitForNetworkIdle.promise.then(waitForCPUIdle.markAsResolvable), | ||
waitForCPUIdle.promise, | ||
]).then(() => { | ||
return function() { | ||
log.verbose('Driver', 'loadEventFired and network considered idle'); | ||
|
@@ -497,6 +557,7 @@ class Driver { | |
log.warn('Driver', 'Timed out waiting for page load. Moving on...'); | ||
waitForLoadEvent.cancel(); | ||
waitForNetworkIdle.cancel(); | ||
waitForCPUIdle.cancel(); | ||
}; | ||
}); | ||
|
||
|
@@ -564,13 +625,13 @@ class Driver { | |
|
||
let pauseAfterLoadMs = options.config && options.config.pauseAfterLoadMs; | ||
let networkQuietThresholdMs = options.config && options.config.networkQuietThresholdMs; | ||
let pauseAfterNetworkQuietMs = options.config && options.config.pauseAfterNetworkQuietMs; | ||
let cpuQuietThresholdMs = options.config && options.config.cpuQuietThresholdMs; | ||
let maxWaitMs = options.flags && options.flags.maxWaitForLoad; | ||
|
||
/* eslint-disable max-len */ | ||
if (typeof pauseAfterLoadMs !== 'number') pauseAfterLoadMs = DEFAULT_PAUSE_AFTER_LOAD; | ||
if (typeof networkQuietThresholdMs !== 'number') networkQuietThresholdMs = DEFAULT_NETWORK_QUIET_THRESHOLD; | ||
if (typeof pauseAfterNetworkQuietMs !== 'number') pauseAfterNetworkQuietMs = DEFAULT_PAUSE_AFTER_NETWORK_QUIET; | ||
if (typeof cpuQuietThresholdMs !== 'number') cpuQuietThresholdMs = DEFAULT_CPU_QUIET_THRESHOLD; | ||
if (typeof maxWaitMs !== 'number') maxWaitMs = Driver.MAX_WAIT_FOR_FULLY_LOADED; | ||
/* eslint-enable max-len */ | ||
|
||
|
@@ -579,7 +640,7 @@ class Driver { | |
.then(_ => this.sendCommand('Emulation.setScriptExecutionDisabled', {value: disableJS})) | ||
.then(_ => this.sendCommand('Page.navigate', {url})) | ||
.then(_ => waitForLoad && this._waitForFullyLoaded(pauseAfterLoadMs, | ||
networkQuietThresholdMs, pauseAfterNetworkQuietMs, maxWaitMs)) | ||
networkQuietThresholdMs, cpuQuietThresholdMs, maxWaitMs)) | ||
.then(_ => this._endNetworkStatusMonitoring()); | ||
} | ||
|
||
|
@@ -1011,4 +1072,32 @@ function wrapRuntimeEvalErrorInBrowser(err) { | |
}; | ||
} | ||
|
||
/** | ||
* Used by _waitForCPUIdle and executed in the context of the page, updates the ____lastLongTask | ||
* property on window to the end time of the last long task. | ||
* instanbul ignore next | ||
*/ | ||
function installPerformanceObserver() { | ||
window.____lastLongTask = window.performance.now(); | ||
const observer = new window.PerformanceObserver(entryList => { | ||
const entries = entryList.getEntries(); | ||
for (const entry of entries) { | ||
if (entry.entryType === 'longtask') { | ||
const taskEnd = entry.startTime + entry.duration; | ||
window.____lastLongTask = Math.max(window.____lastLongTask, taskEnd); | ||
} | ||
} | ||
}); | ||
observer.observe({entryTypes: ['longtask']}); | ||
} | ||
|
||
|
||
/** | ||
* Used by _waitForCPUIdle and executed in the context of the page, returns time since last long task. | ||
* instanbul ignore next | ||
*/ | ||
function checkTimeSinceLastLongTask() { | ||
return window.performance.now() - window.____lastLongTask; | ||
} | ||
|
||
module.exports = Driver; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
can we assert the rawValue is over 9000 ?
😀
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
love it, gotta check those power levels