常见前端面试题总结

爱上你家菜包

已于 2024-02-20 21:14:48 修改

阅读量695

点赞数

分类专栏：基础/常用文章标签：前端

于 2021-04-06 02:31:31 首次发布

本文链接：https://blog.csdn.net/s18813688772/article/details/115451914

版权

基础/常用专栏收录该内容

27 篇文章 0 订阅

订阅专栏

1.undefined和null的区别是什么
答：typeof(null)是'object',typeof(undefined)是'undefined'

2.Number(null) Number(undefined)输出什么
答：0和NaN

3.prototype中的constructor指向prototype所在的构造函数
例如：Array.prototype.constructor === Array; // true

Array.constructor === Function; // true

Object.constructor === Function; // true

Function.constructor === Function; // true

4.如何用闭包的方式让其输出0,1,2,3,4

for(var i=0;i<5;i++){
setTimeout(()=>{ console.log(i) }, 100)
}

   答：for(var i=0;i<5;i++){
       (function(i){
           setTimeout(()=>{ console.log(i) }, 100)
       })(i)
   }

只要内部函数执行完，但其局部变量无法被释放就算形成闭包，所以一般有2种情况：

1) 局部引用类型变量指向外部变量
2) 函数A中存在异步的子函数B，且子函数B中用到了函数A的局部变量

5.输出结果是什么

new Promise(function(resolve,reject){
           setTimeout(()=>{
                   resolve();
                   console.log(2)
           },0)
           console.log(3)
   })
   setTimeout(()=>{console.log(4)},0)
   function a(){console.log(1)}
   a()

答：3,1,2,4
6. '01'×1 和 '1a'×1 分别输出什么
答：1和NaN

7.new: 4件事
1. 创建一个新的空对象
2. 设置新对象的__proto__属性继承构造函数的原型对象。
3. 用新对象调用构造函数
将构造函数中的this，临时替换为新对象。
4. 返回新对象的地址给变量

8.浏览器缓存都有哪些，如何设置

设置方式：<meta http-equiv="cache-control" content="no-cache">

   1) http缓存：强缓存和协商缓存
       强缓存：
           用户发送的请求，直接从客户端缓存中获取，不发送请求到服务器。
           比如设置了cache-control：max-age=1000
       协商缓存：
           用户发送请求到服务器之后，由服务器判定客户端是否从自己缓存中获取资源。
           比如设置了cache-control：no-cache 或 max-age=0

注意：协商缓存中，由于last-modifed只能精确到秒级，某些1秒内更新多次的资源就体现不出来，这时就需要结合Etag。服务器先判断Etag，如果Etag没变再判断last-modifed，如果都没变化就返回304，让浏览器读取自己缓存的资源即可。

       常见字段：
       Pragma：no-cache（跟cache-control的no-cache一样。http1.0的字段，后被cache-control替换）
       Expires：日期-时间（服务器给出的过期时间。http1.0的字段，后被cache-control替换）
       cache-control：no-cache（表示不读取缓存，直接请求服务器）
       cache-control：no-store（表示不缓存）
       cache-control：max-age=[秒]（表示缓存的时长，优先级>Expires）
       cache-control：private（表示只有客户端可以缓存）
       cache-control：public（表示客户端和代理服务器都可缓存）
       last-modifed：日期-时间（表示该服务器资源最后一次更新时间，只能精确到秒级）
       Etag：xxx（表示服务器为该资源做的唯一标识，配合last-modifed使用。）

2) cookie

存储大小4k左右；一般由服务器生成，每次与服务器通信都会被携带在http头部中，当数据量大会降低传输性能。

3) localstorage 和 sessionStorage

存储大小5M左右；仅在浏览器中保存，不参与服务器的通信。

9.图标的发展史

   1) 雪碧图
   2) Font icon
   3) svg(如Font awesome)

10.xss原理是什么，有几种类型，如何防御

参考文章：浅谈xss攻击

原理：xss表示跨站脚本攻击。指攻击者往Web页面里插入恶意Script代码，当用户浏览该页时，嵌入Web里面的Script代码会被执行，从而达到恶意攻击用户的目的。

危害：盗取用户cookie；劫持流量；

种类：反射型xss（非持久）dom型xss（非持久）存储型xss（持久）

总结：
xss攻击基本上都是以反射型xss为基础。通过url或者表单元素向页面注入恶意js代码，当其他用户访问到该页面，就会自动执行恶意代码，这属于受到反射型xss攻击。如果还需要这些代码操作用户浏览器的dom才能实现目的，则属于dom型xss攻击。如果这些恶意代码被存入数据库，则属于存储型xss攻击。

反射型和dom型都属于非持久的，因为服务器如果重启了，页面被初始化，恶意代码也就没了。
存储型属于持久的，因为被存入数据库了，用户每次访问该页面都会执行这些恶意代码。

防御：对用户提交的内容作过滤或转义，比如将<script>转义为<script>等等

11.csrf原理是什么，有多少种防御方法

参考文章：浅谈CSRF，如何防御CSRF

原理：csrf表示跨站请求伪造。假如用户A登录了银行网站，在没有关闭的情况下，又去点击了黑客的网站，这时黑客知道该银行转账的url和参数，便伪造了一个url诱惑用户A去点击。用户A一点击，就调用了转账的url，该请求会自动带上用户A的cookie信息（因为用户A没关闭银行网站），以此达到伪造请求的攻击。

黑客利用的就是url请求会自动带上cookie信息的特点，实施这种攻击。所以在CSRF攻击中，黑客并不知道cookie信息，也不需要知道。但实际中，CSRF通常会结合xss一起使用（因为xss可以获取用户cookie），威胁性更大。

防御：

       1) 后台校验http的Referer字段，因为referer会指向请求的发起者(但不保险，有些浏览器可以修改referer)。
       2) 把token作为一个请求参数并在后台验证。如敏感操作的url可用动态token。
       3) 把token放到http的header中的自定义属性并在后台验证

12.html可用于跨域的三个标签

13.如何中断promise的链式调用

Promise有三个状态：pending(进行中)，fulfilled(成功)，rejected(失败)。 Promise状态的改变不可逆。

中断promise的链式调用，可以通过 throw '自定义error'; 或 Promise.reject() 来实现，准确地说是绕过，而不是中断。

由于.then(succ, err)有2个入参，succ是resolve()后会执行的回调，而err是reject()或throw 'error'会执行的回调，所以当抛出一个error或reject之后，promise首先会看接下来的.then(succ, err)中是否定义了err回调，如果没定义则跳过succ回调，然后继续看接下来的链式函数是否为catch(err)，如果还是没有，则继续执行下一个链式函数。直到出现err或catch，则执行相关逻辑，接着开始执行下一个.then(succ, err)中的succ。

Promise.resolve().then(() => {
	console.log('ok1')
	throw 'throw error1'
}).then(() => {
	// 错误捕获前的第一个回调不会执行
	console.log('ok2')
}).catch(err => {
	console.log('err1->', err)
    return 'catch中的err1';
}).then((e) => {   
	// 该函数将被调用
    console.log(e);    //catch或then中return的结果，在下一个then的第一个回调都可以拿到
	console.log('ok3')
	throw 'throw error3'
}).then(() => {
	// 错误捕获前的第一个回调不会执行
	console.log('ok4')
}, err => {     
	// 捕获错误
	console.log('err3->', err)
})
//输出结果：
//ok1
//err1-> throw error1
//ok3
//err3-> throw error3

注意：在.then()和.catch()的回调中return某个值，都会被作为入参，返回到下一个.then(succ, fail)的succ中。

另外一个，假如Promise.all([a,b,c]).then()并发的请求中有一些结果返回是失败或者报错，会导致什么问题？

答：会导致.then(succ, fail).catch()的succ回调不执行，也就是说连返回正确的结果也拿不到，因为Promise.all跟普通的Promise实例一样，捕获到某个请求的逻辑报错或失败结果，就会直接去执行后面的fail或catch。

解决办法：提前捕获异常。

var a=new Promise((res,rej)=> {
	throw 'error';
})
var b=new Promise((res,rej)=> {
	setTimeout(()=>{
		rej('reject');
	},1000)
})
var c=new Promise((res,rej)=> {
	res('success');
})
//第一种方式，拿不到 "success"
Promise.all([a,b,c]).then((arr)=>{console.log(arr)}).catch((e)=>{console.log(e)})

//返回 "error"

//第二种方式
var array = [a,b,c].map( v => v.catch( e => `出错的值：`+ e ) )
Promise.all(array).then((arr)=>{console.log(arr)}).catch((e)=>{console.log(e)})

//返回 ["出错的值：error", "出错的值：reject", "success"]

14.vue和react的diff算法有什么区别

1) 比对的方式
列表比对，vue采用从两端到中间的比对方式，而react则采用从左到右依次比对的方式。当一个集合，只是把最后一个节点移动到了第一个，react会把前面的节点依次移动，而vue只会把最后一个节点移动到第一个。总体上，vue的对比方式更高效。
节点比对，当节点元素类型相同，但是属性不同，vue认为是不同类型元素，删除重建，而react会认为是同类型节点，只是修改节点属性。即react只比对key和节点类型，而vue还比对了属性。
2) 更新dom的方式
vue的Diff使用双向链表，边对比，边更新DOM。而React主要使用diff队列保存需要更新哪些DOM，得到patch树，最后统一批量更新DOM。

相同点：
虚拟DOM在比较时只比较同一层级节点，复杂度都为 O(n)
都使用key比较是否为相同节点，都为了尽可能地复用节点
都是操作虚拟DOM，最小化操作真实DOM，提高性能

15.TCP/IP 介绍

tcp/ip模型只有5层：物理层、链路层、网络层、传输层、应用层。

tcp/ip协议是指利用 IP 进行通信时所必须用到的协议群的统称。

TCP是面向连接的、可靠的流协议，实行“顺序控制”或“重发控制”机制。

UDP是面向无连接的，不可靠的流协议，不能确保信息一定到达。

16.http2.0和http1.1的区别

http1.1
持久连接keep-alive，解决了重复3次握手的问题。
管道机制：同一个TCP连接里，客户端虽然支持并发多个请求，但数据通信必须按顺序进行，造成了队头阻塞，所以实际使用中，浏览器都是默认关闭此功能的。相当于说，同一tcp连接并发多个请求的功能并没有真正实现。
新增请求方式：put，delete，options，connect，trace

http2.0
以二进制传输：头信息和数据体都是二进制，并统称为“帧”（frame）
支持多路复用TCP：即一个tcp连接可以并发多个请求，且不需要按顺序返回请求，避免了“队头阻塞”
header压缩：提升推送效率
服务端推送：允许服务端主动向客户端发送资源

注意：Chrome浏览器最多允许对同一个域名Host建立6个TCP连接，但不同的浏览器有所不同。

17.vue的响应式原理是什么，vue2.0和3.0有什么区别，3.0新增了什么，有什么好处