首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

破解当前端出现“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再次被点击),导致无限循环

11.6K10

翻译连载 | 第 9 章:递归(下)-《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇

当引擎认为调用栈增加的太多并且应该停止增加时候,它会以主观的限制来阻止当前步骤,所以 isOdd(..) 或 isEven(..) 函数抛出了 RangeError 未知错误。...我认为,这种限制也可能是造成开发人员不喜欢使用递归编程的最大原因。 遗憾的是,递归编程是一种编程思想而不是主流的编程技术。 尾调用 递归编程和内存限制都要比 JS 技术出现的早。...重构递归 如果你想用递归来处理问题,却又超出了 JS 引擎的内存堆栈,这时候就需要重构下你的递归调用,使它能够符合 PTC 规范(或着避免嵌套调用)。...如果使用递归后会造成代码难以阅读/理解,那就 不要使用递归;换个容易理解的方法吧。 更换堆栈递归来说,最主要的问题是它的内存使用情况。保持堆栈帧跟踪函数调用的状态,并将其分派给下一个递归调用迭。...并不是之前的堆栈帧累积,闭包只是消耗多余的内存空间(一般情况下,是堆栈里面的多余内存空间)。在这些情况下,引擎似乎没有启动 RangeError 限制,但这并不意味着你的内存使用量是按比例固定好的。

1.1K50
您找到你想要的搜索结果了吗?
是的
没有找到

一文详聊前端异常原理

RangeError 范围错误,比如: new Array(-20) 会导致 RangeError: Invalid array length 递归等消耗内存的程序会导致 RangeError: Maximum...当编译器检测到一个函数调用是尾递归的时候,它就覆盖当前的活动记录而不是在栈中去创建一个新的。 5. Error 与自定义异常 Error 是所有错误的基类,其他错误类型继承该类型。...它是 Error 类型中最常见的一种;由于没有具体异常堆栈和代码行列号,成为可最神秘的异常之一。...无法捕获堆栈和准确的信息。2 步解决: 1、给 script 标签增加 crossorigin 属性,让浏览器允许页面请求资源。...前端异常监控与之最大的不同,就是需要把客户端发生的异常数据通过网络再收集起来。

1.4K40

学习Javascript之尾调用

递归 递归相信大家都知道,就是函数自己调用自己的一种操作。那么,如果一个函数返回的是自己的调用结果就被称为尾递归。也就是说尾递归一定是尾调用,但尾调用不一定是尾递归。...如果函数B还返回了一个函数C的调用结果,也会重复这个过程,以此类推,如果这个执行栈内执行上下文的数量超过了最大值那么就会报出堆栈溢出的错误,这是前面的那个例子报错的缘由。...这里留给我们两个问题,一个是不开启尾递归调用优化的情况下堆栈溢出的报错如何解决,一个是尾递归调用既然好处这么大为啥要默认关闭呢?。先看第一个问题: 解决堆栈溢出报错 for循环。...: trampoline(sum(100000)); 就不会报错堆栈出了。...由于引擎消除尾递归是隐式的,函数是否符合尾调用而被消除了尾递归很难被程序员自己辨别; 调用栈丢失问题。尾调用优化要求除掉尾调用执行时的调用堆栈,这将导致执行流中的堆栈信息丢失。

1.2K10

JavaScript中的错误处理机制

stack属性用来查看错误发生时的堆栈。...(3)RangeError RangeError是当一个值超出有效范围时发生的错误。主要有几种情况,一是数组长度为负数,二是Number对象的方法参数超出范围,以及函数堆栈超过最大值。...new Array(-1) // RangeError: Invalid array length (1234).toExponential(21) // RangeError: toExponential...当且仅当try语句块抛出了异常,才会执行这里的代码 //这里可以通过局部变量e来获得对Error对象或者抛出的其他值的引用 //这里的代码块可以基于某种原因处理这个异常,也可以忽略这个异常...如果抛出异常的函数没有处理它的try-catch语句,异常将向上传播到调用该函数的代码。这样的话,异常就会沿着javascript方法的词法结构和调用栈向上传播。

1.9K30

js算法初窥04(算法模式01-递归)「建议收藏」

终于来到了有点意思的地方——递归,在我最开始学习js的时候,基础课程的内容就包括递归,但是当时并不知道递归的真正意义和用处。我只是知道,哦…递归是自身调用自身,递归要记得有一个停止调用的条件。...: Maximum call stack size exceeded" //ie //8225 error is:Error: 堆栈溢出 //edge // 15466 error is:Error:...我们发现递归是如此的简单,就是自身调用自身,再加一个限制条件,就可以实现递归了。上面我们所写的代码在一定程度上只是为了解释递归这个概念。没有太多的实际意义。...那么我们画个图来看看,我们递归算出第6项的斐波那契数时,递归是如何进行的:   我们看上图一步一步的解释:   每一个方块中“/”后面的是当前调用的计算结果。...直到最后每一层的调用都执行到了num=1或者num=2的情况时。递归最终终止。那么,在递归终止的时候,结果是由递归到最底层条件一点一点向上返回的。

33810

js算法初窥04(算法模式01-递归

终于来到了有点意思的地方——递归,在我最开始学习js的时候,基础课程的内容就包括递归,但是当时并不知道递归的真正意义和用处。我只是知道,哦...递归是自身调用自身,递归要记得有一个停止调用的条件。...: Maximum call stack size exceeded" //ie //8225 error is:Error: 堆栈溢出 //edge // 15466 error is:Error:...我们发现递归是如此的简单,就是自身调用自身,再加一个限制条件,就可以实现递归了。上面我们所写的代码在一定程度上只是为了解释递归这个概念。没有太多的实际意义。...那么我们画个图来看看,我们递归算出第6项的斐波那契数时,递归是如何进行的: ?   我们看上图一步一步的解释:    每一个方块中“/”后面的是当前调用的计算结果。...直到最后每一层的调用都执行到了num=1或者num=2的情况时。递归最终终止。那么,在递归终止的时候,结果是由递归到最底层条件一点一点向上返回的。

79620

调用

递归 函数调用自身成为递归。如果尾调用自身就成为尾递归递归非常耗费内存,因为需要同时保存成百上千个调用帧,很容易发生”栈溢出“错误(stack overflow)。...(n - 1) + Fibonacci(n - 2); } Fibonacci(10); // 89 Fibonacci(100); // 堆栈溢出 Fibonacci(500); // 堆栈溢出 尾递归优化的...回答是肯定的——自己实现尾递归优化。 原理非常简单。尾递归之所以需要优化,愿意是调用栈太多造成溢出,那么只要减少调用栈就不会溢出了。怎么做可以减少调用栈呢?答案是采用”循环“替换”递归“。...return x; } } sum(1, 10000); // Uncaught RangeError: Maximum call stasck size exceeded(...)...上面的代码中,sum 是一个递归函数,参数 x 是需要累加的值,参数 y 控制递归次数,且指定 sum 递归 100000 次,就会报错,提示超出调用栈的最大次数。

14220

10秒钟内说出js中有哪些内置错误类型

常见指数:⭐⭐⭐ 说实话,不太常见,但很容易构造 会在数值越界时抛出.例如,定义数组时如果设置了不支持的长度,如-1,又或者没有给递归设置停止条件时触发。...超过数组最大长度限制 ?...自定义RangeError错误 var check = function(num) { if (num MAX) { throw new RangeError(...比如a变量是个基本类型,却被当做函数调用 ? 比如访问不存在的方法 ? 内置错误类型4:SyntaxError 常见指数:⭐⭐⭐⭐⭐ 太常见了,一般的在开发环境,调试的时候 这是最常见的错误。...例如,递归过多导致了栈溢出.这类型并不是代码中通常要处理的错误,如果真的发生了这种错误,很可能代码哪里搞错了或者有危险. 但事实证明递归过多导致栈溢出报的是RangeError。 ?

1.1K10

javascript尾递归优化

到n<=1时,会有1001个执行上下文也就是说,传入的初始值越大,执行上下文栈中,就会有越多的执行上下文对于上下栈,它的空间是有限的,一旦存放的上下文占用内存产出了它的最大内存,就会出现栈溢出。...RangeError: Maximum call stack size exceeded而在chrome中,不仅会对栈的空间有限制,还会对函数的递归次数有限制递归优化我们来看一个样例代码function...这就是ES6尾调用优化的关键递归优化的条件代码在严格模式下执行外部函数的返回值,是对尾调用函数的调用调用函数返回后,不需要执行额外的逻辑尾调用函数不是外部函数作用域中自由变量的闭包下面是《高程》里面的示例...)}function inner(sum, n){ if(n <= 1){ return sum; } return inner(sum * n , n -1);}foo(5);是不是简单最新版的浏览器已经支持尾递归可以在计算斐波那契数列的时候...相信你会和我一样,会不由自主的感叹总结JS中的递归函数调用的时候,上下文栈是怎么变化的什么是递归优化递归优化的条件是什么手动优化一个递归代码

60330

javascript尾递归优化_2023-02-27

到n<=1时,会有1001个执行上下文 也就是说,传入的初始值越大,执行上下文栈中,就会有越多的执行上下文 对于上下栈,它的空间是有限的,一旦存放的上下文占用内存产出了它的最大内存,就会出现栈溢出。...RangeError: Maximum call stack size exceeded 而在chrome中,不仅会对栈的空间有限制,还会对函数的递归次数有限制 递归优化 我们来看一个样例代码 function...这就是ES6尾调用优化的关键 递归优化的条件 代码在严格模式下执行 外部函数的返回值,是对尾调用函数的调用调用函数返回后,不需要执行额外的逻辑 尾调用函数不是外部函数作用域中自由变量的闭包 下面是《...function inner(sum, n){ if(n <= 1){ return sum; } return inner(sum * n , n -1); } foo(5); 是不是简单...相信你会和我一样,会不由自主的感叹 总结 JS中的递归函数调用的时候,上下文栈是怎么变化的 什么是递归优化 递归优化的条件是什么 手动优化一个递归代码

40310

Java堆栈溢出漏洞分析

堆栈 什么是堆栈?在思考如何找堆栈溢出漏洞之前,先来弄懂什么是堆栈。...如果该方法进行递归调用时,JVM每次都会将保存了当前方法数据的栈帧压栈,每次栈帧中的数据都是对当前方法数据的一份拷贝。...如果递归的次数足够多,多到栈中栈帧所使用的内存超出了栈内存的最大容量,此时JVM就会抛出StackOverflowError。 堆 存放所有new出来的对象。...可以看出,JAVA中在使用递归算法时没有设置终止条件会造成堆栈溢出,所以在代码审计中,遇到递归算法时,可以测试是否存在堆栈溢出的问题,进而造成拒绝服务攻击。 漏洞审计 堆栈溢出漏洞如何挖掘?...继续跟进hash方法,不为空的情况下,又调用了hashcode()方法继续跟进。 这里进行递归算法,entry取循环获取entrySet的键值对,然后将计算好的值追加给h。

1.5K40
领券