跳到主要内容

前端面试QA设计

· 阅读需 14 分钟
Quany
Quany
软件工程师

面试流程：自我介绍-》技术问答-》对方提问-》结束

HTML/CSS 基础​

  • HTML 语义化标签的含义和作用 ：例如 <header> <section> <article> <footer> 等，语义化标签有助于提升可读性、搜索引擎优化（SEO）和辅助技术的使用。
  • CSS 布局方式有哪些 ：包括浮动布局（Float）、弹性盒子布局（Flexbox）、网格布局（Grid）、绝对 / 相对定位布局等，每种布局方式的适用场景和优缺点。
  • 如何实现一个圆形按钮 ：可以使用 CSS 的 border-radius 属性将按钮四角设置为 50% 的圆角，结合宽度和高度相等的设置。
  • CSS3 新增的动画属性和方法 ：如 transition 和 animation，@keyframes 用于自定义动画效果，transition-delay 控制动画延迟等。

JavaScript 基础​

  • 作用域和闭包的概念 ：JavaScript 的作用域分为全局作用域、函数作用域和块级作用域等，闭包是一个可以访问自由变量的函数，即使自由变量的作用域已经销毁，它可以保持对外部变量的引用。
  • 事件循环和异步编程 ：
    • 什么是事件循环？事件循环是 JavaScript 的核心特性之一，负责协调同步代码和异步任务的执行，包括宏任务（如 setTimeout）和微任务（如 Promise）的处理机制。
    • 异步编程的常用方式，如回调函数、Promise 和 async/await 的使用。
  • 原型链和继承 ：JavaScript 中没有传统的类继承机制，而是通过原型链实现继承，理解原型（prototype）、constructor、proto 之间的关系。
  • this 的指向问题 ：不同上下文环境下 this 的指向，例如在函数、对象方法、事件绑定等场景中的表现。

前端框架​

  • React 或 Vue 的生命周期 ：以 React 为例，组件从挂载到更新再到卸载的各个阶段的生命周期方法及其作用，如 componentDidMount componentDidUpdate componentWillUnmount。
  • Vue 的 Vue Router 和 Vuex ：Vue Router 是 Vue 的官方路由管理器，掌握动态路由、嵌套路由、路由守卫等的使用；Vuex 是 Vue 的状态管理工具，理解其核心概念如状态（state）、动作（actions）、突变（mutations）和模块（modules）。

工程化和工具​

  • Webpack 的配置和优化 ：如何配置 Webpack 模块打包器，实现代码拆分、Tree Shaking 等优化策略，以提升构建和运行时性能。
  • npm 和 yarn 的区别 ：npm 是官方的包管理器，而 yarn 提供了更快的安装速度、更可靠的依赖版本管理和离线模式等功能。
  • Babel 的作用和配置 ：Babel 是一个用于将现代 JavaScript 转换为广泛兼容的 JavaScript 的工具，支持 ES6+ 的语法转换，可以结合 Webpack 或 Parcel 等打包工具使用。

浏览器相关​

  • 浏览器渲染过程 ：从 HTML 到页面呈现的整个流程，包括 DOM 树和 CSSOM 树的建立、渲染树的生成、布局计算（reflow）和绘制（repaint）等过程。
  • 跨域问题的解决方案 ：包括服务器端的 CORS 配置、JSONP、proxy 代理等方式，解决前后端分离时不同域之间的数据交互问题。
  • 浏览器的同源策略 ：同源策略限制了来自不同源的 “document” 或脚本，对当前 “document” 读取或设置某些属性的操作，是浏览器安全机制的核心。

性能优化和常见问题​

  • 前端性能优化的方法 ：包括减少 HTTP 请求、使用 CDN、图片压缩、懒加载、缓存策略等。
  • Event Loop 的理解：前端面试中的重要知识点之一，JavaScript 是单线程语言，Event Loop 是用来协调 JS 的同步代码和异步任务执行的方案。

调试和工具​

  • 常用调试工具和技术 ：包括浏览器开发者工具（如 Chrome DevTools）、调试器（debugger 关键字）、日志打印等。
  • 如何分析和优化前端代码的性能问题 ：能通过开发者工具的性能面板，分析时间线、调用栈等数据，找到性能瓶颈并优化，比如减少阻塞 DOM 的 JavaScript、合理利用事件委托等。

面向对象编程​

面向对象的特征 ：包括封装、继承和多态，了解如何在 JavaScript 中通过 ES6 的类语法或原型链来实现这些面向对象的特性。

其他​

  • 如何保证代码的可读性和可维护性 ：包括按照规范的编码标准，如缩进、命名规范等；良好的注释风格，以及遵循最佳实践（如 KISS 和 DRY 原则）。
  • 在前端开发中遇到的挑战和解决方案 ：例如如何处理浏览器兼容性问题、如何优雅地处理用户输入错误等。

开放性问题​

  • 如何看待前端技术的发展趋势 ：可以讨论 WebAssembly、Serverless、PWA 等前沿技术对前端开发的影响。
  • 请描述一个你遇到过的前端开发难题是如何解决的 ：考察解决问题的能力和思考过程。

前端基础​

html/css/js

  1. 在我们前端技术层面，怎么做一些SEO优化？
  2. flex布局常用属性有哪些？
  3. 如何实现一个圆形按钮？
  4. JavaScript 作用域有哪些？箭头函数的 this 指向是什么？
  5. 闭包有什么特点？
  6. 事件循环是什么？
  7. 你怎么看待 JavaScript 的原型链设计的？
  8. ts 适合什么场景下使用？（开放）

框架技术​

  1. react 和 vue 有什么区别？

React​

基础概念​

  1. React 的hooks有哪些？为什么要改成 hooks 呢？
  2. 你能说一下虚拟 DOM 的原理吗？
  3. React 的生命周期方法有哪些？它们分别在什么时机被调用？

组件相关​

  1. 什么是受控组件和非受控组件？分别适用于什么场景？
  2. 如何在 React 中实现组件的条件渲染？
  3. 如何在 React 中实现列表渲染？
  4. 什么是高阶组件（HOC）？它的作用是什么？
  5. React 中的 props 和 state 的区别是什么？

状态管理​

  1. 如何在 React 中使用 useState？它有哪些注意事项？
  2. useEffect 的作用是什么？它如何处理副作用？
  3. 什么是 Context API？它如何用于在组件之间共享状态？
  4. React 中的 Hook 有哪些？它们分别适用于哪些场景？
  5. 你用什么状态管理工具？(开放)

优化与性能​

  1. 如何优化 React 应用的性能？
  2. 什么是“reconciliation”？
  3. React 中的 memo 和 useCallback 的作用是什么？
  4. 什么是服务器端渲染（SSR）？它如何在 React 中实现？

路由相关​

  1. React Router 是什么？它的基本使用方式是什么？
  2. 如何使用 React Router 实现页面跳转和参数传递？
  3. 什么是嵌套路由？如何实现？

高级话题​

  1. 什么是反向代理（Proxy）在 React 开发中的作用？
  2. 如何在 React 中处理表单验证？
  3. 如何在 React 中实现 SSR？
  4. 如何使用 Redux 或 MobX 等状态管理库？
  5. React 中的“props drilling” 问题是什么？如何解决？

工具和生态系统​

  1. 如何使用 ESLint 和 Prettier 提高代码质量？
  2. 如何使用 React DevTools 调试 React 应用？
  3. 什么是 Webpack？React 应用中如何配置？
  4. 如何使用 Storybook 开发 React 组件？

React Native​

  1. React Native 是在哪个版本开始改变架构的？变化有哪些？（开放）
  2. 你做过哪些React Native 性能优化？（开放）

vue​

基础知识​

  • 什么是 Vue.js？它的核心理念是什么？
  • Vue.js 是一个用于构建用户界面的渐进式框架，核心理念是渐进式开发，即可以根据项目需求逐步引入 Vue.js 的功能。
  • Vue 的数据绑定是如何工作的？
  • Vue 通过双向数据绑定实现数据和视图的同步更新，使用 v-model 指令可以实现表单输入和应用数据之间的双向绑定。
  • Vue 的生命周期是什么？
  • Vue 实例从创建到销毁的过程就是生命周期，主要包括 beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed 等阶段。

核心概念​

  • v-show 和 v-if 有什么区别？
  • v-show 是通过 CSS 的 display 属性来控制元素的显示和隐藏，而 v-if 是通过条件判断来决定元素是否渲染到 DOM 中。v-show 更适合频繁切换的场景，而 v-if 更适合条件较少的场景 。
  • 为什么 v-for 要用 key？
  • 使用 key 可以帮助 Vue 更快地更新列表，通过 key 来追踪每个节点的身份，从而减少不必要的 DOM 操作，提高渲染性能 。
  • 描述 Vue 的响应式原理
  • Vue 通过 Object.defineProperty 对数据进行劫持，当数据发生变化时，会通知相关的视图进行更新。对于数组，Vue 通过重写部分数组方法来实现响应式。

组件​

  • Vue 组件是如何定义的？
  • Vue 组件通过 Vue.extend 方法或者直接在 components 选项中定义，组件可以包含模板、脚本和样式等部分。
  • Vue 组件之间如何传值？
  • 父组件可以通过 props 向子组件传递数据，子组件可以通过事件向父组件传递数据。兄弟组件之间可以通过事件总线或者 Vuex 进行通信。
  • 什么是 Vue 的插槽（slots）？
  • 插槽是 Vue 提供的一种内容分发机制，用于在组件内部定义可以插入内容的位置，可以是具名插槽、作用域插槽等。

路由​

Vue Router 是什么？

  • Vue Router 是 Vue.js 的官方路由管理器，用于构建单页面应用，可以实现页面的切换和导航。 Vue Router 中的路由懒加载是什么？
  • 路由懒加载是指在路由被访问时才加载对应的组件，可以提高应用的加载速度，通过 import 语法或者 require 方法实现。 状态管理 Vuex 的核心概念有哪些？
  • Vuex 是 Vue.js 的状态管理工具，核心概念包括 state（状态）、mutations（提交状态变更）、actions（异步操作）、getters（获取状态的派生状态）。 Vuex 中 action 和 mutation 有何区别？
  • mutation 是同步操作，用于直接修改状态，而 action 是异步操作，可以在 action 中调用 mutation 来提交状态变更 。 其他 如何优化 Vue 项目的性能？
  • 可以通过合理使用 v-if 和 v-show、使用 computed 属性、在 v-for 中使用 key、使用异步组件、使用 keep-alive 等方式来优化性能 。 Vue 和 React 有什么区别？
  • Vue 和 React 都是前端框架，Vue 更注重渐进式开发，而 React 更注重组件化和函数式编程。Vue 的模板语法更接近 HTML，而 React 使用 JSX 语法。

微信公众号​

微信公众号