Alpine.js中相邻模板的渲染顺序由何决定？为何后定义模板先渲染？

我有两个相邻的模板用于生成表格中的行，但第二个模板生成的表格行始终先在<tbody>中渲染。请问Alpine.js中这类模板的渲染优先级规则是什么？

相关代码如下：

<template x-for="..."> <!-- template 1 -->
    <template x-if="...">
        <tr>
         ...
        </tr>
    </template>
</template>
<template x-for="..."> <!-- template 2 always renders first in <tbody> -->
    <tr>
    ...
    </tr>
</template>

Alpine.js对模板的渲染优先级遵循DOM顺序异步处理，但嵌套条件判断的x-for会延迟渲染时机的规则：

• 你的模板1是x-for嵌套x-if的结构：Alpine会先遍历x-for的数据源，但每一项都要等x-if的条件判断完成后才会生成<tr>元素，这个逐个判断的过程会拖慢整体渲染速度。
• 模板2是无嵌套的单独x-for：没有额外的条件判断开销，Alpine会直接批量生成对应<tr>元素，渲染完成速度更快，所以会先出现在<tbody>中。

如果要让模板1的行优先渲染，可参考两种方案：

• 提前过滤x-for的数据源，把x-if的判断逻辑移到数据源处理阶段（比如在初始化或数据更新时过滤掉不符合条件的项），消除模板嵌套，让两个x-for的渲染时机对齐。
• 给模板2添加渲染依赖，比如用一个变量标记模板1的渲染状态，等模板1完成渲染后再触发模板2的x-for渲染（可结合x-effect监听模板1的渲染完成状态）。

内容的提问来源于stack exchange，提问作者user1961