#GitHub情报
👨🏻💻 Github 新社交分享图片诞生记
📖 Open Graph
当你将链接分享到社交平台上后，社交平台会在链接中寻找元信息，以此生成图片。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 ✨
频道：@NewlearnerChannel
👨🏻💻 Github 新社交分享图片诞生记
📖 Open Graph
当你将链接分享到社交平台上后，社交平台会在链接中寻找元信息，以此生成图片。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 ✨
频道：@NewlearnerChannel