FFI (Foreign Function Interface) for native code in Deno - Performance & Optimization

Performance: FFI (Foreign Function Interface) for native code

MEDIUM IMPACT

FFI affects page load speed and runtime responsiveness by introducing native code calls that can block or delay JavaScript execution.

Calling native code from Deno to perform heavy computation

Deno

const lib = Deno.dlopen("./libnative.so", { compute: { parameters: ["i32"], result: "i32" } });
const result = await Promise.resolve().then(() => lib.symbols.compute(42));

Using async patterns or offloading native calls to workers prevents blocking the main thread.

📈 Performance GainReduces input blocking, improving INP by up to 80%, keeps UI responsive.

Calling native code from Deno to perform heavy computation

Deno

const lib = Deno.dlopen("./libnative.so", { compute: { parameters: ["i32"], result: "i32" } });
const result = lib.symbols.compute(42);

This synchronous call blocks the main thread until native code returns, causing input delay.

📉 Performance CostBlocks rendering and input for the duration of native call, increasing INP by 50-200ms depending on native code.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Synchronous FFI call on main thread	0	0	Blocks paint until native returns	[X] Bad
Asynchronous or worker-based FFI call	0	0	Non-blocking paint and input	[OK] Good

Rendering Pipeline

FFI calls enter the JavaScript execution stage and can block event loop if synchronous. This delays style calculation and paint if UI updates depend on JS.

→JavaScript Execution

→Style Calculation

→Layout

→Paint

⚠️ BottleneckJavaScript Execution blocking due to synchronous native calls

Core Web Vital Affected

INP

FFI affects page load speed and runtime responsiveness by introducing native code calls that can block or delay JavaScript execution.

Optimization Tips

1Avoid synchronous FFI calls on the main thread to prevent blocking UI.

2Use asynchronous or worker-based native calls to keep input responsive.

3Batch native calls when possible to reduce overhead and improve performance.

Performance Quiz - 3 Questions

What is the main performance risk of synchronous FFI calls in Deno?

A They cause layout shifts in the browser

B They increase bundle size significantly

C They block the main thread causing input delays

D They reduce network latency

DevTools: Performance

How to check: Record a performance profile while triggering native calls; look for long tasks blocking main thread.

What to look for: Long tasks or scripting blocks during native calls indicate blocking; shorter tasks with async calls show better responsiveness.

Practice

1. What is the main purpose of using Deno.dlopen in Deno's FFI?

easy

A. To load a native shared library and access its functions

B. To compile TypeScript code into JavaScript

C. To start a web server in Deno

D. To read files from the filesystem

Solution

1. Step 1: Understand the role of Deno.dlopen

   Deno.dlopen is used to load native shared libraries (like .dll, .so, .dylib) so Deno can call native functions.

2. Step 2: Compare with other options

   Options B, C, and D relate to other Deno features but not FFI or native code loading.

3. Final Answer:

   To load a native shared library and access its functions -> Option A

4. Quick Check:

   Deno.dlopen loads native libraries = A [OK]

Hint: Remember: dlopen means 'dynamic library open' [OK]

Common Mistakes:

• Confusing dlopen with file reading functions
• Thinking dlopen compiles code
• Mixing up server start with FFI loading

2. Which of the following is the correct way to define a function signature for a native function returning an integer in Deno.dlopen?

easy

A. { myFunc: { parameters: ["i32"], result: "void" } }

B. { myFunc: { parameters: ["i32"], result: "i32" } }

C. { myFunc: { parameters: ["void"], result: "i32" } }

D. { myFunc: { parameters: [], result: "string" } }

Solution

1. Step 1: Understand function signature format

   Function signatures in Deno.dlopen require specifying parameter types and the return type. For a function taking an integer and returning an integer, both parameters and result should be "i32".

2. Step 2: Analyze each option

   { myFunc: { parameters: ["i32"], result: "void" } } returns void, not integer. { myFunc: { parameters: ["void"], result: "i32" } } has parameters as void which is invalid. { myFunc: { parameters: [], result: "string" } } returns string but parameters are empty. Only { myFunc: { parameters: ["i32"], result: "i32" } } correctly matches integer parameter and integer return.

3. Final Answer:

   { myFunc: { parameters: ["i32"], result: "i32" } } -> Option B

4. Quick Check:

   Integer parameter and return = C [OK]

Hint: Match parameter and result types exactly as strings [OK]

Common Mistakes:

• Using 'void' as a parameter type incorrectly
• Mixing return and parameter types
• Using unsupported types like 'string' without proper handling

3. Given the following code snippet, what will be the output?

const lib = Deno.dlopen("./libmath.so", {
  add: { parameters: ["i32", "i32"], result: "i32" }
});

const result = lib.symbols.add(10, 5);
console.log(result);
lib.close();

medium

A. undefined

B. 105

C. 15

D. Runtime error

Solution

1. Step 1: Understand the function signature and call

   The native function 'add' takes two 32-bit integers and returns a 32-bit integer. Calling add(10, 5) should return 15.

2. Step 2: Analyze the output

   The console.log prints the returned value, which is 15. No errors occur because the signature matches and the library is closed properly.

3. Final Answer:

   15 -> Option C

4. Quick Check:

   Adding 10 + 5 = 15 [OK]

Hint: Check parameter types and expected return for output [OK]

Common Mistakes:

• Concatenating numbers as strings (getting 105)
• Forgetting to close the library
• Assuming undefined return without checking signature

4. Identify the error in this Deno FFI code snippet:

const lib = Deno.dlopen("./libcalc.so", {
  multiply: { parameters: ["i32", "i32"], result: "i64" }
});

const output = lib.symbols.multiply(3, 4);
console.log(output);
lib.close();

medium

A. The result type should be "i32" instead of "i64"

B. The parameters array should be empty

C. The library path is incorrect

D. The function call syntax is invalid

Solution

1. Step 1: Check function signature consistency

   The function 'multiply' takes two 32-bit integers and likely returns a 32-bit integer. Using "i64" as result type can cause mismatch errors if the native function returns 32-bit.

2. Step 2: Validate other parts

   Parameters are correctly specified as two "i32". The library path and function call syntax are valid assuming the file exists and function is exported.

3. Final Answer:

   The result type should be "i32" instead of "i64" -> Option A

4. Quick Check:

   Result type must match native function = D [OK]

Hint: Match return type exactly with native function signature [OK]

Common Mistakes:

• Changing parameter types incorrectly
• Assuming library path error without checking
• Misusing function call syntax

5. You want to call a native function that returns a pointer to a UTF-8 string. Which approach correctly handles this in Deno FFI?

hard

A. Define the function with result type "string" and use it directly

B. Define the function with result type "i32" and convert to string

C. Define the function with result type "void" and cast the result to string

D. Define the function with result type "pointer", then use Deno.UnsafePointerView to read the string

Solution

1. Step 1: Understand pointer return handling

   Native functions returning strings usually return pointers. Deno FFI requires defining the result as "pointer" to get the address.

2. Step 2: Use Deno.UnsafePointerView to read UTF-8

   After getting the pointer, Deno.UnsafePointerView can read the memory as a UTF-8 string safely.

3. Final Answer:

   Define the function with result type "pointer", then use Deno.UnsafePointerView to read the string -> Option D

4. Quick Check:

   Pointer + UnsafePointerView for strings = B [OK]

Hint: Use pointer type and UnsafePointerView for native strings [OK]

Common Mistakes:

• Using 'string' as result type directly
• Casting void or integer to string incorrectly
• Ignoring memory safety when reading pointers