2020 前端面试问题总结

Terry_Y
3,526 阅读5分钟

以下是这两年在面试与被面试总结下来的一些常见面试问题。下面的问题应该可以覆盖大部分前端不同等级的职位，后续会继续完善。

该总结分为 CSS、JS、ES5/6、通用经验、程序设计、JS库、前端测试、React、Vue、Webpack、Node 进行总结。文章只列出了问题列表，问题答案辛苦各位自己寻找！ 也算自我完善的一个过程~~

CSS

  1. BFC：www.cnblogs.com/libin-1/p/7…
  2. Flex：www.runoob.com/w3cnote/fle…
  3. Grid：segmentfault.com/a/119000001…
  4. 选择器
    • 权重
    • 用法
  5. 单位：vh、vw
  6. rem：www.cnblogs.com/phoebewang0…
  7. em：基于父元素
  8. offsetLeft 和 left 区别
  9. 手机屏幕展示缩放：
  10. 移动端适配页面

JavaScript

  1. 闭包（内存）www.jianshu.com/p/26c81fde2…
    • 栈内存：存变量
    • 堆内存：存对象
    • 内存泄露
    • 深、浅拷贝
  2. setTimeout / setInterval / requestAnimationFrame
  3. this：www.cnblogs.com/snandy/p/47…
    • this
    • global
  4. 作用域
  5. 原型链
  6. 数据类型
    • 数据类型转换
    • 数据类型判断
      • typeof
      • instanceof
      • constructor
      • Object.prototype.toString.call('')
  7. 事件
  8. 实现链式调用
  9. 类数组对象（过时）
    • 只包含使用从零开始，且自然递增的整数做键名，并且定义了length表示元素个数的对象，我们就认为他是类数组对象
    • push方法实现
  10. 算法
    • 排序
    • 斐波那契数列
    • 树的转换
  11. 上下文
  12. 严格模式 "use strict"
  13. 循环：map、foreach、for in、for of
  14. 前端模板引擎 www.cnblogs.com/jingwhale/p…

ECMAScript

  1. Promise
    • 状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）
    • 实现过程：www.jianshu.com/p/b4f0425b2…
    • then 传递 promise（执行过程）
  2. 定义：var let const
    • 定义
    • 定义过程的内存变化
  3. 箭头函数
    • this 指向
    • arguments 替代方案
  4. reducer (实现map)
  5. fiter
  6. async/await
  7. for in 和 for of
  8. set 数组去重
  9. 函数稀释
  10. Class
    • 实现继承 - function和class的实现方法
    • proto、construct
  11. generator
  12. require、import差别
  13. map 和 set 差别
    • map 键值对
    • set 单一
  14. Iterator
    • foreach()

通用经验

  1. 性能优化
  2. 前端路由：www.jianshu.com/p/d2aa8fb95…
    • hash
    • history API
  3. 跨域方案
    • cros (主要)
    • jsonp
    • ...
  4. cookie 大小、子域跨域、设置domin
  5. storage、浏览器缓存
  6. 安全相关
    • XSS
    • CSRF
  7. HTTP 1/1.1/2
    • 传输方式
    • 握手
  8. HTTPS
    • 端口
    • 安全原理
    • 中间人攻击
  9. PWA segmentfault.com/a/119000001…
    • service worker
    • manifest.json
    • navigator.serviceWorker.register()
  10. fetch、axios、ajax
    • 特点、区别、使用

程序设计

  1. 从URL输入到页面加载过程
    • 流程：缓存 -> DNS解析 -> TCP三次握手 -> HTTP请求 -> 数据响应 -> 页面渲染 -> TCP四次挥手
    • 浏览器渲染：创建DOM树—创建StyleRules—创建Render树—布局Layout—绘制Painting
    • 参考：www.cnblogs.com/daijinxue/p…
  2. DSL：针对特定应用领域而设计使用的计算机语言
    • 外部DSL
    • 内部DSL
  3. GPL：指的是针对跨应用领域而设计使用的计算机语言
  4. 静态语言 & 动态语言
  5. V8引擎 vs JavaScript Core
  6. MVC、MVVM、单向数据流、双向数据流
  7. 模块化定义
    • AMD：异步模块定义
    • CMD：同步模块定义
    • CommonJS规范：通过module.exports定义，基于Node
    • ES6特性：模块化-export/import对模块进行导出导入的
    • 参考：www.cnblogs.com/chenguangli…
  8. EventLoop
  9. 事件：宏任务(macro-task) 和 微任务 (micro-task)
    • 宏任务：包括整体代码script，setTimeout，setInterval
    • 微任务：Promise.then(非new Promise)，process.nextTick(node中)
    • 事件的执行顺序，是先执行宏任务，然后执行微任务，这个是基础，任务可以有同步任务和异步任务，同步的进入主线程，异步的进入Event Table并注册函数，异步事件完成后，会将回调函数放入Event Queue中(宏任务和微任务是不同的Event Queue)，同步任务执行完成后，会从Event Queue中读取事件放入主线程执行，回调函数中可能还会包含不同的任务，因此会循环执行上述操作。
  10. GWT：Google web Toolkit，是Google公司发布的基于Java语言开发AJAX应用的开发工具包。
  11. 函数式编程 www.cnblogs.com/tjyoung/p/8…
    • 纯函数
    • 柯里化
    • 函数组合
    • Point Free
    • 声明式与命令式代码
    • 高阶函数
  12. 递归与尾递归 www.ruanyifeng.com/blog/2015/0…
  13. AOP & OOP
  14. 观察者模式
    • 观察者模式
    • 发布/订阅模式
  15. JS编程模式：www.cnblogs.com/xianyulaodi…
  16. BFF架构：segmentfault.com/a/119000000…
  17. SSR
    • 优势、劣势
    • 实现
  18. 多端开发（实现原理）

JS库

  1. lodash：blog.csdn.net/qq_35414779…
  2. axios：www.jianshu.com/p/7a9fbcbb1…
    • 拦截器：axios.interceptors.request.use(func(), func(err))
  3. bable：www.jianshu.com/p/cbd48919a…
    • @babel/cli
    • @babel/core
    • @babel/preset-env：环境包
    • @babel/polyfill ：垫平不同浏览器或者不同环境下的差异
    • @babel/runtime：提供统一的模块化的helper插件
    • @babel/plugin-transform-runtime：插件
    • @babel/plugin-transform-xxx
    • .babelrc
    • presets
    • plugin
    • babel-stage-* (0覆盖1覆盖2覆盖3)
    • babel7升级内容
  4. eslint / jshint / csslint
  5. IndexDB

前端测试

  1. jest
  2. mocha
  3. chai

React

  1. 生命周期
    • 16版本新生命周期
    • 废除生命周期原因（涉及fiber）
  2. state、setState的原理
  3. hooks
  4. provider、connet、基于context
  5. 中间件
  6. redux-thunk
  7. redux-saga
  8. 高阶组件和受控组件
  9. 虚拟DOM
  10. Fiber
  11. render / commit
  12. react-router
  13. Redux
  14. Mobx
    • 与redux对比
    • 使用方式
  15. Dva（如用过）
    • 设计思路
    • 包含技术

Vue

  1. 双向绑定
    • Object.defineProperty
  2. 生命周期
  3. 虚拟dom
    • diff算法
  4. keep-alive
  5. vue的渲染流程
  6. vue-router
  7. Vuex
    • 应用方法
    • 实现原理
    • 数据流

Webpack

  1. 模块化打包工具
  2. loader执行顺序
    • 从下而上
    • 从右而左
  3. plugin
  4. loader
  5. rollup
  6. 打包性能优化
    • 缓存
    • 多进程
    • 插件

Node.js

  1. Node 常用包
  2. 线程与进程
  3. 运维与部署
    • 守护进程
  4. 性能优化方案
  5. 项目设计
avatar
文章
阅读
粉丝