怎么查网站关键词排名,设计品质网站建设,国家企业信用信息公示系统山西,机加工接单什么平台好最近在一个项目上线的时候遇到一个奇葩的问题#xff0c;用户登录使用邮箱登录#xff0c;邮箱前端有合法正则校验#xff0c;快要发布上线时#xff0c;测试提到一个bug#xff0c;在暴力测试邮箱输入框内快速输入字符#xff0c;前端校验提示报错#xff0c;到了一定长…最近在一个项目上线的时候遇到一个奇葩的问题用户登录使用邮箱登录邮箱前端有合法正则校验快要发布上线时测试提到一个bug在暴力测试邮箱输入框内快速输入字符前端校验提示报错到了一定长度导致页面卡死。期初怀疑是因为快速输入导致双向绑定卡顿但是又一想不可能呀这中双向绑定在vue下早就实现了怎么可能又这个问题。
尝试取消双向绑定然后使用input事件配合debounce去实现但是发现快速输入依然卡顿。
接着尝试去掉校验没有问题加上校验就有问题所以就开始排查正则校验规则结果还真实正则校验的问题。
1 正则校验的问题
在表单校验时不可使用过度消耗配置的正则表达式由于正则校验消耗导致页面卡顿。
来看我们原来的校验规则
/^(\w[-|\.]?)\w(\w(-\w)*\.)[a-zA-Z]{2,}$/
我们来看这个正则的问题。
1.1 回溯问题
用户名部分 (\w[-|\.]?) 内层 \w 和外层 形成嵌套量词结构如 (a) 当输入结尾字符不匹配时如 user-domain.com引擎会尝试所有可能的 \w 和分隔符组合回溯路径呈指数增长
域名部分 (\w(-\w)*\.) 双重嵌套 (\w (-\w)* ) 导致回溯爆炸尤其当域名含多个连字符时如 sub--domain.com
1.2 冗余捕获组与歧义语法
捕获组 (...) 会存储匹配内容而此处无需捕获子匹配造成额外开销。 字符类 [-|\.]? 中的 | 被误解为字面竖线实际应为 [.-]增加匹配复杂度
1.3 回溯攻击敏感结构
对无效输入如 ab.c 或 name-invalid.com的匹配尝试会触发悲观回溯引擎需穷举所有失败路径才能返回 false
1.4 性能影响示例
假设输入邮箱 **abx**故意缩短域名部分 引擎执行过程
用户名部分尝试 (\w[-|\.]?) 的所有分割组合 a、a-、a.、ab、ab-...指数级尝试域名部分因 [a-zA-Z]{2,} 要求至少2个字母但 x 长度不足再次触发回溯。 结果单次验证可能产生 **10,000 次回溯**阻塞 JS 主线程
看到这个示例是不是感觉这可能就是一个“惨案”呢。
2 正确的正则
写一个正确的正则提高效率减少在用户快速输入过程中程序消耗。
2.1 消除回溯
// 优化后正则零回溯性能提升5倍
/^\w(?:[.-]\w)*(?:\w-)*\w\.[a-zA-Z]{2,}$/;
2.1.1 重构嵌套量词
\w(?:[.-]\w)* 替代 (\w[-|\.]?) 非捕获组 (?:) 消除存储开销明确分隔符逻辑[.-] 匹配 . 或 -无歧义 (?:\w-)*\w\. 替代 (\w(-\w)*\.)
合并相邻 \w避免空子匹配如 -domain.com 直接失败
/^[\w.-](?:\w(?:-\w)*\.)[a-zA-Z]{2,}$/
2.1.2 锚点精准控制
保留 ^ 和 $ 确保快速失败避免部分匹配尝试
2.1.3 域名简化匹配
\.[a-zA-Z]{2,}$ 精确匹配顶级域名减少冗余检查 3 优化后的正则
/^\w(?:[.-]\w)*(?:\w-)*\w\.[a-zA-Z]{2,}$/
优化后性能对比 由以上解释明白了这其中正则配置不合理导致的性能消耗和最后页面卡顿的罪魁祸首。当然为了提高前端正则校验的效率可能会放弃某些严格场合所以还要配合后端在整体提交时后端再做一次校验。
