如何优化JavaScript代码以更可靠地从MCU加载LED矩阵参数？

核心问题分析 #

你当前通过9次独立的XMLHttpRequest请求获取参数，每次请求都要经历完整的TCP握手、请求响应流程，在MCU这类资源有限的设备上，不仅会增加网络开销，还会占用更多设备资源，同时前端代码冗余度极高，维护成本大。

优化方案 #

1. 后端接口合并（关键优化）

在MCU端新增一个统一的参数接口（比如/config），将所有LED矩阵参数打包成JSON格式返回，示例响应格式：

{
  "mensaje": "初始测试消息",
  "brightness": "50",
  "speed": "70",
  "text_align": "居中",
  "MODO": "模式2",
  "TIME": "2000",
  "EM1": "滚动",
  "E1M2": "淡入",
  "E2M2": "淡出"
}

这样只需要一次HTTP请求就能获取所有参数，大幅减少网络交互次数。

2. 前端代码优化

用现代的Fetch API替代老式的XMLHttpRequest，配合Promise简化异步逻辑，同时封装渲染逻辑，减少重复代码：

修改后的完整代码：

<div class="row">
  <div id="column1" class="column">
  </div>

  <div class="column middle">
    <h3 style="color: rgb(187, 187, 187);">Parámetros guardados: </h3>
    <div class="guardado">
    <p >Mensaje guardado inicial: <span id="mensaje"></span></p>
    <p >Brillo guardado: <span id="brightness"></span></p>
    <p >Velocidad guardada: <span id="speed"></span></p>
    <p >Alineación: <span id="text_align"></span></p>
    <p >Modo operando: <span id="MODO"></span></p>
    <p >Tiempo entre mensajes (M2): <span id="TIME"></span></p>
    <p >Efecto (M1): <span id="EM1"></span></p>
    <p >Efecto inicio (M2): <span id="E1M2"></span></p>
    <p >Efecto salida (M2): <span id="E2M2"></span></p>
</div>
</div>
  
 <script>
// 统一获取并渲染所有参数
fetch('/config')
  .then(response => {
    if (!response.ok) {
      throw new Error(`请求失败: ${response.status}`);
    }
    return response.json();
  })
  .then(config => {
    // 基础参数渲染
    document.getElementById('mensaje').textContent = config.mensaje;
    document.getElementById('brightness').textContent = config.brightness;
    document.getElementById('text_align').textContent = config.text_align;
    document.getElementById('MODO').textContent = config.MODO;
    document.getElementById('EM1').textContent = config.EM1;
    document.getElementById('E1M2').textContent = config.E1M2;
    document.getElementById('E2M2').textContent = config.E2M2;
    
    // 带单位的参数渲染
    document.getElementById('speed').textContent = `${config.speed}%`;
    document.getElementById('TIME').textContent = `${config.TIME}ms`;
  })
  .catch(error => {
    console.error('加载参数出错:', error);
    // 可选：给用户展示错误提示
    alert('参数加载失败，请刷新页面重试');
  });
</script>

3. 备选优化（无法修改后端时）

如果MCU端暂时无法调整接口，可以用Promise.all批量发起请求，统一管理请求逻辑，避免重复创建XHR实例：

// 定义参数配置列表
const params = [
  { url: '/mensaje', id: 'mensaje' },
  { url: '/brillo_guardado.txt', id: 'brightness' },
  { url: '/velocidad_guardado.txt', id: 'speed', suffix: '%' },
  { url: '/modo_guardado.txt', id: 'MODO' },
  { url: '/alineacion_guardado.txt', id: 'text_align' },
  { url: '/tiempo_guardado.txt', id: 'TIME', suffix: 'ms' },
  { url: '/effecto_modo1_guardado.txt', id: 'EM1' },
  { url: '/effecto1_m2_guardado.txt', id: 'E1M2' },
  { url: '/effecto2_m2_guardado.txt', id: 'E2M2' }
];

// 封装XHR请求为Promise
function fetchParam(param) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.onload = () => {
      if (xhr.status === 200) {
        resolve({ ...param, value: xhr.responseText });
      } else {
        reject(new Error(`请求${param.url}失败`));
      }
    };
    xhr.onerror = () => reject(new Error(`网络错误：${param.url}`));
    xhr.open('GET', param.url);
    xhr.send();
  });
}

// 批量请求并渲染
Promise.all(params.map(fetchParam))
  .then(results => {
    results.forEach(item => {
      const element = document.getElementById(item.id);
      if (element) {
        element.textContent = item.suffix ? `${item.value}${item.suffix}` : item.value;
      }
    });
  })
  .catch(error => console.error('加载出错:', error));

额外建议

• 增加加载状态提示，比如在请求完成前显示"加载中..."，提升用户体验；
• 对MCU端的接口添加缓存策略，减少重复请求的资源消耗。

内容的提问来源于stack exchange，提问作者Some random guy