前端面试知识点清单：基础、框架与性能全覆盖

前端面试知识点清单：基础、框架与性能全覆盖

前端面试涉及范围广，从基础到框架，再到性能优化，都可能成为考察点。为了帮助大家高效备战，本文整理了一份全面的知识点清单，涵盖基础、框架、性能优化等核心内容，助你面试不慌！

---

一、前端基础

1. HTML

• 语义化：<header>、<footer>、<article>、<aside> 等标签的使用场景。
• 常见标签：如 <canvas>、<video>、<audio> 的属性和使用。
• SEO：meta 标签的配置，alt 属性的作用，页面结构对 SEO 的影响。
• HTML5 新特性：
  • 本地存储：localStorage、sessionStorage。
  • 表单增强：required、pattern、datalist。

2. CSS

• 盒模型：标准盒模型与怪异盒模型的区别。
• 布局：
  • Flex 布局的常用属性（justify-content、align-items）。
  • Grid 布局的基础用法（grid-template-rows、grid-area）。
• 选择器：基础选择器、伪类（hover、nth-child()）与伪元素（::before、::after）。
• 动画与过渡：
  • @keyframes 的用法。
  • transition 的基本属性。
• 响应式设计：
  • 媒体查询（@media）。
  • 移动优先设计。
• CSS 优化：
  • 避免使用 !important。
  • 合理使用 z-index。
  • 样式表按模块划分。

3. JavaScript

• 数据类型：
  • 基本数据类型与引用类型。
  • 类型转换：== 和 === 的区别。
• 作用域与闭包：
  • 变量提升、块级作用域。
  • 闭包的应用场景。
• 原型与继承：
  • 原型链。
  • class 的语法糖。
• 异步编程：
  • 回调函数、Promise、async/await。
  • Event Loop 的运行机制。
• DOM 操作：
  • DOM 节点的增删改查。
  • 事件机制：捕获、冒泡、事件委托。
• ES6+ 新特性：
  • 解构赋值、展开运算符。
  • 模块化：import/export。
  • Map 和 Set 的使用。
• 错误处理：try-catch、Error 对象。

---

二、框架与库

1. Vue.js

• 基础：
  • Vue2 的双向绑定（Object.defineProperty）。
  • Vue3 的响应式（Proxy）。
• 核心功能：
  • 组件：父子通信、插槽、动态组件。
  • 指令：v-bind、v-model、自定义指令。
  • Vue Router：路由守卫、动态路由、嵌套路由。
  • Vuex：状态管理，模块化设计。
• 生命周期：
  • Vue2 的钩子函数。
  • Vue3 的组合式 API（setup、ref、computed）。
• 性能优化：
  • 路由懒加载。
  • 使用 keep-alive 缓存组件。

2. React

• 基础：
  • React 的虚拟 DOM 和 Diff 算法。
  • JSX 的语法规则。
• 核心功能：
  • 组件：类组件与函数组件的区别。
  • Hooks：useState、useEffect、useMemo。
  • Redux：action、reducer、store。
• 性能优化：
  • 避免不必要的渲染：React.memo、useCallback。
  • 代码拆分：React.lazy 和 Suspense。

3. 工具与库

• 构建工具：
  • Webpack：模块打包、代码分割。
  • Vite：快速构建，开发环境与生产环境配置。
• CSS 预处理器：Sass、Less。
• 其他库：
  • Axios：网络请求。
  • Lodash：常用工具函数库。
  • Chart.js 或 ECharts：数据可视化。

---

三、性能优化

1. 加载优化

• 减少 HTTP 请求：
  • 合并 CSS 和 JS 文件。
  • 使用雪碧图。
• 图片优化：
  • 使用 WebP 格式。
  • 按需加载图片（懒加载）。
• 资源压缩：
  • 开启 Gzip 压缩。
  • 压缩 CSS 和 JS。

2. 渲染优化

• 首屏优化：
  • 使用服务端渲染（SSR）。
  • 将关键 CSS 内联。
• 避免重排和重绘：
  • 减少使用 style 属性。
  • 合理使用 transform 代替 top 或 left。

3. 前端存储

• 缓存：
  • 使用浏览器缓存（Cache-Control、ETag）。
  • Service Worker 实现离线缓存。
• 本地存储：
  • localStorage、sessionStorage。
  • IndexedDB 的基本使用。

---

四、计算机基础

1. 数据结构与算法

• 常见数据结构：
  • 栈、队列、链表。
  • 树、图、哈希表。
• 常见算法：
  • 排序算法：冒泡、快排、归并。
  • 搜索算法：二分查找、深度优先搜索（DFS）、广度优先搜索（BFS）。
• 算法题推荐：
  • 字符串翻转。
  • 两数之和。
  • 数组去重。

2. 浏览器与网络

• 浏览器：
  • 渲染过程：从输入 URL 到页面呈现。
  • 跨域解决方案：CORS、JSONP。
• 网络：
  • HTTP 与 HTTPS 的区别。
  • 常见状态码（200、301、404、500）。
  • WebSocket 的应用场景。

---

五、软技能与面试技巧

1. 软技能

• 沟通能力：面试中清晰表达技术方案。
• 团队协作：敏捷开发中的角色分工与配合。
• 业务能力：快速理解业务需求并转化为技术实现。

2. 面试技巧

• 算法题答题技巧：
  • 写伪代码，分步解答。
  • 注重边界条件。
• 项目经验：
  • 描述项目背景与职责。
  • 强调解决的痛点和贡献。
• 应对不会的问题：
  • 展示思考过程。
  • 承认短板，但表达学习意愿。

---

六、总结

这份知识清单覆盖了前端面试的核心内容，从基础到框架，再到性能优化和计算机基础。建议根据自己的水平有选择性地深入学习，同时注重实践与总结。通过系统性的准备，你一定能在前端面试中脱颖而出！