[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"$fcokItW8WC0vkchd7hegN5bZ2u_c3yoY9KiwjR9muRFY":3},{"code":4,"message":5,"data":6},200,"成功",{"id":7,"createdAt":8,"title":9,"content":10,"summary":11,"image":12,"uid":13,"user":14,"categoryId":21,"category":22,"subCategoryId":24,"subCategory":25,"comments":27,"status":17,"reason":12,"notice":12,"visitCount":28,"commentCount":29,"keywords":30},187,"2026-05-04T13:16:19.106Z","web开发高频面试题（13道）","# 精选13道web开发高频面试题\n## 1. HTTP 和 HTTPS 的区别？HTTPS 的加密原理是什么？\n解答：\n区别：\n- HTTP 是明文传输，端口 80，无加密，安全性低；\n- HTTPS 是 HTTP + SSL/TLS 加密，端口 443，数据传输加密，可验证服务器身份；\n- 加密原理：\n1. 客户端向服务器发起请求，服务器返回公钥证书；\n2. 客户端验证证书合法性后，生成随机对称密钥，用服务器公钥加密后发送；\n3. 服务器用私钥解密获取对称密钥，后续数据通过对称密钥加密传输（对称加密效率高，非对称加密仅用于传递对称密钥）。\n\n## 2. 浏览器的渲染过程是什么？重排（Reflow）和重绘（Repaint）的区别？\n解答：\n- 渲染过程：解析 HTML → 构建 DOM 树 → 解析 CSS → 构建 CSSOM 树 → 合成渲染树 → 布局（Layout）→ 绘制（Paint）→ 合成（Composite）；\n- 重排 vs 重绘：\n- [x] 重排：布局变化（如宽高、位置、DOM 增删），需重新计算布局，性能消耗大；\n- [x] 重绘：样式变化但不影响布局（如颜色、透明度），仅重新绘制像素，性能消耗小；\n优化：减少频繁修改样式，使用 transform/opacity 代替 top/left（触发合成层，避免重排）。\n\n## 3. 什么是跨域？如何解决跨域问题？\n解答：\n- 跨域：浏览器的同源策略限制（协议、域名、端口任一不同即为跨域），导致 AJAX 请求无法访问不同源的资源；\n- 解决方法：\n1. CORS（后端配置）：服务器返回 Access-Control-Allow-Origin 等响应头，允许指定源访问；\n2. 代理（前端）：开发环境用 Webpack DevServer 代理，生产环境用 Nginx 反向代理；\n3. JSONP：利用 script 标签无跨域限制，仅支持 GET 请求；\n4. PostMessage：适用于页面间通信的跨域场景。\n\n## 4. 什么是闭包？闭包的用途和缺点？\n解答：\n- 定义：函数嵌套时，内部函数引用外部函数的变量 / 参数，且内部函数被外部访问，形成闭包（外部函数执行后，变量仍被保留）；\n- 用途：封装私有变量、延长变量生命周期、实现柯里化；\n- 示例：\n```javascript\nfunction createCounter() {\n  let count = 0;\n  return () => {\n    count++;\n    return count;\n  };\n}\nconst counter = createCounter();\nconsole.log(counter()); // 1\nconsole.log(counter()); // 2\n```\n缺点：变量长期驻留内存，滥用易导致内存泄漏，需手动释放（如置为 null）。\n\n\n## 5. 什么是事件冒泡和事件捕获？如何阻止？\n解答：\n事件捕获：事件从最外层祖先元素向目标元素传播（从上到下）；\n事件冒泡：事件从目标元素向最外层祖先元素传播（从下到上）；\n阻止冒泡：e.stopPropagation()（阻止事件传播），e.preventDefault()（阻止默认行为，如点击 a 标签跳转）；\n示例：\n```javascript\ndocument.querySelector(\".child\").addEventListener(\"click\", (e) => {\n  e.stopPropagation(); // 阻止冒泡到父元素\n  console.log(\"子元素点击\");\n}, false); // false 为冒泡阶段触发，true 为捕获阶段\n```\n\n## 6. 什么是防抖（Debounce）和节流（Throttle）？应用场景？\n解答：\n- 防抖：触发事件后延迟 n 秒执行，若期间再次触发则重置延迟，适合搜索框输入、窗口 resize：\n```javascript\nfunction debounce(fn, delay) {\n  let timer = null;\n  return (...args) => {\n    clearTimeout(timer);\n    timer = setTimeout(() => fn.apply(this, args), delay);\n  };\n}\n```\n- 节流：每隔 n 秒只能执行一次，适合滚动加载、按钮点击防重复：\n```javascript\nfunction throttle(fn, delay) {\n  let flag = true;\n  return (...args) => {\n    if (!flag) return;\n    flag = false;\n    setTimeout(() => {\n      fn.apply(this, args);\n      flag = true;\n    }, delay);\n  };\n}\n```\n\n## 7. Promise 的作用是什么？常用方法有哪些？\n解答：\n- 作用：解决回调地狱问题，统一处理异步操作（成功 / 失败）；\n- 状态：pending（进行中）、fulfilled（成功）、rejected（失败），状态一旦改变不可逆转；\n- 常用方法：\nthen()：处理成功回调；\ncatch()：处理失败回调；\nfinally()：无论成功失败都执行；\nPromise.all()：多个 Promise 都成功才返回，一个失败则整体失败；\nPromise.race()：多个 Promise 中第一个完成的结果即为最终结果。\n\n## 8. async/await 的原理？与 Promise 的关系？\n解答：\nasync/await 是 Promise 的语法糖，基于生成器（Generator）实现；\nasync 修饰的函数返回一个 Promise 对象；\nawait 只能在 async 函数中使用，等待 Promise 执行完成（阻塞当前函数，但不阻塞主线程）；\n示例：\n```javascript\nasync function fetchData() {\n  try {\n    const response = await fetch(\"https://api.example.com/data\");\n    const data = await response.json();\n    return data;\n  } catch (e) {\n    console.log(\"请求失败：\", e);\n  }\n}\n```\n\n## 9. 什么是虚拟 DOM？Vue/React 中虚拟 DOM 的作用？\n解答：\n- 定义：虚拟 DOM 是 JS 对象，描述真实 DOM 的结构（如标签名、属性、子节点）；\n- 作用：\n减少真实 DOM 操作：通过对比新旧虚拟 DOM 的差异（diff 算法），只更新变化的部分，而非重绘整个 DOM；\n跨平台：虚拟 DOM 可渲染到不同平台（如 React Native、Flutter 集成）；\n提升性能：JS 层面的对比比直接操作 DOM 快得多。\n\n## 10. Vue 的响应式原理是什么？\n解答：\n- Vue2：基于 Object.defineProperty() 劫持对象的属性，监听属性的读取（get）和修改（set）；\n初始化时，遍历 data 中的属性，转为 getter/setter；\n模板编译时收集依赖（Watcher），属性修改时触发 setter，通知 Watcher 更新视图；\n缺点：无法监听数组下标修改、对象新增属性。\n- Vue3：基于 Proxy 代理整个对象，解决了 Vue2 的缺点，支持监听数组、对象的所有变化。\n\n## 11. React 的生命周期有哪些关键阶段？\n解答：\n1.类组件生命周期：\n- 挂载阶段：constructor() → render() → componentDidMount()（DOM 挂载完成，可发起请求）；\n- 更新阶段：shouldComponentUpdate()（是否更新）→ render() → componentDidUpdate()（更新完成）；\n- 卸载阶段：componentWillUnmount()（释放资源，如定时器、订阅）；\n\n\n2.函数组件：使用 Hooks 替代，如 useEffect 模拟生命周期（[] 依赖对应 componentDidMount，返回函数对应 componentWillUnmount）。\n\n## 12. 什么是 CSS 盒模型？标准盒模型和 IE 盒模型的区别？\n解答：\n- 盒模型：每个元素都是一个盒子，包含内容（content）、内边距（padding）、边框（border）、外边距（margin）；\n- 区别：\n- [x] 标准盒模型（W3C）：width/height = 内容区宽度 / 高度；\n- [x] IE 盒模型：width/height = 内容区 + padding + border；\n\n切换：通过 box-sizing 属性，content-box（标准）、border-box（IE）。\n\n## 13. 前端性能优化的常用手段有哪些？\n解答：\n- 网络层面：\n资源压缩（JS/CSS/ 图片）、CDN 加速；\n懒加载（图片、路由）、预加载（关键资源）；\n减少 HTTP 请求（合并文件、雪碧图）；\n\n- 渲染层面：\n减少重排重绘、使用 CSS 硬件加速（transform/opacity）；\n优化首屏加载（骨架屏、按需加载）；\n\n\n- 代码层面：\n避免内存泄漏、使用防抖节流；\n虚拟列表优化长列表、合理使用缓存。\n\n\n以上内容仅供大家参考，欢迎大家补充。","精选13道web开发高频面试题，供广大开发者取用。","",525978185445445,{"phone":15,"userId":13,"nickName":16,"vipType":17,"avatar":18,"sign":19,"createdAt":20},"16100000003","上班墨鱼",1,"https://image.xinwei.ltd/bbd06233d9b5c67c9f8ddd35b63cb81f1710561355517.jpeg","没有什么缺点，大家低调点","2024-03-16T00:30:44.932Z",2,{"id":21,"name":23},"IT技术",32,{"id":24,"name":26,"parentId":21},"前端",[],17,0,"web开发, web面试, web面试题, 前端开发面试"]