面经分享

好好复习面经，面试的时候，真的会遇到原题！✨✨✨

1.为什么选择前端

首先我对网页设计有着浓厚的兴趣，我可以将自己的创意和想法通过代码实现出来，让自己的作品得到更多人的关注和认可

其次就是前端开发的需求量比较多

2.外边据叠加问题

两个相邻Box的margin外边距都是正数时，折叠外边距是两者中较大的值

两个相邻Box的margin外边距都是负数时，折叠外边距是两者中绝对值较大的值

两个相邻Box的margin外边距一正一负数时，折叠外边距是两者相加的和

3.回流和重绘

回流：几何属性发生改变时，就会引起回流

重绘：样式发生改变，引起重绘

如何避免

• 使用CSS3动画代替JS动画
• 避免频繁操作DOM
• 使用transform替代top/left
• 使用absolute或fixed，使用元素脱离文档流

4.同源策略

限制不同源之间的访问

同源指：协议，域名，端口都相同

5.跨域方法

• 跨域资源共享：通过服务器设置允许跨域的头部信息
• JSONP：利用script标签的跨域特性
• 代理转发：在服务器端设置代理转发规则

7.JSONP

• 跨域支持
• 兼容好
• 只能使用GET方法
• 安全风险

8.cookie，localstroage，sessionstroage

• 存储大小

  cookie大小4K，localstorage和sessionstorage大小是5MB左右

• 存储方式

  cookie的数据会随着http请求自动发送到服务器端，而localstorage和sessionstorage只存在于客户端，不会发送到服务器端

• 生命周期

  cookie自己设置生命周期，localstorage手动去除，sessionstorage会话结束后去除

9.如何设置cookie并发送

服务器向客户端发送cookie时，会将cookie添加到http响应头中的set-cookie字段

客户端接收到响应后，将cookie保存在本地

之后，每次客户端向服务器发送请求时，它会将cookie作为request header中的cookie字段进行传递

以便服务器可以识别客户端并提供相关的服务或信息

前端也可以编写，使用document.cookie

document.cookie = "username=john; expires=" + new Date(new Date().getTime()+86400).toUTCString();

10.Map和Object的区别

• 键的类型：Object只能使用字符串或Symbol作为键，而Map可以使用任何类型的值作为键
• 迭代顺序：Map保留key的插入顺序，而Object不保留
• JSON操作：Object支持JSON.stringify和JSON.parse的操作，Map不支持
• 大小：Map的大小可以通过size属性获取，Object的大小必须自行获取 const size = Object.keys(obj).length
• 迭代：Map是可迭代对象，Object没有实现迭代协议
• 性能：Map频繁的增删键值对时表现更好

11.Set和Array的区别

• 数据类型：数组包含任何数据类型，set只能包含唯一的值
• 值的存储方法：数组按索引存储，通过索引访问，set的值没有特定的顺序，不能使用索引来访问它们
• 唯一性：数组可以重复，set不可
• 功能：数组方法push，pop等，set方法add，has等
• 性能：查找或添加元素时，set更快

12.构造函数和普通函数的区别

• 调用方式不同：构造函数使用new关键字调用，而普通函数则直接使用函数名调用
• 作用域不同：构造函数this指向这个新对象，而普通函数的this对象，指它的运行的环境（winodws）
• 返回值不同：构造函数不需要显式地返回值，new关键字在默认情况下会将新创建的对象自动返回，而普通函数需要return
• 命名规范不同：构造函数的命名为大写字母开头，便于区分

13.let const var 的区别

• 变量提升：var变量可以在声明之前使用，默认undefined，let和const不存在
• 作用域：var是函数级别，const和let有块级作用域 { }
• 可重复声明：var可以重复声明同名变量，且覆盖，let和const不可以
• 初始值：var和let声明的变量，可以先声明后初始化，未初始化默认undefined，const必须初始化
• 可变性：var和let声明的变量可以随时更改，const不可以

14.变量提升的本质

变量提升是因为javascript的编译和运行机制导致的

解析器分为两个阶段：

编译阶段

解析器将所有var声明以及函数声明，提前到当前作用域的顶部

函数声明在前，变量声明在后的特性也是基于此原理

运行阶段

运行阶段，因为在编译阶段进行了变量提升操作，可以直接访问已经声明但没有定义的变量undefined

15.箭头函数

• 箭头函数不能使用 arguments、super 和 new.target 关键字，也不能通过 new 关键字来调用
• 箭头函数没有自己的 this、arguments 等变量，它们从外围作用域中继承
• 箭头函数不能作为构造函数使用
• 箭头函数没有prototype
• 箭头函数不能用作Generator函数，不能使用yeild关键字

16.call，apply，bind的区别

共同点

• 都改变了函数内部的this指向
• 是函数的方法，即只有函数才可以调用它们

不同点

• call和apply都是立即执行，bind不是立即执行，而是返回一个函数
• call和bind，传参传的是参数列表，apply则传参传的是一个参数数组

17.事件循环

JS的单线程模型决定了它的事件处理机制是基于事件循环的

用于协调和控制JS代码的自行顺序

• 先执行所有的同步任务，碰到异步任务放到任务队列中
• 同步任务执行完毕，开始执行当前所有异步任务
• 先执行任务队列中所有的微任务
• 在执行一个宏任务
• 然后再执行所有微任务
• 再执行一个宏任务，再执行所有的微任务…依次推到执行结束

分为同步任务和异步任务

• 同步任务：是指主线程上排队执行的任务，只有前一个任务执行完毕，才能继续执行下一个任务
• 异步任务：不进入主线程，而进入“任务队列”的任务

异步任务分为宏任务和微任务

• 宏任务：包括整体代码script，setTimeout，setInterval，DOM操作
• 微任务：Promise，process.nextTick

18.HTTPS协议

• 建立TCP连接
• SSL/TLS握手
• 发送HTTP请求
• 服务器处理请求
• 服务器返回响应
• 接收HTTP响应
• 关闭TCP连接

19.冒泡排序

let arr = [38, 26, 89, 56, 17, 44]
for(let i = 0 ; i < arr.length-1; i ++ ){for(let j = 0 ; j < arr.length-i-1;j++){let temp = arr[j];arr[j] = arr[j+1];arr[j+1] = temp;}
}

20.手写深拷贝

function deepCopy(obj){if(typeof obj !== 'object' || obj === null){return obj;}if(Array.isArray(obj)){const result = [];for(let i = 0 ; i < obj.length ; i ++){result.push(deepCopy(obj[i]))l}return result;}const result = {};for(let key in obj){if(obj.hasOwnProperty(key)){result[key] = deepCopy(obj[key]);}}return result;
}

21.CSS文字省略

.overflow-text {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
}

22.Vue3为什么比Vue2快

• 更高效的响应式系统
• 更小的包体积
• 更快的虚拟DOM

23.反问

• 回答的怎么样，有什么不足之处
• 该公司使用的什么技术栈
• 面试有有几轮，什么时候下一轮