2024前端面试题分享
前言
最近忙着面试很久没有更新文章了，分享一下我收集的前端面经，当然题目仅供参考（乞求秋招offer）
面试题
响应式布局 ---根据用户的的窗口变化而变化的布局方式
react 的hooks ---官方提供的钩子和自定义的钩子，用来处理状态变化，视图更新，和逻辑复用
useMome 和useCallBack ---没有了解
性能优化（懒加载，缓存，压缩） ---减少网络请求，使用浏览器缓存，减小打包的体积，使用动态路由
webpack打包控制 ---设置打包的文件名，和被打包的文件类型，排除不需要打包的文件、文件夹，转换js的规范
无感刷新 token 的意义 ---使用双token，当主token失效后，刷新token代替请求，用户就不需要重新验证身份，
url输入到浏览器发生了什么 ---会检查本地的dns表查找ip，没有找到则向dns服务器发送请求获取ip，访问到ip后拿到页面数据，开始按html，link，script的顺序渲染页面；这里包含了异步处理，则会被塞到异步队列中等待同步任务处理完后执行异步操作web Woker（接受一个脚本文件，后台使用线程处理，不影响主线程，通过消息事件<message>传递信息）
Webpack为什么打包、进行压缩之后，性能就会提高呢 ---降低了代码的体积，去除了模块化，页面请求的数据变少了，获取脚本的速度变快了
为什么使用webpack ---webpack可以优化web的体积和性能，打包时可以设置文件指纹，保证页面的实时更新，打包后的代码被混淆处理，不便阅读反解，保护代码的版权
对原始值的拆包和解包 ---没有了解
For of和For in的区别 ---for of是迭代对象遍历值的语法糖，基于symbol.iterator属性实现的，for in 是遍历引用类型的属性，从而遍历整个对象的
判断数据类型的方法 ---基本数据类型使用 type of ，引用数据类型使用 instanceof ，要注意的点typeof null 是Object，instanceof是判断原型链上的对象是否存在，数组可以使用Array.isArray来判断，它的原理是将值使用tostring方法和 [array object]对比
深拷贝、浅拷贝 子问题：JSON.parse( JSON.stringify(arr))在深拷贝时有哪些需要注意 ---当对象有undefined和null属性值或者数组内有空数组时，json序列化会排除掉这些空值
数组的常用静态方法和实例方法？ ---Array.isArray，Array.from，push，pop，map，filter，splice
子问题：①哪些方法会修改原数组、哪些不会？ ---push，pop，splice会改变，map不会改变原数组，但是内部的回调会改变
②数组Pop方法的返回值 ---数组被删除的第一个元素
③使用哪些数组方法可以实现浅拷贝 ---map
④slice()第二个参数为-1是什么意思 ---裁剪到数组的倒数1位，
⑤splice()有什么用 ---可以实现数组的插入，删除
对Promise的理解？Promise规范有了解吗？Promise的缺点 ---promise时异步处理的解决方法，它可以将异步的方法保存起来，使用回调的方式处理异步结果； ；promise对于多次异步的处理会产生大量回调，代码不易维护
子问题：①有哪些静态方法和原型方法②catch方法之后还可以进行链式调用吗 ---实例方法then，catch ，静态方法，all；可以catch方法相当于只处理reject状态的回调，任然会返回一个promise
请求头content-type的类型有哪些 ---html 、image、json
子组件和父组件加载顺序 ---同步先于异步，父组件先于子组件，
事件修饰符.sync ---没有了解，字面意思应该是一个异步事件，推后执行
Vue2中Computed计算属性的特性以及实现原理 ---可以设置值，拦截访问，getter和setter处理
console.log(null == undefined) // true
console.log(true == 2) // false
console.log(null == 0) // false
console.log(1 == '1') // truefunction test(age) {
console.log(age);
var age = 20;
console.log(age);
function age() {}
console.log(age);
}
// 参数function ， 20 ，20 ；函数优先会被提到最前面，var将age重新赋值，和传入的age无关
flex 1和 flex auto的区别 ？ ---flex 1是 1 1 0，flex auto是 1 1 auto auto的伸缩会将剩下的空间全部取走
http2 和 http1.1的区别？ ---不清楚，没有深入了解
说一下浏览器缓存 ---浏览器会保存首次的网络请求资源，对于后续的同名文件和请求，会将保存的资源返回，比如，随机的api请求，多次请求返回的是同一组数据
说一下跨域怎么处理的 ？jsonp说一下原理 ---使用本地服务器代理请求，在返回给页面，
继承方法有哪些 ---class，prototype，类和原型
解决跨域的方式有哪些 ---cors，jsonp
react router有哪些常用的路由模式？ ---BrowserRouter 和 HashHistory， ‘/’和‘#’
讲一下扩展运算符的使用，好处是什么，set解构和map解构 ---简化属性的提取，set和map使用数组的结构方式结构
set是否支持forEach循环 --- 支持set的原型上有foreach方法
说一下对ajax的了解，基于什么去实现的，有什么样的一个功能 ---基于xmlhttprequest，可以获取后端传递的json数据，异步不阻塞主进程，并且不会触发页面的整体变化
ajax跟fetch应用上有什么区别，什么时候用ajax，什么时候会用fetch ---ajax基于xmlhttprequest只能在浏览器中使用，fetch是支持浏览器和node
说一下了解的webpack，输入输出和构建流程 ---在webpack.config.js文件中设置打包规则，包括，指定文件夹，文件类型，打包的es6语法转换,
webpack构建好的产物都是什么？你是如何部署的？前端平台的部署是一个什么流程？ ---一个主要的html，和其他的js脚本css样式文件，以及静态资源，将打包好的dist文件夹中的文件部署到github的分支，在将这个分支用github的静态page功能部署，暂时没有用过平台部署
github给你分配了一个链接，这个链接是如何代理到你打包好的前端资源上的？ ---这个链接会和存放资源的服务器ip构成一个dns表，而打包 好的资源就存放在服务器上
webpack热更新实现原理
react组件通讯的方式有哪些 ---props透传，useContext深层传递的钩子
说一下react的diff算法
输入 url 到请求返回发生了什么
了解浏览器缓存吗？浏览器缓存有哪些？
强缓存和协商缓存
EventLoop是什么？浏览器事件循环和Nodejs事件循环有什么区别？
怎么做前端工程化规范？ （prettier、eslint、commitlint、webpack/vite、CI/CD）
Promise 有哪些静态方法？(all、race、allSettled)说一说 Promise.allSettled 方法？
async / await 原理？（generator语法糖）
TypeSctipt 如何将一个联合类型缩小为具体类型？
你的项目的js或css文件大概多大？多大比较合适？为什么?
异步事件都有哪些区别？（宏任务、微任务）
前端常用优化性能方式？
说一说块盒子和内联盒子的特点？ a. 两者设置内边距和外边距有什么区别？ 内联元素设置边距：左右正常，上下无作用
讲一讲 BFC 和触发的条件？
说一下 JS 变量类型，怎么判断它们 和 它们的优缺点
cookie，session和token的区别
讲一下变量提升
说一下vue组件间的通信
之前做的项目有开发环境和生产环境的区分吗？怎么区分
vue双向绑定中，界面驱动数据的监听方式是什么
ts最大的特点是强类型，你觉得怎么用好他？有必要吗？强调了是两个问题
react会有一个入口文件来运行，运行时发生了什么？
css实现三栏布局
http1和http2的区别
https的加密过程1. 变量作用域和this指向问题,说输出
var bar = 'window'
function say() {
var bar = '111'
console.log(bar)
console.log(this.bar)
}
const obj = {
bar: '222',
say() {
console.log(bar)
console.log(this.bar)
}
}
say()
obj.say()
obj.say = say
obj.say().async函数输出顺序问题
async function f1() {
console.log(1)
}
async function f2() {
console.log(2)
await console.log(3)
// 取消注释后输出顺序又是怎样
// console.log(5)
}
function f3() {
console.log(4)
}
f1()
f2()
f3()
手写题：手写深拷贝 ( 支持 原型继承 和 循环调用 )
实现一个函数，可以将数组转化为树状数据结构
1. 数组只有一个没有 parentId 的元素，为根节点
2. 输出一个根节点，打印出树状结构
// 入参格式参考：
const arr = [
{ id: 1, name: 'i1' },
{ id: 2, name: 'i2', parentId: 1 },
{ id: 4, name: 'i4', parentId: 3 },
{ id: 3, name: 'i3', parentId: 2 },
{ id: 7, name: 'i7', parentId: 3 },
{ id: 8, name: 'i8', parentId: 3 }
]
数组实现reduce、map算法：最大子数组和
算法：最长不重复字符串
① 数组扁平化（函数传入两个参数，第一个为数组，第二个为扁平化层级） ② 实现斐波那契数列
扁平数组 转 树结构找出出现最多次的字符
写一个函数，实现输入的ajax请求串行输出（可用递归、迭代、await都可以）。
二叉树、完全二叉树、满二叉树区别
二叉树遍历时间复杂度，最好最坏
二叉树遍历方式，以哪个节点为主 ？手写监听数组 ---重写原型方法（push，pop，shift，unshift），使用proxy监听对象的方式
链表反转一只青蛙可以一次跳上2个台阶，也可以调试1个台阶，求跳上n级台阶共多少种跳法
算法：括号匹配
写一个重复执行函数
写一个函数遍历统计页面上所有的dom元素，并且以对象的形式返回
以下是本人实际面试的题目
一、
介绍项目中的难点http请求中有什么内容，（http响应头，http状态码，http的传输方式，网络模型，https，tcp/ip）
tcp协议有什么特点
计算机网络的分层
http2.0新增了什么（和http1有什么区别）
react和vue有什么区别
手写题：
判断变量输出var a = 0;
var b = 0;
var c = 0;
function fn(a){
console.log('fn',a++,c);
function fn2(b){
console.log('fn2',a,b,c);
}
var c = 4;
fn = fn2;
}
fn(1)
fn(2)事件循环输出
console.log('start');
async function async1(){
console.log('async1 start')
await async2();
console.log('async1 end')
}
async function async2(){
console.log('async2')
}
setTimeout(()=>{
console.log('setTimeout')
},0)
async1()
new Promise((res)=>{
console.log('Promise1')
res()
}).then(()=>{
console.log('Promise2')
})console.log('end');
反转链表 ，链表有什么特点
反问：
哪里需要加强提升？（知识点应该学习的深入一些，算法需要多练）
二、写一个vue项目，你会怎么实现
vue3的生命周期
solt插槽是怎么使用的sesstion和cookie
跨域问题怎么解决
是否了解web安全
for in和for of{
a:1 ,
b: [1,2,3,4,5],
c: ()=>{},
d: {
e: null,
f: {
}
}
}三、
介绍项目，歌词和进度条是怎么保持一致的？项目中歌曲可以播放的格式有哪些？
vue2转vue3怎么实现？
js的事件循环是什么？
反问，公司的技术方向是什么？前端开发人数有多少？
自我介绍问项目问题，echart图表是怎么用的？
h5和css3有没有了解？有什么新特性？
有没有用过ai编程？（colipot）
学习的过程有没有遇到困难不理解的地方？是怎么解决的
遇到不会的问题会怎么查？
认为自己有什么优缺点？
闲聊了几句，家在哪里，目前居住在哪里？
四、
自我介绍
为什么选择学习前端，说一下前端的学习路线
介绍项目的难点以及是怎么解决的
如果项目启动的时候有白屏，怎么解决？
vue2和vue3的区别？proxy实现响应式为什么更好？
webpack怎么优化性能？
反问：公司的前端的技术方向是什么？vue
五、
自我介绍
项目中有懒加载的效果是怎么实现的？
知道块级标签和行内标签是怎么排布的吗？分别有哪些标签呢？
input标签有哪些type类型？
了解语义化标签吗？有哪些标签是语义化标签呢？
浏览器的标准模式和怪异模式，怪异模式下会怎么渲染dom？
css有哪些选择器？伪类选择器有哪些？
css怎么实现一个水平垂直居中的布局？
有哪些position定位属性？分别是什么效果？
js的事件传递机制是怎么样的？（ul里有一个li，触发点击时怎么响应事件，如果要让ul先触发怎么实现？）
反问：公司的前端的技术方向是什么？vue，react，原生