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,原生

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/53343.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

嵌入式面试经典30问:二

1. 嵌入式系统中&#xff0c;如何选择合适的微控制器或微处理器&#xff1f; 在嵌入式系统中选择合适的微控制器&#xff08;MCU&#xff09;或微处理器&#xff08;MPU&#xff09;时&#xff0c;需要考虑多个因素以确保所选组件能够满足项目的具体需求。以下是一些关键步骤和…

Qt/C++ 个人开源项目#串口助手(源码与发布链接)

一、项目概述 该串口助手工具基于Qt/C开发&#xff0c;专为简化串口通信调试与开发而设计&#xff0c;适合新手快速上手。工具具有直观的用户界面和丰富的功能&#xff0c;旨在帮助用户与串口设备建立可靠通信&#xff0c;便于调试、数据传输和分析。 二、主要功能 波特率&a…

【信创建设】信息系统信创建设整体技方案(word原件完整版)

信创&#xff0c;即“信息技术应用创新”。我国自主信息产业聚焦信息技术应用创新&#xff0c;旨在通过对IT硬件、软件等各个环节的重构&#xff0c;基于我国自有IT底层架构和标准&#xff0c;形成自有开放生态&#xff0c;从根本上解决本质安全问题&#xff0c;实现信息技术可…

多款式随身WiFi如何挑选,USB随身WiFi、无线电池随身WiFi、充电宝随身WiFi哪个好?优缺点分析!

市面上的随身WiFi款式多样琳琅满目&#xff0c;最具代表性的就是USB插电款、无线款和充电宝款。今天就来用一篇文章分析一下这三种款式的优缺点。 USB插电款 优点&#xff1a;便宜&#xff0c;无需充电&#xff0c;在有电源的地方可以随时随地插电使用&#xff0c;比如中兴的U…

MATLAB基础应用精讲-【数模应用】正交实验

目录 前言 算法原理 什么是正交实验 在测试中的作用 使用正交试验法的原因 什么是正交试验法? 正交实验基本设计思想 正交表 正交实验的操作方法 正交实验结果分析方法 SPSSAU 正交实验案例 1、背景 2、理论 3、操作 5、文字分析 6、剖析 疑难解惑 正交表和…

Spring Boot 部署方案!打包 + Shell 脚本详解

本篇和大家分享的是springboot打包并结合shell脚本命令部署&#xff0c;重点在分享一个shell程序启动工具&#xff0c;希望能便利工作&#xff1b; profiles指定不同环境的配置 maven-assembly-plugin打发布压缩包 分享shenniu_publish.sh程序启动工具 linux上使用shenniu_p…

python进阶篇-day07-高级语法与正则

day07-python其他高级语法 一. with(上下文管理) 介绍 概述 一个类只要实现了__ enter __ () 和 __ exit __ ()方法, 这个类就是一个上下文管理器类, 该类的对象 上下文管理器对象 目的 节约资源, 提高效率, 避免手动释放资源, 且出bug的时候, 也会自动尝试释放资源 特点…

【Centos】绕开报错ModuleNotFoundError: No module named ‘dnf‘

问题原因&#xff1a; 安装python3.9后不能使用yum Traceback (most recent call last):File "/usr/bin/yum", line 57, in <module>from dnf.cli import main ModuleNotFoundError: No module named dnf绕开yum解决方法&#xff1a; 直接下载相关依赖包 htt…

怎样将手机屏幕(远程)投屏到家里的大电视上?

我不住家里&#xff0c;前几次回去都会替老爸老妈清理手机。这两个星期没空回去&#xff0c;老爸吐槽手机用几天就又卡了&#xff0c;其实就是清理一些手机缓存的问题。 我说我远程控制他的手机&#xff0c;给他清理一下。他一听“控制”就不喜欢&#xff0c;说我大了&#xf…

软件测试面试从哪方面面试?

一、面试基础题 简述测试流程: 什么是软件测试&#xff1f;软件测试的目的与原则 问&#xff1a;软件生存周期及其模型是什么&#xff1f; 什么是软件质量&#xff1f; 自动化测试脚本开发的主要步骤: 目前主要的测试用例设计方法是什么&#xff1f; 常见的测试用例设计…

【Python知识宝库】文件操作:读写文件的最佳实践

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏: 《C干货基地》《粉丝福利》 ⛺️生活的理想&#xff0c;就是为了理想的生活! 文章目录 前言一、文件读取1. 使用open函数2. 逐行读取3. 使用readlines和readline 二、文件写入1. 写入文本2. 追加内容3. 写入…

使用shell脚本安装mysql8,进行主从备份配置

思路 在3台主机上安装mysql进行主从备份配置 使用rpm包yum安装mysql 首先&#xff0c;我们要准备好安装文件&#xff0c;首先下载rpm包 wget -P "/opt/" https://repo.mysql.com//mysql80-community-release-el7-3.noarch.rpm 然后执行安装&#xff08;默认已配置…

HMI设计:嵌入式设备和电脑的差异化,工控领域首选。

嵌入式设备属于专机专用&#xff0c;电脑是通用&#xff0c;从性能、用途、特殊能力、成本、通信上嵌入式设备完全优于电脑&#xff0c;是工控领域的首选。 嵌入式设备和电脑在很多方面有着显著的差异&#xff0c;主要体现在以下几个方面&#xff1a; 1. 设计用途&#xff1a…

go 开发小技巧

一、简介 本篇文章会介绍go 开发小技巧。 二、go 开发技巧 2.1 Semaphore type Semaphore chan struct{}func NewSemaphore(maxCount int) Semaphore {return make(chan struct{}, maxCount) }func (s Semaphore) Acquire() {s <- struct{}{} }func (s Semaphore) tryAcq…

在js渲染的dom中的事件中传递对象

在某些情况下&#xff0c;可能需要将整个对象或部分对象嵌入到 HTML 元素的属性中&#xff0c;可以将对象数据序列化为 JSON 字符串&#xff0c;存储在 data-* 自定义属性中。这样可以在事件中取出并解析对象数据&#xff1a; <!DOCTYPE html> <html lang"en&qu…

linux高级学习9

24.9.6学习目录 一.共享内存1.共享内存的API 一.共享内存 特点&#xff1a; 其在进程间共享数据的方法中是最快的要注意对给定存储区访问时进行互斥 1.共享内存的API &#xff08;1&#xff09;获取共享内存标识符 在shell中使用 ipcs -m进行查看共享内存 ipcrm -m shmid删…

P1546 [USACO3.1] 最短网络 Agri-Net

[题目通道]([USACO3.1] 最短网络 Agri-Net - 洛谷) #include<bits/stdc.h> #define int long long using namespace std; const int N1e6100; struct edge{int u,v,w; }e[N*30]; bool cmp(edge a,edge b){return a.w<b.w; } int a,b,c,n,m,fa[N],cnt0,ans0; int fin…

目标检测-YOLOv10

YOLOv10 是 YOLO 系列的最新版本&#xff0c;进一步推动了目标检测技术的发展。它在前代&#xff08;YOLOv9&#xff09;的基础上进行了更多优化和改进&#xff0c;使得模型在复杂场景、实时性以及精度方面取得了更高的突破。YOLOv10 将高效的架构设计与新颖的技术结合&#xf…

C++万字解读类和对象(上)

1.类的定义 class为定义类的关键字&#xff0c;Stack为类的名字&#xff0c;{}中为类的主体&#xff0c;注意类定义结束时后面分号不能省略。类体中内容称为类的成员&#xff1a;类中的变量称为类的属性或成员变量; 类中的函数称为类的方法或者成员函数。 为了区分成员变量&…

[QT] QT事件与事件重写

一.事件 事件(event)是由系统或者 Qt本身在不同的场景下发出的。当用户按下鼠标、敲下键盘&#xff0c;或者是窗口关闭等都会发出一个相应的事件。 一些事件在用户操作时发出(如鼠标/键盘事件); 另一些事件则是由系统自动发出(如计时器事件)。 Qt窗口中对于产生的一系列事件都…