2024年前端最全疫情影响下一枚前端的求职之路（面试题）--2024(2)，2024年最新面试知识积累

最后

javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。

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

前言

我在六月初裸辞，准备了一周，离开了青岛，踏上去往杭州的求职之路。之后经历了两周半的面试，终于找到了一家心仪的公司，在这里记录一下面试过程中遇到的面试题，大家仅供参考。
受疫情影响，今年的行情没有往年好，我也是年轻气盛，没有考虑这么多就直接裸辞了，在这里劝大家一定要找好下一家在辞职，不然压力会很大。
杭州这边面试流程会比较长，一面二面三面HR面，一二三面都是技术面，一面一般问的不是很难，都是基础题，大厂会问的比较深入一些。有的公司二面三面是一起的，一般是技术主管/总监面试，会根据你的简历上的内容问一些东西，所以不会的东西一定不要写在简历上，以免坑自己，二三面的问题会更加偏向于“为什么”，而不是“怎么做”，所以在平时要更加注重一些技术实现的原理。

面试题

css方面

1. 一个盒子如何做到水平垂直居中？出现频率：高！
2. css的一些选择器有哪些？
3. 说一下css的盒模型？出现频率：高！
4. px、em和rem的区别？
5. 你遇到的一些IE8的兼容性问题如何处理？因为我在简历上写了做过兼容IE8的项目。

js方面

1. js的数据类型有哪些？
   原始数据类型：Null、Undefined、Boolean、String、Number、Symbol(ES6新增)
   引用数据类型：Object 为引用类型，包括：Array, Function, Date, RegExp
2. 由上一个问题引出，如何判断数据类型？
   typeof和instanceof
3. 由上一个问题引出，typeof和instanceof的区别？null为什么会判断为Object？
   typeof和instanceof原理
   一句话回答：
   typeof原理： 不同的对象在底层都表示为二进制，在Javascript中二进制前（低）三位存储其类型信息。
   在Javascript中二进制前（低）三位都为0的话会被判断为Object类型，null的二进制表示全为0，自然前三位也是0，所以执行typeof时会返回"object"。
   instanceof：用来比较一个对象是否为某一个构造函数的实例。只能用于对象，不适用原始类型的值。
4. 如何判断一个数组？除了instanceof说出几种其他方式。
   toString、isArray、constructor
   在JavaScript中，如何判断数组是数组？
5. 说一下事件捕获和事件冒泡？出现频率：高！
   事件冒泡：由最具体的元素接收，然后逐级向上传播至最不具体的元素的节点。
   时间捕获：与事件冒泡相反
   如何阻止事件冒泡：stopPropagation()、preventDefault()、@click.xxx.stop
   你真的理解 事件冒泡 和 事件捕获 吗？
6. 防抖函数和节流函数，如何实现以及区别？出现频率：高！
   简单回答（入门级）：https://juejin.im/post/5b651dc15188251aa30c8669
   深入理解（进阶级）：https://juejin.im/post/5d1bf9edf265da1b7004c3e1
7. 一个页面从输入url到加载的全过程？出现频率：高！
   https://juejin.im/post/5bf3ad55f265da61682afc9b
   类似回答有很多，百度一下即可
8. 由问题7引出，说一下浏览器的缓存？出现频率：较高！
   强缓存和协商缓存
   强缓存规则：response headers 中的 Cache-Control，取值有，max-age（过期时间） 、 no-cache（不进行强缓存）、no-store （不强缓存，也不协商缓存）、private（仅浏览器可以缓存）、public（浏览器和代理服务器都可以缓存）
   协商缓存：
   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？

HTTP

• HTTP 报文结构是怎样的？

• HTTP有哪些请求方法？

• GET 和 POST 有什么区别？

• 如何理解 URI？

• 如何理解 HTTP 状态码？

• 简要概括一下 HTTP 的特点？HTTP 有哪些缺点？

• 对 Accept 系列字段了解多少？

• 对于定长和不定长的数据，HTTP 是怎么传输的？

• HTTP 如何处理大文件的传输？

• HTTP 中如何处理表单数据的提交？

• HTTP1.1 如何解决 HTTP 的队头阻塞问题？

• 对 Cookie 了解多少？

• 如何理解 HTTP 代理？

• 如何理解 HTTP 缓存及缓存代理？

• 为什么产生代理缓存？

• 源服务器的缓存控制

• 客户端的缓存控制

• 什么是跨域？浏览器如何拦截响应？如何解决？

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

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