关于前端:2022前端面试总结

先说些废话

这是一篇笔者面试记录的文章，并非要写一篇十分全面的面试题汇总文章，心愿看完本文对您能有肯定的帮忙。

首先，面试对集体来说，就是一种对以往工作之中教训积攒的一种测验，如果平时在工作中对本人遇到的问题、难点、新知识点，没有花工夫去学习积攒，
那么我置信，面试的时候花工夫反面试题，也不肯定能胜任预期的工作，不过摸鱼混工时的工作除外~

其次，面试中除了技术面试，还有针对我的项目中使用的技术亮点和集体可能提供的技术解决方案等等能力的展示，这方面的能力没理论解决过就肯定无奈提出本人的解决方案。
所以居安思危，平时就严格要求本人，对于疑难问题、性能问题，不回避问题，迎难而上去解决，能力使得本人真正在技术岗位上站稳脚跟。

工作中必备的外围框架工具

Vue 和 React 是前端开发岗必备的两种技术栈，以下是工作中我的项目开发必须要具备的框架技能，参考纲要查漏补缺

Vue（Vue2/3）

1. Vue 支流组件库（ant-design、element-ui、arco-design）
2. Vue 组件封装（公共组件抽离，npm 组件公布以及公有部署，编写组件必须思考的几个因素 props、methods、款式）
3. Vue 父子、兄弟组件通信（Vuex，EventBus）
4. 生命周期函数、Watch 函数、以及计算属性 Computed 的利用
5. Vue 动静路由，权限相干（菜单页面、按钮操作），单点登录，应用图片验证避免 CSFR 攻打

6. Vue3 更新的内容，老旧 Vue2 我的项目保护和新我的项目 Vue3 技术选型的留神点，Vue 配合 TypeScript

   React（React16 及以上）

7. 企业级开发框架 UMI（简化我的项目构建和初始开发流程）
8. React 支流组件库（ant-design、arco-design）
9. React 组件封装（类比 Vue）
10. React 组件通信（Redux、Redux-thunk、Redux-saga、Redux-logger、dva）
11. 生命周期函数、React Hooks 钩子函数的利用
12. 无状态组件、我的项目分层（view + model + service）

13. React 路由和权限（类比 Vue）

    公共局部

14. webpack 打包配置、性能优化、webpack.dev.conf.js 增加 cdn 配置
15. 如何首屏加载优化、图标和图片资源优化

目前面试中曾经遇到的问题

JavaScript 和 CSS

1. ES6 的数据类型有哪些？（根本数据类型和援用数据类型，ES6 新增 Symbol，用于对象属性中惟一的 key；新增BigInt 用于解决数据量过大 Int 报错的问题）

2. ES6 新增的办法有哪些？（new Set()解决数组去重，new Map()链式解决数组，能够搭配 Filter 应用，再说一些和 ForEach 的区别，ForEach 是在原数组中操作。
   能够再说说 is()，判断值是否相等；assign()，浅拷贝对象；entries() 与后者反之和 fromEntries()键值对数组转为对象）

   • Javascript 中的 assign()办法到底是浅拷贝还是深拷贝？
   • Es6 新增的对象办法

3. 如何判断一个数据是否是对象？（1.isArray 2.Object.prototype.toString().call()，返回 '[object Array]’ 即为 3. 实例的构造函数属性 constructor 指向构造函数，数组.contructor===Array 即可 4. 应用 instanceof 亦可，a instanceof Array）

   • JS 判断是否是数组的四种做法

4. 什么是 BFC 盒子模型，他的作用是什么（具备 BFC 个性的元素能够看作是隔离了的独立容器，容器外面的元素不会在布局上影响到里面的元素；
   触发条件：1.overflow 除了 visible 以外的值 (hidden、auto、scroll)。2. 相对定位元素：position (absolute、fixed)。3.display 为 inline-block、table-cells、flex。）

   • 盒子模型与 BFC
5. null 和 undefined 的区别（null 和 undefined 非严格相等，本身也全等，然而互相不严格相等；null 是人为赋予初始空值，undefined 是全局对象的属性；typeof(null)不是 null，而是 object，
   是因为 typeof 判断二进制码，object 前三位是 0，null 刚好也是，typeof(undefined)失常；）

6. var 和 let 的区别（var 是函数作用域，let 是块状作用域，let 申明的变量不能反复；const 申明的变量不可批改；var 申明的变量属于 window，能够 window. 拜访，let 和 const 的不行）

   • var 和 let 的区别
   • const 申明了数组，还能 push 元素吗，为什么？

7. push()、pop()、shift()、unshift()、splice()、sort()、reverse()操作的区别。shift 删除第一个元素并返回，unshift 反之。
   splice 用于增加或删除数组中的元素，array.splice(index,howmany,item1,…..,itemX)；index 必须，规定从何处增加 / 删除元素；
   howmany 可选，规定应该删除多少元素，必须是数字，但能够是 “0”，如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素；
   item1, …, itemX 可选，要增加到数组的新元素

   • JavaScript splice() 办法

8. axios 有什么竞品是否有理解过（ajax 和 fetch，fetch 是 js 原生 api，须要本人做一些封装；ajxa 针对 mvc 不是当初 mvvm，并且基于原生 xhr，还须要引入 jquery；axios 反对 promise，反对避免 csrf）

   • ajax、axios、fetch 之间的具体区别以及优缺点
   • Ajax、Fetch、Axios

9. js 的深拷贝和浅拷贝（1. 罕用深拷贝应用 JSON.parse+JSON.stringify、2. object.assign 一级属性深拷贝二级属性浅拷贝、3. 用 foreach 办法递归迭代实现深拷贝、4. 应用第三方函数库，比方 loadsh 的 clonedeep 或者 underscore 的 deepclone，clone 是浅拷贝）

   • js 的深拷贝与浅拷贝

10. H5 挪动端如何做性能优化（1. 资源压缩，图片压缩，引入资源包压缩，有条件的应用 cdn 减速，icon 雪碧图精灵图。2. 优化 dom 构造，缩小页面的重绘和重排布，首屏收入的页面应用内联 css，应用节流防抖的伎俩缩小批改 dom 事件触发的频率。

    3. 应用事后加载骨架图的形式优化用户体验，咱们之前有用过 page-web-skeleton 这个 chorme 组件疾速生成骨架图。4. 尽量应用 css 内置动画，缩小应用requestAnimationFrame，他会触发大量的 dom 操作，
       而内置动画会调用硬件加速，体验更优。5. 配合后端同学做接口合并，对于首页显示的接口对立为一个总接口，并针对性优化。6. 最初就是优化次要针对不同我的项目，通过不同的形式去做优化，针对性的批改）
    4. H5 前端性能优化图鉴

11. css 款式的优先规定（简而言之，内联款式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器，!important最高）

    • CSS 的优先级
    • CSS 款式优先级

Vue

1. Vue 的实现原理，Object.defineProperty()；Vue2 和 Vue3 的实现响应式的区别；Vue 如何实现数组的响应式（底层代码次要是编写了一套 js 雷同的办法裸露进去，Vue 通过原型拦挡的形式重写了数组的 7 个办法）
2. Vue 如何封装一个组件（定义参数，定义须要暴露出的办法，参数须要写的属性，最初 export 进去）

3. Vue 父子组件和兄弟组件的通信形式（1. 第一种形式借助父组件。2. 第二种形式借助 eventbus，在 main 中全局注册事件 bus，通过 $on 和 $emit 来监听和触发。3. 应用 Vuex）

   • vue 学习之 —- 兄弟组件之间通信形式

4. Vue 如何实现 v -model（应用 object.defineProperty 设置 getset 办法，再给绑定的 input 输入框的 keyup 事件增加劫持，从而实现 mvvm，即数据驱动页面；接着持续吹 mvvm 和之前 jquery 时代的区别；
   jquery 次要是链式函数操作，对 dom 的操作很多，性能上会有肯定落后；mvvm 是指 model，view，viewmodel，最初一个是同步 view 和 model 的对象，model 是业务逻辑，view 是页面 ui）

   • Vue 的 v -model 的原理和实现
   • 什么是 MVVM？

5. 当 Vue 应用 history 模式的时候，呈现 404，nginx 该如何解决（try_files $uri $uri/ /index.html，示意查找以后申请地址对应的文件是否存在，不存在则查找申请地址对应的目录是否存在，还是不存在则重定向到 /index.html 页面）

   • Nginx：vue 路由应用 history 模式刷新 404

React（个人简历未突出 react 能力，所以这方面问的比拟少）

1. redux 如何应用？
2. redux 中传递组件款式 css 无奈失效怎么办？

芜杂记录一些

• 前端性能优化：H5 页面如何解决首屏加载白屏问题、如何避免内存透露
• 前端平安根底：XSS 攻打、XSRF 攻打
• js 继承的几种形式：总结 JS 继承的六种形式、js 几种继承
• js 如何创建对象：JS 创建对象的四种形式
• 如何实现一个 promise：javaScript 之 js 模仿封装一个 promise、模仿实现 Promise（小白版）
• 高德地图、Cesium、ArcGIS 有哪些图层？
• 原型和原型链有什么作用，简略形容一下？

口试面试题记录

1. 一些奇奇怪怪工作中很少用到的冷门 CSS 知识点考查题目（比方：长 50px，宽 50px，border-radius: 30px 50px; 是什么成果？）
2. 数组去重、数组排序以及组合能力的算法题（牛客网和 Leecode 刷题解决）
3. 手写 sql（加分项）

八股文汇总整顿

八股文总会被问到，还是须要看看，大部分八股文遇到的问题也都能够在工作中遇到，你遇到过天然印象就粗浅

1. 前端 200 道面试题及答案（更新中）
2. 50 个最新 TypeScript 面试题合集 – TypeScript 开发教程
3. React 面试题最全
4. react 面试题整顿
5. 耗时一个月，React 知识点万字大总结（超全超根底）
6. webpack 面试题整顿
7. vue 面试常问的原理
8. 12 道 vue 高频原理面试题, 你能答出几道?
9. vue 面试题整顿(2022- 继续更新中 …)
10. vue3 面试题：2022 最新前端 Vue 3.0 面试题及答案
11. vue3.0 面试题总结
12. 高频 JS 面试题 数据类型和变量、闭包、作用域、原型链、继承
13. CSS 高频面试题

我是 fx67ll.com，如果您发现本文有什么谬误，欢送在评论区探讨斧正，感谢您的浏览！
如果您喜爱这篇文章，欢送拜访我的 本文 github 仓库地址，为我点一颗 Star，Thanks~ :)
转发请注明参考文章地址，非常感谢！！！