当前位置：首页 > article >正文

面试总结：2024前端面试题

article 2025/3/15 19:20:49

前几天写了一篇对面试官的吐槽，今天来总结一下最近面试的一些题目。题目不分具体公司了，毕竟题目的重复率不会特别高，就多做准备吧。

技术面还是离不开“八股文”，个人不喜欢也没办法，硬着头皮上，下面分几个模块来说吧，都是大厂里比较高频的。

一、原生js知识点

1、事件循环

概念都知道，用法也知道，但是面试官会把多个事件混用考察，多找个这方面的案例跑一下看看确认自己的思路就行。有个点：大家知道微任务优先级高，如果主线程或者微任务执行中，用户这时候点击，先执行哪个？（答案，点击没反应）诸如此类吧。

2、闭包

为什么溢出，答案：栈上只是存了一个指针，指针就是堆上对象的的地址；我们的程序通过这个指针句可以操作堆上的对象。栈上的这个指针是自动管理的，当函数退出后，就销毁了；这样程序就在没办法访问到堆上的这个对象了，而堆上的这个对象这个时候就会被我们的GC自动回收了；如果回收不了，就是内存泄漏了。

另外看看例子，有可能会让你写出来。

3、设计模式

有哪些设计模式，有什么应用场景，自己用到过哪些。可以跟前端框架联系看看，比如框架初始化：单例模式、页面data：工厂模式、双向绑定：发布订阅模式等。

4、ES6

箭头函数、instanceof、Proxy，都比较长问到，具体看其知识点吧，这块纯考学和记。

二、手写原生函数平替

篇幅原因就不写代码了，抛砖引玉

Promise、call、add、setTimeout实现setTnterval等

有些场景涉及优化实现，可能会写Promise.all等衍生代码，还有就是发布订阅模式等。

三、算法

这块我也简单列吧，算法太多了，很少有重复的：分饼干、分饼干、查中位数、排列组合等。总的来说贪心和动态规划的类型较多。算法这个东西就是得多做，否则没思路就是做不出来。

四、浏览器

1、缓存

强制缓存主要取决于两个字段 Expires 和 Cache-Control 中的 max-age 字段，他是一个相对值，即客户端获取到这个文件多少秒后失效，其判别权力全权交由浏览器，这会相对更准确些。

协商缓存主要由 ETag 和 Last-Modified 两个字段来实现，通过上述两个字段就可以判断当前文件是否是最新的数据。

2、WebSocket和web workers的区别

WebSocket支持长链接，建立在TCP上维持双向通信，用来做即时通讯。

WebSocket可以创建后台线程，通过postmessage和onmessage进行通信，用来做性能优化。

3、web安全

CSRF、XSS、SQL注入、dos攻击、流量劫持等。

4、http/https

这块比较杂，涉及请求头内容、不同版本的区别、https的加密过程等。

5、其他

浏览器渲染、dom树、存储相关等，浏览器上的问题好多大厂都会问。

五、前端框架

1、vue和react的区别

我觉得这块除了“标准答案”上的几点（思想、响应原理、diff、组件写法、渲染过程、状态管理等），可能还要说下具体使用感觉上的不同。

2、vue2.0和3.0的区别

网上有标准答案：框架构建、双向绑定、生命周期、diff、tree-shaking、api、路由、模板指令等，基本都换了个遍。

3、关于vue3.0的优化点

vue3.0为什么用Proxy：绑定对象，有利于双向绑定； Composition API的好处：使组件具有生命周期，解决命名冲突等问题。等等.....

4、组件通讯方式

父到子、子到父、全局，用过的都知道，直接说就行。

5、vue数据不更新的原因

涉及数组和对象的问题，常见的开发问题，这类问题完全是开发经验的体现了，能看出你平时是否经常用。

6、React Hooks

类组件：是基于 ES6中的 Class 写法，通过继承 React.Component 得来的 React 组件，有state状态和声明周期，但是不好复用。函数组件：就是以函数的形态存在的 React 组件，内部无法定义和维护 state，因此它还有一个别名叫“无状态组件”，但是轻量灵活。 Hooks：为了让函数组件更有用，目标就是给函数组件加上状态（类组件通过HOC实现复用），有助于分离，但是依旧不是完美的，组件能力有限，需要在react函数顶层使用等。