2024前端面试题-篇章二
几种实现css绝对居中(水平、垂直居中)的方法
方法有很多需要的自己再去探索
1.flex+margin:auto
.test{
display: flex;
width: 600px;
height: 400px;
background-color: rgb(39, 203, 170);
.item{
width: 100px;
height: 100px;
background-color: skyblue;
border: 1px solid rgb(89, 89, 89);
margin: auto;
}
}2.定位+margin:auto
.test{
width: 600px;
height: 400px;
background-color: rgb(39, 203, 170);
position: relative;
.item{
width: 100px;
height: 100px;
background-color: skyblue;
border: 1px solid rgb(89, 89, 89);
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
}3.定位+位移
.test{
width: 600px;
height: 400px;
background-color: rgb(39, 203, 170);
position: relative;
.item{
width: 100px;
height: 100px;
background-color: skyblue;
border: 1px solid rgb(89, 89, 89);
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
}4.flex布局
.test{
width: 600px;
height: 400px;
background-color: rgb(39, 203, 170);
display: flex;
align-items: center;
justify-content: center;
.item{
width: 100px;
height: 100px;
background-color: skyblue;
border: 1px solid rgb(89, 89, 89);
}
}5.grid布局
.test{
width: 600px;
height: 400px;
background-color: rgb(39, 203, 170);
display: grid;
align-items: center;
justify-content: center;
.item{
width: 100px;
height: 100px;
background-color: skyblue;
border: 1px solid rgb(89, 89, 89);
}
}H5新增了哪些标签？（）
举例几个常用的：
- 用于绘画的 canvas 元素
- 用于媒介回放的 video 和 audio 元素
- 新的特殊内容元素，比如 article、footer、header、nav、section
- 新的表单控件，比如 calendar、date、time、email、url、search
es6新增了哪些新特性？（）
JS有哪些内置对象 ？
内置对象也就是可以直接通过new关键字使用的,比如：
String,Boolean,Number,Date,Object,Array,Regexp,Function,Error,Promsie,Map,Set,Proxy,Symbold等等这些都是比较常见的内置对象，当然还有更多，面试的时候能答多少算多少
JS由哪三部分组成？
es语法、dom（页面节点对象），BOM（浏览器对象）
前端内存泄漏怎么去理解？
js里已经分配了内存地址的变量由于长期没有清除或者释放从而造成内存占用的一个现象称之为内存泄漏
哪些情况会造成内存泄漏？
- 闭包
- 没有使用关键字定义的全局变量
- 添加的事件监听没有清除（addEventListener（‘click’））
- 定时器没有及时清除
- 对象的环引用
闭包是什么？
简单来说，所谓闭包就是说，能够读取其他函数内部变量的函数。所以闭包可以理解成“定义在一个函数内部的函数“。在本质上，闭包是将函数内部和函数外部连接起来的桥梁。实际就是两个函数，内部函数可以使用外部函数的变量（一般面试说大概解释到位就行了，因为我也不知道怎么解释了）
举例：正常情况下一般函数里面定义了一个变量函数执行完之后变量就被销毁了，但是闭包里面的变量存在引用的情况就不会销毁，所以就造成了内存泄漏
function funOne(){
let value = 1
function funTwo(){
value++;
console.log(value);
}
return funTwo
}
let result = funOne()
result();//虽然无法在函数外部操作value值但是可以直接通过函数内部返回函数的方式间接操作变量value闭包有什么优缺点？
优点：
闭包可以实现私有变量和方法，保护内部数据不被外部访问
闭包可以保存函数创建时的外部变量状态，即使外部变量发生变化，闭包仍然可以访问原始状态。
通过闭包，可以将多参数函数转换为单参数函数，实现柯里化
缺点：
内存泄漏，假如外部使用了函数内部的变量，即使函数被销毁，该变量也不会被回收或释放
与普通函数相比，创建闭包会产生额外的内存开销和性能开销
什么是函数的柯里化？
是指把接收多个参数的函数变换成接收单一参数的函数，嵌套返回直到所有参数都被使用并返回最终结果，函数柯里化之后依旧还是一个函数，只是这个函数返回值依旧是一个函数
柯里化的一个主要用处就是实现参数复用
什么是事件委托？
也可以叫事件代理，简单解释就是利用时间冒泡的机制将子元素的事件绑定到父元素身上
优点：
- 减少事件处理程序的数量
- 简化代码逻辑
- 动态添加跟删除子元素
什么是原型跟原型链？
1.原型:函数都有prototype属性,称之为原型，也称为原型对象，在JavaScript中，原型也是一个对象，通过原型可以实现对象的属性继承，JavaScript的对象中都包含了一个”[[Prototype]]”内部属性，这个属性所对应的就是该对象的原型。
“[[Prototype]]”作为对象的内部属性，是不能被直接访问的。所以为了方便查看一个对象的原型，Firefox和Chrome中提供了__proto__这个非标准（不是所有浏览器都支持）的访问器（ECMA引入了标准对象原型访问器”Object.getPrototype(object)”）。在JavaScript的原型对象中，还包含一个”constructor”属性，这个属性对应创建所有指向该原型的实例的构造函数
原型可以放一些属性和方法，共享给实例对象使用
原型可以做继承
2.原型链:对象都有_proto_属性,这个属性指向它的原型对象,原型对象也是对象,
也有 _proto_属性,指向原型对象的原型对象,这样一层一层形成的链式结构称为原型链，最顶层找不到则返回 null
new操作具体做了什么？
使用new之后最后会得到一个对象，所以肯定需要创建一个对象，然后最后被return出一个对象，主要中间三步，改变原型链指向，然后再是改变this指向，最后是方法的继承
- 第一步：创建一个空对象。
- 第二步：将新对象的原型链隐式地指向构造函数的原型对象。
- 第三步：重新绑定 this，使构造函数的 this 指向新对象。
- 第四步：执行构造函数中的代码，为这个新对象添加属性和方法。
- 第五步：返回新对象（构造函数默认会执行 return this）
js事件循环？
JS事件循环是一种处理异步事件和回调函数的机制，主要用于管理任务队列和调用栈，以及在适当的时候执行回调函数,在js执行时候，一个主线程里面都会有一个事件循环（消息循环|运行循环）和事件队列，存放各种要处理的事件信息，通过这个循环不断处理这些事件信息或消息
调用栈：调用栈是解释器（就像浏览器中的javascript解释器）追踪函数执行流的一种机制。当执行环境中调用了多个函数时，通过这种机制，我们能够追踪到哪个函数正在执行，执行的函数体中又调用了哪个函数。
任务队列：任务队列一般有宏任务跟微任务，而微任务一般执行顺序高于宏任务
宏任务：常见的有setTimeout，setInterval等等
微任务：常见的有promise，MutationObserver
什么是深拷贝？
深拷贝一般都是针对引用数据类型的，基本数据类型不存在深拷贝的问题，我们都知道引用数据类型都是存在堆里面的，存放的形式其实是一个地址，当我们在使用引用数据类型的时候就可能存在多个变量使用的是同一个引用数据类型的地址，这是修改其中一个就会导致另一个也发生变化，这时候我们就需要通过拷贝一份地址来实现彻底分隔就称之为深拷贝
深拷贝的方法有哪些？
主要是三种：JSON.parse(JSON.stringify(obj))，Object.assign({}, obj)，递归函数
深拷贝方法及优缺点
浏览器的数据存储有哪些？
cookie：
cookie每次客户端发送请求的时候都会携带给服务器，最开始是用来管理请求http状态的
优点：操作方便可设置过期时间等等，兼容性好（因为出现的比较早，在H5以前为主要的浏览器存储数据方式，如果不清楚具体兼容性就别答兼容性了）
缺点：浪费资源、大小、安全性
- cookie需要在客户端和服务器端之间来回传送，会浪费不必要的资源
- 存储大小有限制，对于每个域，一般只能设置20个cookie，每个cookie大小不能超过4KB
- cookie因为保存在客户端中，其中包含的任何数据都可以被他人访问，cookie安全性比较低
sessionStorage：
以键值对的形式存储于浏览器的一种机制，会话级的即关闭当前会话缓存消失
优点：
- 可以大量保存浏览器中数据（5MB）
- 不会随http请求一起发送
缺点：不能被爬虫读取
- 在浏览器的隐私模式下不能读取
- 不能设置过期时间，数据只能手动删除
- 数据可能被用户清除或限制使用
- 可通过 JavaScript 访问，可能面临 XSS（跨站脚本攻击）风险
- 不同源之间不能共享，特定于同一源（协议、域名和端口）
localStrorage：
与sessionStorage的区别在于存储时效性，即使用户关闭会话或者浏览器依旧存在，除非手动清除
IndexedDB ：
这个是一种更复杂的客户端存储技术，适用于存储大量结构化数据，面试一般算加分项，主要问一些优缺点
优点：
- 结构化数据存储：可以存储复杂的对象，如数组和对象，适合需要存储大数据量的应用。
- 大容量：通常可以存储数百兆字节或更多的数据（取决于浏览器），远超
localStorage的 5MB 限制。 - 异步操作：支持异步 API，避免阻塞主线程，提高性能。
- 高级查询：支持索引，可以快速检索数据，使得检索性能更强大。
- 事务支持：提供事务管理，保证数据一致性和安全性。
缺点：
- 复杂性：使用 API 相对复杂，需要学习其操作方法及对象模型。
- 兼容性：虽然主流浏览器都支持，但可能在一些老旧浏览器上不完全兼容。
- API 学习成本：开发者需要投入时间来掌握其异步模型和存储机制。
总结：
- sessionStorage 适合存储临时会话数据。
- localStorage 适合存储需要持久化的数据。
- Cookie 适合需要在服务器和客户端之间共享的数据，如会话信息和用户身份
- IndexedDB 适用于一些特殊场景，如需要存储的数据比较庞大
防抖与节流？
防抖就是在一定的时间内使触发了N次事件，只执行最后一次
节流就是在一定的时间内使触发了N次事件，只触发一次
二者的实现原理主要都是借助于定时器来实现的，防抖是每次执行时看定时器有没有销毁，而节流是每次执行时看定时器有没有执行完毕，一般工作中都是采用现成的库来实现，如lodash等等，一般面试答到这里就差不多了
promise的一些基本点
promise的三种状态，promise的链式调用，返回相应的值应该走成功还是失败，promise有哪些方法等等
说一说跨域，怎么解决？
跨域一般是由于浏览器的同源策略模式，简称SOP，是一种约定，它由Netscape公司1995年引入浏览器，它是浏览器核心也是最基本的安全功能，如果缺少同源策略，浏览器很容易受到XSS、CSFR等攻击，所谓同源是指“协议+ 域名+ 端口”三种相同
解决方式：jsonp、CORS等等，现在一般都是用框架开发一般用自带的打包工具配置，比如vue的vue.config.js配置代理等等
关于XSS攻击以及CSFR攻击？
-
XSS攻击： 跨站脚本攻击
攻击者脚本嵌入被攻击网站，获取用户cookie等隐私信息。 -
CSRF攻击： 跨站请求伪造。
已登录用户访问攻击者网站，攻击网站向被攻击网站发起恶意请求（利用浏览器会自动携带cookie）
有做过文件上传吗？大文件怎么上传？
更新中····