2024前端高频面试题之二
1.JavaScript中的数据类型?存储上的差别?
基本类型 number string bool undefined等 。
引用类型 object。包含 array，object，func。
存储差异：基础类型存在栈内存，引用类型存储堆内存。
存储的差异引出了浅拷贝和深拷贝等问题，浅拷贝是一个表面的复制品，原本的值和复制的值相互影响，深拷贝深层拷贝了一份堆内存的值，相互独立。
2.如何理解DOM和BOM
BOM包含DOM，DOM是BOM的一部份。
DOM文档对象模型，操作文档的api，顶层对象document，即通过代码操作html内容，包含CRUD。
BOM浏览器对象模型，提供了操作浏览器的api，**window **是BOM的顶层对象，主要用户获取浏览器信息和对浏览器的操作。比如：navigator，location，history等。
BOM 有 window（document location history navigator screen） 但是document太大了 所有单独拿出来。
BOM包含DOM 看到BOM想到 window（location history navigator screen） DOM想到 document（querySelector style）
location：浏览网页相关信息 navigator：浏览器本身的信息 screen：屏幕 history：历史记录
window是最大的对象 我们平时使用document时默认省略了window var声明的全局变量挂载在window下 let const 不是挂载在window下
location的使用：location.href 获取地址栏的完整地址 location.href = 'url' 赋值时就跳转新的页面
navigator的使用：浏览器的信息相关的对象
部分API说明：
screen 保存的纯粹是客户端能力信息，也就是浏览器窗口外面的客户端显示器的信息，比如像素宽度和像素高度
history 对象主要用来操作浏览器 URL的历史记录，可以通过参数向前，向后，或者向指定 URL跳转。
history.go(3) //向前跳转三个记录
history.go(-1) //向后跳转一个记录
history.forward()：向前跳转一个页面history.back()：向后跳转一个页面history.length：获取历史记录数
3.和=区别，分别在什么情况使用
等于操作符和全等操作符。
等于操作符：判断操作数，不判断操作数的类型，在比较的时候会先进行类型转换(隐式转换)。
全等操作符：比较的时候不会做类型转换，即操作数(值)和类型会同时比较。
工作中，推荐使用全等操作符。
4.typeof 与instanceof区别
首先，两个都是判断js数据类型的api，不同的是 typeof 用于判断基础数据类型，instanceof 用于判断引用数据类型。因为 typeof 判断引用数据类型返回的都是 object。instanceof本质是一个原型链查找。
5.JavaScriptl原型,原型链?有什么特点?
原型对象：当一个对象访问某个成员时，如果成员不在就会自动到原型对象上找。
原型本质就是一个对象 ， 故原型叫做原型对象 常常把共享的（复用的）方法写到（挂载）到原型对象上。
每个构造函数都有一个prototype。
使用原型把重复使用的方法实现共享方法 即把方法构造在原型身上 ，既可以实现共享。
所有的函数都可以是构造函数，所有的函数都有一个原型对象；普通函数 和 构造函数 区别在于 this.uanme = uanme【this的使用】 还有首字母大写。
js需要通过构造函数来间接的实现面向对象编程。【缺点浪费内存】。
给数组添加扩展方法【公共方法】，可以直接添加到原型上面。
// 给数组的构造函数 Array 添加方法，Array的原型上加共享的方法
Array.prototype.max = function (){
// console.log(this) // this就是指向实例数组
return Math.max(...this) // 使用展开运算符求最值
}
console.log([1,2,43,90].max()) // 使用【1，2，43，90】时，js会帮我们创建一个实例化的数组对象，然后调用挂载在原型上的max方法
对象有一个对象原型__proto__，对象原型指向原型对象，
每个对象都有对象原型，对象原型也有对象原型 ，以此循环就构成了原型链，原型链的终点是 null。
6.如何实现vue项目中的性能优化
-
尽量减少data中的数据，data中的数据会增加getter和setter。
-
使用v-if替代v-show。
-
使用路由，图片懒加载。
-
防抖、节流。
-
长列表滚动到可视化区域动态加载。
7.v-if 和 v-show 区别
- 渲染方式：v-if 是惰性渲染，v-show是控制元素的展示和隐藏。
- 初始渲染开销，v-if渲染，条件为假，不会渲染，可以减少开销，v-show初始渲染时就全部渲染。
- true和false切换时候的开销，v-if 是创建和销毁组件或元素，而v-show 是通过css的树形display来控制元素的展示和隐藏。
8.多个tab/window互相通信，除了websocket，怎么做？
主动轮询+利用浏览器的存储，eg：localStorage，sessionStorage，cookie，indexDB。
浏览器提供了监听localStorage变化的API，可以不用主动轮询。
使用 postMessage，window.open() window.postMessage()
9.怎么理解工程化的？
工程化项目应该包括项目的标准化，规范化，模块化，自动化等。
自动化包括，自动构建，自动测试，自动部署，自动通知。
10.如何大文件上传？
我们在前端上传大文件的时候，可能受到网络状态或者服务端影响，不能及时上传或者大小限制。
上传大小被限制或者网络不稳定，为了用户的体验，我们可以使用切片上传+断点续传。
切片上传：把大文件依据某种规矩切分城多个小文件，逐个上传。
断点续传：上传小文件的过程中，网络断开，等到网络再次连接，会向服务端查询大文件是否上传结束，以及小文件上传进度，然后继续上传。
