前端灵魂拷问：从URL到Redux，17个常见问题

一、对async、await的理解

🔍 底层机制分析

async/await 是基于 Promise 的语法糖，本质上是 Generator 函数的自动执行器。

V8 引擎中，async 函数会被编译为一个状态机，通过 Promise 实现异步控制流。

sequenceDiagram async函数->>+Promise: 返回Promise对象 Promise-->>+await: 暂停执行，等待resolve await-->>-async函数: 继续执行后续代码

🛠️ 核心API/配置

async function fetchData() {
  const data = await fetch('/api/data');
  return data.json();
}

• await 只能在 async 函数中使用
• await 后面可以是任意表达式，但通常用于 Promise

🌐 应用场景 + 反例场景

✅ 正确：简化异步操作链

❌ 反例：在非 async 函数中使用 await 会报错

💡 举一反三

1. async/await 与 Promise.all 结合使用
2. 错误处理：try/catch vs .catch()

---

二、介绍下Promise，内部实现

🔍 底层机制分析

Promise 是异步编程的一种解决方案，代表了某个未来才会结束的事件的结果。

内部通过状态（pending → fulfilled/rejected）管理异步流程。

stateDiagram-v2 [*] --> pending pending --> fulfilled: resolve() pending --> rejected: reject() fulfilled --> [*] rejected --> [*]

🛠️ 核心API/配置

const promise = new Promise((resolve, reject) => {
  // 异步操作
  if (success) resolve(data);
  else reject(error);
});

🌐 应用场景 + 反例场景

✅ 正确：链式调用处理多个异步操作

❌ 反例：回调地狱（嵌套过多）

💡 举一反三

1. Promise.all、Promise.race 的使用
2. 手写简易 Promise 实现

---

三、清除浮动

🔍 底层机制分析

浮动元素脱离文档流，导致父容器高度塌陷。清除浮动是为了让父容器"包裹"浮动元素。

🛠️ 核心API/配置

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

🌐 应用场景 + 反例场景

✅ 正确：使用 clearfix 类清除浮动

❌ 反例：不处理浮动导致布局错乱

💡 举一反三

1. overflow: hidden 清除浮动
2. Flexbox 布局天然解决浮动问题

---

四、定位问题（绝对定位、相对定位等）

🔍 底层机制分析

CSS 定位模型决定了元素在页面中的位置计算方式。

🛠️ 核心API/配置

定位类型	描述
static	默认定位
relative	相对自身位置偏移
absolute	相对最近的非 static 祖先元素
fixed	相对视口定位
sticky	滚动时粘性定位

🌐 应用场景 + 反例场景

✅ 正确：使用 absolute 实现弹窗定位

❌ 反例：滥用 fixed 导致移动端适配问题

💡 举一反三

1. z-index 层级控制
2. transform 与定位的关系

---

五、从输入URL到页面加载全过程

🔍 底层机制分析

sequenceDiagram 用户->>浏览器: 输入URL 浏览器->>DNS: 解析域名 DNS-->>浏览器: 返回IP 浏览器->>服务器: 发起HTTP请求 服务器-->>浏览器: 返回HTML 浏览器->>解析器: 解析HTML 解析器->>渲染引擎: 构建DOM树 渲染引擎->>用户: 渲染页面

🛠️ 核心API/配置

• DNS 解析
• HTTP 请求
• DOM 解析与渲染

🌐 应用场景 + 反例场景

✅ 正确：优化 DNS 预解析

❌ 反例：阻塞渲染的 JS 脚本

💡 举一反三

1. 关键渲染路径优化
2. Service Worker 缓存策略

---

六、TCP三次握手

🔍 底层机制分析

sequenceDiagram 客户端->>服务器: SYN 服务器-->>客户端: SYN+ACK 客户端->>服务器: ACK

🛠️ 核心API/配置

• SYN：同步标志
• ACK：确认标志

🌐 应用场景 + 反例场景

✅ 正确：建立可靠连接

❌ 反例：SYN 洪水攻击

💡 举一反三

1. 四次挥手断开连接
2. TCP 与 UDP 的区别

---

七、TCP属于哪一层

🔍 底层机制分析

TCP 属于 OSI 七层模型中的传输层（第4层）。

🛠️ 核心API/配置

层级	协议
1	物理层
2	数据链路层
3	网络层（IP）
4	传输层（TCP/UDP）
5	应用层（HTTP）

🌐 应用场景 + 反例场景

✅ 正确：理解网络分层模型

❌ 反例：混淆 TCP 与 HTTP 层级

💡 举一反三

1. HTTP 与 HTTPS 的区别
2. TLS 握手过程

---

八、Redux的设计思想

🔍 底层机制分析

Redux 是一个可预测的状态管理库，核心思想是单一数据源 和纯函数修改状态。

🛠️ 核心API/配置

const store = createStore(reducer);
store.dispatch(action);

🌐 应用场景 + 反例场景

✅ 正确：全局状态管理

❌ 反例：过度使用 Redux 导致性能问题

💡 举一反三

1. Redux 与 Context API 对比
2. Redux 中间件机制

---

九、接入Redux的过程

🔍 底层机制分析

1. 创建 Store
2. 定义 Reducer
3. 使用 Provider 注入 Store
4. 组件中通过 connect 或 useSelector 访问状态

🛠️ 核心API/配置

import { createStore } from 'redux';
const store = createStore(reducer);

🌐 应用场景 + 反例场景

✅ 正确：合理拆分 Reducer

❌ 反例：Store 过大导致性能瓶颈

💡 举一反三

1. Redux Toolkit 简化开发
2. 异步 Action 处理

---

十、绑定connect的过程

🔍 底层机制分析

connect 是 React-Redux 提供的高阶组件，用于将组件与 Redux Store 连接。

🛠️ 核心API/配置

const ConnectedComponent = connect(mapStateToProps, mapDispatchToProps)(Component);

🌐 应用场景 + 反例场景

✅ 正确：按需订阅状态

❌ 反例：频繁触发重渲染

💡 举一反三

1. useSelector 与 connect 对比
2. mapDispatchToProps 的多种写法

---

十一、connect原理

🔍 底层机制分析

connect 内部通过 Context 获取 Store，并监听状态变化，自动触发组件更新。

sequenceDiagram connect->>Context: 获取Store Store->>connect: 状态变化通知 connect->>组件: 触发重渲染

🛠️ 核心API/配置

• mapStateToProps
• mapDispatchToProps

🌐 应用场景 + 反例场景

✅ 正确：性能优化（浅比较）

❌ 反例：频繁创建新对象导致重渲染

💡 举一反三

1. useSelector 的实现原理
2. 自定义 Hook 替代 connect

---

十二、Webpack介绍

🔍 底层机制分析

Webpack 是一个模块打包工具，通过依赖图将所有模块打包成一个或多个 bundle。

graph LR A[入口文件] --> B[依赖分析] B --> C[模块打包] C --> D[输出bundle]

🛠️ 核心API/配置

module.exports = {
  entry: './src/index.js',
  output: { path: './dist' },
  module: { rules: [...] }
};

🌐 应用场景 + 反例场景

✅ 正确：代码分割优化加载

❌ 反例：配置复杂导致构建缓慢

💡 举一反三

1. Webpack 与 Vite 对比
2. Tree Shaking 原理

---

十三、== 和 === 的区别

🔍 底层机制分析

• == 会进行类型转换
• === 严格相等，不转换类型

🛠️ 核心API/配置

console.log(0 == false); // true
console.log(0 === false); // false

🌐 应用场景 + 反例场景

✅ 正确：使用 === 避免隐式转换

❌ 反例：== 导致逻辑错误

💡 举一反三

1. Object.is 与 === 的区别
2. 类型转换规则

---

十四、bind、call、apply的区别

🔍 底层机制分析

三者都用于改变函数的 this 指向，但调用方式不同。

🛠️ 核心API/配置

fn.call(thisArg, arg1, arg2);
fn.apply(thisArg, [argsArray]);
fn.bind(thisArg, arg1, arg2);

🌐 应用场景 + 反例场景

✅ 正确：bind 用于事件绑定

❌ 反例：apply 传递数组参数错误

💡 举一反三

1. 手写 bind 实现
2. 箭头函数与 this 的关系

---

十五、动画的了解

🔍 底层机制分析

CSS 动画通过 transition 和 animation 实现，JS 动画通过 requestAnimationFrame 控制。

🛠️ 核心API/配置

.element {
  transition: all 0.3s ease;
}

🌐 应用场景 + 反例场景

✅ 正确：使用 transform 优化性能

❌ 反例：频繁操作 DOM 导致卡顿

💡 举一反三

1. Web Animations API
2. 动画性能优化技巧

---

十六、介绍下原型链（解决的是继承问题吗）

🔍 底层机制分析

JavaScript 通过原型链实现继承，每个对象都有一个内部属性 [[Prototype]] 指向其原型。

graph TD A[对象] --> B[原型] B --> C[原型的原型] C --> D[null]

🛠️ 核心API/配置

function Parent() {}
function Child() {}
Child.prototype = new Parent();

🌐 应用场景 + 反例场景

✅ 正确：原型链实现继承

❌ 反例：共享引用类型导致问题

💡 举一反三

1. ES6 Class 与原型链的关系
2. Object.create 实现继承

---

十七、对跨域的了解

🔍 底层机制分析

跨域是由于浏览器的同源策略导致的，同源要求协议、域名、端口一致。

🛠️ 核心API/配置

// CORS 配置
Access-Control-Allow-Origin: *

🌐 应用场景 + 反例场景

✅ 正确：使用 CORS 解决跨域

❌ 反例：JSONP 安全风险

💡 举一反三

1. Nginx 反向代理解决跨域
2. PostMessage 实现跨域通信