Angular集成FullCalendar在iPhone设备点击日期/事件延迟性能问题

核心原因分析 #

iPhone Safari出现该问题主要是三个共性原因导致：

• iOS Safari默认的触摸事件300ms延迟机制（为兼容双击缩放逻辑）
• FullCalendar配置项不合理导致频繁触发全量重渲染
• iOS端JS执行效率低于安卓/桌面端，微小的重绘开销会被放大为可见延迟

具体修复步骤 #

1. 修复viewport配置消除系统级延迟 #

在项目index.html的head标签内添加/修改viewport meta标签，禁用页面缩放即可取消Safari默认的300ms点击延迟：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

2. 调整FullCalendar核心配置 #

现有配置存在两个明显问题：

• rerenderDelay: 1配置过小，会导致重渲染操作无防抖，频繁触发页面回流
• 未开启针对触屏设备的交互优化
  修改后的配置参考如下：

this.calendarOptions = {
  headerToolbar: {
    left: '',
    right : 'prev title next'
  },
  customButtons:
  {
    prev:{
      click:this.previousMonth.bind(this)
    },
    next:{
      click:this.nextMonth.bind(this)
    },
  },
  showNonCurrentDates: false,
  fixedWeekCount: false,
  views: {
    dayGridMonth: {
      titleFormat: {month:"2-digit"}
    }
  },
  dayCellContent: arg => {
    return arg.date.getDate();
  },
  aspectRatio:1.2,
  height: 'auto',
  unselectAuto: false,
  eventColor:"white",
  locale:jaLocale,
  // 删掉原rerenderDelay:1配置，用默认值0即可
  initialDate: '2021-09-17',
  events:this.Price,
  eventContent:this.renderEvent, 
  select: this.handleDateSelect.bind(this),
  // 新增触屏优化配置
  touchUi: true,
  longPressDelay: 150,
  animate: false, // 禁用不必要的过渡动画
  eventDragMinDistance: 9999, // 禁用拖拽检测，减少无效计算
  dateClick: clickInfo => {
    // 阻止Safari默认触摸事件，避免额外开销
    clickInfo.jsEvent.preventDefault();
    const calendarApi = clickInfo.view.calendar;
    calendarApi.select(clickInfo.date);
  },
  eventClick: clickInfo => {
    clickInfo.jsEvent.preventDefault();
    const calendarApi = clickInfo.view.calendar;
    calendarApi.select(clickInfo.event.start);
  },
  datesSet: this.handleDatesSet.bind(this),
  unselect: this.handleDateUnselect.bind(this)
};

3. 优化渲染函数减少重绘开销 #

• renderEvent函数不要包含任何DOM操作、实时日期计算、样式读取等会触发强制回流的逻辑，所有需要展示的内容提前预计算后存入事件的extendedProps属性，渲染时直接读取即可
• 如果点击延迟仍然明显，可以放弃使用FullCalendar自带的selectAPI，改为自行维护选中日期变量，通过CSS类控制选中状态，避免全量重渲染：点击时记录选中的日期，在dayCellContent和eventContent中判断当前日期是否匹配，返回带自定义选中类的结构即可

4. 版本兼容检查 #

如果使用的是v5及以下版本的FullCalendar，建议升级到v6最新稳定版，该版本针对移动端性能做了大量优化，已经修复了多个iOS端特有的延迟问题。

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