JavaScript 基础 · 111/290
1. Ajax、Axios 和 Fetch 的区别 2. 数组 length 为 0 时访问元素 3. addEventListener 第三个参数 4. Array.prototype.slice.apply(arguments) 5. Animation、Transition、Transform 区别 6. 伪数组与真数组的转换 7. 类数组对象 8. 数组按属性值排序 9. 箭头函数与普通函数的区别 10. AST 抽象语法树 11. attribute 与 property 的区别 12. Babel 编译工具 13. async/await 原理解析 14. 异步编程实现方式 15. forEach 中使用 await 16. 异步任务批量执行结果获取 17. Base64 编码为何增大数据量 18. BigInt 数据类型 19. JavaScript 二分查找实现 20. JavaScript 实现二叉排序树 21. bind 连续调用的 this 绑定 22. 浏览器缓存机制 23. bind、call、apply 的区别与实现 24. 浏览器进程和线程 25. callee 与 caller 属性 26. 浏览器版本检测 27. Canvas 黑块计数 28. Canvas 跨域图片数据获取 29. Canvas 与 WebGL 区别 30. 浏览器从输入网址到页面显示的过程 31. 判断对象是否为空 32. 摄氏度转华氏度 33. JavaScript 变量与函数提升 34. 移动端点击穿透问题 35. JavaScript 变量提升与函数提升 36. setTimeout 在循环中的执行时机 37. 转盘组件设计与防刷方案 38. Promise.resolve 返回 Promise 的执行顺序 39. 静态资源 CDN 部署 40. typeof 运算符的执行顺序 41. typeof 和暂时性死区的执行分析 42. 箭头函数与普通函数的 this 和 new 行为 43. this 指向判断 44. Cookie 过期时间设置为 0 的行为 45. typeof 和暂时性死区的执行分析 46. 浏览器跨域限制的原因 47. Company Culture Fit 48. Cookie、LocalStorage 和 SessionStorage 的区别 49. 前端跨域请求解决方案 50. 统计 HTML 页面标签种类数 51. 浏览器标签页间通信 52. 什么是跨域 53. 前端跨页面通信方法 54. CSS 和 JS 文件是否阻塞页面渲染 55. CSR 与 SSR 渲染模式 56. CSS 动画与 JS 动画对比 57. JavaScript vs CSS 动画 58. 十进制转二进制 59. 判断 PC 端还是移动端 60. 深拷贝与浅拷贝 61. document.write 与 innerHTML 的区别 62. document.ready vs window.onload 63. JavaScript 实现拖拽功能 64. DOM 和 BOM 的区别 65. Element Dimension Properties 66. 空数组调用 reduce 67. enumerable 属性忽略规则 68. devDependencies 与 dependencies 的区别 69. 判断脚本运行环境(浏览器或 Node) 70. 判断空对象的方法 71. ES6 Decorator 装饰器 72. 面试必问问题 73. eval 函数的作用与弊端 74. 事件捕获与冒泡执行顺序 75. 事件代理 76. 解释 JavaScript 事件循环 77. 执行上下文与作用域链 78. React setState 批量更新机制 79. 事件冒泡和捕获机制 80. ES6+ 新特性概览 81. 函数是一等公民 82. 浮点数精度问题:0.1 + 0.2 83. 表达式 123['toString'].length + 123 的输出 84. flexible.js 移动端适配原理 85. forEach 循环中断 86. 前端路由的实现与应用 87. 前端动画实现方式 88. 前端面试流程 89. 前端性能优化指标与检测方法 90. 前端路由历史栈结构 91. JavaScript 函数声明方式及区别 92. 函数调用方式 93. 获取页面滚动距离 94. 函数原型链输出结果 95. 生成 1-10000 的数组 96. 函数式编程概念 97. 全局函数与全局变量 98. 堆与栈的区别 99. HTTP/2 多路复用原理 100. HTTPS 握手过程 101. 立即执行函数表达式(IIFE) 102. isNaN 与 Number.isNaN 的区别 103. 图片搜索系统设计 104. 面试关键点 105. 实现可迭代对象 106. JavaScript 内置对象 107. Iterator 迭代器与 Generator 生成器 108. JavaScript 的组成部分 109. JavaScript 内置对象 110. 闭包:概念、应用与内存管理 111. JavaScript 垃圾回收机制 112. JavaScript 错误类型 113. JavaScript 数据类型与检测方法 114. JavaScript 动态生成海报 115. JavaScript 对象定义方法 116. Promise 原理与用法 117. JavaScript 请求取消 118. JavaScript 单线程模型 119. JavaScript 继承方式对比 120. JavaScript 对象生命周期 121. this 的指向规则 122. jQuery.fn.init 返回的 this 123. jQuery 对象特点 124. Job Fit Assessment 125. JS 文件对 DOM 和 CSSOM 的阻塞 126. JSBridge 原理 127. JSON 基础 128. 0-1 背包问题 129. 大文件上传实现 130. Job Handover and Benefits 131. setTimeout 循环输出问题 132. 低代码平台技术实现 133. 宏任务与微任务的执行优先级 134. map(parseInt) 返回值问题 135. map(parseInt) 输出分析 136. 实现 LRU 缓存 137. map 与 filter 的区别 138. Map、Set、WeakMap、WeakSet 的区别 139. Math.ceil 和 Math.floor 的区别 140. 使用 Math 方法获取数组最值 141. Math.random() 在中奖概率计算中的安全问题 142. Math 取整方法的区别 143. 内存泄漏的场景与检测 144. 最大子序和 145. 合并连续数字 146. 什么是微前端 147. MessageChannel 的用法和应用场景 148. MessageChannel 的用途和场景 149. 微前端应用隔离 150. 实现 mergePromise 函数 151. 微前端解决的问题 152. 移动端样式适配 153. 模块化方案对比:CommonJS、AMD、ES Module 154. mouseEnter 和 mouseOver 的区别 155. 为按钮绑定多个 onclick 事件 156. 微前端技术方案 157. 移动端点击延迟问题 158. 多 tab 页通信方案 159. 实现 Promise.all 方法 160. 实现数组的 map 方法 161. 原生 JavaScript 知识体系 162. 计算机网络模型 163. new fn 与 new fn() 的区别 164. Node ES Module 为什么需要文件扩展名 165. new 操作符的执行过程 166. 不冒泡的事件类型 167. 非递归遍历二叉树 168. null 与 undefined 的区别 169. npm 包管理器 170. 空值合并运算符(??)使用场景 171. 数字转汉语输出函数 172. Object.create 与 new 的区别 173. 数字转中文 174. 数字分隔符的相等性判断 175. JavaScript 创建对象的方法 176. 对象解构赋值的实现方式 177. 面向对象编程 178. 让对象支持数组解构赋值 179. 面向对象编程思想 180. Object 与 Map 的区别 181. 面向对象与面向过程编程 182. OOP Three Principles 183. 前端页面截图实现 184. 页面生命周期事件 185. 轮询机制实现 186. 个人经历 187. Portal 子组件的事件冒泡 188. Personal Qualities 189. pnpm 包管理工具 190. 什么是 Polyfill 191. postMessage 跨域通信 192. 防止重复提交 193. 实现数组笛卡尔积 194. 前端面试中的问题分析方法 195. 防止按钮重复点击 196. 阻止事件冒泡和默认行为 197. 项目难点分析 198. 项目流程 199. 项目经验 200. Promise.all 异常处理 201. 中断 Promise 的方法 202. Promise 并发控制 203. Promise.then 的错误处理 204. Promise then 与 catch 的区别 205. Promise.all 和 Promise.allSettled 的区别 206. Promise 构造函数的执行时机 207. Promise 异步加载图片 208. 使用 Promise 实现定时输出 209. 用 Promise 实现红绿灯交替 210. Property Descriptors 211. 属性遍历方法 212. Proxy Basic Usage 213. Proxy 与 Object.defineProperty 214. 原型与原型链 215. PWA 渐进式网络应用 216. React Fiber 架构与 Vue 的差异 217. React 废弃三个生命周期钩子的原因 218. React 事件与原生事件执行顺序 219. 扫码登录实现方案 220. React Portals 的用途 221. React 与 React-DOM 的关系 222. reduce 方法用途 223. React render 方法原理与触发时机 224. ES6 Reflect 对象的用途 225. Reflect 对象的使用 226. React 为什么不直接使用 requestIdleCallback 227. 正则表达式常用方法 228. RESTful 接口规范 229. requestIdleCallback 与 requestAnimationFrame 230. 简历投递的最佳时间段 231. Script 标签位置的影响 232. 滚动公告组件的鼠标交互 233. 顺序执行异步任务 234. JavaScript 脚本延迟加载方式 235. 浏览器同源策略 236. Script 标签中的 export 报错 237. Service Worker 是什么 238. 用 setTimeout 实现 setInterval 239. setTimeout 零延迟的应用场景 240. setTimeout 运行机制 241. 实现 sleep 函数 242. 单线程与异步的关系 243. SPA 首屏加载优化 244. 严格模式的限制 245. 字符串压缩 246. 字符串长度计算(支持表情符号) 247. 实现字符串 repeat 方法 248. 字符串 toString() 方法调用 249. 同步与异步的区别 250. 尾调用优化与尾递归 251. toPrecision、toFixed 和 Math.round 的区别 252. target 与 currentTarget 的区别 253. JavaScript 倒计时偏差纠正 254. TCP 三次握手和四次挥手 255. 实现二叉树所有路径 256. try...catch 捕获异步错误 257. Tree Shaking 原理 258. typeof NaN 的结果 259. JavaScript 类型转换机制 260. TypeScript 访问修饰符 261. TypeScript 泛型的使用 262. TypeScript:Interface 与 Type 的区别 263. TypeScript 方法重载 264. TypeScript 中的 is 关键字 265. TypeScript 变量声明方式 266. TypeScript 命名空间与模块 267. undefined 与 ReferenceError 的区别 268. 获取 URL 资源文件后缀 269. TypeScript 与 JavaScript 的区别 270. URL 参数编码的必要性 271. JavaScript 版本号排序实现 272. var、let、const 的区别 273. JavaScript 变量提升机制 274. 虚拟 DOM 渲染处理 275. 虚拟列表实现 276. Vue created 与 mounted 的时间差 277. Vue 生命周期中发起请求的最佳位置 278. Vite 工作原理 279. Vue 页面渲染流程 280. Vue2 数组变化检测问题 281. Webpack 5 模块联邦 282. Web Worker 基础 283. WebSocket 心跳机制 284. WebSocket 协议 285. Vue 3 响应式原理 286. WebSocket 低版本浏览器兼容方案 287. Webpack 5 升级要点 288. WebSocket 与 HTTP 的区别 289. 页面白屏原因与优化 290. XML 与 JSON 的区别

JavaScript 垃圾回收机制

引用计数、标记清除和分代回收的原理与区别

问题

JavaScript 的垃圾回收机制是如何工作的?引用计数、标记清除、分代回收分别是什么?

解答

引用计数(Reference Counting)

早期的垃圾回收策略。每个对象维护一个引用计数,当计数为 0 时回收。

// 引用计数示例
let obj = { name: 'test' }; // { name: 'test' } 引用计数 = 1
let copy = obj;              // { name: 'test' } 引用计数 = 2

obj = null;                  // { name: 'test' } 引用计数 = 1
copy = null;                 // { name: 'test' } 引用计数 = 0,被回收

致命问题:循环引用

function problem() {
  let objA = {};
  let objB = {};
  
  objA.ref = objB; // objB 引用计数 = 2
  objB.ref = objA; // objA 引用计数 = 2
  
  // 函数结束后,objA 和 objB 引用计数都是 1
  // 永远不会被回收 → 内存泄漏
}

标记清除(Mark-and-Sweep)

现代浏览器采用的主要算法。从根对象(全局对象、调用栈)出发,标记所有可达对象,清除未标记的对象。

// 标记清除过程示意
let root = {
  child: {
    grandchild: { value: 1 }
  }
};

// 阶段1:标记
// 从 root 开始遍历,标记 root → child → grandchild

// 阶段2:清除
// 未被标记的对象被回收

root.child = null;
// 下次 GC 时,原来的 child 和 grandchild 不可达,被回收

循环引用不再是问题:

function noLeak() {
  let objA = {};
  let objB = {};
  objA.ref = objB;
  objB.ref = objA;
}

noLeak();
// 函数执行完毕,objA 和 objB 从根对象不可达
// 即使互相引用,也会被回收

分代回收(Generational Collection)

V8 引擎的优化策略,基于”大多数对象生命周期很短”的假设。

┌─────────────────────────────────────────────────┐
│                    V8 堆内存                      │
├──────────────────────┬──────────────────────────┤
│      新生代           │         老生代            │
│   (1-8MB, 小)        │      (大, 主要空间)        │
├──────────────────────┼──────────────────────────┤
│  Scavenge 算法        │    Mark-Sweep-Compact    │
│  频繁、快速回收        │    较少触发、耗时较长      │
└──────────────────────┴──────────────────────────┘

新生代回收(Scavenge):

// 新生代使用复制算法,空间分为 From 和 To 两部分

// 1. 新对象分配在 From 空间
let newObj = { data: 'new' };

// 2. From 空间满时触发 Scavenge
//    - 存活对象复制到 To 空间
//    - From 和 To 角色互换
//    - 原 From 空间清空

// 3. 对象晋升到老生代的条件:
//    - 经历过一次 Scavenge 仍存活
//    - To 空间使用超过 25%

老生代回收(Mark-Sweep-Compact):

// 老生代使用标记清除 + 标记整理

// Mark-Sweep: 标记存活对象,清除死亡对象
// 问题:产生内存碎片

// Mark-Compact: 将存活对象移动到一端,整理碎片
// 代价:移动对象耗时

// V8 策略:主要用 Mark-Sweep,碎片过多时用 Mark-Compact

避免内存泄漏的实践

// 1. 及时清除定时器
const timer = setInterval(() => {}, 1000);
clearInterval(timer); // 不用时清除

// 2. 移除事件监听
const handler = () => {};
element.addEventListener('click', handler);
element.removeEventListener('click', handler); // 不用时移除

// 3. 避免意外的全局变量
function leak() {
  leaked = 'oops'; // 没有声明,成为全局变量
}

// 4. 使用 WeakMap/WeakSet 存储对象引用
const cache = new WeakMap();
let obj = { data: 'value' };
cache.set(obj, 'metadata');
obj = null; // obj 可被回收,WeakMap 中的条目自动移除

关键点

  • 引用计数:简单但有循环引用问题,现代浏览器已弃用
  • 标记清除:从根对象遍历标记可达对象,解决了循环引用问题
  • 分代回收:V8 将堆分为新生代和老生代,针对性优化回收效率
  • 新生代用 Scavenge:复制算法,快速回收短命对象
  • 老生代用 Mark-Sweep-Compact:标记清除 + 整理,处理长期存活对象