Overview
This article discusses how Notion improved its web application performance by implementing WebAssembly (WASM) SQLite for caching data in the browser. It details the architecture, challenges faced, and the resulting performance improvements, including significant reductions in page navigation times.
What You'll Learn
1
How to implement WebAssembly SQLite for client-side caching
2
Why using SharedWorker improves concurrency in web applications
3
When to use Origin Private File System (OPFS) for data persistence
Prerequisites & Requirements
- Understanding of WebAssembly and SQLite
- Familiarity with Web Workers and SharedWorkers(optional)
Key Questions Answered
How does WASM SQLite improve performance in Notion's web app?
WASM SQLite improved page navigation times by 20% across all modern browsers, with even greater improvements for users in regions with slow API response times, such as 28% in Australia and 33% in India. This enhancement allows for faster data retrieval and a smoother user experience.
What challenges did Notion face when implementing WASM SQLite?
Notion encountered several challenges, including concurrency issues leading to database corruption and the need for cross-origin isolation for certain features. These hurdles required innovative solutions like using SharedWorkers to manage database access across multiple tabs.
Why did Notion choose the OPFS SyncAccessHandle Pool VFS variant?
Notion opted for the OPFS SyncAccessHandle Pool VFS variant because it did not require cross-origin isolation, allowing broader compatibility across browsers. This decision was crucial for ensuring that all users could benefit from the caching improvements without significant limitations.
Key Statistics & Figures
Page navigation time improvement
20%
This improvement was observed across all modern browsers after implementing WASM SQLite.
Page navigation time improvement for users in Australia
28%
This specific improvement was noted for users facing slow API response times.
Page navigation time improvement for users in China
31%
Similar enhancements were seen for users in China, highlighting the effectiveness of the caching strategy.
Page navigation time improvement for users in India
33%
This improvement underscores the benefits of the new architecture for users with slower connections.
Technologies & Tools
Some links below are affiliate links. We may earn a commission if you make a purchase.
Frontend
Webassembly
Used for implementing SQLite in the browser to enhance performance.
Database
Sqlite
Serves as the caching mechanism for data in the Notion web application.
Frontend
Origin Private File System (opfs)
Provides a way to persist data across sessions in the browser.
Frontend
Sharedworker
Manages database access across multiple tabs to avoid concurrency issues.
Key Actionable Insights
1Implementing a SharedWorker architecture can significantly improve concurrency management in web applications.This approach allows multiple tabs to access a single database instance without causing data corruption, ensuring a smoother user experience.
2Asynchronous loading of libraries like WASM SQLite is essential to prevent blocking the main thread during page load.By loading the library asynchronously, you can enhance initial load times and improve overall application performance.
3Testing performance improvements in a controlled environment can help identify regressions before full deployment.Using Origin Trials for testing allowed Notion to gather valuable performance data without impacting all users.
Common Pitfalls
1
Assuming that a straightforward implementation of OPFS will handle concurrency issues effectively.
Notion found that OPFS does not manage concurrency well out of the box, leading to data corruption. Developers should design around these limitations.
2
Neglecting the impact of loading large libraries on initial page load times.
The initial loading of the WASM SQLite library was found to slow down the page load process, necessitating asynchronous loading to mitigate this issue.
Related Concepts
Webassembly
Sqlite
Caching Strategies
Concurrency Management In Web Applications