前端面试（六）

最新推荐文章于 2021-08-16 16:24:39 发布

鲤鱼和龙虾

最新推荐文章于 2021-08-16 16:24:39 发布

阅读量186

点赞数

分类专栏：面试文章标签：面试

本文链接：https://blog.csdn.net/lxj7607/article/details/105184211

版权

面试专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一、实现一个高度已知，左右宽度固定，中间宽度自适应的布局，有几种方式？

float布局，absolute布局，flex布局，table布局，grid布局。

（float布局，absolute布局会脱离文档流，flex和grid兼容性问题，table布局比较繁琐，把高度已知去掉，flex和table布局依旧能用）

二、CSS盒模型

content+padding+border+margin

IE模型：width/height=content+padding+border

标准模型：width/height=content

通过CSS3 box-sizing设置

IE模型 box-sizing: border-box;

标准模型 box-sizing: content-box;

JS获取盒模型对应的宽高：

dom.style.width/height;

dom.currentStyle.width/height;

window.getComputedStyle(dom).width/height;

dom.getBoundingClientRect().width.height;

三、BFC

概念：块级格式化上下文

原理：同一个BFC外边距方向会发生重叠；BFC区域不会与浮动元素的box重叠；BFC是一个独立容器，不被外面影响；BFC计算高度的时候，浮动元素也参与

创建BFC:float不为none；position为absolute或者fixed;display的值为table-cell,table-caption,or inline-block中的任何一个;

overflow不为visible

BFC作用：解决边距问题,清除浮动，解决父级元素高度塌陷（BFC子元素即使是float也会参与计算）

四、DOM事件

DOM事件的级别：

DOM0: element.onclick = function();

DOM2: element.addEventListener('click',function(){});

DOM3: element.addEventListener('keyup',function(){});

DOM事件模型:

捕获（从最外层往里），冒泡（从最里层往外）

DOM事件流：

捕获——目标阶段——冒泡

DOM事件捕获的具体流程：

Evevt对象的常见应用：

event.preventDefault(); // 阻止默认事件

event.stopProgation(); // 阻止冒泡

event.stopImmediateProgation();

stopImmediatePropagation方法：

　　　　stopImmediatePropagation方法作用在当前节点以及事件链上的所有后续节点上，目的是在执行完当前事件处理程序之后，停止当前节点以及所有后续节点的事件处理程序的运行

stopPropagation方法

　　　　stopPropagation方法作用在后续节点上，目的在执行完绑定到当前元素上的所有事件处理程序之后，停止执行所有后续节点的事件处理程序

event.currentTarget; // 事件绑定的元素

event.target; //触发事件的元素

两者在没有冒泡的情况下，是一样的值，但在用了事件委托的情况下，就不一样了；currentTarget始终是监听事件者，而target是事件的真正发出者。

自定义事件：

var eve = new Event('custome');  // 自定义事件
ev.addEventListener('custome',()=>{  // 事件监听
   console.log('custome');
}
ev.dispatchEvemt(eve);  // 触发事件

五、HTTP协议

特点：

简单快速，灵活，无连接、无状态

组成：

请求行，请求头，空行，请求体；状态行，响应头，空行，响应体

方法：

GET获取资源,POST传输资源,PUT更新资源,DELETE删除资源,HEAD获取报文首部

POST和GET的区别：

●GET在浏览器回退时是无害的，而POST会再次提交请求
●GET产生的URL地址可以被收藏，而POST不可以
●GET请求会被浏览器主动缓存，而POST不会，除非手动设置
●GET请求只能进行url编码，而POST支持多种编码方式
●GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留
●GET请求在URL中传送的参数是有长度限制的，而POST没有限制
●对参数的数据类型，GET只接受ASCII字符，而POST没有限制
●GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息
●GET参数通过URL传递，POST放在Request body中

HTTP状态码

1xx:指示信息-表示请求已接收，继续处理
2xx:成功-表示请求已被成功接收
3xx:重定向-要完成请求必须进行更进一步的操作
4xx:客户端错误-请求有语法错误或请求无法实现
5xx:服务器错误-服务器未能实现合法的请求

200 OK:客户端请求成功
206 Partial Content:客户发送了-一个带有Range头的GET请求，服务器完成了它
301 Moved Permanently:所请求的页面已经转移至新的url
302 Found:所请求的页面已经临时转移至新的url
304 Not Modified:客户端有缓冲的文档并发出了一个条件性的请求，服务器告诉客户，原来缓冲的文档还可以继续使用
400 Bad Request:客户端请求有语法错误，不能被服务器所理解
401 Unauthorized:请求未经授权，这个状态代码必须和WWW- Authenticate报头域-起使用
403 Forbidden:对被请求页面的访问被禁止
404 Not Found;请求资源不存在
500 Internal Server Error:服务器发生不可预期的错误原来缓冲的文档还可以继续使用
503 Server Unavailable:请求未完成，服务器临时过载或当机，一段时间后可能恢复正常

持久连接（1.1版本才支持）

HTTP协议采用“请求-应答"模式，当使用普通模式，即非Keep-Alive模式时，每个请求/应答客户和服务器都要新建一个连接, 完成之后立即断开连接(HTTP协议为无连接的协议)。当使用Keep-Alive模式(又称持久连接、连接重用)时，Keep-Alive 功能使客户端到服务器端的连接持续有效，当出现对服务器的后继请求时，Keep-Alive 功能避免了建立或者重新建立连接

管线化

在使用持久连接的情况下，某个连接上消息的传递类似于
请求1 ->响应1 ->请求2->响应2->请求3 ->响应3
某个连接上的消息变成了类似这样
请求1->请求2->请求3->响应1>响应2->响应3

●管线化机制通过持久连接完成，仅HTTP/1.1支持此技术
●只有GET和HEAD请求可以进行管线化，而POST则有所限制.
●初次创建连接时不应启动管线机制，因为对方(服务器)不一-定支持HTTP/1.1版本的协议
●管线化不会影响响应到来的顺序,如上面的例子所示，响应返回的顺序并未改变
●HTTP/1.1要求服务器端支持管线化，但并不要求服务器端也对响应进行管线化处理，只是要求对于管线化的请求不失败即可
●由于上面提到的服务器端问题，开启管线化很可能并不会带来大幅度的性能提升，而且很多服务器端和代理程序对管线化的支持并不好，因此现代浏览器如Chrome和Firefox默认并未开启管线化支持

六、原型链

1、创建对象的几种方法

（1）字面量创建：

var o1={name:'o1};
var o11=new Object({name:'o11});

（2）构造函数
var M=function(){this.name='o2}
var o2=new M();

（3）Object.create方法
var P={name:'o3};
var o3=Object.create(P)

2、原型链

3、instanceof

4、new运算符

七、继承

1、类的声明

// 构造函数声明
function Animal(){
   this.name = 'name'
}

// ES6的class声明
class Anaimal2{
  constructor(){
     this.name = name;
  }
}

2、实例化

new Animal();

new Animal2();

3、继承方式

构造函数继承

通过call改变this指向

// 构造函数继承
function Parent1() {
  this.name = 'parent1';
}
function Child1() {
  Parent1.call(this); // apply
  this.type = 'child1';
}

缺点：原型链prototype的属性不会继承，部分继承

原型链继承

通过原型链查找实现继承

正在上传…重新上传取消正在上传…重新上传取消

function Parent2() {
   this.name= 'parent2';
}
function Child2() {
   this.type = 'child2';
}
Child2.prototype = new Parent2();  // 改变原型指向从而实现继承

new Child2(); // 实例化

缺点：修改实例的属性会影响到类的属性从而影响到其他实例的属性，因为实例是共用prototype属性

组合继承

function Parent3() {
  this.name = 'parent3';
}
function Child3() {
  Parent3.call(this);  // 构造继承
  this.type = 'child3';
}
Child3.prototype = new Parent3();  // 原型继承

// 组合继承的优化1
function Parent4(){
  this.name = 'parent4';
  this.play = [1,2,3];
}
function Child4(){
  Parent4.call(this);
  this.type = 'child4';
}
Child4.prototye = Parent4.prototype;

// 组合继承的优化2
function Parent5() {
  this.name = 'parent5';
  this.play = [1,2,3];
}
function Child5() {
  Parent4.call(this);
  this.type = 'child5';
}
Child5.prototye = Object.create(Parent5.prototype);
Child5.prototye.constrctor = Child5;