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') // true

function 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，原生