Angular集成Fullcalendar在iPhone端点击事件严重延迟性能问题

问题产生原因 #

• Safari浏览器固有特性：iPhone端Safari默认存在300ms左右的触摸点击延迟，是早期为了区分双击缩放操作保留的机制，同时Safari对JS执行过程中的强制重排（Forced reflow）敏感度远高于桌面端Chrome和安卓浏览器，相同的重排操作在Safari下耗时会翻倍。
• 配置项不合理：你设置的rerenderDelay: 1几乎关闭了fullcalendar自带的重渲染防抖能力，每次点击触发状态变更时，会在短时间内发起多次重渲染请求，导致eventContent被反复调用，同时触发多次强制重排，出现你看到的性能警告。
• 点击逻辑重复触发状态更新：你在dateClick和eventClick回调中都手动调用了calendarApi.select方法，该方法本身会触发日历的选中状态更新和全量重渲染，叠加fullcalendar默认的点击事件处理逻辑，相当于单次点击触发了多次状态更新，进一步放大性能开销。
• 动态高度导致高频重排：height: 'auto'配置会让fullcalendar在每次状态变更时都重新计算整个日历容器的高度，月度视图下涉及大量单元格布局计算，在Safari下会产生非常高的重排耗时。

可行修复方案 #

• 消除Safari原生点击延迟：在页面head中添加viewport配置<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">，禁止页面缩放即可移除默认的300ms点击延迟；也可以全局添加CSS规则.fc-daygrid-day, .fc-event { touch-action: manipulation; }，禁用浏览器默认的触摸手势判断，进一步降低点击响应延迟。
• 调整防抖配置：将rerenderDelay的值从1修改为50~100，开启fullcalendar的重渲染防抖能力，避免短时间内多次触发重绘，大幅减少eventContent的调用次数。
• 优化点击逻辑：移除dateClick和eventClick中手动调用calendarApi.select的代码，直接开启fullcalendar自带的selectable: true配置，由框架原生处理点击选中逻辑，避免重复触发状态更新。如果必须保留自定义点击逻辑，可以对选中操作加50ms的防抖处理，避免短时间多次调用。
• 替换动态高度配置：将height: 'auto'替换为固定数值的contentHeight配置，比如contentHeight: 600，避免每次状态变更都重新计算容器高度，从根源减少强制重排的发生。
• 优化渲染回调：简化eventContent和dayCellContent的返回逻辑，不要在回调中执行复杂计算或者返回嵌套过深的DOM结构；如果你的Angular项目用的是默认变更检测策略，可以给日历组件设置changeDetection: ChangeDetectionStrategy.OnPush，避免每次日历重渲染触发全局变更检测。
• 升级依赖版本：如果当前使用的是v5及以下的fullcalendar版本，升级到最新的v6版本，官方已修复大量Safari端的性能问题和事件重复触发bug。

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