先说些废话

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

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

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

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

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事件触发的频率。

    1. 应用事后加载骨架图的形式优化用户体验，咱们之前有用过page-web-skeleton这个chorme组件疾速生成骨架图。4. 尽量应用css内置动画，缩小应用requestAnimationFrame，他会触发大量的dom操作，
      而内置动画会调用硬件加速，体验更优。5. 配合后端同学做接口合并，对于首页显示的接口对立为一个总接口，并针对性优化。6. 最初就是优化次要针对不同我的项目，通过不同的形式去做优化，针对性的批改）
    2. 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~ :)
转发请注明参考文章地址，非常感谢！！！