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

一、对async、await的理解

🔍 底层机制分析

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

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

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

🛠️ 核心API/配置

js 复制代码

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

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

🌐 应用场景 + 反例场景

✅ 正确：简化异步操作链

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

💡 举一反三

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

二、介绍下Promise，内部实现

🔍 底层机制分析

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

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

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

🛠️ 核心API/配置

js 复制代码

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

🌐 应用场景 + 反例场景

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

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

💡 举一反三

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

三、清除浮动

🔍 底层机制分析

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

🛠️ 核心API/配置

css 复制代码

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

🌐 应用场景 + 反例场景

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

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

💡 举一反三

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

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

🔍 底层机制分析

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

🛠️ 核心API/配置

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

🌐 应用场景 + 反例场景

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

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

💡 举一反三

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

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

🔍 底层机制分析

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

🛠️ 核心API/配置

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

🌐 应用场景 + 反例场景

✅ 正确：优化 DNS 预解析

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

💡 举一反三

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

六、TCP三次握手

🔍 底层机制分析

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

🛠️ 核心API/配置

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

🌐 应用场景 + 反例场景

✅ 正确：建立可靠连接

❌ 反例：SYN 洪水攻击

💡 举一反三

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

七、TCP属于哪一层

🔍 底层机制分析

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

🛠️ 核心API/配置

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

🌐 应用场景 + 反例场景

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

❌ 反例：混淆 TCP 与 HTTP 层级

💡 举一反三

HTTP 与 HTTPS 的区别
TLS 握手过程

八、Redux的设计思想

🔍 底层机制分析

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

🛠️ 核心API/配置

js 复制代码

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

🌐 应用场景 + 反例场景

✅ 正确：全局状态管理

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

💡 举一反三

Redux 与 Context API 对比
Redux 中间件机制

九、接入Redux的过程

🔍 底层机制分析

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

🛠️ 核心API/配置

js 复制代码

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

🌐 应用场景 + 反例场景

✅ 正确：合理拆分 Reducer

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

💡 举一反三

Redux Toolkit 简化开发
异步 Action 处理

十、绑定connect的过程

🔍 底层机制分析

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

🛠️ 核心API/配置

js 复制代码

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

🌐 应用场景 + 反例场景

✅ 正确：按需订阅状态

❌ 反例：频繁触发重渲染

💡 举一反三

useSelector 与 connect 对比
mapDispatchToProps 的多种写法

十一、connect原理

🔍 底层机制分析

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

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

🛠️ 核心API/配置

mapStateToProps
mapDispatchToProps

🌐 应用场景 + 反例场景

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

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

💡 举一反三

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

十二、Webpack介绍

🔍 底层机制分析

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

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

🛠️ 核心API/配置

js 复制代码

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

🌐 应用场景 + 反例场景

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

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

💡 举一反三

Webpack 与 Vite 对比
Tree Shaking 原理

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

🔍 底层机制分析

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

🛠️ 核心API/配置

js 复制代码

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

🌐 应用场景 + 反例场景

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

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

💡 举一反三

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

十四、bind、call、apply的区别

🔍 底层机制分析

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

🛠️ 核心API/配置

js 复制代码

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

🌐 应用场景 + 反例场景

✅ 正确：bind 用于事件绑定

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

💡 举一反三

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

十五、动画的了解

🔍 底层机制分析

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

🛠️ 核心API/配置

css 复制代码

.element {
  transition: all 0.3s ease;
}

🌐 应用场景 + 反例场景

✅ 正确：使用 transform 优化性能

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

💡 举一反三

Web Animations API
动画性能优化技巧

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

🔍 底层机制分析

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

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

🛠️ 核心API/配置

js 复制代码

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

🌐 应用场景 + 反例场景

✅ 正确：原型链实现继承

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

💡 举一反三

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

十七、对跨域的了解

🔍 底层机制分析

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

🛠️ 核心API/配置

js 复制代码

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

🌐 应用场景 + 反例场景

✅ 正确：使用 CORS 解决跨域

❌ 反例：JSONP 安全风险

💡 举一反三

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