最新疫情影响下一枚前端的求职之路（面试题）--2024，前端性能优化总结

跳槽是每个人的职业生涯中都要经历的过程，不论你是搜索到的这篇文章还是无意中浏览到的这篇文章，希望你没有白白浪费停留在这里的时间，能给你接下来或者以后的笔试面试带来一些帮助。

也许是互联网未来10年中最好的一年。WINTER IS COMING。但是如果你不真正的自己去尝试尝试，你永远不知道市面上的行情如何。这次找工作下来，我自身感觉市场并没有那么可怕，也拿到了几个大厂的offer。在此进行一个总结，给自己，也希望能帮助到需要的同学。

面试准备

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

面试准备根据每个人掌握的知识不同，准备的时间也不一样。现在对于前端岗位，以前也许不是很重视算法这块，但是现在很多公司也都会考。建议大家平时有空的时候多刷刷leetcode。算法的准备时间比较长，是一个长期的过程。需要在掌握了大部分前端基础知识的情况下，再有针对性的去复习算法。面试的时候算法能做出来肯定加分，但做不出来也不会一票否决，面试官也会给你提供一些思路。

协商缓存：
ETag/If-None-Match：Etag就像一个指纹，资源变化都会导致ETag变化，跟最后修改时间没有关系，ETag可以保证每一个资源是唯一的。If-None-Match的header会将上次返回的Etag发送给服务器，询问该资源的Etag是否有更新，有变动就会发送新的资源回来
Last-Modified/If-Modified-Since：Last-Modified 表示本地文件最后修改日期，浏览器会在request header加上If-Modified-Since（上次返回的Last-Modified的值），询问服务器在该日期后资源是否有更新，有更新的话就会将新的资源发送回来。
协商缓存Last-modified/Etag没有过期时，服务端返回状态码304。
浏览器缓存
9. 由问题7引出，说一下三次握手和四次挥手。
很经典的问题，一般不会问的很深入
面试官，不要再问我三次握手和四次挥手
10. http和https的区别？
也是一个常规的问题，这个问题做过准备，但是我遇到的很少问。
11. js实现继承的方式？出现频率：必问！
原型和原型链，老生常谈的问题了
简单理解
原型和原型链
JavaScript实现继承的方式
12. 问题11一般会延伸一下，es6的继承。这个最好自己说出来，不要等面试官问。
关于es6的问题，推荐阮一峰老师的《ECMAScript 6 入门教程》，网上有电子版的，实体书也有
https://es6.ruanyifeng.com/
13. 闭包了解吗，详细说一下？出现频率：必问！
对闭包的理解
JavaScript 闭包
JavaScript 闭包入门（译文）
闭包也是比较经典的问题了，各种分析数不胜数
14. es6了解吗，说一下你用过哪些？出现频率：高！
es6那本书里有
15. promise了解吗，详细说一下？出现频率：高！
同上
16. 由promise引出Await/Async，说一下两者的区别？这个最好也是自己引出来。
同上
17. 前端的安全问题了解过吗？csrf和xss，出现频率：较高！
比较常见的是csrf和xss
csrf：跨站请求伪造，如何防止：Referer、Token、服务端增加多重安全校验
xss：跨站脚本攻击，如何防止：输入验证、定义域名白名单
更加详细的解释：「前端食堂」想进大厂必须要知道的Web安全问题
18. 事件委托用过吗？
同问题5
19. 由14引出，普通函数和箭头函数的区别？
主要是this区别，如果能答出其他方面就更好了
普通函数与箭头函数的区别
20. 为什么会产生跨域，如何解决？出现频率：必问！
前端跨域方法论
补充：如果只是为了解决开发环境的跨域，chrome插件也可以，这个比较冷门，看了很多博主的回答都没有提过
21. session和cookie的区别？
Cookie 和 Session 关系和区别
22. javastring的垃圾回收机制了解吗？
这个问题关联的知识点比较多，栈和堆、执行上下文、内存回收机制。如果只是回答这个问题，那就是：引用计数和标记清除，具体了解
https://juejin.im/post/5dba7c24518825036974d707#heading-10
23. eventLoop事件环。一般不会直接问，而是通过一些代码的执行顺序问，这个也比较重要。
带你彻底弄懂Event Loop
是不是感觉自己理解了，来几道题测试一下
【建议星星】要就来45道Promise面试题一次爽到底(1.1w字用心整理)
24. BFC知道吗？
学习 BFC (Block Formatting Context)
前端进阶之什么是BFC？BFC的原理是什么？如何创建BFC？
25. 对于http请求有了解过嘛？常见的状态码都有那些？如果接下来问缓存，还会问强制缓存和协商缓存返回的状态码。
答一下get请求和post请求以及区别，还会问你做没做过一些请求的封装，按照实际情况回答，如果没做过的话，先去了解下。状态码2xx、3xx、4xx、5xx
具有代表性的 HTTP 状态码
26. 浏览器的回流和重绘了解过吗？如何避免？
你真的了解回流和重绘吗
27. 深拷贝知道吗？说一下具体实现？
浅拷贝比较简单，使用Object.assign，对于二维数组的深拷贝可以使用JSON.parse(JSON.stringify(arr))
那更加复杂的对象的深拷贝呢：
自己来实现一个深拷贝函数
深拷贝的终极探索
28. 图片懒加载原理是什么？
比较简单，图片懒加载原理

Vue方面

1. vue的生命周期说一下？出现频率：必问！
   Vue 的生命周期指的是组件从创建到销毁的一系列的过程，被称为 Vue 的生命周期，包括初始化–挂载–更新–销毁过程，对应的钩子函数：
   beforeCreate（初始化界面前）
   created（初始化界面后）
   beforeMount（挂载前）
   mounted（挂载后）
   beforeUpdate（更新数据前）
   updated（更新数据后）
   beforeDestroy（卸载组件前）
   destroyed（卸载组件后）
2. 在哪个阶段可以获取到Dom？
   mounted
3. vue组件间的通讯方式有哪些？父子、隔代、兄弟组件通信。出现频率：必问！
   props 和 $emit、$parent 和 $children、vuex等等，更加详细的回答：
   vue组件间的通讯方式总结
4. vue中常见的指令有哪些？出现频率：较高！
   v-if v-show v-bind v-for v-html v-text v-on v-model v-cloak
5. 由问题4引出，v-if和v-show的区别？
   官网有解答，其实大部分问题官网都有，所以说回归官网文档很重要，
   v-if vs v-show
6. 谈谈你对vuex的理解？出现频率：必问！
   Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store（仓库）。“store” 基本上就是一个容器，它包含着你的应用中大部分的状态 ( state )。
   （1）Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
   （2）改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化。
   主要包括以下几个模块：
   State：定义了应用状态的数据结构，可以在这里设置默认的初始状态。
   Getter：允许组件从 Store 中获取数据，mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。
   Mutation：是唯一更改 store 中状态的方法，且必须是同步函数。
   Action：用于提交 mutation，而不是直接变更状态，可以包含任意异步操作。
   Module：允许将单一的 Store 拆分为多个 store 且同时保存在单一的状态树中。
   其实这种问题只要用过不难回到。
7. vue的双向数据绑定原理？出现频率：必问！
   通过数据劫持结合发布订阅模式的方式来实现的，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
   Vue双向数据绑定原理（分析与代码）
8. 一般由上一个问题引出，vue3.0的数据绑定了解过吗？然后继续问，vue3.0和2.x的区别？出现频率：较高！
   vue3.0 的响应式数据是通过es6 的Proxy来实现的
   解析Vue2.0和3.0的响应式原理和异同(带源码)
   vue2.0响应式到vue3.0响应式原理
9. MVVM是什么？出现频率：较高！这个问题一般是第一个问的。
   即Model-View-ViewModel
   M - Model，Model 代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑
   V - View，View 代表 UI 组件，它负责将数据模型转化为 UI 展现出来
   VM - ViewModel，ViewModel 监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步 View 和 Model 的对象，连接 Model 和 View
10. computed和watch区别？
    computed：计算属性，它会根据你所依赖的数据动态显示新的计算结果。计算结果会被缓存，computed的值在getter执行后是会缓存的，只有在它依赖的属性值改变之后，下一次获取computed的值时才会重新调用对应的getter来计算，computed是同步的
    watch：更像是一个 data 的数据监听回调，当依赖的 data 的数据变化，执行回调，在方法中会传入 newVal 和 oldVal。可以提供输入值无效，提供中间值 特场景。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。如果你需要在某个数据变化时做一些事情，使用watch。
11. 由问题3引出，父组件到子组件所触发的生命周期？
    组件的调用顺序都是先父后子,渲染完成的顺序是先子后父。
    组件的销毁操作是先父后子，销毁完成的顺序是先子后父。
    加载渲染过程
    父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount- >子mounted->父mounted
    子组件更新过程
    父beforeUpdate->子beforeUpdate->子updated->父updated
    父组件更新过程
    父 beforeUpdate -> 父 updated
    销毁过程
    父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
12. webpack使用过吗？说一下一个具体的例子？
    这个回答的不是很好，有没有大神可以补充一下
13. vue-router使用过吗？说一下hash和history模式区别？出现频率：高！
    url 展示上，hash 模式有“#”，history 模式没有
    刷新页面时，hash 模式可以正常加载到 hash 值对应的页面，而 history 没有处理的话，会返回 404，一般需要后端将所有页面都配置重定向到首页路由。
    兼容性。hash 可以支持低版本浏览器和 IE。
14. 说一下vue-router的路由守卫？
    beforeEach和afterEach，说了一下我在实际开发中的应用，导航守卫
15. history模式需要后端配置一下，不然会404，知道为什么吗？
    Vue Router history模式的配置方法及其原理

react和vue的比较

相同
1）vitual dom
2）组件化
3）props，单一数据流

不同点
1）react是jsx和模板；（jsx可以进行更多的js逻辑和操作）
2）状态管理（react）
3）对象属性（vue）
4）vue：view——medol之间双向绑定
5）vue：组件之间的通信（props，callback，emit）

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】**

[外链图片转存中…(img-4bA7jWqF-1715266878825)]

[外链图片转存中…(img-ywSEaWrd-1715266878826)]