前端面试常问题

小黄学前端

已于 2022-11-01 00:24:05 修改

阅读量94

点赞数

分类专栏：冲刺秋招文章标签：面试前端

于 2022-08-05 22:15:00 首次发布

本文链接：https://blog.csdn.net/qq_51284317/article/details/126185836

版权

冲刺秋招专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、Cookie、LocalStorage、SessionStorage的区别？

解答：

1、共同点：

（1）Cookie、 LocalStorage、SessionStorage都是存储在浏览器本地；

（2）Cookie、LocalStorage、SessionStorage数据共享都遵循同源原则。（SessionStorage还限制必须是同一个页面）

2、区别：

（1）Cookie是由服务器端写入，而 LocalStorage、SessionStorage都是由前端写入， Cookie的生命周期是由服务器端在写入的时候就设置好的，LocalStorage是写入就一直存在，除非手动清除，SessionStorage在页面关闭的时候就会自动清除；

（2）Cookie的存储空间比较小，大概4KB。LocalStorage、SessionStorage存储空间比较大，大概5M；

（3）在前端给后端发送请求的时候会自动携带Cookie中的数据，但是LocalStorage、SessionStorage；

（4）Cookie、 LocalStorage、SessionStorage应用场景不同，Cookie一般用于存储登录验证信息SessionID或者token，LocalStorage常用于存储不易变动的数据，减轻服务器的压力，SessionStorage可以用来检测用户是否是刷新进入页面，如音乐播放器恢复播放进度条的功能。

二、浏览器的缓存机制

解答：

“二、缓存过程分析” 至 ”三、3.协商缓存“

三、JS数据类型有哪些，区别是什么？

解答：

1、JS数据类型分为两类，一类是基本数据类型，分别是Number 、String、Boolean、Null、Undefined、BigInt、Symbol。另一类是引用数据类型，通常用Object代表，普通对象、数组、正则、日期、Math数学函数都属于Object。

2、数据分成两大类的本质区别：基本数据类型和引用数据类型在内存中的存储方式不同

1）基本数据类型是直接存储在栈中的简单数据段，占据空间小，大小固定，属于被频繁使用的数据；

2）引用数据类型是存储在堆内存中，占据空间大，大小不固定。引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体。

另注：

1、symbol代表创建后独一无二且不可变的数据类型，其主要是为了解决可能出现的全局变量冲突问题；

2、BigInt是一种数字类型的数据，它可以表示任意精度格式的整数，使用BigInt可以安全地存储和操作大整数，即便这个数已经超出了Number能够表示的安全整数范围

四、防抖和节流

解答：

1、防抖：频繁触发事件后，在 n 秒内函数只能执行一次，如果在 n 秒内再次触发事件，则会重新计算函数执行时间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type = "text"/>
</body>
<script type="text/javascript">
    //防抖
    let element1 = document.querySelector("input")
    element1.oninput = debounce(function() {    
        console.log(this.value)
    }, 500)

    function debounce(fn, delay) {
        let timerId = null  //计时器
        return function() {
            if(timerId !== null) clearTimeout(timerId) //再一次触发事件，若存在旧计时器，清除
            timerId = setTimeout(() => { //设置新的计时器
                fn.call(this)  //delay后执行函数
            }, delay)
        }
    }
</script>
</html>

2、节流：频繁触发事件后，在 n 秒中只执行一次函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>节流按钮</button>
</body>
<script type="text/javascript">
    //节流
    let element2 = document.querySelector("button")
    element2.onclick = throttle(function() {    
        console.log("执行函数")
    }, 100000000)

    function throttle(fn, delay) {
        let flag = true  //是否可以执行函数
        return function() {
            if(flag) {
                fn.call(this)  //执行函数
                flag = null  //不能再执行函数了
                setTimeout((flag) => {
                    flag = true                
                }, delay)  //delay后可以再次执行函数
            }
        }
    }
</script>
</html>

3、节流和防抖的作用：减少触发频率，以便提高性能

五、CDN

1、CDN

Content Delivery Network，即内容分发网络。CDN是构建在网络之上的内容分发网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。

2、CDN基本原理

在用户访问相对集中的地区设置一些缓存服务器。当用户访问网站时，利用全局的负载均衡技术将用户的访问指向距离最近的缓存服务器，由缓存服务器代替源站服务器响应用户的访问请求。这样一方面减轻了源站服务器的工作压力，另一方面使用户可就近取得所需内容，解决网络拥挤的状况，提高用户访问网站的响应速度。

六、promise和async/await区别

别人写得很好，直接看链接

七、捕获事件和冒泡事件

1、思考：

1）我们真的能够通过输入设备（键盘、鼠标、触摸屏）”点击一个按钮“吗？

实际上，我们"点击一个按钮"并没有位置信息，但是操作系统会根据位移的累积计算，提供一个坐标给浏览器，然后把这个坐标转换为具体的dom对象，再使得它的视图对点击事件有反应，这就是计算机处理事件的逻辑，其实这就是捕获事件

2）我们想要打开电视机，按了电视机开关按钮，那我是不是也相当于碰到了电视呢？

是的，这就是人类处理事件的逻辑，其实这就是冒泡事件

3）总结：捕获事件是计算机处理事件的逻辑，冒泡事件是人类处理事件的逻辑

2、作用：捕获事件和冒泡事件是为了解决页面事件流（页面中接收事件的顺序）问题

3、捕获事件和冒泡事件详解

4、事件委托：也称为事件代理，即把原本需要绑定在子元素的响应事件（click、keydown等）委托给父元素，让父元素承担事件监听的职务。事件代理的原理是冒泡事件。
<ul id="father">
  <li id="son1">son1</li>
  <li id="son2">son2</li>
  <li id="son3">son3</li>
</ul>

//给子元素绑定事件
var item1 = document.getElementById("son1")
var item2 = document.getElementById("son2 ")
var item3 = document.getElementById("son3")
 
item1.onclick = function() {
    console.log("son1")
}
item2.onclick = function() {
    console.log("son2")
}
item3.onclick = function() {
    console.log("son3")
}

//事件委托：把绑定在子元素的响应事件委托给父元素
var item1 = document.getElementById("son1")
var item2 = document.getElementById("son2 ")
var item3 = document.getElementById("son3")

document.getElementById("father").addEventListener("click", function(event) {
    var target = event.target
    switch (target.id) {
         case "son1":
             console.log("son1")
             break;
         case "son2":
             console.log("son2")
             break
         case "son3": 
             console.log("son3")         
             break
    }
})

八、 for(...in...)和for(...of...)

for(...in...) ：遍历获取对象的key、数组的索引

//获取对象的key
let obj = {
    a: 1,
    b: 2,
    c: 3
}
for(let key in obj) {
    console.log(key)  //a b c
}

//获取数组的索引
arr = [1,2,3,4,5]
for(let index in arr) {
    console.log(index)
}

for(...of...)：不能遍历对象，能够遍历获取数组的元素/字符串的字符

//遍历数组的元素
let arr = [1,2,3,4,5]
for(let value in arr) {
    console.log(value)  //1 2 3 4 5
}

//遍历字符串的字符
let str = "1,2,3,4,5"
for(let i of str ) {
    console.log(i)  //1 , 2 , 3 , 4 , 5
}

九、装箱、拆箱

别人写得很好，直接看

十、状态码

十一、git命令

git reset --hard HEAD

git reset --soft HEAD^

git revert HEAD

十二、循环闭包与setTimeout()

for(var i=0; i<=5; i++) {
    setTimeout(function() {
        console.log(i)  //6 6 6 6 6 6
    }, i*1000)
}

//解决方案一（形成闭包）
for(let i=0; i<=5; i++) {
    setTimeout(function() {
        console.log(i)  //1 2 3 4 5
    }, i*1000)
}

//解决方案二（形成闭包）
for(var i=0; i<=5; i++) {
    (function(j) {
        setTimeout(function() {
            console.log(j)  //1 2 3 4 5
        }, j*1000)
     })(i)
}