如何避免大型JSF视图出现HTTP响应部分刷新问题？

今天我花了好几个小时，终于复现并定位到我们基于JSF Facelets的Web应用里一个特别诡异的UI问题：有时候服务器还没完成整个视图的渲染，浏览器就已经开始部分渲染UI了。

经过反复排查，发现问题的根源在于包含大量元素的JSF视图——在我的场景里是数量极多的子菜单项。看起来存在一个隐性阈值，当视图内的元素数量超过这个值时，就会触发响应的分段刷新，导致浏览器提前拿到部分内容并开始渲染。

最简复现示例 #

这里提供一个能直观展示该现象的简化代码示例：

<!-- 包含大量子菜单项的JSF视图示例 -->
<h:form>
    <p:menu>
        <p:submenu label="主菜单">
            <!-- 模拟1000个子菜单项，触发阈值 -->
            <c:forEach begin="1" end="1000" var="i">
                <p:menuitem value="子菜单 #{i}" url="#"/>
            </c:forEach>
        </p:submenu>
    </p:menu>
</h:form>

运行这个示例时，你会明显观察到：浏览器在服务器还没发送完整响应的情况下，就已经开始渲染页面上的部分菜单内容，甚至可能出现样式错乱、元素加载不全的情况。

背后的原因分析 #

深入研究后发现，这和JSF的响应输出机制直接相关：当视图包含大量元素时，服务器端的响应输出流会自动启用分块传输模式，把响应拆分成多个片段发送。而浏览器在接收到第一个片段后，就会立刻尝试解析并渲染，这就造成了「服务器未完成渲染，浏览器先渲染」的矛盾现象。

临时解决思路 #

如果遇到类似问题，可以尝试以下几种方案缓解：

• 拆分视图元素：把大量子菜单拆分到多个视图，或者使用懒加载机制，只渲染当前可见的部分
• 调整响应缓冲：在web.xml中修改javax.faces.FACELETS_BUFFER_SIZE参数，增大响应缓冲的容量，强制服务器完成整个视图渲染后再发送完整响应
• 改用AJAX加载：对包含大量元素的组件使用AJAX异步加载，避免一次性渲染所有内容

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