前言
面试其实也是工作经验的总结，在工作之余，将工作中的问题记录总结，也是为下一份工作面试打好基础。
常规面试问题
1、项目中的跨域如何处理的。
跨域是一个比较大的话题，问题本身在开发过程中比较常见的问题，
对跨域的理解和解决方法可以点击这里
2、防抖与节流，什么场景用。
防抖：防止抖动、阻止用户行为多次触发请求。即是高频触发的事件，一定时间内、只有最后一次被触发生效。
使用场景：
- 监听页面数据变化重置页面布局，如：调整浏览器大小。
- 登录、发送短信、支付等避免用户点击太快导致多次触发请求。
- 表单、文档实现自动保存，监听在没任何操作后多长时间进行自动保存。
代码实现封装防抖：
function dobunce (fn, waitTime){
let timer = null;
return (...arg) => {
if(timer) clearTimeout(timer)
timer = setTimerout(()=>{
fn(...arg)
},waitTime)
}
}
节流：节约流量、控制事件的发生频率，即是高频触发的事件、一定时间内只触发一次。
使用场景：
- 输入框实时输入搜索展示下拉框。
- 监听滚动条到指定位置触发加载更多。
- 每隔多长时间记录鼠标位置，
代码实现：
function throttle(fn,waitTime){
let timer = null;
return (...args)=>{
if(timer) return
timer = setTimeout(()=>{
fn(...args)
timer=null
}, waitTime)
}
}
3、HTTP协议 的理解。
4、懒加载如何判断元素出现在视口内？
判断元素是否在视口内：需要了解浏览器判断一个元素位置的方法。首先我们需要了解怎么判断浏览器的宽、高。
//兼容所有浏览，获取浏览器的宽高的方法；
const w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
const h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
//window 常用的方法
window.close() //关闭浏览器窗口
window.open() // 开启浏览器窗口
window.resizeTo() // 调整浏览器窗口
window.moveTo() //移动浏览器
同时我们还需要了解元素属性；
getBoundingClientRect()；
Element.getBoundingClientRect() 方法返回一个 DOMRect 对象，其提供了元素的大小及其相对于视口的位置。拥有left, top, right, bottom, x, y, width, height属性。
使用 getBoundingClientRect 方法 判断元素是否在视口内部、公式为：
el.getBoundingClientRect().top < viewHight(视口高度)
代码实现：
const elIsInViewPort = (el) => {
const viewHight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
const elToViewHeight = el.getBoundingClientRect()?.top;
return elToViewHeight <= viewHight + 100 //+100 目的是为了提前加载数据
}
IntersectionObserver 接口；
IntersectionObserver 接口（从属于 Intersection Observer API）提供了一种异步观察目标元素与其祖先元素
顶级文档视口（viewport）交叉状态的方法。其祖先元素或视口被称为根（root）
了解更多 IntersectionObserver API 移步到这里
使用 IntersectionObserver 判断元素是否在视口内 代码实现方法
//
const intersectionObserver = new IntersectionObserver((entries)=>{
// 如果 intersectionRatio 为 0，则目标在视野外，
if(entries.length < 1) return
entries.forEatch((target)=>{
if(target.isIntersecting){
//停止对元素的观察
intersectionObserver.unobserve(target)
}
})
})
const elArr = [...document.querySelectorArr('.selectEle')]
elArr.forEatch((item)=>{
intersectionObserver.observe(item) //对元素进行监听；
})
5、ES6中let、const与ES5 var的区别。
let ,const, var 都是js 中使用来申明变量的方法。
var 声明的变量 为全局变量，及是 window 下的变量，存在变量提升问题。
let、 const 为es6 新提出的申明变量的方法，申明的变量为块级作用域、
const 声明 的变量为常量、必须初始化值、不能修改变量值、否则会报错。
let 申明的块级作用域变量，可以修改变量值。
let const 声明的变量都不能重复声明，重复声明会报错。var 声明重复变量不报错会覆盖前面变量的值。
6、Promise的理解。
promise js 使用来异步执行代码的方法，由于js 执行代码为同步的，一次只执行一次任务，阻塞其他任务。
7、JavaScript有哪些数据类型？如何判断这些类型。
js中数据类型：
| 类型 | typeOf 返回值 |
|---|---|
| Null | “Object” |
| Undefined | “Object” |
| Boolean | “boolean” |
| Number | “number” |
| BigInt | “bigint” |
| String | “string” |
| Symbol | “symbol” |
判断数据类型方法
方法一：typeOf
能够精确的返回数据的基本数据类型，但是不能明确判断出， Null、 Underfined 对象值，
方法二： instanceOf
可以拿根据 instanceOf 判断对象是继承哪一个原始类型，判断方法为根据js原型链特性，逐级向上找到根节点
代码实现instanceOf
const myInstanceOf = (obj,type) =>{
if(typeOf obj !== 'object' || obj == null) return false
let proto = Object.getProtoTypeOf(obj)
while(true){
if(proto === null) return false
else if(proto === type.protoType){
return true
}else {
proto = Object.getProtoTypeOf(proto)
}
}
}
//使用方法
const s = 'abc'
myInstanceOf(s, 'string') // true
方法三： Object.protoType.toString.call(obj)
toString 方法为对象原型上的方法，直接调用toString 方法 返回 “[object: ‘Xxxxx’]” , ‘Xxxxx’ 就为对象的类型，object 调用toString 方法 直接返回 “[object: ‘object’]” 字符串， 其他类型的值调用需要使用call() 调用才能返回正确的值。
Object.protoType.toString({
}) // "[object Object]"
Object.protoType.toString.call('str') //"[object String]"
Object.protoType.toString.call(124) // "[object Number]"
其他也可以使用 数据类型的转换
如： Boolean() 类型转换 Number() 类型转换
8、Axios与Ajax的区别。
9、HTML中的DOM操作。
10、普通函数与自定义hook的区别。
11、SSR服务端渲染的理解。
12、浏览器如何做静态资源缓存？
13、样式覆盖如何处理？
14、H5 与手机是如何通信的？
15、如何判断是手机端还是PC端？
16、Event Loop事件轮询机制。
17、无状态组件、有状态组件。
18、箭头函数与普通函数的区别？本质区别是什么？
19、Redux工作流。
20、 移动端适配怎么做？
21、如何实现全网置灰。
react 常见面试题
1、React 的类组件与函数式组件什么区别？
2、React源码读过吗？读了哪些？
3、 React 中的组件通信。
4、React Hook的副作用。
5、React 里面的优化点。
6、React Portal 的理解与使用。
7、useEffect和useLayoutEffect区别
8、react如何实现的中断可恢复更新
9、hooks和class的区别（hooks解偶）
10、diff原理、fiber原理
11、hooks如何模拟didupdate生命周期
vue 常见面试题
1、vue3.0 中Composition Api 与vue2.0 中 Composition Api 有什么不同
2、vue3.0 中 Treeshaking 特性，举例说明
3、vue3.0 中 为什么要使用proxy api 替代 definedproperty API
Typescript 面试题
基础知识方面
1、如何检测资源加载时长。
2、如何检测首屏、白屏渲染时长。
3、js加载执行：async, defer, preload, prefetch的区别？
4、浏览器从输入url到渲染的过程？
5、浏览器的进程与线程
6、错误捕获
7、webpack优化手段
8、如何监听到某个资源加载失败以及要怎么处理？
9、jsBridge的原理
10、 浏览器合成层
11、css加载会阻塞dom渲染吗？会阻塞js执行吗？
12、h5优化手段
13、强缓存、协商缓存与cdn缓存的区别
网络知识
1、http缓存
2、https原理
3、解决跨域请求头都需要设置什么
4、cookie、session、localStorage分别是什么？有什么作用？
5、什么情况下会发送预检请求？如何优化？
手写实现
1、实现flat
使用栈的思路实现 flat
const flat = ( arr ) => {
const result = [];
const tempArr = [].concat(arr);
while tempArr.length>0:
const itemArr = tempArr.pop()
if(Array.isArray(itemArr)){
tempArr.push(...itemArr)
}else{
result.unshift(itemArr)
}
return result
}
使用reduce 实现 flat
const flat = (arr) => {
return arr.reduce((pre,next)=>{
return pre.concat(Array.isArray(next) ? flat(next) : next)
}, [])
}
2、 实现promise.all
3、 实现new
const newObj = () => {
const obj = new Object();
const Constuct =
}
4、订阅发布
5、实现一个缓存函数
6、数组去重
7、arrayToTree 将
8、实现接口最大并发
9、 防抖
const antiShake = (fn, waitTime) => {
let timer = null;
return (...args)=>{
if(timer) clearTimeout(timer)
timer = setTimeout(()=>{
fn(...args)
},waitTime)
}
}
10、节流
const throttle = (fn, wTime) => {
let timer = null;
return (...args) => {
if(timer) return
timer = setTimeout(()=>{
fn(...args)
timer = null;
},wTime)
}
}
11、reduce
12、深拷贝
13、promise
14、柯里化
15、千分位分隔符
16、promisify
17、js获取指定范围随机数
使用 window.crypto.getRandomValues() 获取数据数
//获取指定范围
function getRandom(min: any, max: any) {
const randomBuffer = new Uint32Array(1);
window.crypto.getRandomValues(randomBuffer);
let randomNumber = randomBuffer[0] / (0xffffffff + 1);
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(randomNumber * (max - min + 1)) + min;
}
18、vue3 获取本地图片 方法封装
// ../../../assets 图片本地路径
const imgUrl = (path: string) => {
return new URL(`../../../assets/${
path}`, import.meta.url).href
}