关于前端:来吧一文写清前端面试难点及考点

如果你当初筹备开始找前端工作的话那么面试是一个很重要的环节。接下里我会具体讲一下我是怎么筹备面试的。满满的干货，倡议精读！

怎么筹备前端面试

面试总结下来以下四点：一根底，二我的项目，三简历，四心态

根底

首先是根底，那么到底是什么样的根底呢？小伙伴们能够参考以下总结的几个要点

对于图做些解说阐明，有个大抵的学习方向

1.html：
晓得 html 的语义化标签，html5 新个性以及一些标签的作用。

2.css：
倡议去过一遍《css 权威指南》，布局、定位、盒子模型是重点。

3.js：
这一块内容比拟多。如果你 js 学的不怎么好，那么就要加把劲了。把根底、算法、数据结构这块搞懂，多去 LeetCode 上刷题。

相干的利用如：防抖和节流、xmlhttprequest，js 动画这块。倡议把《JavaScript 高级程序设计》精读一遍。

4. 网络：
网络这块我次要就是把《图解 http》看了一遍。如果心有余力的同学能够去看一下《深入浅出 https》，这块内容比较复杂，波及到密码学，网络安全攻防这块。

对于网络安全也是重点，特地是 xss，csrf，以及 sql 注入这块都是须要去深刻了解的，晓得他们的原理，攻打作用以及如何进攻。

5. 框架：
首先你要对 vue 的应用十分纯熟，这个就体现在你平时做我的项目的过程中了。一些根本的 api、mixin、插槽、组件传值、生命周期这些都是根底了，同时你也能够理解 vue3.0 的一些新个性：基于代理机制的观察者模式去监听属性等等。

最重要的是：你得要去看看源码，晓得 vue 的一些底层实现原理，这在面试过程中是十分加分的，次要的能够去看看 mvvm 实现的源码、vue 实现响应式监听的源码以及 vue-router 和 vuex 的源码。

6. 性能优化：
这方面也是一个重头戏，我面试过的这几个公司里没有一个不考一下性能优化这块的。

对于性能优化的话，次要就是这么几点：浏览器缓存，这是你必须要答到的！如果让你谈前端优化，缓存都不说，阐明你我的项目教训不够，其余的什么预加载和懒加载，webworker 线程这些都能够理解一下。

7. 工程化：
次要是考 webpack 这块，plugin 和 babel 的应用，解决了什么问题。

简历

本人的简历要写的丰盛一点，特地是对我的项目的形容。要写分明本人负责的职位，我的项目的源码地址，如果是上线的我的项目能够写上线上地址，还有我的项目应用的技术栈、次要性能以及技术难点都要写分明，这样面试官能够通过你的我的项目经验做一个初步的评估。所以我的项目经验越丰盛越好，然而也不要什么我的项目都往简历上写。还是像我说的那样，写有理论利用价值的我的项目。

还有最最最最重要的一点：千万不要在简历上坑本人！在写本人的技能项时，理解，相熟，纯熟，精通要分的清。本人不会的技能项或者是只是听过这个货色有过一点点的理解，那就不要写到本人的简历上了。切记！

心态

放弃一个良好的心态也是面试胜利的一个要害，不能太过于缓和，当然像我这种第一次面试的必定会很缓和，不过随着面试的次数增多，面试的深度逐步加深，我也慢慢的没有第一次面试时那么缓和了。然而适当的缓和还是要有的，这能够让你放弃肯定的苏醒，大脑时刻运行。

如果你在面试过程中因为一道面试题没有接触到答不上来，你能够先向面试官求助，让面试官给你一点提醒。面试不像考试，考试你做得进去就做，做不进去那就没方法了，面试不同，在你没有脉络的状况下，你能够申请面试官给点提醒，提供一点思路。如果还是答不上来，那么你就不要再纠结这个，抉择虚心的像面试官求教。面试官会十分违心给你解答这个问题。但如果你死磕这道题，面试官无疑感觉你在硬撑着浪费时间，会给面试官留下不好的印象，所以千万不要这样做，学会有答必应，无答则问。

刷面试高频题

1、JavaScript

• 讲讲 js 数据类型？根本和援用的区别？symbol 和 bigint 讲一讲利用场景？
• 判断数据类型的办法？instanceof 原理? 判断空对象？typeof null？typeof NaN？
• var/let/const 区别？暂时性死区？块级作用域？const a = {}; a.x = 1 能不能批改？
• 说说你对函数式编程的了解？函数柯里化的了解？平时的应用场景？
• 防抖、节流的含意，应用场景？手写一下？
• call、apply、bind 区别？bind 实现？bind 之后还能批改 this 指向吗？为什么？
• 闭包概念，最次要的还是问闭包的场景？
• 用 es5 实现 es6 类的继承？各种继承问的挺多的
• 深拷贝与浅拷贝？罕用办法？手写一个深拷贝函数？
• 说说你晓得的 JavaScript 设计模式？观察者和公布订阅的区别？手写一个公布订阅？我真的写了
• 说说对你对 JavaScript 异步编程的了解？
• ES Module 与 CommonJS 模块的差别？两者相互加载的形式？个别会扯到 AMD

• Promise.all、race、allSettled 概念、手写？很多手写题都会用到，比方用 promise 实现申请并发个数限度？

  Css

• 程度垂直居中？兼容性？不晓得宽高状况下？
• BFC 概念？作用？罕用场景？
• Flex？留神 flex：1 的含意，个别会给你个场景题
• 盒模型概念，如何切换盒模型？
• 实现 1px 边框？1px 线条？

• 伪类和伪元素区别？应用场景？

  Http & 浏览器

• 浏览器缓存？http 缓存？次要要讲一讲强缓存、协商缓存、preload、prefetch、Service Worker 等，304 的含意？协商缓存 e -tag 是怎么生成的？Last-Modified 是基于什么生成的？两者比照一下？优先级哪个高？
• 什么是跨域？什么状况下会跨域？浏览器依据什么字段判断是否容许跨域？跨域的解决方案有哪些？options 申请理解过吗？说说 CORS 中的简略申请和简单申请？form 表单提交会跨域吗？
• 讲一讲浏览器事件循环 Event Loop？node 事件循环形容一下？
• http2 有哪些新个性？http2 还有哪些缺点？http3 的一些理解？
• 从输出 URL 到页面加载实现的过程，个别要很具体的形容：包含 DNS 查问，缓存查问，3 次握手，4 次挥手，浏览器渲染过程等，面试官会从外面再挑几个问题深刻问，比方为什么是 3 次握手 4 次挥手？渲染过程中的 GUI 渲染线程、JS 引擎线程、事件触发线程等等？可能会问到过程线程的区别？浏览器为什么是多过程？js 为什么是单线程？怎么反对多线程？等等

• https 加密原理？次要是讲对称加密和非对此加密联合应用的一个过程。什么是中间人攻打？和 http 区别？

  Vue

• 生命周期？那个生命周期能够获取到实在 DOM？批改 data 外面的数据，会触发什么生命周期？
• 组件 data 为什么是一个函数？
• vue 组件通信？个别说了 vuex，就会问 vuex 用法？action 和 mutations 区别？实现原理等？
• vue 导航守卫，分全局和组件的，个别用于权限管制，这个就可能扯到我的项目中的一些鉴权问题。
• $nextTick 作用？实现原理？微工作向宏工作的降级解决，常常被问到说出几种宏工作，微工作。
• vue 响应式原理？根本都会问
• vue scoped 属性作用？实现原理？
• vue router 有几种模式？实现形式？
• key 的作用？没有 key 的状况，vue 会怎么做？会引出 diff 的问题
• vue diff 过程，和 react diff 区别？
• vue 2.x defineProperty 缺点？业务代码外面怎么解决？$set 原理？vue 是怎么重写数组办法的？考查你是不是真的看过源码
• vue 3.0 proxy 优缺点？怎么解决 vue3 不反对 IE？

• computed 和 watch 的区别和使用的场景？除了根本的，看你能不能说出三种 watcher 的区别

  React

• 生命周期详细描述一下？官网为什么扭转？
• 说说你对虚构 DOM 的了解？间接全量更新和 diff 哪个快（这个问题要分状况）？
• 什么是 HOC？React 外面用过哪些？可能让你实现一个 add(1)(2)(3)的函数
• Fiber 干了什么事件？requestIdleCallback 理解多少？
• react 性能优化？
• hooks 呈现的意义？类组件和函数组件之间的区别是什么？
• 为什么不要在循环、条件语句或者嵌套函数中调用 hooks？记住官网的一句话，Not Magic, just Arrays
• setState 同步还是异步？比拟常问，问的可能也比拟深刻

• 如何防止组件的从新渲染？memo/useMemo、PureComponent？useMemo 和 useCallback 区别？

  其余

  webpack 根本也是必问，得零碎学习一下

• webpack 构建流程？打包原理？
• 我的项目中做的一些优化？
• loader 和 plugin 的区别？有没有写过？罕用哪些 loader 和 plugin
• webpack 热跟新原理？
• tree-shaking？对于 CommonJS，tree shaking 怎么办？
• webpack loader 的执行程序？从左到右？从上到下？
  其余
• 我的项目做过的一些性能优化，根本必问
• 长列表渲染怎么优化？
• 各种懒加载的实现原理？路由？图片？

• Typescript 中的 interface 和 type 到底有什么区别

  其余的一些货色，次要还是看你简历上写了什么，或者你的答复有什么面试官感兴趣的词。尽量突出本人的劣势，施展好就行，后果对本人的测验，不是对本人的否定，加油💪🏻

我把面试题及附带答案整顿在一起，造成一份前端面试题笔记，筹备好面试，也要相熟面试题。点击这里即可获取。

小结

作为技术人，最重要的就是本人的技术能力，很多人在刚毕业的时候一腔热血，每天打鸡血个别通宵工作也不嫌累，然而起初被社会毒打的次数多了，很容易就困倦了，可能有的人喊着喊着就放弃了，开始安于现状，这是很危险的事件，技术这条路逆水行舟，只有继续学习能力在技术这条路上越走越远

而另外一方面，主观的艰难的确又是存在的，比方工作量太大没工夫，前端技术倒退太快学不完等，这就须要你找到一条可继续倒退的路线，比方每周认真研读一篇高质量技术文章，或者定期地进行总结，不要给本人太大的压力，但又必须要放弃学习和提高

无论你抉择的办法是什么，最终最重要的还是要落到实处，珍藏了一大堆优良文章的链接放在收藏夹吃灰是没用的