面试题

盒模型

• IE盒模型：content = content + padding + border
• W3C标准盒模型：content = content
• box-sizing: border-box;

垂直绝对居中

1. flex布局

   display: flex;
   justify-content: center;
   align-items: center;
   

2. 定位 + transfrom + translte

   //父元素
    position: relative;
    //子元素
    position: absolute;
    tranform:translte(-50%,-50%)
   

3. 定位 + margin-left + margin-top

    .parent{
      height: 500px;
      border: 1px solid red;
      position: relative;
    }
    .child{
      border: 1px solid green;
      width: 300px;
      height: 100px;
      height: 100px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -150px;
      margin-top: -50px;
    }
   

浏览器的存储机制

1. localStorage：存储在浏览器中，一般不会消失，除非手动删除，大小可达5MB.具有setItem(),getItem(),removeItem()，clear()API。
2. cookie:可以被发送到服务器，可以设置过期时间expires，一般大小为4kb。
3. sessionStorage:存储在浏览器中，会话关闭就消失。

localStorage可以存储对象么？

MDN:localStorage中的键值对，总是以字符串的形式存储。（意味着：数值类型会自动转换成字符串类型）
要存储的是JSON对象的话，需要使用JSON.stringify(),将JSON对象转换成字符串在进行存储。
可以试着写入对象，但数据回丢失，读取的结果是[object object]

window.localStorage.setItem('key',{name: '111'})
window.localStorage.getItem('key') // [object Object]

触发事件有哪几种阶段，如何在捕获阶段触发事件。

1. 事件捕获，从不具体到具体
2. 处于目标阶段
3. 事件冒泡，从具体到不具体

addEventListener()第三个参数设置为true，则可以在捕获阶段触发事件。

HTTP请求，如何确定请求的数据类型

Content-type:在请求中，该字段用于客户端告诉服务器实际发送的数据类型。在响应中，Content-Type标头告诉客户端实际返回的内容的内容类型。

content取值.PNG

判断数组类型的方法

1. instanceof()

   var arr = new Array()
   console.log(arr instanceof Array) // true
   

2. Object.prototype.toString.call()

   console.log(Object.prototype.toString.call([]) === '[object Array]') // true
   

3. Array.isArray()

   Array.isArray([]) // true
   

   Array.isArray()的实现原理

   Array.isArray = function(array){
     Object.prototype.toString.call(array) === '[object Array]'
   }
   

三次握手及四次挥手

1. 三次握手
   客服端发送SYN报文 SYN = 1, seq = x 进入SYN_SEND阶段
   服务器端接受SYN报文，返回一个ACK响应ACK = 1,SYN = 1,ack = x+1,seq = y进入SYN_RECV阶段
   客户端接受服务器的SYN报文，返回一个ACK响应axk = y+1,seq = x+1.ACK=1进入Etablished阶段
2. 四次挥手
   客户端发送FIN=1，请求关闭连接SYN=1,seq = x进入FIN-WAIT-1阶段
   服务器端返回ACK,ACK =1,seq = y,sck = x+1,进入CLOSE_WAIT阶段，客服端进入FIN-WAIT-2阶段
   服务器通知应用程序关系连接，之后返回给客户端ACK=1,seq = z,ack = x+1,FIN=1进入LAST_ACK阶段
   客户端返回ACK = 1,FIN = 1,seq = x+1,ack = z+1进入TIME_WAIT，服务端进入CLOSED阶段

为什么挥手比握手多了一次

握手过程，通信只需要处理连接。挥手混成，通信需要处理数据+连接。

我们写一个函数function，他的原型是什么

function f(){}
console.log(f.__proto__ === Function.prototype) // true

vue的生命周期

1. beforeCreate 初始化事件
2. created data属性绑定，可以发送ajax请求
3. beforeMount：
4. mounted ：可以获取到$el
   //当data选项中的数据发生改变时,触发deforeUpdate,updated
5. beforeUpdate
6. updated 组件更新，视图重新渲染
7. beforeDestroy：销毁之前 可以清除定时器，实例还可用
8. destroyed：销毁完成，实例不可用

虚拟DOM的优点

详解vue中的虚拟DOM

页面卡顿的解决办法

chrome dev tools的 performance 可以测出页面的卡顿来自什么部分
script，重绘和重排

const定义的对象是否可以改变

const a= { b: '123'}
a.b = '456'
console.log(a) // {b: '456'}

const 定义的对象，对象地址不可以改变，但对象的属性值可以改变。

JS是单线程的，那为什么会执行异步代码，以及异步代码如何执行

JS单线程，浏览器多线程。（不觉明历）

vue的生命周期 哪些钩子函数涉及到VDOM

beforeUpdate,updated,beforeMount,mounted.beforeDestory（不确定）

map 和 forEach的区别（深入）

• 能用forEach()做到的，map()同样可以。反过来也是如此。
• map()会分配内存空间存储新数组并返回，forEach()不会返回数据。
• forEach()允许callback更改原始数组的元素。map()返回新的数组。
• map和forEach都不会退出循环。所以在ES6中，添加了for...of

媒体查询的优缺点

1. 优点：
   • 面对不同分辨率设备灵活性强
   • 能够快速敏捷解决多设备显示适应问题
2. 缺点：
   • 兼容各种设备工作量大，效率低下
   • 代码累赘，会出现隐藏无用的元素，加载事件加长。