2023前端面试准备【持续更新中】

1,869 阅读6分钟

大家好,我是知秋壹叶,春天到了,又到了前端们开始准备面试的季节。

这里是笔者搜集的一些前端问题汇总,大家可以带着问题自行搜索答案,关注我,后续逐步更新题目解答,谢谢各位看官捧场!

HTML, CSS {#html-css}

  1. 请描述一下 Cookies,SessionStorage 和 localStorage 的区别
  2. 知道的网页制作会用到的图片格式有哪些
  3. 你如何理解 HTML 结构的语义化
  4. 谈谈以前端角度出发做好 SEO 需要考虑什么?
  5. BFC 是什么
  6. css 优先级算法如何计算
  7. 哪些 css 属性可以继承
  8. 事件委托,代理,冒泡,捕获
  9. iframe 的优缺点
  10. cookie 的缺点
  11. 如何延迟加载 js
  12. 哪些操作会造成内存泄露
  13. jsonp 的原理
  14. load 和 ready 的区别
  15. script defer, async, script 标签的位置有啥影响
  16. Bom 对象
  17. Dom 节点操作函数
  18. css link 和 @import 的区别
  19. 多 tab 通信
  20. flex布局,垂直居中,水平居中
  21. css 的解析会影响js的执行吗?css加载会影响吗?
  22. requestAnimationFrame 和 requestIdleCallback
  23. svg vs canvas
  24. 层叠上下文
  25. margin collapse,外边距合并
  26. 行内元素,块元素,盒模型

浏览器 {#浏览器}

  1. 浏览器进程模型,新开一个 tab 会有哪些线程
  2. Compositing Layers 是什么,独立 layers 会有什么好处
  3. 聊 Web Workers 与 WebAssembly 技术
  4. SSR, CSR
  5. 并行请求优化
  6. Dom 树是怎么生成的
  7. 渲染进程及其相应线程
  8. 重绘与回流,reflow, relayout, repaint
  9. event loop
  10. 宏任务,微任务
  11. 缓存原理,策略,强缓存和协商缓存的状态码是多少
  12. 三种刷新操作对 http 缓存的影响

JavaScript 基础 {#javascript-基础}

  1. WeakSet, WeakMap, Set, Map 的区别
  2. 闭包,缺点?
  3. call, apply 的区别
  4. 基本数据类型
  5. 如何实现继承,创建对象的几种方式
  6. 垃圾回收机制
  7. 浮点数
  8. 类数组
  9. 作用域,this,作用域链,执行上下文
  10. 原型链
  11. eval, with
  12. Symbol, Proxy, Reflect
  13. strict 模式
  14. 如何判断对象属于某个类
  15. 模块化, AMD、CMD、UMD、Common.js、ESModule
  16. new 操作符做了什么
  17. promise
  18. typeof 类型判断
  19. 如何判断是 new 还是函数调用
  20. 常用设计模式
  21. 柯里化
  22. instanceof 的原理
  23. generator 函数内部是如何实现的, async, await

工程化 {#工程化}

微前端 {#微前端}

  1. 沙箱如何设计
  2. qiankun, single-spa

项目 {#项目}

  1. 有哪些复杂的点,以及怎么解决的
  2. 比较有挑战性的地方
  3. 开发过程中遇到困难,如何解决
  4. 最具代表的项目

移动端 {#移动端}

  1. 移动端适配问题,rem和vw有啥区别

框架 {#框架}

  1. MVVM, MVC 的区别
  2. Redux, 状态管理, React-Redux 的原理
  3. 前端路由

React {#react}

  1. 谈谈虚拟 dom 的理解
  2. 运行原理,执行过程
  3. Vnode 的理解
  4. Fiber 原理
  5. hook 原理,相对于 class 的优势,
  6. 为什么需要合成事件
  7. 组件间通信
  8. 生命周期
  9. 受控组件和非受控组件
  10. context
  11. React.memo,手写实现
  12. 高阶组件
  13. React中 状态的更新是如何触发视图渲染的
  14. 为什么不能在条件语句中写 hook
  15. useEffect 和 useLayoutEffect 区别
  16. React.memo() 和 React.useMemo() 的区别
  17. React.useCallback() 和 React.useMemo() 的区别
  18. React.forwardRef 是什么及其作用
  19. React dom diff 算法
  20. React 性能优化手段

Vue {#vue}

  1. use 的实现逻辑
  2. nextTick 原理
  3. data 为啥是一个方法
  4. 双向绑定,如何实现的
  5. 生命周期
  6. Proxy 相对 defineProperty 的优势
  7. vue-router, vuex
  8. vue3, 双端diff

性能 {#性能}

  1. 如何做性能优化
  2. 一个页面上有大量的图片(大型电商网站),加载很慢,你有哪些方法优化这些图片的加载,给用户更好的
  3. 如何对网站的文件和资源进行优化
  4. 性能优化有哪些指标能参考

网络 {#网络}

  1. http, tcp, http 状态码
  2. tcp 可以建立多个连接吗, 连接过程
  3. 为什么要三次握手,四次挥手
  4. Get, Post 的区别
  5. https 的握手过程
  6. http2,与 http 1.1 的区别
  7. Websocket
  8. 同源策略,跨域, Option 请求
  9. DNS 解析过程

安全 {#安全}

  1. xss, csrf

常用工具 {#常用工具}

Webpack {#webpack}

  1. 提高构建速度的方式?
  2. 原理?
  3. loader 原理,输入什么,产出什么?
  4. plugin 原理
  5. HMR 原理
  6. 代码分割
  7. Webpack5 模块联邦

Babel {#babel}

  1. 原理?
  2. 插件原理

Git {#git}

  1. git merge 和 git rebase有什么区别

Node.js {#node-dot-js}

  1. 谈谈对中间件的理解
  2. 怎么保证后端服务稳定性,怎么做容灾
  3. require('module') 的流程
  4. event loop

技术杂项 {#技术杂项}

  1. 为什么利用多个域名来存储网站资源会更有效
  2. 从输入 URL 到页面展示发生了什么
  3. 前端工程化
  4. 最近在研究什么技术
  5. 测试驱动开发
  6. 代码规范参考来源、如何落实开发代码规范
  7. 组件与脚手架工具设计
  8. Code review
  9. 项目从开发到上线的流程做的事情
  10. 聊比较深入了解前端开源的库

非技术问题 {#非技术问题}

  1. 职业规划
  2. 当业务重的时候怎么安排时间
  3. 如何看待加班
  4. 你对前端工程师这个职位是怎么样理解的?它的前景会怎么样?
  5. 自我介绍
  6. 聊技术与业务权衡
  7. 接下来想做什么事情
  8. 换工作的主要原因
  9. 聊工作与生活

编码场景题 {#编码场景题}

  1. 防抖和节流
  2. 数组去重
  3. 算法题:从数组 [1, 5, 8, 10, 12] 中找到两个数和为 9,返回 [1, 8] 这样的结果。
  4. 算法题:从数组 [1, 5, 8, 10, 12] 中找到三个数和为 19,返回 [1, 8, 10] 这样的结果。
  5. 算法题:给定一个无序的整数数组,找到其中最长上升子序列的长度。
  6. 算法题:判断链表有环
  7. 手写兼容多种模块化函数
  8. deepClone
  9. 手写 Proxy 实现数据劫持
  10. 算法题: 部分翻转
  11. 代码题:Promise 请求并发限制
  12. 连续子数组的最大和
  13. 数组中的第 K 个最大元素
  14. 缺失的第一个正数
  15. bind, compose
  16. 快速排序
  17. 求最长相同字符前缀
  18. 实现一个 EventMitter 类
  19. 手写数组扁平化
  20. 手写 reduce