2022 前端面试总结（铜五铁六）

Longan
782 阅读5分钟

于 2022 年 4 月份中旬离职后，开启了两个多月的面试经历。

09dfda36d79c6a6e189ac0cb756d350.png

基本情况

个人信息

  • 2021 年 7 月毕业，物联网工程专业，末流二本
  • 工作经验：不到一年，实际工作年限一年半（包含了实习经历）
  • 所在地：广州，上家公司研发团队规模 150 人左右

备战过程

分阶段规划：

  • 在刚离职后的一段时间内，对之前所做项目进行一个梳理归纳，提取出项目难点、亮点。
  • 针对自身不足的部分，进行知识学习，查缺补漏，总结归纳。
  • 编写优化简历，主要是对项目经历的总结。（在这个阶段要十分感谢帮忙提出建议的前同事、学长、技术大佬）
  • 在自己规划的期限前进行简历投递，在期限到的时候，把简历投递出去，即使没有完全准备好。个人觉得在一次次面试后进行复盘补缺，对于成长是飞速的。

面试情况

投递了两百多份简历，由于自身工作年限与目前行业行情，面试了二十多家中小型公司（期间也有面过某广州大厂，技术面过后都被 hr 挂了，算是无缘了），收获了六七个 offer。最终选择了一家技术团队的初创公司，业务方向和技术都是自己所感兴趣的方向，涨幅也符合预期，自我感觉也是一个不错的结果了。

面试题

以下为技术面试的题目归纳（不包括项目问题），对应的应该是初级岗位（1-3 年）

HTML、CSS

  • 标签的可编辑属性
  • iframe 的优缺点
  • CSS 的伪类和伪元素的区别
  • 如何使得 Chrome 的字号小于 12 px
  • 实现一个三角形
  • CSS 预处理器的特性
  • 常用的居中方法
  • flex 相关特性
  • rem 和 em 的区别
  • rem 布局的原理

JavaScript

  • 数据类型分别有哪些？
  • 如何判断数据类型？
  • 基本数据类型和引用数据类型的区别？
  • 常用的数组方法
  • 深拷贝、浅拷贝的区别
  • 什么是作用域？
  • 什么是闭包，闭包会产生什么问题？
  • 对 JS 单线程的理解
  • 事件循环机制
  • 常用的 ES6 语法
  • 箭头函数和普通函数的区别
  • 如何让 JavaScript 异步加载
  • 事件委托
  • promise 和 async/await 的区别
  • Map 和 WeakMap
  • 内存泄露是什么，如何防止？
  • node 的 common.js 和 es6 的区别

框架（Vue）

  • 常用的 Vue 的修饰符
  • Vue 键盘事件绑定方法
  • Vue 自定义指令实现
  • Vue 的生命周期有什么，在不同的周期可以做什么操作？
    • 请求一般是在哪个周期处理？
    • DOM 挂载完毕是在哪个阶段？
    • beforeCeated 和 destoryed 可以做什么操作？
  • Vue 的组件通信（父-子/孙，兄弟，全局）
  • Vuex 的使用场景和大概流程
  • 如何实现 EventBus
  • Vue 组件的 name 作用
  • 路由导航守卫有哪些，实际开发中的使用
  • vue-router 中 push 和 replace 的区别
  • 路由模式 hash 和 history 的差异和存在的问题
  • 如何实现路由按需加载
  • Vue-loader 原理
  • Vue 的双向数据绑定原理
  • Vue3 里为什么要用 Proxy 替代 defineProperty ？
  • Vue 实例化过程
  • diff 算法（与 Vue3 的差异）
  • keep-alive 的原理
  • React 和 Vue 的区别
  • 什么是 SEO？服务端渲染 SSR 的原理

浏览器相关

  • 什么是同源策略？如何判定是跨域？
  • 跨域是什么，有什么解决方法？
  • 如何配置 CORS ？
  • cookie 是什么？服务端如何设置 cookie？
  • 从输入 url 回车后发生了什么？
  • 浏览器渲染流程
  • 浏览器进程架构
  • 垃圾回收机制
  • 浏览器缓存机制
  • 重排(回流)与重绘
  • CDN 的理解，预热是什么？如何刷新 CDN ？
  • 常用的开发者面板
  • 内存缓存，磁盘缓存的区别

网络原理

  • GET 和 POST 的区别
  • TCP、UDP 的区别
  • TCP 的三次握手和四次回收
  • HTTP 发展历程（0.9—>1.0—>1.1—>2—>3）
  • HTTPS 是什么？
  • HTTPS 的握手流程
  • 数字签名的流程
  • WebSocket 是什么？使用场景？
  • websocket 和 http 差别
  • 网络安全相关
    • XSS、CSRF 是什么 如何防范
    • 中间人攻击

小程序/H5

  • 小程序的登录流程
  • 小程序/h5、安卓/ios 的兼容性问题
  • 封装小程序的缓存方法
  • 小程序和系统的交互

版本控制

  • 版本控制的理解，有哪些工具
  • 常用的 git 命令
  • git 工作流
  • CI 流程

工程化

  • 打包优化
  • webpack 构建流程
  • 热更新原理
  • Loader 和 Plugins 是什么？
  • webpack 的钩子
  • chunk 是什么？
  • tree shaking 原理
  • vite 了解吗

业务题

  • 首屏加载如何优化
  • 滚动加载的实现
  • 图片懒加载的原理
  • 长列表的优化，虚拟滚动的原理
  • 如何实现弹幕
  • 实现扫码登录

手写实现

  • 数组去重
  • 数组扁平化
  • 深拷贝的实现
  • 实现 bind 函数
  • 发布订阅模式
  • 洗牌算法
  • LRU
  • LazyMan

其他

  • 数组和链表的区别
  • 设计模式了解吗，及使用场景
  • base64 的原理，转换后大小大多少？
  • RESTful 规范
  • nginx 作用
  • 正向代理和反向代理
  • mysql 和 mongodb 区别

总结

目前存在的问题：

  • 实际项目积累薄弱，较简单
  • 技术广度有限，原理深度不够
  • 计算机相关基础差

未来规划：

  • 前端新技术的学习，核心原理深度的掌握
  • 个人博客的简历，相关知识文档整理
  • 算法数据结构学习，其他计算机相关知识查漏补缺
avatar
文章
阅读
粉丝