2022前端面试题

153 阅读2分钟

这个只是自己的一个记录如果有错误,欢迎👏指正

缓存

浏览器分为强缓存跟协商缓存,强缓存一般是有expirescache-control来判断,expires就是过期缓存时间,这个是一个本地时间,所以就会有问题,所以后面一般看 cache-control.他有个max-age就是过期的时间。

cache-control
max-age设置强制缓存的时间,单位s。资源会缓存到本地
no-cache设置不强制缓存,每次都去进行协商缓存,确定资源是否有变更,一般用在index.html。 资源会缓存到本地
no-store不进行强制缓存和协商缓存,直接拉取最新的资源。资源不缓存到本地。

如果没有设置cache-control或者expires浏览器会有自己的缓存机制,第一次会走协商缓存,第二次就是强缓存了

缓存的位置有memory cache(浏览器内存空间) 和 disk cache(磁盘读取)

协商缓存就有ETagLast-Modified ETag解决了Last-Modified使用时可能出现的资源的时间戳变了但内容没变及如果再一秒钟以内资源变化但Last-Modified没变的问题,感觉ETag更加稳妥。

继承
  • 原型链继承
function SuperType(){
  this.name='superType';
  this.color=['red'];
}
function SubType(){
  this.subName='subName'
}
SubType.protoType=new SuperType();

子类利用prototype继承父类的实例,继承了父类的原型对象 来自原型对象的属性被所有实例共享 实例化多对象会把引用类型的继承,基本类型不会

  • 构造继承
function SuperType(name){
  this.name=name;
  this.color=['red'];
}
function SubType(){
  this.subName='subName',
  SuperType.call(this,'SuperName')
}

构造继承可以给父类传参,实现多继承 子类实例是子类的 不是父类的 不能继承到父类的原型属性跟方法,但是可以继承实例方法跟属性 不能实现函数复用

  • 组合继承
function SuperType(name){
  this.name=name;
  this.color=['red'];
}
function SubType(name,subName){
  this.subName=subName,
  SuperType.call(this,name)
}
SubType.protoType=new SuperType();

可以传参,可以多继承,可以继承父类的实例跟原型上面的属性跟方法 调用了两次父类构造函数,生成了两份实例

  • 寄生组合继承
function SuperType(name){
  this.name=name;
  this.color=['red'];
}
function SubType(name,subName){
  this.subName=subName,
  SuperType.call(this,name)
}
SubType.protoType=Object.create(SuperType.prototype);

只调用一次 SuperType 构造函数,只创建一份父类属性 原型链保持不变 能够正常使用 instanceof 与 isPrototypeOf

  • extends 一个语法糖,实际就是寄生组合继承
http1.0跟http1.1的区别

http1.1有长连接Keep-Alive

// todo