Web前端工程师技术面试知识点梳理

技术面试知识点

根据你提供的技术面试知识点列表，我将为你简要解释这些题目，并提供一些回答的思路。由于问题较多，我将分点进行说明：

1. Cookie Storage IndexDB 的区别

• Cookie：存储在浏览器中，大小有限（通常4KB），主要用于保存用户会话信息。
• Storage：指的是 localStorage 或 sessionStorage，前者持久化存储，后者仅在会话期间有效，存储容量较大（约5MB）。
• IndexDB：

1. 是一种低级别的、基于 JavaScript 的数据库，允许在客户端存储大量结构化数据。
2. 支持事务处理，适合存储复杂的数据结构和大量数据。
3. 存储容量远大于 Cookie 和 Storage，具体取决于浏览器和操作系统，通常可以达到几十MB甚至更多。
4. 数据以对象的形式存储，支持索引和查询功能。
5. 不会自动附加到 HTTP 请求中，减少了网络流量。

2. 浅拷贝和深拷贝

• 浅拷贝：只复制对象的第一层属性，对于嵌套的对象或数组，仍然引用原始对象。

• 深拷贝：递归地复制对象的所有层级，确保新对象与原对象完全独立。

  实现方式：

  • 浅拷贝：Object.assign()、扩展运算符 ...
  • 深拷贝：JSON.parse(JSON.stringify()) 或使用第三方库如 lodash 的 cloneDeep

3. 项目中 DOM 修改相关

• 涉及到 DOM 操作时，尽量减少直接操作 DOM 的次数，可以使用虚拟 DOM（如 React 中的实现）来优化性能。
• 使用事件委托来处理大量元素的事件绑定，避免频繁添加/移除事件监听器。

4. 网络协议

• 常见的网络协议包括 HTTP/HTTPS、TCP/IP、WebSocket 等。
• 需要了解它们的工作原理、应用场景以及如何在网络请求中使用。

5. 一致性校验

• 在分布式系统中，一致性校验用于确保数据在多个节点之间的一致性。
• 常见的方式有：版本号控制、时间戳、哈希校验等。

6. 性能优化

• 包括前端性能优化（如懒加载、代码分割、减少重绘重排）和后端性能优化（如数据库索引、缓存机制）。

7. 维护数据变化

• 可以通过观察者模式、发布订阅模式等方式来监听和响应数据的变化。
• 在框架中，Vue 的响应式系统是一个很好的例子。

8. npm 的了解

• npm 是 Node.js 的包管理工具，用于安装、管理和发布 JavaScript 包。
• npm install 的流程：解析依赖树 -> 下载依赖 -> 安装依赖 -> 执行 postinstall 脚本。

9. 版本号前面的 ~ 和 ^

• ~：允许补丁版本更新（如 ~1.2.3 允许更新到 1.2.4，但不会更新到 1.3.0）。
• ^：允许次版本和补丁版本更新（如 ^1.2.3 允许更新到 1.3.0，但不会更新到 2.0.0）。

10. vite 的原理

• Vite 是一个现代前端构建工具，基于 ES 模块的按需加载特性，启动速度快。
• 使用原生 ESM 导入语法，无需打包即可运行开发服务器。

11. vue-for 及其中 key 的作用

• v-for 用于遍历数组或对象并渲染列表。
• key 是 Vue 中用于唯一标识每个节点的属性，帮助 Vue 更高效地更新 DOM。

12. 原型链

• JavaScript 中的对象都有一个 __proto__ 属性指向其原型对象。
• 创建无原型对象的方式：Object.create(null)。

13. new 创建对象的过程

• 创建一个空对象。
• 将该对象的 __proto__ 指向构造函数的 prototype。
• 执行构造函数中的代码。
• 返回新对象。

14. CSS 高度坍塌的原因和解决方式

• 原因：浮动元素未清除、子元素高度为 auto 等。
• 解决：使用 clearfix 类、overflow: hidden 或 flex 布局。

15. sessionStorage 和 localStorage 的区别

• sessionStorage：数据仅在当前会话期间有效，关闭页面后数据丢失。
• localStorage：数据持久化存储，除非手动清除或过期，否则一直存在。
• 存储大小限制：两者通常为 5MB 左右。

16. 闭包

• 闭包是指函数能够记住并访问它的词法作用域，即使这个函数在其词法作用域之外执行。
• 用途：保护变量不被全局污染、实现私有方法等。

17. 前端安全问题 XSS 和 CSRF

• XSS：跨站脚本攻击，防止措施包括转义输出、使用 CSP（内容安全策略）。
• CSRF：跨站请求伪造，防止措施包括使用 CSRF Token、SameSite Cookie 属性。

18. 防抖节流定义及使用场景

• 防抖：在事件触发 n 秒后才执行回调，如果在这 n 秒内再次触发则重新计时。适用于搜索框输入、窗口调整等。
• 节流：在一定时间内只执行一次回调。适用于滚动事件、鼠标移动等。

19. 排序算法

• 常见的排序算法有：冒泡排序、选择排序、插入排序、快速排序、堆排序等。
• 每种算法的时间复杂度和适用场景不同。

20. 前端性能优化指标

• 包括首屏加载时间、交互时间、资源加载时间、页面渲染时间等。

21. 前端跨域请求问题

• 解决方案：CORS（跨域资源共享）、JSONP（仅支持 GET 请求）、代理服务器等。

22. js 事件循环

• 事件循环分为宏任务（如 setTimeout）和微任务（如 Promise），每次事件循环先执行宏任务队列中的任务，再执行微任务队列中的任务。

23. 对象 Map 和 Set 的存储原理

• Map：键值对集合，键可以是任意类型，内部使用哈希表实现。
• Set：唯一值集合，不允许重复元素，内部使用哈希表实现。

24. git 操作

• git merge：合并分支，保留历史记录。
• git rebase：变基操作，将分支的提交应用到另一个分支上，使历史记录更线性。

25. 前端三大框架的看法

• React：组件化开发，虚拟 DOM 提高性能，生态系统丰富。
• Vue：易于上手，文档友好，适合中小项目。
• Angular：功能强大，适合大型企业级应用，学习曲线较陡。

26. JS 垃圾回收

• 主要通过标记清除和引用计数两种方式。
• 引擎会自动回收不再使用的内存。

27. Promise.all

• 并行执行多个 Promise，并返回一个包含所有结果的数组。
• 如果有一个 Promise 失败，则整个 Promise.all 失败。

28. useRef 和 useState 原理

• useRef：创建一个可变的引用对象，不会触发组件重新渲染。
• useState：用于声明状态变量，状态变化会触发组件重新渲染。

29. 关系型数据库和非关系型数据库

• 关系型数据库（如 MySQL）：结构化数据，支持复杂的查询和事务。
• 非关系型数据库（如 MongoDB）：灵活的数据模型，适合大规模数据存储和高并发读写。

希望这些解释能帮助你更好地准备面试！如果有具体问题需要深入探讨，请随时提问。

30. 前端工程化

• 前端工程化：前端开发中，使用工具和流程来提高开发效率和质量。
• 常用的前端工程化工具包括：Webpack、Babel、ESLint、Prettier 等。

31. 前端工程化中的构建工具

• 构建工具：用于将各种资源文件（如 HTML、CSS、JavaScript 等）进行合并、压缩、优化等操作，生成一个或多个文件供浏览器使用。
• 常见的构建工具包括：Webpack、Gulp、Grunt 等。

32. 前端工程化中的打包工具

• 打包工具：用于将多个资源文件（如 HTML、CSS、JavaScript 等）打包成一个或多个文件，通常用于生产环境。
• 常见的打包工具包括：Webpack、Rollup、Parcel 等。