6.12阿里大文娱和虾皮前端面经

以下是针对6.12阿里大文娱和虾皮前端面试问题的详细解答：

• 获取多个div元素：

  document.querySelectorAll('div')：返回所有div的NodeList集合。

  document.getElementsByTagName('div')：返回动态HTMLCollection集合。

• 区猛扮槐分父子关系：

  通过DOM遍历方法（如parentNode、children、parentElement）或比较contains()方法判断层级。

  示例：if (parentDiv.contains(childDiv)) 判断子元素是否在父元素内。

• 由子获得父：

  使用childDiv.parentNode或childDiv.parentElement直接获取父节点。

• React内置状态管理：

  useState/useReducer：函数组件局部状态。

  Context API：跨组件传递状态（适合中小型应用）。

• 第三方库：

  MobX：基于响应式编程的状态管理。

  Zustand：轻量级Redux替代方案，简化状态管理。

  Recoil：Facebook推出的状态管理库，支持原子状态。

  Jotai：基于原子模型的轻量级状态管理。

• 主流方案：

  React Native：使用JavaScript编写原生应用。

  Flutter：Dart语言，自绘UI引擎。

  Taro：多端统一开发框架（支持微信小程序、H5等）。

  Uni-app：Vue语法，编译到多端。

  Electron：使用Web技术构建桌面应用。

• 优先级顺序：!important > 内联样式 > ID选择器 > 类/伪类/属性选择器 > 元素选择器 > 通配符。
• 计算规则：

  内联样式：1000。

  ID选择器：100。

  类/伪类/属性选择器：10。

  元素选择器：1。

  优先级由高到低比较，相同则后定义的覆盖前者。

• 加载优化：

  代码分割（Code Splitting）、懒加载（Lazy Load）。

  压缩资源（Webpack、Terser）、使用CDN。

  预加载（<link rel="preload">）、预解析（<link rel="dns-prefetch">）。

• 渲染优化：

  减少重绘/回流（避免枝友频繁操作DOM、使用transform/opacity替代属性）。

  使用虚拟列表（Virtual List）优化长列表。

  防抖/节流（Debounce/Throttle）事件处理。

• 标准格式：scheme://username:password@host:port/path?query#fragment。
• 组成部分：

  协议（Scheme）：如http、https。

  域名（Host）：如

  www.example.com
  。

  端口（Port）：默认80（HTTP）或443（HTTPS）。

  路径（Path）：如/api/users。

  查询参数（Query）缺袜：如?id=123&name=test。

  片段标识符（Fragment）：如#section1。

• 步骤：

  DNS解析：将域名转换为IP地址。

  TCP连接：三次握手建立连接。

  发送HTTP请求：浏览器发送请求头和数据。

  服务器处理：返回HTTP响应（状态码、响应头、响应体）。

  渲染页面：

  解析HTML生成DOM树。

  解析CSS生成CSSOM树。

  合并为渲染树（Render Tree）。

  布局（Layout）和绘制（Paint）。

  断开连接：TCP四次挥手。

• HTTP/1.0：

  短连接（每次请求需重新建立TCP连接）。

  无头部压缩，传输效率低。

• HTTP/2.0：

  多路复用：单个TCP连接并行处理多个请求。

  头部压缩：使用HPACK算法减少头部体积。

  服务器推送：主动推送资源（如CSS/JS）。

  二进制分帧：将数据分割为更小的帧传输。

• 三次握手：

  客户端发送SYN包（请求连接）。

  服务器回复SYN+ACK包（确认并同意连接）。

  客户端发送ACK包（确认连接建立）。

• 四次挥手：

  客户端发送FIN包（请求断开连接）。

  服务器回复ACK包（确认收到断开请求）。

  服务器发送FIN包（服务器也请求断开）。

  客户端回复ACK包（确认断开完成）。

• 步骤：

  TLS握手：

  客户端发送支持的加密套件列表。

  服务器选择套件并返回证书（含公钥）。

  密钥交换：

  客户端生成随机数（Pre-Master Secret），用服务器公钥加密后发送。

  双方基于随机数生成会话密钥（对称加密密钥）。

  数据传输：

  使用会话密钥加密通信内容。

• Flexbox方案：.parent { display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */}
• Grid方案：.parent { display: grid; place-items: center; /* 简写属性 */}
• 绝对定位+Transform：.child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}

• 问题：

  useState必须在函数组件顶层调用，否则会导致闭包问题（状态更新不一致）。

  React依赖调用顺序管理状态，若在条件分支中调用会破坏这一机制。

• 示例错误：if (condition) { const [state, setState] = useState(0); // ? 错误用法}

• 断网处理：

  监听offline事件（window.addEventListener('offline', handler)）。

  显示离线提示或降级UI（如本地缓存数据）。

• 缓存实现：

  Service Worker：拦截请求并缓存资源（如Cache API）。

  LocalStorage/SessionStorage：存储少量键值对数据。

  IndexedDB：存储结构化数据（支持事务）。

• 共同点：

  异步加载脚本，避免阻塞页面渲染。

• 区别：

  async：下载完成后立即执行（不保证顺序）。

  defer：下载完成后在DOM解析完成后、DOMContentLoaded事件前按顺序执行。

• 三种状态：

  Pending：初始状态，未履行或拒绝。

  Fulfilled：操作成功完成（resolve）。

  Rejected：操作失败（reject）。

• 状态转换：一旦从Pending变为Fulfilled或Rejected，状态不可变。

• 技术提升：

  深入学习React源码（如Hooks、虚拟DOM）。

  掌握TypeScript和性能优化工具（Lighthouse、Webpack）。

• 项目实践：

  参与开源项目或独立开发全栈应用（如博客系统）。

• 面试准备：

  复习计算机基础（网络、算法）和前端工程化知识。

• 正则表达式方案：const str = "Hello (world)!";const result = str.match(/((.*?))/)[1]; // "world"
• 栈方案：function extractBrackets(str) { const stack = []; let result = ''; for (const char of str) { if (char === '(') stack.push(char); else if (char === ')' && stack.length) { stack.pop(); if (stack.length === 0) break; } else if (stack.length) { result += char; } } return result;}

总结：面试问题覆盖了JS基础、React生态、网络协议和算法等核心知识点，建议结合项目实践加深理解，并系统复习计算机基础。