Comments (2)
TL;DR: Declaring SatoriOptions.fonts as a global variable doubled the performance
Upon closer inspection of the code, I discovered a global variable named fontCache
that utilizes WeakMap. I added console.log
to satori.ts#L57-L62
to check if the cache was indeed being utilized.
let font: FontLoader
if (fontCache.has(options.fonts)) {
font = fontCache.get(options.fonts)
} else {
fontCache.set(options.fonts, (font = new FontLoader(options.fonts)))
}
It turned out, in satori.ts, the cache key was being assigned to the memory address of the SatoriOptions.fonts
object.
We had been declaring SatoriOptions.fonts as a local variable, just as the example in README.md suggests.
This made me realize that changing the address of options.fonts with every invocation prevented us from ever utilizing the cache effectively, as it just kept accumulating.
Therefore, I declared SatoriOptions.fonts as a global variable as follows:
AS-IS
export default async function handler(
request: NextApiRequest,
response: NextApiResponse
) {
try {
const svg = await satori(JSX,
{
width: 1200,
height: 630,
embedFont: true,
fonts: [
// ...
]
);
TO-BE
const options: SatoriOptions = {
width: 1200,
height: 630,
embedFont: true,
fonts: [
// ...
],
};
export default async function handler(
request: NextApiRequest,
response: NextApiResponse
) {
try {
const svg = await satori(JSX, options);
// ...
As a result, the same code was able to handle approximately double the number of requests.
wrk -t10 -c 30 -d30s http://localhost:3000/og/review/41854\?updatedAt\=2024-01-29T14:30:22
Running 30s test @ http://localhost:3000/og/review/41854?updatedAt=2024-01-29T14:30:22
10 threads and 30 connections
Thread Stats Avg Stdev Max +/- Stdev
Latency 992.55ms 273.04ms 1.87s 66.67%
Req/Sec 4.43 3.97 20.00 70.93%
891 requests in 30.07s, 318.15MB read
Requests/sec: 29.63
Transfer/sec: 10.58MB
- AS-IS: 15.95 Requests/sec
- TO-BE: 29.63 Requests/sec
Performance improvement by roughly 1.86 times
As you can see, this changes no longer make unnecessary calls to addFonts() in the profiling graph.
Now, we can see that the sendData() function, used when returning a response, occupies most of the flame graph.
Required
- Modify
satori.ts#L57-L62
to use serialized value as key of the map instead of the memory address value of the object - ImageResponse provided by @next/og might also have similar issues.
I hope this helps those experiencing performance issues. Thank you.
Regarding this, I'd like to inform @shuding , the author of this code, about the matter. If it's not too much trouble, may I go ahead and make the improvements, then submit them as a Pull Request? @shuding
from satori.
Wow what an amazing investigation, thank you so much for your effort in this @jakeinflab!
Modify satori.ts#L57-L62 to use serialized value as key of the map
This definitely makes sense to me. Let me know if you have time to open a PR for that, I can also do it if you're busy!
from satori.
Related Issues (20)
- Functionality for getting bounding box of text from satori
- Title HOT 1
- Image in SVG doesn't work when exported to PNG HOT 10
- Transparent linear gradient rendered incorrectly HOT 2
- `word-break: keep-all` breaks when used with `text-wrap: balance`
- Satori cannot render svg data URI with comma inside
- Misplacement text when Embed Font is turned off
- Satori does not work with components which are using forwardRef HOT 1
- BUG: Fails to apply HSL colors with a decimal point in the hue.
- Absolute child of fragment does not position properly with true relative parent
- Type 'ArrayBuffer' is not assignable to type 'string'. when using local image. HOT 3
- Base64 encoded Webp Images are not working
- `span` background does not match the way browser renders
- Error: t is undefined when using base64-encoded image as `background-image`
- `lineClamp` / `textOverflow` incorrectly overflows after first word in a line HOT 1
- Add links to text/images
- @vercel/og and next/og: Can't load image: Unsupported image type: unknown
- Certain tw classes are not working in the playground
- Support for image-rendering: pixelated HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from satori.