FE - Record the defects in daily life

some-one

已于 2024-12-27 19:35:09 修改

阅读量647

点赞数

分类专栏：前端文章标签：前端 javascript

于 2020-05-22 16:10:16 首次发布

本文链接：https://blog.csdn.net/zhuanghuajun/article/details/106282198

版权

前端专栏收录该内容

4 篇文章

订阅专栏

1. 超出最大调用堆栈大小

在这里插入图片描述

Analysis

以上错误的意思是 “超出最大调用堆栈大小”

出现这种错误最常见的原因是：在代码中的某个地方，您正在调用一个函数，该函数又调用另一个函数，依此类推，直到达到调用堆栈限制。这几乎总是因为具有未满足的基本情况的递归函数

举例：

(function a() {
    a();
})();

调用堆栈会一直增长，直到达到限制：浏览器硬编码堆栈大小或内存耗尽。为了解决这个问题，请确保您的递归函数具有能够满足的基本情况

(function a(x) {
    if ( ! x) {
        return;
    }
    a(--x);
})(10);

有了停止调用的判断条件，就不会有堆栈溢出了

项目中常出现原因

同一个项目中，两个系统使用相同缓存数据，上个系统中没退出，这个又访问，在处理默认登录时某处代码进入死循环了

2. Chrome Error Msge: signal is aborted without reason

在这里插入图片描述

Analysis

这个错误通常表示某个进程或操作被意外终止或中断了。可能的原因包括:

网络问题 - 如果 Chrome 无法建立稳定的网络连接或出现间歇性连接问题,就可能会出现这个错误。
资源限制 - 如果运行 Chrome 的设备资源不足(如内存、CPU 或存储空间),也可能导致某些进程被中止。
与其他软件冲突 - 与安装在同一系统上的其他程序或扩展插件存在不兼容性或冲突,也可能引发此错误。
Chrome 自身问题 - 有时这个错误也可能是 Chrome 浏览器本身存在 bug 或异常造成的。

要解决这个问题,您可以尝试以下几个步骤:

检查网络连接是否稳定
关闭并重新打开 Chrome 浏览器
禁用任何已安装的 Chrome 扩展程序
清理 Chrome 浏览器的缓存和 cookies
更新 Chrome 浏览器到最新版本
如有必要,可以尝试完全卸载并重新安装 Chrome

如果问题仍然存在,需要提供更多关于问题发生环境和上下文的细节,这将有助于更好地诊断和解决问题。

3. ngIf = Fn & change some variable in Fn, Causes an infinite loop

当在前端代码中出现死循环时,Chrome 浏览器通常会表现出以下几种情况:

页面停止响应:

由于死循环导致 JavaScript 无法停止执行,Chrome 会将页面标记为"无响应"状态。
用户无法与页面进行任何交互,如点击、滚动等。

浏览器卡死:

死循环会占用大量 CPU 资源,导致 Chrome 浏览器本身变得卡顿或僵死。
浏览器界面可能无法正常响应用户操作。

高 CPU 使用率:

Chrome 的任务管理器会显示当前页面的 CPU 使用率急剧上升。
可能会导致电脑整体性能下降。

崩溃或强制退出:

在某些情况下,死循环可能会导致 Chrome 浏览器直接崩溃或被强制退出。
这种情况下,用户可能会丢失当前页面的数据和状态。

页面无法加载:

如果死循环发生在页面加载阶段,可能会导致页面一直无法完全加载。
用户无法访问页面内容。

为了避免这些问题,建议仔细检查前端代码,确保不存在可能导致死循环的逻辑错误。如果无法及时修复,可以考虑在代码中添加超时机制或异常处理,以便在发生死循环时能够优雅地停止执行并通知用户。

超时机制示例:

// 设置一个 30 秒的超时时间
const timeoutDuration = 30000; 

// 使用 Promise 包装异步操作
const myAsyncOperation = new Promise((resolve, reject) => {
  // 执行可能导致死循环的异步操作
  // ...
  
  // 在规定时间内完成操作
  setTimeout(() => {
    resolve(result);
  }, timeoutDuration);
});

// 使用 Promise.race() 添加超时检查
Promise.race([
  myAsyncOperation,
  new Promise((_, reject) =>
    setTimeout(() => reject(new Error('Operation timed out')), timeoutDuration)
  )
])
.then(result => {
  // 正常处理结果
})
.catch(error => {
  // 处理超时或其他错误
});

异常处理示例:

function potentiallyLoopingFunction() {
  let i = 0;
  while (true) {
    i++;
    // 添加检查,当满足某个条件时退出循环
    if (i > 1000) {
      throw new Error('Potential infinite loop detected');
    }
    // 执行可能导致死循环的操作
    // ...
  }
}

try {
  potentiallyLoopingFunction();
} catch (error) {
  console.error('Error:', error.message);
  // 执行相应的错误处理逻辑
}