Skip to content
Evaluates how long the browser will execute your javascript code
JavaScript Dockerfile HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci Fix circleCI Jul 25, 2019
scripts Fix check and data Aug 6, 2019
src Try to fix Page crushed on windows Aug 1, 2019
temp Migrate to puppeteer-core Jun 10, 2019
test Remove unused test Jul 31, 2019
.dockerignore
.eslintignore Update reporter test (local lib source) May 3, 2019
.eslintrc.json Migrate to puppeteer-core Jun 10, 2019
.gitignore Migrate to puppeteer-core Jun 10, 2019
.prettierrc Migrate to puppeteer-core Jun 10, 2019
.travis.yml Add fix for Build terminated after build exited successfully Aug 1, 2019
Dockerfile Fix docker example Jul 25, 2019
LICENSE init Apr 14, 2019
README.md Add link in docs on latest Cost Of JavaScript Jul 25, 2019
chrome.json Revert code style changes Aug 6, 2019
index.js Add simple cli support Apr 15, 2019
package.json Up patch version Aug 6, 2019
yarn.lock Update dependencies Aug 1, 2019

README.md

Estimo Travis CI Status CircleCI

Estimo was created with idea in mind how to measure parse/compile/execution time for javascript libs.

It uses puppeteer to generate Chrome Timelines. Which can be transformed in human-readable format by Tracium.

Keep in mind there result depends on your device and available resources.

Inspired by Size Limit. Thanks @ai for support.

Why?

JavaScript is the most expensive part of our frontend.

We should really care about size. But in additional to size, we also need to think about how long our JavaScript will process.

3.5 seconds to process 170 KB of JS and 0.1 second for 170 KB of JPEG. @Addy Osmani

3.5 seconds to process 170 KB of JS and 0.1 second for 170 KB of JPEG. Addy Osmani

Install

npm i estimo

or

yarn add estimo

JS API

const estimo = require('estimo')
const path = require('path')

;(async () => {
  const report = await estimo(path.resolve(path.join(__dirname, '..', 'libs', 'someLib.js')))
  console.log(report)
})()

CLI

estimo -l ./libs/someLib.js

Output

[
  {
    "library": "someLib.js",
    "parseHTML": 1.62,
    "styleLayout": 54.98,
    "paintCompositeRender": 1.1,
    "scriptParseCompile": 1.16,
    "scriptEvaluation": 8.66,
    "javaScript": 9.82,
    "garbageCollection": 0,
    "other": 15.83,
    "total": 83.35
  }
]

Multiple files

You can also pass few files and they will process in one Chrome instance.

estimo -l ./libs/someLib.js ./libs/myLib.js
const report = await estimo(['/path/to/libs/someLib.js', '/path/to/libs/myLib.js'])

Time

All metrics in milliseconds.

We measure system-cpu time. The number of seconds that the process has spent on the CPU.

We not including time spent waiting for its turn on the CPU.

Fields Description

  • library - Library name.

  • parseHTML - Time which was spent for ParseHTML, ParseAuthorStyleSheet events.

  • styleLayout - Time which was spent for ScheduleStyleRecalculation, UpdateLayoutTree, InvalidateLayout, Layout events.

  • paintCompositeRender - Time which was spent for Animation, HitTest, PaintSetup, Paint, PaintImage, RasterTask, ScrollLayer, UpdateLayer, UpdateLayerTree, CompositeLayers events.

  • scriptParseCompile - Time which was spent for v8.compile, v8.compileModule, v8.parseOnBackground events.

  • scriptEvaluation - Time which was spent for EventDispatch, EvaluateScript, v8.evaluateModule, FunctionCall, TimerFire, FireIdleCallback, FireAnimationFrame, RunMicrotasks, V8.Execute events.

  • javaScript - Time which was spent for both event groups (scriptParseCompile and scriptEvaluation).

  • garbageCollection - Time which was spent for MinorGC, MajorGC, BlinkGC.AtomicPhase, ThreadState::performIdleLazySweep, ThreadState::completeSweep, BlinkGCMarking events.

  • other - Time which was spent for MessageLoop::RunTask, TaskQueueManager::ProcessTaskFromWorkQueue, ThreadControllerImpl::DoWork events.

  • total - Total time.

CPU Throttling Rate Options

The CPU Throttling Rate Emulation Options allow you to generate a Performance timeline under specified CPU conditions. To turn on CPU emulation, you must pass the emulateCpuThrottling flag along with additional configuration options.

  • emulateCpuThrottling (optional; false) - This flag allows the other CPU Throttling Rate Options to be respected. They will be completely ignored unless this flag is set.

  • cpuThrottlingRate (optional; 1) - Sets the CPU throttling rate. The number represents the slowdown factor (e.g., 2 is a "2x" slowdown).

JS API:

...
await estimo('/absolute/path/to/lib', {
  emulateCpuThrottling: true,
  cpuThrottlingRate: 4,
})
...

CLI:

estimo -l ./libs/someLib.js --cpu --cpuRate 4

Network Emulation Options

The Network Emulation Options allow you to generate a Performance timeline under specified network conditions. To turn on network emulation, you must pass the emulateNetworkConditions flag along with additional configuration options.

  • emulateNetworkConditions (optional; false) - This flag allows the other Network Emulation Options to be respected. They will be completely ignored unless this flag is set.

  • offline (optional; false) - Passing the offline flag to the generate command emulate a network disconnect.

  • latency (optional; 0) - Artificial, minimum latency between request sent and response header received expressed in milliseconds (ms).

  • downloadThroughput (optional: 0) - The maximum download speed in megabits per second. 0 disables throttling.

  • uploadThroughput (optional: 0) - The maximum upload speed in megabits per second. 0 disables throttling.

  • connectionType (optional: none) - A label of the supposed underlying network connection type that the browser is using. Supported values are documented under Chrome Headless' ConnectType documentation. Variants: none, cellular2g, cellular3g, cellular4g, bluetooth, ethernet, wifi, wimax, other.

JS API:

...
await estimo('/absolute/path/to/lib', {
  emulateNetworkConditions: true,
  offline: false,
  latency: 150,
  downloadThroughput: 1.6,
  uploadThroughput: 0.75,
  connectionType: 'cellular3g',
})
...

CLI:

estimo -l ./libs/someLib.js --net --latency 150 --download 1.6 --upload 0.75 --connection cellular3g

More examples

Contributing

Feel free to ask or open an issue.

Licence

MIT

You can’t perform that action at this time.