use speedometer-workloads

[flashdesignory]

WIP to show how workloads from another repository could get installed and used in Speedometer, with minimal changes.

Notes

• A high amount of changes is a result of removing workloads that are now installed through a npm package
• For local testing, please reach out to me and I'll add you to the private npm package

Workloads install

Workloads are now installed through a (private) npm package. Currently, one single package is used for all workloads, instead of installing each workload separately. The Benefit of using a single package is simplicity. Downside is that we can’t decide in Speedometer, which version of a specific workload should be installed. This should be an easy step to change though.

speedometer-workloads

This package should be installed as a regular dependency of Speedometer.
speedometer-workloads repo: https://github.com/GoogleChromeLabs/speedometer-workloads

"dependencies": {
    "@tkober/speedometer-workloads": "^1.3.0"
}

workloads.config.folder.json

This file determines which workload should get copied over from the @tkober/speedometer-workloads package.

{
    "workloads": [
        { 
            "name": "charts-chartjs",
            "type":"static"
        }
    ]
}

copy-workloads

The copy-workloads script creates a workloads folder in the root of Speedometer with a copy of the dist folders of each work that is listed in the workloads.config.folder.json file.

"scripts": {
    "copy-workloads": "npm explore @tkober/speedometer-workloads pnpm run move:apps:custom"
}

Benchmark Runner

_prepareSuite

Multiple promises have to be resolved for this step:

• loadFrame: resolves once the iframe is done loading
• suite.prepare: any additional preparation steps a workload might need
• postMessageSent({ type: “app-ready”}): a message sent from the workload when it can accept a test

async _prepareSuite(suite) {
    const frame = this._page._frame;
    await Promise.all([
        postMessageSent({ type: "app-ready" }),
        loadFrame({ frame, url: `${suite.url}` }),
        suite.prepare(this._page)
    ]);
}

_runAllSuites

Compared to the previous implementation, we are now only appending an iframe and creating a Page class instance, if a suite is not disabled.

for (const suite of suites) {
    if (!suite.disabled){
        await this._appendFrame();
        this._page = new Page(this._frame);
        await this._runSuite(suite);
        this._removeFrame();
    }
}

Tests

Suites.push has been updated for each workload.

• The url points to the workloads folder in the root of the repository.
• Prepare function is now mostly just a stub, since the workloads send an “app-ready” message

Example

Suites.push({
    name: "TodoMVC-JavaScript-ES5",
    url: "/workloads/todomvc-es5/",
    tags: ["todomvc"],
    async prepare(page) {},
    tests: [...],
});