如何从JSF复合组件提供动态资源？WildFly10环境字体组件优化

我完全懂你现在的困扰——在WildFly 10搭配Mojarra 2.2开发字体选择复合组件时，服务器端生成的上百条字体选项不仅拖慢页面渲染，还让用户找字体变得特别费劲。结合你的技术栈，给你几个落地性强的优化方案：

1. 前端侧优化：让大列表更易用 #

直接渲染全量<option>标签肯定是低效的，从用户体验和页面性能出发，试试这两种方式：

• 实时过滤搜索：在下拉框上方加一个文本输入框，用原生JS监听输入事件，动态过滤显示匹配的字体选项。不用后端改动，纯前端就能搞定，示例代码如下：

  // 假设你的过滤框ID是fontFilter，下拉框ID是fontSelect
  const filterInput = document.getElementById('fontFilter');
  const fontSelect = document.getElementById('fontSelect');
  
  filterInput.addEventListener('input', () => {
    const filterKeyword = filterInput.value.toLowerCase();
    Array.from(fontSelect.options).forEach(option => {
      option.style.display = option.text.toLowerCase().includes(filterKeyword) ? 'block' : 'none';
    });
  });
  

  注意给复合组件里的输入控件加上明确的ID，或者用JSF的prependId="false"属性，避免ID被容器自动拼接导致前端找不到元素。
• 虚拟滚动下拉：如果字体列表超过300条，虚拟滚动会是更好的选择——只渲染当前可见区域的选项，大幅减少DOM节点数量。你可以自己用原生JS实现简易版，或者引入轻量的虚拟滚动插件（不用依赖Vue/React这类框架）。

2. 服务器端优化：减少重复计算 #

每次请求都重新生成字体列表是没必要的性能损耗，试试这两个优化点：

• 缓存字体列表：用@ApplicationScoped的Bean缓存字体列表，只在应用启动或字体资源变化时重新生成。示例代码：

  @ApplicationScoped
  public class FontCacheManager {
      private List<String> systemFonts;
  
      @PostConstruct
      public void initFontList() {
          // 这里写你的字体列表生成逻辑，比如读取系统字体、配置文件或数据库
          systemFonts = loadSystemFonts();
      }
  
      public List<String> getSystemFonts() {
          return Collections.unmodifiableList(systemFonts);
      }
  
      // 可选：提供刷新方法，当字体资源更新时调用
      public void refreshFontList() {
          systemFonts = loadSystemFonts();
      }
  }
  

  然后在你的复合组件后台Bean中注入这个缓存Bean，直接获取预先生成好的列表即可。
• 按需加载（分页）：如果字体列表是从外部服务或数据库获取的，可以实现分页接口，前端滚动到下拉列表底部时再请求下一页数据。这种方式适合超大规模的字体库，但需要前后端配合开发。

3. JSF组件本身的优化 #

• 选择合适的Bean作用域：确保复合组件的后台Bean用@ViewScoped或@RequestScoped，避免用@SessionScoped存储大列表，减少不必要的会话内存占用。
• 用<f:selectItems>渲染选项：Mojarra对<f:selectItems>标签有专门的渲染优化，比手动用<c:forEach>循环生成<option>标签更高效，代码也更简洁：

  <h:selectOneMenu id="fontSelect" value="#{fontBean.selectedFont}">
      <f:selectItems value="#{fontCacheManager.systemFonts}" var="font"
                     itemLabel="#{font}" itemValue="#{font}"/>
  </h:selectOneMenu>
  

4. 提升用户体验的小细节 #

• 常用字体置顶：把Arial、微软雅黑这类高频使用的字体放在列表最前面，或者单独做一个“快速选择”区域，减少用户翻找成本。
• 实时字体预览：在用户选择字体时，实时展示字体效果。比如在下拉框旁边加一个预览区域，选择后更新其字体样式：

  fontSelect.addEventListener('change', () => {
      const previewArea = document.getElementById('fontPreview');
      previewArea.style.fontFamily = fontSelect.value;
  });
  

根据你的实际场景选方案就行——100多条的话，前端过滤+服务器缓存完全够用；如果是几百上千条，再考虑虚拟滚动或者分页。

内容的提问来源于stack exchange，提问作者Martin Höller