破解当前端出现“RangeError: Maximum call stack size exceeded”的N种思路

前言

最近用谷歌浏览器调试时，控制台报了一个“Uncaught RangeError: Maximum call stack size exceeded”，其中文意思是超出最大调用堆栈大小，报错如下图所示：

后边经过一番排查，终于把问题解决

问题出现的本质原因

1、前端存在无限循环调用

2、递归运算或者递归调用

3、函数不小心调用了它自己本身

...

排查的思路方向

因为出现这种问题的原因多种多样，没办法一招走天下，因此提供一些排查思路方向

1、排查js是否存在递归调用或者运算函数

2、引入冲突的js库

3、如果项目中有引入vue（或者iview），注意检查调用的方法是不是同名了导致不停死循环

4、vue自定义组件是否存在父调用子，子调用父的行为

5、点击a标签后触发内部的组件的点击事件，导致点击事件冒泡至a标签（即a再次被点击），导致无限循环[笔者的项目就是因为这个原因引起问题]

如果是因为a标签原因解决的办法有如下

1、把内嵌在a标签的组件挪到a标签外，但这样可能导致样式变样，或者点击不会出现手型，点击不会出现变色 2、阻止冒泡事件

3、如果a标签的写法是<a href="#"/>,则改成<a href="javascript:;;"/>