说起来你可能不信，一个正则就能让页面卡死

某个阳光明媚的下午，我正悠闲的品着刚买的滇红，测试小姐姐突然急匆匆的找到我：

“快看一下群里，文章编辑器出问题了！”

我手中的滇红瞬间不香了，抓了抓所剩无几的头发，开始了漫长的 Debug 环节

经过排查，发现问题的根源居然是一段正则表达式...

 

一、问题重现

// 在浏览器控制台中运行下面的代码
// 放心，不会卡死的

const reg = /^<del>(.|\s)*<\/del>$/;
const str = '<del>hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! </del><ins>hello wrold!</ins>';

start = Date.now();
const res = reg.test(str);
end = Date.now();

console.log('耗时:' + (end - start));

上面就是出问题的正则，但是字符串更加复杂（不然一执行代码，浏览器就崩溃了）

这段正则本身的目的是为了匹配 <del> 标签的内容。由于 . 不包含换行符，所以用 (.|\s)* 来指代内容

而由于 . 和 \s 有重合的部分，再加上或运算符 | 和贪婪匹配 * ，让正则表达式的运算量指数级增加，最终呈现出页面崩溃的结果

 

 

二、正则引擎

为了解释这个问题，就得了解正则表达式的工作原理

正则有两种工作方式：用文本去匹配正则（DFA）、正则去匹配文本（NFA）

举个例子：

/ja(cket|vate|vascr)/.test('javascript')

如果是 DFA，会用字符串去匹配，过程是这样的：

在匹配到第三个字符 v 的时候，会有三个备选分支，但 cket 分支不满足规则，被排除。

所以在匹配第四个字符 a 的时候，只有两个备选分支，直到第五个字符 s，排除掉 vate 分支，最后只剩下一个备选分支 vascr，最终完成匹配。

 

而对于 NFA，是用正则来匹配文本：

 

在匹配到 ja 之后，会先匹配 cket 分支，发现 c 不匹配，返回上一个节点。

返回节点之后会进入下一个分支，即 vate 分支，直到匹配到 t 才会不匹配，然后返回上一节点。

由于上一节点 a 并没有别的分支，所以继续返回，直到返回最开始的 ja 节点，进入最后一个 vascr 分支，最后完成匹配。

 

从这两个分析可以看出， DFA 在用文本来匹配正则的时候，会逐渐排除不满足条件的备选项。

而 NFA 会匹配每个分支，如果分支不匹配，则回到上一个节点，进入当前节点的另一个分支继续匹配。

也就是说 NFA 就像是在走迷宫，遇到岔路的时候，先选择第一条路走到头。如果走不通，则返回岔路口，进入下一条路继续探索。这个返回岔路口的过程叫做回溯。

所以 DFA 引擎的效率比 NFA 更高，但很可惜的是，JavaScript 的正则的引擎是 NFA 类型。

 

 

三、回溯

上面已经提到，NFA 在匹配某一个分支失败时，会返回节点，尝试另一条分支，这种行为被称作回溯。

如果只是上面举的简单例子，回溯并不会造成严重的性能问题，可如果是有多个备选状态，再加上贪婪匹配，这个过程就很恐怖了。

比如这样一个正则：

/(.*)+\d/.test('abcd')

这里的 .* 可以匹配任意字符（\n除外）任意次数，再加上贪婪特性，第一次匹配时 .* 会直接吃掉 abcd ，然后匹配 \d 失败，进行第一次回溯：

然后 .* 将 d 吐出来，本身只匹配 abc。但由于 + 的原因， .* 会进行第二次匹配，然后 \d 匹配失败，再次回溯：

第三次匹配的时候， + 重新记为 1， .* 依然为 abc，剩下一个 d 交给 \d 匹配。由于 \d 需要匹配数字，所以匹配失败，继续回溯：

以此类推，正则会在经过很多次回溯之后，才会得出匹配失败的结论

 

 

四、优化方案

由于回溯机制的存在，我们在写正则的时候一定要牢记：

尽可能的减少备选分支的数量。

比如上例的正则： /(.*)+\d/ ，这里的 + 和 * 存在重复匹配

如果我们最终的期望是匹配 test1、hello123 这种以数字结尾，总长度不小于 2 的字符串

将正则表达式改为  /.+\d/ 就能满足我们的需求

而在文章一开始提到的线上暴雷的正则： /^<del>(.|\s)*<\/del>$/ 

其实也是因为 . 和 \s 有重合的匹配规则，改为 (.|\n) 即可

 

另外，如果我们能预期目标字符串的构成，将备选分支更少的规则写在前面，这样正则就能更早的返回结果

所以调整备选分支的顺序也是一个优化方案

最后，在可以选择的情况，使用 DFA 才能从根本上解决问题。