✅ JS 底层原理
✅ ES6+/TS/ 异步编程
✅ CSS 响应式与动画
✅ 浏览器渲染
✅ H5 大屏实战
JS 底层原理
一、执行上下文 / 作用域 / 闭包（必考 3 道）

1. 说说什么是执行上下文和调用栈？
   口述答案：
   执行上下文就是 JS 代码运行的环境，分为全局、函数、eval 三种。里面存了：变量对象、作用域链、this 指向。
   调用栈是后进先出的栈结构，用来管理代码执行顺序：全局上下文先入栈，调用函数入栈，执行完出栈，最后全局出栈。
   底层原理：JS 是单线程，调用栈保证代码有序执行，上下文切换靠入栈出栈实现。
2. 作用域和作用域链是什么？
   口述答案：
   作用域是变量 / 函数的可访问范围，分全局、函数、块级作用域。
   作用域链是当前上下文 + 所有父级上下文的变量对象组成的链条，用来查找变量。
   底层原理：基于词法作用域（静态作用域），变量查找由代码书写位置决定，不是运行位置。
3. 闭包的底层原理是什么？有什么优缺点？
   口述答案：
   闭包就是内部函数访问外部函数作用域变量的现象，即使外部函数已经执行完毕。
   优点：私有化变量、做模块化、保存状态、实现防抖节流。
   缺点：滥用会导致内存泄漏。
   底层原理：内部函数持有外部作用域的引用，导致外部上下文无法被垃圾回收，变量一直保留在内存中。
   二、原型 / 原型链 / 继承（必深挖）
4. 原型和原型链到底是什么？
   口述答案：
   每个对象都有 proto，指向它的原型对象；
   每个函数都有 prototype 属性，就是实例的原型。
   原型链：对象通过 proto 逐级向上查找属性 / 方法，直到 Object.prototype.proto 为 null。
   底层原理：JS 是基于原型的语言，不是类继承，原型链实现方法共享，节省内存。
5. JS 继承的底层原理？
   口述答案：
   JS 继承靠原型链：让子类的原型指向父类的实例，子类实例就能通过原型链访问父类的属性和方法。
   组合继承、寄生组合继承都是围绕原型链修改实现。
   底层原理：属性查找机制，子类没有就去父原型找，实现复用。
   三、this 指向 / 绑定规则（高频必问）
6. this 的 4 条绑定规则和优先级？
   口述答案：
   4 条规则：
   默认绑定：全局 / 独立函数 → window/undefined
   隐式绑定：对象方法调用 → 调用对象
   显式绑定：call/apply/bind → 绑定对象
   new 绑定：new 构造函数 → 新实例
   优先级：new > 显式 > 隐式 > 默认
   底层原理：this 是执行上下文的属性，在函数调用时动态确定，不是定义时。
7. new 一个对象底层做了什么？
   口述答案：
   底层 4 步：
   创建一个空对象
   空对象的 proto 指向构造函数的 prototype
   构造函数的 this 指向这个对象并执行
   返回这个对象（构造函数没返回对象的话）
   底层原理：手动实现原型链关联 + this 绑定。
   四、类型 / 赋值 / 深浅拷贝（底层内存）
8. 基本类型和引用类型的底层存储区别？
   口述答案：
   基本类型（string/number/boolean/null/undefined/symbol）存在栈内存，值直接存储，赋值是拷贝值。
   引用类型（object/array/function）存在堆内存，栈里只存地址指针，赋值是拷贝地址，会共享内存。
   底层原理：栈空间小、自动释放；堆空间大、需要垃圾回收。
9. 浅拷贝和深拷贝的底层区别？
   口述答案：
   浅拷贝：只拷贝一层，引用类型拷贝地址，修改会互相影响。
   深拷贝：递归拷贝所有层级，创建全新堆内存，完全独立。
   底层原理：栈复制 vs 堆完整复制。
   五、事件循环 / 异步底层（最高频压轴）
10. 浏览器 Event Loop 执行机制？
    口述答案：
    JS 是单线程，靠事件循环实现异步。
    执行顺序：
    先执行同步代码（调用栈）
    执行完清空微任务队列
    执行浏览器渲染
    取出一个宏任务执行
    循环
    底层原理：主线程 + 任务队列，解决单线程阻塞问题。
11. 宏任务和微任务的区别？为什么微任务优先？
    口述答案：
    宏任务：script、setTimeout、ajax、UI 渲染（宿主环境提供）
    微任务：Promise.then、await、queueMicrotask（ES 规范）
    微任务在每次宏任务后、渲染前全部清空，优先级更高。
    底层原理：微任务是 ** jobs 队列 **，属于 JS 引擎；宏任务是 ** task 队列 **，属于浏览器。
    六、垃圾回收 / 内存管理（进阶必问）
12. JS 垃圾回收机制原理？
    口述答案：
    JS 自动 GC，主流用标记清除：
    从全局根对象出发，遍历标记所有可达对象，未标记的对象视为垃圾，自动释放内存。
    底层原理：管理堆内存，防止内存溢出。
13. 什么是内存泄漏？常见场景？
    口述答案：
    内存泄漏是无用对象占用内存无法被回收。
    常见场景：
    闭包滥用
    未清理定时器 / 监听
    意外的全局变量
    脱离 DOM 树但还持有引用的 DOM 对象
    底层原理：对象被意外持有引用，GC 标记为可达，无法释放。
    七、变量提升 / 底层编译（进阶深挖）
14. 变量提升和函数提升的底层原理？
    口述答案：
    JS 执行分编译阶段和执行阶段。
    编译阶段会扫描所有声明：
    var 声明提升，赋值不提升
    函数声明整体提升
    let/const 存在暂时性死区，不提升
    函数提升优先级 > 变量提升。
    底层原理：JS 引擎在执行前先创建执行上下文，提前声明变量。
    八、综合底层题（面试官最爱问）
15. 为什么 JS 是单线程？为什么需要异步？
    口述答案：
    JS 设计为单线程是因为操作 DOM，如果多线程会造成冲突。
    单线程会阻塞，所以需要异步（事件循环），不等待耗时任务，提高流畅度。
    底层原理：浏览器渲染引擎是多线程，但 JS 引擎是单线程。