如何优化网页数字时钟脚本加载速度？解决首次显示延迟问题

你的问题根源在于setInterval的执行机制：它会在指定的延迟时间后第一次执行回调函数，所以页面加载完成后要等1秒才会显示时间。解决方法很简单，把时间更新的逻辑单独抽出来，先立即执行一次，再设置定时重复执行。

优化后的代码 #

const add_zero = (number) => {
    return number < 10 ? `0${number}` : number;
}

// 抽离单独的时间更新函数
const updateCurrentTime = () => {
    const today = new Date();
    const month = today.getMonth() + 1;
    const year = today.getFullYear();
    const date = today.getDate();

    const hours = add_zero(today.getHours());
    const minutes = add_zero(today.getMinutes());

    const current_date = `${date}/${month}/${year} ${hours}:${minutes} |`;
    
    document.getElementById("show_current_time").innerHTML = current_date;
}

const show_current_time = () => {
    // 立即执行一次，页面加载后立刻显示时间
    updateCurrentTime();
    // 之后每秒更新一次
    setInterval(updateCurrentTime, 1000);
}

window.onload = show_current_time;

额外优化建议 #

• 如果你的DOM元素show_current_time在页面中固定存在，可以提前获取元素引用，避免每次更新都调用getElementById，提升一点性能：

  // 在全局或函数开头获取元素
  const timeElement = document.getElementById("show_current_time");
  
  const updateCurrentTime = () => {
      // ... 其他逻辑不变
      timeElement.innerHTML = current_date;
  }
  

• 若需要更精确的分钟更新（避免定时器累积误差导致的跳变延迟），可以计算当前时间到下一分钟的剩余毫秒数，动态设置定时器间隔，但对于普通数字时钟来说，基础优化已经足够。

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