精选13道web开发高频面试题

1. HTTP 和 HTTPS 的区别？HTTPS 的加密原理是什么？

解答：
区别：

• HTTP 是明文传输，端口 80，无加密，安全性低；
• HTTPS 是 HTTP + SSL/TLS 加密，端口 443，数据传输加密，可验证服务器身份；
• 加密原理：

1. 客户端向服务器发起请求，服务器返回公钥证书；
2. 客户端验证证书合法性后，生成随机对称密钥，用服务器公钥加密后发送；
3. 服务器用私钥解密获取对称密钥，后续数据通过对称密钥加密传输（对称加密效率高，非对称加密仅用于传递对称密钥）。

2. 浏览器的渲染过程是什么？重排（Reflow）和重绘（Repaint）的区别？

解答：

• 渲染过程：解析 HTML → 构建 DOM 树 → 解析 CSS → 构建 CSSOM 树 → 合成渲染树 → 布局（Layout）→ 绘制（Paint）→ 合成（Composite）；
• 重排 vs 重绘：
• 重排：布局变化（如宽高、位置、DOM 增删），需重新计算布局，性能消耗大；
• 重绘：样式变化但不影响布局（如颜色、透明度），仅重新绘制像素，性能消耗小；
  优化：减少频繁修改样式，使用 transform/opacity 代替 top/left（触发合成层，避免重排）。

3. 什么是跨域？如何解决跨域问题？

解答：

• 跨域：浏览器的同源策略限制（协议、域名、端口任一不同即为跨域），导致 AJAX 请求无法访问不同源的资源；
• 解决方法：

1. CORS（后端配置）：服务器返回 Access-Control-Allow-Origin 等响应头，允许指定源访问；
2. 代理（前端）：开发环境用 Webpack DevServer 代理，生产环境用 Nginx 反向代理；
3. JSONP：利用 script 标签无跨域限制，仅支持 GET 请求；
4. PostMessage：适用于页面间通信的跨域场景。

4. 什么是闭包？闭包的用途和缺点？

解答：

• 定义：函数嵌套时，内部函数引用外部函数的变量 / 参数，且内部函数被外部访问，形成闭包（外部函数执行后，变量仍被保留）；
• 用途：封装私有变量、延长变量生命周期、实现柯里化；
• 示例：

function createCounter() {
  let count = 0;
  return () => {
    count++;
    return count;
  };
}
const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

缺点：变量长期驻留内存，滥用易导致内存泄漏，需手动释放（如置为 null）。

5. 什么是事件冒泡和事件捕获？如何阻止？

解答：
事件捕获：事件从最外层祖先元素向目标元素传播（从上到下）；
事件冒泡：事件从目标元素向最外层祖先元素传播（从下到上）；
阻止冒泡：e.stopPropagation()（阻止事件传播），e.preventDefault()（阻止默认行为，如点击 a 标签跳转）；
示例：

document.querySelector(".child").addEventListener("click", (e) => {
  e.stopPropagation(); // 阻止冒泡到父元素
  console.log("子元素点击");
}, false); // false 为冒泡阶段触发，true 为捕获阶段

6. 什么是防抖（Debounce）和节流（Throttle）？应用场景？

解答：

• 防抖：触发事件后延迟 n 秒执行，若期间再次触发则重置延迟，适合搜索框输入、窗口 resize：

function debounce(fn, delay) {
  let timer = null;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}

• 节流：每隔 n 秒只能执行一次，适合滚动加载、按钮点击防重复：

function throttle(fn, delay) {
  let flag = true;
  return (...args) => {
    if (!flag) return;
    flag = false;
    setTimeout(() => {
      fn.apply(this, args);
      flag = true;
    }, delay);
  };
}

7. Promise 的作用是什么？常用方法有哪些？

解答：

• 作用：解决回调地狱问题，统一处理异步操作（成功 / 失败）；
• 状态：pending（进行中）、fulfilled（成功）、rejected（失败），状态一旦改变不可逆转；
• 常用方法：
  then()：处理成功回调；
  catch()：处理失败回调；
  finally()：无论成功失败都执行；
  Promise.all()：多个 Promise 都成功才返回，一个失败则整体失败；
  Promise.race()：多个 Promise 中第一个完成的结果即为最终结果。

8. async/await 的原理？与 Promise 的关系？

解答：
async/await 是 Promise 的语法糖，基于生成器（Generator）实现；
async 修饰的函数返回一个 Promise 对象；
await 只能在 async 函数中使用，等待 Promise 执行完成（阻塞当前函数，但不阻塞主线程）；
示例：

async function fetchData() {
  try {
    const response = await fetch("https://api.example.com/data");
    const data = await response.json();
    return data;
  } catch (e) {
    console.log("请求失败：", e);
  }
}

9. 什么是虚拟 DOM？Vue/React 中虚拟 DOM 的作用？

解答：

• 定义：虚拟 DOM 是 JS 对象，描述真实 DOM 的结构（如标签名、属性、子节点）；
• 作用：
  减少真实 DOM 操作：通过对比新旧虚拟 DOM 的差异（diff 算法），只更新变化的部分，而非重绘整个 DOM；
  跨平台：虚拟 DOM 可渲染到不同平台（如 React Native、Flutter 集成）；
  提升性能：JS 层面的对比比直接操作 DOM 快得多。

10. Vue 的响应式原理是什么？

解答：

• Vue2：基于 Object.defineProperty() 劫持对象的属性，监听属性的读取（get）和修改（set）；
  初始化时，遍历 data 中的属性，转为 getter/setter；
  模板编译时收集依赖（Watcher），属性修改时触发 setter，通知 Watcher 更新视图；
  缺点：无法监听数组下标修改、对象新增属性。
• Vue3：基于 Proxy 代理整个对象，解决了 Vue2 的缺点，支持监听数组、对象的所有变化。

11. React 的生命周期有哪些关键阶段？

解答：
1.类组件生命周期：

• 挂载阶段：constructor() → render() → componentDidMount()（DOM 挂载完成，可发起请求）；
• 更新阶段：shouldComponentUpdate()（是否更新）→ render() → componentDidUpdate()（更新完成）；
• 卸载阶段：componentWillUnmount()（释放资源，如定时器、订阅）；

2.函数组件：使用 Hooks 替代，如 useEffect 模拟生命周期（[] 依赖对应 componentDidMount，返回函数对应 componentWillUnmount）。

12. 什么是 CSS 盒模型？标准盒模型和 IE 盒模型的区别？

解答：

• 盒模型：每个元素都是一个盒子，包含内容（content）、内边距（padding）、边框（border）、外边距（margin）；
• 区别：
• 标准盒模型（W3C）：width/height = 内容区宽度 / 高度；
• IE 盒模型：width/height = 内容区 + padding + border；

切换：通过 box-sizing 属性，content-box（标准）、border-box（IE）。

13. 前端性能优化的常用手段有哪些？

解答：

• 网络层面：
  资源压缩（JS/CSS/ 图片）、CDN 加速；
  懒加载（图片、路由）、预加载（关键资源）；
  减少 HTTP 请求（合并文件、雪碧图）；

• 渲染层面：
  减少重排重绘、使用 CSS 硬件加速（transform/opacity）；
  优化首屏加载（骨架屏、按需加载）；

• 代码层面：
  避免内存泄漏、使用防抖节流；
  虚拟列表优化长列表、合理使用缓存。

以上内容仅供大家参考，欢迎大家补充。