Web前端最全【面试题】最新2024前端面试题，重磅消息

最新推荐文章于 2024-06-06 16:46:49 发布

2401_84413092

最新推荐文章于 2024-06-06 16:46:49 发布

阅读量880

点赞数 18

分类专栏：程序员文章标签：前端

本文链接：https://blog.csdn.net/2401_84413092/article/details/138590084

版权

程序员专栏收录该内容

192 篇文章 1 订阅

订阅专栏

HTTP

HTTP 报文结构是怎样的？
HTTP有哪些请求方法？
GET 和 POST 有什么区别？
如何理解 URI？
如何理解 HTTP 状态码？
简要概括一下 HTTP 的特点？HTTP 有哪些缺点？
对 Accept 系列字段了解多少？
对于定长和不定长的数据，HTTP 是怎么传输的？
HTTP 如何处理大文件的传输？
HTTP 中如何处理表单数据的提交？
HTTP1.1 如何解决 HTTP 的队头阻塞问题？
对 Cookie 了解多少？
如何理解 HTTP 代理？
如何理解 HTTP 缓存及缓存代理？
为什么产生代理缓存？
源服务器的缓存控制
客户端的缓存控制
什么是跨域？浏览器如何拦截响应？如何解决？

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

跨域是浏览器的同源策略造成的，同源是指"协议+域名+端口"三者相同，为了保证浏览器安全对响应的数据进行拦截，若发现是非同源的资源浏览器进程会把响应体丢弃。所以跨域拦截是浏览器进行拦截。

跨域是为了阻止用户读取到另一个域名下的内容，跨域并不是请求发不出去，请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了。Ajax 可以获取响应，浏览器认为这不安全，所以拦截了响应。通过表单的方式可以发起跨域请求,因为表单并不会获取新的内容，所以可以发起跨域请求。

假设我现在在淘宝，要去百度，我还会携带上淘宝的cookie吗？

不会。在cookie中，domain 属性指定了 cookie 的所属域名，path 属性用来指定路径；这两个属性决定了服务器发送的请求是否带上这个cookie。淘宝的 cookie 和百度的域名、路径不一致，所以访问百度不会带上淘宝的cookie。

淘宝跳转到天猫页面为什么不需要重新登陆( taobao.com 和 tmall.com )？

这是因为淘宝和天猫页面设置了单点登录SSO，在多个系统的集群里，用户只需一次登陆，其他系统也会感知到用户登陆，不需要用户重新输入用户名密码登陆。

在淘宝和天猫之间部署一台专门用作登录的服务器，相当于实现一个中转站，这个中转站存放着需要共享登录状态服务应用的 session 信息，它就相当于一把钥匙，当用户进行应用跳转的时候都会来中转站看一看，如果 session 存在就直接使用这把钥匙把通往另一个应用的门打开，如果不在就得先确认用户身份(登录)制造 session 钥匙存在中转站再把门打开，用户的身份存储和身份的有效时间都是中转站说了算，统一管理的。

http协议的特点

灵活方便：支持传输多种形式的内容
可靠传输：基于tcp/ip
请求-应答：具有发送方和接收方
无状态：每次请求都是独立无关的,不会记住上一次的状态

BEM 命名规范

B:block E:element M:modefiled 语义性好，模块化，组件化，可复用
这是面试官看到我的掘金第一篇文章来问的，有兴趣的朋友可以看看哦。BEM-实战淘宝订单模块

flex:1的含义， flex:1和flex:2的区别

flex 是 flex-grow ，flex-shrink ，flex-basis的缩写
flex:1即
flex-grow:1若存在剩余空间根据剩余空间进行放大；
flex-shrink:1若空间不够，将内容缩小；
flex-basis:0% 内容本来大小

var a = []，为什么可以直接使用a.push()，a.pop()

a 通过对象字面量的方式生成一个数组对象实例，可以通过原型链查找方法，使用到Array原型上的push和pop方法。

var a = new A()，a 和 A 的关系，A 和 Function 的关系

a 是 A 的一个实例对象，a 的__proto__ 指向 A 的 prototype，A 的__proto__ 指向 Function 的 prototype。

浏览器事件机制 event loop
Primise.then 中的微任务在下一轮还是这一轮执行
commonjs之后为什么提出es molule，两个模块的特点

commonjs 导出(module.exports)，导入(require)。
可以动态加载语句，发生在代码运行时，模块是同步加载的，只要加载完成才能进行后续操作；模块可以多次加载，但只会在第一次加载时运行一次，结果会被缓存，下次加载直接读取缓存结果，除非清除缓存。导出的值的拷贝的，可以修改，模块内的修改不会影响拷贝的值，代码出错不好排查。
esmodule 导出(export default)，导入(import from)
是静态的，只能声明在文件最顶部，发生在代码编译时；导出的值存在映射关系引用，是可读的，不可修改

函数式组件和类组件的区别
usestate 重复修改多次，会渲染多次吗? 什么时机触发渲染?

如果useState在同步代码中重复修改多次，只会渲染一次。因为出于性能考虑，React 会把多个 setState() 调用合并成一个调用，这也是state的批量更新机制。React 会将该 state “冲洗” 到浏览器事件结束的时候，再统一地进行更新，这时才会触发渲染。
而如果setState在异步代码(如 setTimeout、async await)中重复修改多次，渲染会在每次修改后触发一次。

redux
听说过基于redux的封装吗？
为什么本地开发更改一行代码，浏览器会局部更新那一部分？浏览器怎么知道代码变了？

这题触及到我的知识盲区了，于是面试官跟我讲解了一下，赞！
脚手架npm run dev后，会启动一个本地的服务 localhost，它基于socket 连接本地编辑器和浏览器的通信，监听文件系统是否发生改变，当发生改变时webpack 会告诉浏览器代码发生更改，浏览器就会做相应的渲染。这块应该是热更新的知识点。

装饰者模式
ts 中 record是做什么的？

Record<K,T>构造具有给定类型T的一组属性K的类型。他会将一个类型的所有属性值都映射到另一个类型上并创造一个新的类型.

实例：

interface EmployeeType {
    id: number
    fullname: string
    role: string
}

let employees: Record<number, EmployeeType> = {
    0: { id: 1, fullname: "John Doe", role: "Designer" },
    1: { id: 2, fullname: "Ibrahima Fall", role: "Developer" },
    2: { id: 3, fullname: "Sara Duckson", role: "Developer" },
}

// 0: { id: 1, fullname: "John Doe", role: "Designer" },
// 1: { id: 2, fullname: "Ibrahima Fall", role: "Developer" },
// 2: { id: 3, fullname: "Sara Duckson", role: "Developer" }
复制代码

项目后台搭建为什么选择koa？为什么不是express？
说说个人的亮点

给大家推荐一个实用面试题库

1、前端面试题库（面试必备）推荐：★★★★★

地址：前端面试题库

滴滴已oc

感觉面试官问的问题可回答面比较广，所以可以挑自己擅长的领域说~ 而且面试官比较和蔼，让我不要紧张。面试官直接就跟我约了二面的时间。
复制代码

css布局方式

说了以下四种布局方式，然后以水平垂直居中为例，具体的说了下每种布局方式是如何使用的。

flex
grid
float
position

float离开文档流怎么做处理

我大概说了下清浮动、高度塌陷的不同处理方式，顺便说了下BFC

position属性，分别相对谁定位，具体使用场景
js 数据类型 Symbol使用场景
类型判断方法

我说了三种 typeOf、instanceOf、Object.prototype.toString.call() 以及他们各自的优缺点
面试官接着问了instanceOf 原理，说完继续问了下面两个问题
Array instanceOf Array == ?(false)
Object instanceOf Object == ?(true)

数组api，以及在项目使用场景
forEach map区别使用场景

forEach和map都可以对数组的进行遍历。
forEach返回值为undefined，所以不能进行链式调用，适用于不更改数组的情况；
map会返回一个新数组，这个新数组由原数组中的每个元素都调用一次提供的callbackFn函数后的返回值组成。一般用于需要修改数组的情况。
对于数组项是基本数据类型的数组，forEach和map都不修改调用它的原数组本身，但是那个数组可能会被 callbackFn 函数改变; 对于数组项是引用数据类型的数组，用forEach和map都可以改变它的属性值。
又问：给对象数组中对象的每一项加一个属性，用 forEach 还是 map？
这里用forEach会更好，直接在原数组上修改即可，如果用map，还要将返回的结果重新赋值给原来的数组变量，语义不好。

手写代码将对象数组转为对象

    const array = [
    {
    code: 101,
    name: '北京',
    },
    {
    code: 102,
    name: '石家庄',
    },
    {
    code: 102,
    name: '江苏',
    children: [{
        code: 102,
        name: '南京',
    },{
        code: 102,
        name: '连云港',
    }]
    }
]
复制代码

转换成：

  {
    '北京'：{
      code: 101,
      name: '北京'
    },
    '石家庄':{
       code: 102
       name: '石家庄'
    },
    '南京':{
       code: 102
       name: '南京'
    },
    '连云港':{
       code: 102
       name: '连云港'
    }
  }
复制代码

实现代码：

function toObj(arr) {
    let obj = {};
    for(let item of arr) {
        if(item['children']!==undefined) {
            obj = {...toObj(item['children']),...obj};
        }else {
            obj[item.name]=item;
        }

    }
    return obj;
}
复制代码

根据代码看输出 this问题

const obj1 = {
    hello: function () {
        console.log(this);   // obj1
        setTimeout(function () {
            console.log(this);   // window
        });
    }
}
obj1.hello();


const obj2 = {
    hello: function () {
        console.log(this);   // obj2
        setTimeout(() => {
            console.log(this);   // obj2
        });
    }
}
obj2.hello()

const obj3 = {
    hello: ()=> {
        console.log(this);   // wondow
        setTimeout(() => {
            console.log(this);    // window
        });
    }
}
obj3.hello()
复制代码

闭包以及项目中的使用
防抖节流
vite webpack 了解多少
js模块化 commonjs esmodule区别
UMD AMD CMD

AMD (Asynchronous Module Definition 异步模块定义)
commonjs是同步加载的，不适用于浏览器环境，所有有了AMD CMD； AMD是异步加载的，模块的加载不影响后面语句的运行。所有依赖这个模块的语句都定义在一个回调函数中，等加载完之后，这个回调才会运行。AMD 的模块引入由 define 方法来定义
CMD (Common Module Definition)
对于依赖的模块，AMD 是提前执行，CMD 是延迟执行。CMD 推崇依赖就近，AMD 推崇依赖前置。
UMD (Universal Module Definition 通用规范模块)
统一浏览器端(AMD)和非浏览器端(commonjs)的模块化方案。
先判断是否支持AMD(define是否存在),存在则使用AMD方式加载模块；
再判断是否支持commonjs(exports是否存在)，存在则使用commonjs模块格式
前两个都不存在，则将模块公开到全局

浏览器缓存怎么做demo的

主要针对的是前端静态资源(js css image)，大大的减少了请求的次数，提高了网站的性能(两端)

强缓存 设置http响应头
http1.0版本：Expires 具体时间点，客户端时间不准可能会导致误差
http1.1版本：Cache-Control:max-age=xxx 时间偏移量倒计时

协商缓存
Last-Modified 会经常更改的数据，不变则发送304。请求数量不变，请求体积减小
设置响应头：Last-Modified 文件最近更改时间
判断请求头：if-modified-since == Last-Modified 发送304

etag
根据文件生成哈希串
设置响应体:Etag
判断请求头：if-none-match == Etag 发送304

nginx
跨域 jsonp缺点
项目后端做了啥
异步并行/串行
问异步事件1、异步事件2是并行还是串行？怎么变为并行？

    async() {
        await 异步事件1
        await 异步事件2
    }
复制代码

这里我说的是让异步事件不写在await后面，这是一种实现方式。当然还有更好的实现方式，所以面试官问了下一题。

async ()=>{ 
    let result1 = 异步事件1
    let result2 =  异步事件2


### 学习笔记

主要内容包括**html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue**等等

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

>**HTML/CSS**

**HTML：**HTML基本结构，标签属性，事件属性，文本标签，多媒体标签，列表 / 表格 / 表单标签，其他语义化标签，网页结构，模块划分

**CSS：**CSS代码语法，CSS 放置位置，CSS的继承，选择器的种类/优先级，背景样式，字体样式，文本属性，基本样式，样式重置，盒模型样式，浮动float，定位position，浏览器默认样式

![](https://img-blog.csdnimg.cn/img_convert/aee29c47aa6f235a43144d3ed09ddc40.webp?x-oss-process=image/format,png)

>**HTML5 /CSS3**

**HTML5：**HTML5 的优势，HTML5 废弃元素，HTML5 新增元素，HTML5 表单相关元素和属性

**CSS3：**CSS3 新增选择器，CSS3 新增属性，新增变形动画属性，3D变形属性，CSS3 的过渡属性，CSS3 的动画属性，CSS3 新增多列属性，CSS3新增单位，弹性盒模型

![](https://img-blog.csdnimg.cn/img_convert/2595e13133fc3796796af150d2ffaeb5.webp?x-oss-process=image/format,png)

>**JavaScript**

**JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串

![](https://img-blog.csdnimg.cn/img_convert/da2e0a112aaf5304f29f9ad5a936dd9e.webp?x-oss-process=image/format,png)

n，浏览器默认样式

[外链图片转存中...(img-jkzHwGPv-1715182573526)]

>**HTML5 /CSS3**

**HTML5：**HTML5 的优势，HTML5 废弃元素，HTML5 新增元素，HTML5 表单相关元素和属性

**CSS3：**CSS3 新增选择器，CSS3 新增属性，新增变形动画属性，3D变形属性，CSS3 的过渡属性，CSS3 的动画属性，CSS3 新增多列属性，CSS3新增单位，弹性盒模型

[外链图片转存中...(img-Bl0FG30S-1715182573527)]

>**JavaScript**

**JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串

[外链图片转存中...(img-56bSko07-1715182573528)]

2401_84413092

关注

18
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
Web前端最全【面试题】最新2024前端面试题，重磅消息

跨域是浏览器的同源策略造成的，同源是指"协议+域名+端口"三者相同，为了保证浏览器安全对响应的数据进行拦截，若发现是非同源的资源浏览器进程会把响应体丢弃。，在多个系统的集群里，用户只需一次登陆，其他系统也会感知到用户登陆，不需要用户重新输入用户名密码登陆。主要针对的是前端静态资源(js css image)，大大的减少了请求的次数，提高了网站的性能(两端)钥匙存在中转站再把门打开，用户的身份存储和身份的有效时间都是中转站说了算，统一管理的。这是面试官看到我的掘金第一篇文章来问的，有兴趣的朋友可以看看哦。
复制链接

扫一扫