面试 - Githubissues

css

css垂直水平居中的几种方式？
BFC是什么？触发条件是什么？
清除浮动

js

什么是原型链？
判断数据类型
什么是闭包？闭包的问题怎么解决？
new是怎么实现的？

网络

同源策略
跨域
三次握手详情

html

重绘与回流

Vue

生命周期
组件传参
data变化触发哪个生命周期
vuex中的异步action是怎么实现的
vue的实现机制是什么？
讲讲虚拟dom？

react

react与vue的比较
在哪个生命周期优化
redux是什么？
redux有哪些中间件

1. css垂直水平居中的几种方式？

line-height: height

display: flex

<div class="box">
<div class="content">
</div>
</div>


.box {

background-color: #FF8C00;

width: 300px;

height: 300px;

display: flex;

justify-content: center;

align-items: center;

}

.content {

background-color: \#F00;

width: 100px;

height: 100px;

}

absolute + transform

<div class="box">
<div class="content">
</div>
</div>


.box {

background-color: \#FF8C00;

width: 300px;

height: 300px;

position: relative;

}

.content {

background-color: \#F00;

width: 100px;

height: 100px;

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%,-50%);

}

2. BFC是什么？触发条件是什么

浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。

BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。
float的值不是none。
position的值不是static或者relative。
display的值是inline-block、table-cell、flex、table-caption或者inline-flex
overflow的值不是visible

3. 清除浮动

父元素设置 overflow：hidden

使用:after 伪元素


.clearfix:after {

content:"."; 

display:block; 

height:0; 

visibility:hidden; 

clear:both; 

}

4. 什么是原型链？

原型

①所有引用类型都有一个proto(隐式原型)属性，属性值是一个普通的对象 ②所有函数都有一个prototype(原型)属性，属性值是一个普通的对象 ③所有引用类型的proto属性指向它构造函数的prototype

  var a = [1,2,3];
  a.__proto__ === Array.prototype; // true

原型链

当访问一个对象的某个属性时，会先在这个对象本身属性上查找，如果没有找到，则会去它的proto隐式原型上查找，即它的构造函数的prototype，如果还没有找到就会再在构造函数的prototype的proto中查找，这样一层一层向上查找就会形成一个链式结构，我们称为原型链。

  function Parent(month){
    this.month = month;
  }

  var child = new Parent('Ann');

  console.log(child.month); // Ann

  console.log(child.father); // undefined

5. 判断数据类型

typeof

typeof ''; // string
typeof 1; // number
typeof Symbol(); // symbol
typeof true; //boolean
typeof undefined; //undefined
typeof null; //object
typeof [] ; //object
typeof new Function(); // function
typeof new Date(); //object
typeof new RegExp(); //object

instanceof

伪代码实现instanceof

instanceof (A,B) = {
  var L = A.__proto__;
  var R = B.prototype;
  if(L === R) {
      // A的内部属性 __proto__ 指向 B 的原型对象
      return true;
  }
  return false;
}

对于数组

[] instanceof Array; // true
{} instanceof Object;// true
new Date() instanceof Date;// true

function Person(){};
new Person() instanceof Person;

[] instanceof Object; // true
new Date() instanceof Object;// true
new Person instanceof Object;// true

检测数组可以通过

Array.isArray()

toString

Object.prototype.toString.call('') ;   // [object String]
Object.prototype.toString.call(1) ;    // [object Number]
Object.prototype.toString.call(true) ; // [object Boolean]
Object.prototype.toString.call(Symbol()); //[object Symbol]
Object.prototype.toString.call(undefined) ; // [object Undefined]
Object.prototype.toString.call(null) ; // [object Null]
Object.prototype.toString.call(new Function()) ; // [object Function]
Object.prototype.toString.call(new Date()) ; // [object Date]
Object.prototype.toString.call([]) ; // [object Array]
Object.prototype.toString.call(new RegExp()) ; // [object RegExp]
Object.prototype.toString.call(new Error()) ; // [object Error]
Object.prototype.toString.call(document) ; // [object HTMLDocument]
Object.prototype.toString.call(window) ; //[object global] window 是全局对象 global 的引用

6. 什么是闭包？闭包的问题怎么解决？

闭包就是能够读取其他函数内部变量的函数。

  function a() {
    return b() {
      // to do
    }
  }
  var c = a()
  c() // a()()

常见问题

  for(var i = 0; i <= 6;i++){
    setTimeout(function timer(){
      console.log(i);
    }, i * 1000);
  }//输出结果是6 6 6 6 6 6

解决办法

使用let

for(let i = 0; i <= 6;i++){
  setTimeout(() => {
    console.log(i);
  }, i * 1000);
}//输出结果0 1 2 3 4 5

立即执行函数

for(var i = 0; i < 6; i++){
  (function(){
    var j = i;
    setTimeout( () => {
      console.log( j );
    }, j * 1000);
  })();
}//输出结果0 1 2 3 4 5

7. new是怎么实现的？

首先了解new做了什么，使用new关键字调用函数（new nameFunc(…)）的具体步骤：

创建一个新对象： var obj = {}; function nameFunc (name) { this.name = name }
设置新对象的constructor属性为构造函数的名称，设置新对象的proto属性指向构造函数的prototype对象； obj.proto = nameFunc.prototype;
使用新对象调用函数，函数中的this被指向新实例对象： nameFunc.call(obj);　　//{}.构造函数()
将初始化完毕的新对象地址，保存到等号左边的变量中 obj.name = 'nick'

注意：若构造函数中返回this或返回值是基本类型（number、string、boolean、null、undefined）的值，则返回新实例对象；若返回值是引用类型的值，则实际返回值为这个引用类型。

8. 同源策略

什么是源
- 源（origin）就是协议、域名和端口号。以上url中的源就是：http://www.company.com:80 若地址里面的协议、域名和端口号均相同则属于同源。以下是相对于 http://www.a.com/test/index.html 的同源检测
- http://www.a.com/dir/page.html ----成功
- http://www.child.a.com/test/index.html ----失败，域名不同
- https://www.a.com/test/index.html ----失败，协议不同
- http://www.a.com:8080/test/index.html ----失败，端口号不同
什么是同源策略？同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。所以a.com下的js脚本采用ajax读取b.com里面的文件数据是会报错的。
- 不受同源策略限制的：
- 页面中的链接，重定向以及表单提交是不会受到同源策略限制的。
- 跨域资源的引入是可以的。但是js不能读写加载的内容。如嵌入到页面中的
```
<script src="..."></script>，<img>，<link>，<iframe>
```

9. 跨域

什么是跨域受前面所讲的浏览器同源策略的影响，不是同源的脚本不能操作其他源下面的对象。想要操作另一个源下的对象是就需要跨域。
如何跨域
- webpack, rollup 等工具中的 proxy代理
- jsonp

10. 三次握手详情

TCP在传输之前会进行三次沟通，一般称为“三次握手”，传完数据断开的时候要进行四次沟通，一般称为“四次挥手”。

三次握手

第一次握手：建立连接时,客户端发送syn包(syn=j)到服务器,并进入SYN_SEND状态,等待服务器确认； SYN：同步序列编号(Synchronize Sequence Numbers)
第二次握手：服务器收到syn包,必须确认客户的SYN（ack=j+1）,同时自己也发送一个SYN包（syn=k）,即SYN+ACK包,此时服务器进入SYN_RECV状态；
第三次握手：客户端收到服务器的SYN＋ACK包,向服务器发送确认包ACK(ack=k+1),此包发送完毕,客户端和服务器进入ESTABLISHED状态,完成三次握手.
完成三次握手,客户端与服务器开始传送数据

字段:
1. 序号：seq序号，占32位，用来标识从TCP源端向目的端发送的字节流，发起方发送数据时对此进行标记。
2. 确认序号：ack序号，占32位，只有ACK标志位为1时，确认序号字段才有效，ack=seq+1。
3. 标志位：共6个，即URG、ACK、PSH、RST、SYN、FIN等，具体含义如下：
URG：紧急指针（urgent pointer）有效。
ACK：确认序号有效。
PSH：接收方应该尽快将这个报文交给应用层。
RST：重置连接。
SYN：发起一个新连接。
FIN：释放一个连接。

需要注意的是：
不要将确认序号ack与标志位中的ACK搞混了。
确认方ack=发起方req+1，两端配对。

四次挥手

由于TCP连接时全双工的，因此，每个方向都必须要单独进行关闭，这一原则是当一方完成数据发送任务后，发送一个FIN来终止这一方向的连接，收到一个FIN只是意味着这一方向上没有数据流动了，即不会再收到数据了，但是在这个TCP连接上仍然能够发送数据，直到这一方向也发送了FIN。首先进行关闭的一方将执行主动关闭，而另一方则执行被动关闭，上图描述的即是如此。
第一次挥手：Client发送一个FIN，用来关闭Client到Server的数据传送，Client进入FIN_WAIT_1状态。
第二次挥手：Server收到FIN后，发送一个ACK给Client，确认序号为收到序号+1（与SYN相同，一个FIN占用一个序号），Server进入CLOSE_WAIT状态。
第三次挥手：Server发送一个FIN，用来关闭Server到Client的数据传送，Server进入LAST_ACK状态。
第四次挥手：Client收到FIN后，Client进入TIME_WAIT状态，接着发送一个ACK给Server，确认序号为收到序号+1，Server进入CLOSED状态，完成四次挥手。

11. 重绘与回流

当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候。
在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。

回流必将引起重绘，而重绘不一定会引起回流。

回流何时发生：当页面布局和几何属性改变时就需要回流。下述情况会发生浏览器回流：
添加或者删除可见的DOM元素；
元素位置改变；
元素尺寸改变——边距、填充、边框、宽度和高度
内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变；
页面渲染初始化；

浏览器窗口尺寸改变——resize事件发生时；

var s = document.body.style;
s.padding = "2px"; // 回流+重绘
s.border = "1px solid red"; // 再一次 回流+重绘
s.color = "blue"; // 再一次重绘
s.backgroundColor = "#ccc"; // 再一次 重绘
s.fontSize = "14px"; // 再一次 回流+重绘
document.body.appendChild(document.createTextNode('abc!'));// 添加node，再一次 回流+重绘

如何减少回流、重绘

直接改变className，如果动态改变样式，则使用cssText

// 不好的写法
var left = 1;
var top = 1;
el.style.left = left + "px";
el.style.top = top + "px";// 比较好的写法
el.className += " className1";

// 比较好的写法
el.style.cssText += "; 
left: " + left + "px; 
top: " + top + "px;";

让要操作的元素进行”离线处理”，处理完后一起更新
- 使用DocumentFragment进行缓存操作,引发一次回流和重绘；
- 使用display:none技术，只引发两次回流和重绘；
- 使用cloneNode(true or false) 和 replaceChild技术，引发一次回流和重绘；

不要经常访问会引起浏览器flush队列的属性，如果你确实要访问，利用缓存

// 别这样写
for(循环) {
el.style.left = el.offsetLeft + 5 + "px";
el.style.top = el.offsetTop + 5 + "px";
}

// 这样写好点
var left = el.offsetLeft,
top = el.offsetTop,
s = el.style; 
for (循环) { 
left += 10; 
top += 10; 
s.left = left + "px"; 
s.top = top + "px"; 
}

12. vue生命周期

beforecreated：el 和 data 并未初始化 created:完成了 data 数据的初始化，el没有 beforeMount：完成了 el 和 data 初始化 mounted ：完成挂载 beforeDestroy：你确认删除XX吗 destroyed ：当前组件已被删除，清空相关内容官网

Riunshow / NoteBook

面试 #4

css

js

网络

html

Vue

react

1. css垂直水平居中的几种方式？

2. BFC是什么？触发条件是什么

3. 清除浮动

4. 什么是原型链？

5. 判断数据类型

6. 什么是闭包？闭包的问题怎么解决？

7. new是怎么实现的？

8. 同源策略

9. 跨域

10. 三次握手详情

三次握手

四次挥手

11. 重绘与回流

12. vue生命周期

13. vue组件传参

14. vue data变化触发哪个生命周期

15. vuex中的异步action是怎么实现的

16. vue的实现机制是什么？

17. 讲讲虚拟dom？

18. react与vue的比较

19. react在哪个生命周期优化

20. redux是什么？

21. redux有哪些中间件