Lighthouse项目中a11y gatherer在特定页面卡顿问题分析

问题背景

在GoogleChrome的Lighthouse项目中，开发团队发现当对某些特定网页进行可访问性(a11y)测试时，测试过程会出现卡顿甚至超时的情况。这一问题在测试"https://almanac.httparchive.org/en/2021/ecommerce"页面时尤为明显，导致PROTOCOL_TIMEOUT错误。

问题定位

经过开发团队的深入排查，发现问题源于Lighthouse 10.0版本之后引入的一个变更。通过二分法定位，团队确认问题与GitHub issue #15216相关。具体表现为"target-size"规则检查耗时过长，导致整个测试过程无法在合理时间内完成。

技术分析

1. target-size规则问题：

   • 这是axe-core提供的一个可访问性检查规则，用于验证交互元素的目标尺寸是否足够大(通常建议至少24x24像素)
   • 在包含大量相似元素的页面(如带有众多"View Source"链接的页面)上，该规则检查会消耗过多时间
   • 问题在页面包含大量Web Mentions(页面底部显示的引用信息)时尤为突出

2. DOM规模影响：

   • 测试发现，当页面DOM结构过于庞大时，不仅target-size规则，其他类似规则(如identical-links-same-purpose)也会面临性能挑战
   • 在"https://almanac.httparchive.org/en/2021/webassembly"页面上，禁用Web Mentions功能后，测试能够顺利完成

3. 配置影响：

   • 虽然可以通过配置禁用特定规则(如identical-links-same-purpose)来规避问题
   • 但由于Lighthouse审计ID与axe配置之间缺乏直接映射关系，仅通过配置无法完全解决问题

解决方案

开发团队采取了以下措施解决该问题：

1. 临时解决方案：

   • 在axe-core修复性能问题前，暂时禁用target-size规则检查
   • 这确保了Lighthouse测试能够在合理时间内完成，同时不影响其他可访问性检查

2. 长期规划：

   • 计划改进Lighthouse审计ID与axe配置之间的映射机制
   • 待axe-core修复性能问题后，重新启用target-size规则，以保持完整的可访问性检查能力

经验总结

这一案例为Web可访问性测试工具的开发提供了宝贵经验：

1. 性能考量：可访问性检查工具在处理大型DOM时需要特别关注性能优化
2. 规则选择性：并非所有规则都适合在所有场景下运行，需要提供灵活的配置选项
3. 工具集成：当整合不同工具时，需要考虑配置映射等细节问题

该问题的解决确保了Lighthouse工具在保持严格可访问性检查的同时，也能在各种规模的网页上稳定运行。