1bcb88670b
* Install prettier, set up the config file, and run it on all ts and tsx files. * Install eslint and configure it with just eslint-plugin-prettier to check to make sure that prettier has been run. * Add a basic .travis.yml that runs eslint. There are other style things that might be nice to enforce with ESLint/TSLint, like using const, import order, etc, but this commit just focuses on prettier, which gets most of the way there. One annoying issue for now is that typescript-eslint-parser gives a big warning message since they haven't updated to officially support TypeScript 2.8 yet. We aren't even using any ESLint rules that need the parser, but if we don't include it, ESLint will crash. TS2.8 support is hopefully coming really soon, though: https://github.com/eslint/typescript-eslint-parser/pull/454 As for the prettier config specifically, see https://prettier.io/docs/en/options.html for the available options. Config settings that seem non-controversial: Semicolons: You don't use semicolons. (I prefer semicolons, but either way is fine.) Quote style: Looks like you consistently use single quotes outside JSX and double quotes in JSX, which is the `singleQuote: true` option. Config settings worth discussion: Line width: You don't have a specific max. I put 100 since I think it's a good number for people (like both of us, probably) who find 80 a bit cramped. (At Benchling we use 110.) Prettier has a big red warning box recommending 80, but I still prefer 100ish. Bracket spacing: This is `{foo}` vs `{ foo }` for imports, exports, object literals, and destructuring. Looks like you're inconsistent but lean toward spaces. I personally really dislike bracket spacing (it feels inconsistent with arrays and function calls), but I'm certainly fine with it and Prettier has it enabled by default, so I kept it enabled. Trailing comma style: Options are "no trailing commas", "trailing commas for everything exception function calls and parameter lists", and "trailing commas everywhere". TypeScript can handle trailing commas everywhere, so there isn't a concern with tooling. You're inconsistent, and it looks like you tend to not have trailing commas, but I think it's probably best to just have them everywhere, so I enabled them. JSX Brackets: You're inconsistent about this, I think. I'd prefer to just keep the default and wrap the `>` to the next line. Arrow function parens: I only found two cases of arrow functions with one param (both `c => c.frame === frame`), and both omitted the parens, so I kept the default of omitting parens. This makes it mildly more annoying to add a typescript type or additional param, which is a possible reason for always requiring parens. Everything else is non-configurable, although it's possible some places would be better with a `// prettier-ignore` comment (but I usually try to avoid those). |
||
|---|---|---|
| import | ||
| sample | ||
| .eslintrc.js | ||
| .gitignore | ||
| .travis.yml | ||
| application.tsx | ||
| canvas-context.ts | ||
| color.ts | ||
| demangle-cpp.ts | ||
| deploy.sh | ||
| favicon-16x16.png | ||
| favicon-32x32.png | ||
| favicon.ico | ||
| flamechart-color-pass-renderer.ts | ||
| flamechart-minimap-view.tsx | ||
| flamechart-renderer.ts | ||
| flamechart-style.ts | ||
| flamechart-view.tsx | ||
| flamechart.ts | ||
| index.html | ||
| LICENSE | ||
| lru-cache.ts | ||
| math.ts | ||
| overlay-rectangle-renderer.ts | ||
| package-lock.json | ||
| package.json | ||
| prettier.config.js | ||
| profile.ts | ||
| README.md | ||
| rectangle-batch-renderer.ts | ||
| regl.d.ts | ||
| reloadable.tsx | ||
| reset.css | ||
| speedscope.tsx | ||
| stats.ts | ||
| style.ts | ||
| texture-catched-renderer.ts | ||
| tsconfig.json | ||
| utils.ts | ||
🔬speedscope
An interactive web-based viewer for sampling profiles. An alternative viewer for FlameGraphs.
Given raw profiling data, speedscope allows you to interactively explore the data to get insight into what's slow in your application, or allocating all the memory, or whatever data is represented in the profiling data.
Usage
Visit https://jlfwong.github.io/speedscope/, then either browse to find a profile file or drag-and-drop one onto the page. The profiles are not uploaded anywhere -- the application is totally in-browser.
Supported file formats:
- The folded stack format output by the FlameGraph scripts do: https://github.com/brendangregg/FlameGraph#2-fold-stacks. Example: https://github.com/jlfwong/speedscope/blob/master/sample/perf-vertx-stacks-01-collapsed-all.txt
- The timeline format output by Chrome developer tools: https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/reference#save.
- The
.cpuprofileformat output by Chrome developer tools JavaScript profiler, useful for viewing flamecharts generated by Node.js applications: https://medium.com/@paul_irish/debugging-node-js-nightlies-with-chrome-devtools-7c4a1b95ae27
Views
Both of the main views of the applications display flame graphs.
In this view, the horizontal axis represents the "weight" of each stack (most commonly CPU time), and the vertical axis shows you the stack active at the time of the sample.
🕰Time Order
In the "Time Order" view (the default), the stacks are ordered left-to-right in the same order as the occurred in the input file, which is usually going to be the chronological order they were recorded in. This view is most helpful for understand the behavior of an application over time, e.g. "first the data is fetched from the database, then the data is prepared for serialization, then the data is serialized to JSON". This is the only flame graph order supported by Chrome developer tools.
⬅️Left Heavy
In the "Left Heavy" view, identical stacks are grouped together, regardless of whether they were recorded sequentially. Then, the stacks are sorted so that the heaviest stack for each parent is on the left -- hence "left heavy". This view is useful for understanding where all the time is going in situations where there are hundreds or thousands of function calls interleaved between other call stacks.
Navigation
Once a profile has loaded, the main view is split into two: the top area is the "minimap", and the bottom area is the "stack view".
Minimap Navigation
- Scroll on either axis to pan around
- Click and drag to narrow your view to a specific range
Stack View Navigation
- Scroll on either axis to pan around
- Pinch to zoom
- Hold Cmd+Scroll to zoom
- Double click on a frame to fit the viewport to it
Keyboard Navigation
+: zoom in-: zoom out0: zoom out to see the entire profilew/a/s/dor arrow keys: pan around the profile1: Switch to the "Time Order" view2: Switch to the "Left Heavy" view