Performance Profiling
Performance & responsiveness is very important for a text editor. It's important for Oni to minimize the latency of common operations - we should treat the app like we would a game, where frames-per-second and time-per-frame are important metrics.
In addition, we should maintain a quick & snappy start-up time.
When working to improve performance, measuring both before and after the fix is important. This not only validates the fix, but helps us focus on the proper areas. When optimizing a specific code path, we should first identify the bottleneck - the most expensive piece - eliminate it, measure, and repeat if necessary.
Luckily, modern browsers give us lots of great tooling for optimizing performance! You can measure paint, layout, javascript execution time, memory usage, etc.
If you open the developer tools (Control+Shift+P -> Open DevTools), and open the Performance tab, you can benchmark performance.
TIP: Pressing
F5or triggering a page reload here will let you benchmark start-up time!
As you can see from the screenshot below, you get a rich collection of data:
If you use our Performance.startMeasure and Performance.endMeasure API, these events will show up in the performance profiling window:
Highly recommend adding these liberally as part of features - they can be very helpful when we're looking at bottlenecks!
TIP: When profiling, try and reduce as much 'noise' as possible in the profile. This could mean limiting the profile to a single key stroke, or disabling some features to focus on a particular bottleneck.
In addition to the Performance tab, there is also a paint profiler. This will show the regions the browser needs to re-paint when the DOM or canvas has changed. It's important to minimize paints, because they are very expensive.
You can get to the paint profiler by using the Rendering tool:
And make sure Paint Flashing is enabled:
Here's an example of what it looks like on my current build:
NOTE: Due to the FPS of my gif recorder, not all the flashes were recorded.
You can see that every time I type, the entire row needs to be repainted, by the green flash. This isn't ideal, and is what #1129 is tracking. We've had even worse issues in the past - for example, in some cases, the entire screen would need to be repainted! These type of over-painting bugs can have a huge impact on performance and responsiveness.