Watch Webinar: Figma - Design to Code in 80% Less Time

Announcing Visual Copilot - Figma to production in half the time

Builder.io logo
Talk to Us
Contact Sales
Platform
Developers
Talk to Us

Blog

Home

Resources

Blog

Forum

Github

Login

Signup

×

Visual CMS

Drag-and-drop visual editor and headless CMS for any tech stack

Theme Studio for Shopify

Build and optimize your Shopify-hosted storefront, no coding required

Resources

Blog

Get StartedLogin

‹ Back to blog

performance optimization

Inspect Source Code Performance with Deoptigate

March 14, 2023

Written By Miško Hevery

We discussed how monomorphic code could improve your JS execution time 60-fold! But it is hard to wrap your head around what exactly is going on in your code.

Would it not be great to have a tool to annotate your code with just such information? Lucky for you, Deoptigate is just such a tool!

An example output of application source code annotated with Deoptigate.

Deoptigate

Deoptigate is a tool that runs your application in node with special V8 flags. The V8 flags report on what is happening inside the JIT and write it to a file.

Deoptigate parses that information and converts it into human-readable form by merging it with your source code to give you a straightforward overview of what is going on in your codebase.

The best way to learn how to use a tool is with an example, so let me take you through it.

Deoptigate runs with all versions of V8 but it seems like it has trouble producing the correct output with newer versions. For this reason, this demo has been created with node v12.

  • Install node v12

To make testing easier, I have created a minimal example on GitHub that demonstrates a metamorphic property read.

The example creates a list of vehicles. The number of vehicles is fixed, but the type can be changed in the test.

The test creates many different object shapes by changing the type of vehicles we create. Too many object shapes overflows the inline-cache in the VM, as explained in Understanding Monomorphism to Improve Your JS Performance Up to 60x.

Re-running the tests with a different number of vehicles shows a significant difference in performance.

/*
 * Shapes |       μs  | Slowdown
 * -----------------------------
 *      1 |  8.10 μs  | 1.0  *
 *      2 |  9.71 μs  | 1.2  ***
 *      3 | 12.59 μs  | 1.5  ******
 *      4 | 12.90 μs  | 1.6  *******
 *      5 | 32.20 μs  | 3.9  ******************************
 *   many | 55.90 μs  | 6.9  ************************************************************
 */

The slowdown corresponds to the degree of polymorphism. The VM can handle fewer than four as part of inline-cache. However, as the number of shapes increases, the VM resorts to alternate caching strategies, that are much slower, until it ultimately gives up on caching all together.

Deoptigate can visualize this.

First, run the JavaScript using the CLI wrapper.

% deoptigate deoptigate-example.js 

Then examine the output by selecting the file.

Source code of sample application annotated with Deoptigate, showing where the slow property access is.

Notice that the Deoptigate has marked the vehicle.wheels access with a red mark. This indicates that the VM could not perform an efficient property read and has instead resorted to the slow path. Clicking on the mark shows these details:

Deopticage detail view of property access going from monomorphic to megamorphic read.

The details show how the VM gradually transitioned from the fast path to the slow path as many different-shapes of objects passed under the property access:

  • uninitilizedmonomorphic : the first object shape allowed the VM to inline-cache that object on the first execution.
  • monomorphicpolymorphic: as more object shapes passed by, the size of the inline cache increased.
  • polymorphicmegamorphic: as the number of shapes increased above 4, the VM has given up on the inline-cache strategy and transitioned to the global property cache. This is an undesirable state as it is a slow code path.

Deoptigate is a great tool to have at your disposal. It allows you to annotate your codebase with information showing problematic areas for VM. It quickly allows you to identify the location of the code which is metamorphic and, therefore slow. If the code is in the hot path it can have significant negative implications for the performance of your application.

The best way to guard yourself against this is to think about how many shapes of objects will each property access have and try to minimize it. A good strategy is to make sure that all objects have the same set of properties. If the property is un-needed just set it to undefined.

Introducing Visual Copilot: convert Figma designs to code using your existing components in a single click.

Try Visual Copilot

Share

Twitter
LinkedIn
Facebook
Hand written text that says "A drag and drop headless CMS?"

Introducing Visual Copilot:

A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot
Newsletter

Like our content?

Join Our Newsletter

Continue Reading
Web Development15 MIN
Figma to Vue: Convert Designs to Clean Vue Code in a Click
WRITTEN BYVishwas Gopinath
June 14, 2024
Web Development12 MIN
Figma to Angular: Convert Designs to Clean Angular Code in a Click
WRITTEN BYVishwas Gopinath
May 16, 2024
Web Development18 MIN
Getting Started with Mitosis: Creating a Cross-Framework Design System
WRITTEN BYVishwas Gopinath
May 7, 2024