渲染时机

什么是渲染时机?

简单来说，“渲染时机”就是指在生成图片模板截图的过程中，系统决定在哪个时间点开始执行“截图”这个动作。它不是一个固定的瞬间，而是一个需要满足特定条件的“窗口期”，目的是为了确保截图时页面内容已经完全加载、渲染完毕，从而得到一张完整、准确、无缺漏的最终图片。

图片模板渲染原理

要搞懂怎么个事，请先了解一下图片模板的渲染原理。

整个图片模板的渲染过程可以分解为以下几个关键步骤：

1. 开始渲染：启动整个流程。
2. 渲染器加载图片：软件将所有模板静态文件进行映射。
3. 加载模板源代码：获取并解析用于构建页面的HTML/CSS/JS等代码。
4. 模板网络请求：向服务器发起请求，获取动态数据（如用户信息、查询PAPI、执行命令等）。
5. 等待时机：这是最关键的部分！系统会在这里暂停，等待满足预设的条件才继续下一步。
6. 调用渲染器截取页面：时机成熟后，执行截图操作。
7. 完成渲染：将截图保存或返回，整个流程结束。

为什么需要“渲染时机”

提示

所有图片模板都是基于HTML实现,使用浏览器渲染成图片的。

想象一下，如果你在网页刚打开、图片还没加载出来、还有网络请求的时候就截屏，得到的图片肯定是不完整的、有空白或错位的。因此，系统不能一加载完就立刻截图，必须等待一个“万事俱备”的时刻。

这个“等待”的过程，就是由“渲染时机”来控制的。

“等待时机”具体等什么？

事件 / 策略	触发条件说明
Load	所有静态资源（如图片、样式表、脚本等）加载完成时触发，确保页面所有内容都已加载完毕。 (不包含动态加载的资源、如请求数据、查询PAPI)
DOMContentLoaded	页面 DOM 结构（HTML 文档解析完成，基本骨架构建完毕）加载完成时触发，不等待样式表、图片、子框架等外部资源加载。
NetworkIdle0	所有网络请求均已结束，并在随后的 500 毫秒内无任何新请求发出，即网络完全空闲，才视为页面加载完成。适用于对完整性要求高的场景（如需显示玩家头像的模板内容）。
NetworkIdle2	允许最多存在 2 个活跃的网络请求，且这 2 个请求在最近 500 毫秒内未发生变化（即处于“空闲”状态），即可视为页面加载完成。较宽松，适合加载中持续轮询或长连接的页面。

二次等待与超时

在第一次“等待时机”通过后，系统可能还会再等待一小段时间，以确保页面彻底稳定，比如动画结束、字体渲染完成等。

超时

为了避免程序无限期地等待（例如某个网络请求一直失败或卡住），系统会设置一个最长等待时间。一旦超过这个时间就会直接报错,以确保程序不会因为等待而无限期地运行。

如何优化渲染时机

“渲染时机”本质上是一个智能的等待策略，它的目标是在效率和准确性之间取得平衡：

• 太早截图 -> 图片不完整、内容缺失。
• 太晚截图 -> 浪费时间，影响性能。
• 合适的时机 -> 得到一张完美、完整的图片。