Github 新社交分享图片诞生记

[ad_1]

#GitHub情报

当你将链接分享到社交平台上后，社交平台会在链接中寻找元信息，以此生成图片。Open Graph 便是一种常见的元信息标准。

Github 便采用 Open Graph 协议声明分享链接中的图片信息。

? 图片是如何生成的

为了完全掌握图片生成，并将此服务部署到 Github 自己的基础设施上，Github 使用了 vercel/og-image 的思路。

Github 搭建了一个 Node.js 应用来收集 Github 自己 GraphQL API 中的数据。接着数据将被填充到模版中，最终生成一个 HTML 文件。Github 使用无头浏览器 Puppeteer 来打开 HTML 文件，并对其截图。

⚙️ 优化

熟悉前端开发的群友们肯定知道使用无头浏览器 Puppeter 就跟启动一个 Chrome 浏览器一样，性能开销大，速度慢。Github 做了以下优化：

1⃣️ 降低 Puppeter 启动后的默认等待时间。为了确保所有资源加载成功，Puppeter 会默认等待很长时间。Github 自定义 Puppeter 判断资源是否加载成功的逻辑，将等待时间从 2.25 秒降低到 600 毫秒。

2⃣️ 调度更多的计算资源。Github 基础设施中容器的默认 RAM 是 512 MB，512 是一个神奇的数字。 Github 通过增加 RAM 到 513 MB，图片生成时间降低了 500 毫秒。

优化后生成一张图片需要 280 毫秒，40% 的请求都可以从缓存中返回结果。

Have Fun ✨

[ad_2]