最新前端面试题整理（持续更新中）

1.写出下面程序的运行结果：

console.log([] == ![])	// true
console.log([] == [])	// false
console.log([] == {})	// false
console.log(new String('a') == new String('a')) // false
console.log(isNaN(NaN))	// true
console.log(isNaN('32131dsafdas'))	// true
console.log(NaN === NaN)	// false
console.log(NaN === undefined)	// false
console.log(undefined === undefined)	// true
console.log(typeof NaN)	 // number

console.log({} + [])	// 0
console.log([] + {})	// "[object Object]"
console.log({} + {})	// "[object Object][object Object]"
console.log([]+ [])	// ""
console.log({} + 1)	// 1
console.log([] + 1)	// "1"

隐式类型转换参考：https://blog.csdn.net/m0_37793545/article/details/87862847

2.写出下面程序的运行结果：

  var name = 'world';
  (function () {
    if (typeof name === 'undefined') {
      var name = 'jack'
      console.log('hi' + name)
    } else {
      console.log('hello' + name)
    }
  })()
  
  // hijack

这个题比较坑的点：

1. typeof 未定义的变量，未赋值的变量都会返回undefined！(即if内name改为name1，照样返回 hijack)
2. if中的var name =‘jack’，定义会被提升到IIFE内顶部，所以if中的name为undefined，不是未定义

3.写出下面程序的运行结果：

  var test = (function (a) {
    this.a = a;
    return function (b) {
      return this.a + b
    }
  }(function (a, b) {
    return a
  }(1, 2)))
  test(4)
  
  // 5

4.写出下面程序的运行结果：

  var x = 1,
    y = z = 0

  function add(n) {
    return n = n + 1
  }
  y = add(x)

  function add(n) {
    return n = n + 3
  }
  z = add(x)
  console.log(x, y, z)
  
  // 1 4 4

1.JS中基础数据类型是按值传递(引用数据类型是共享传递)
2.两个add都发生函数提升，且后面的覆盖了前面的

5.写出下面程序的运行结果：

  function bar() {
    return foo;
    foo = 10;

    function foo() {}
    var foo = 11
  }
  alert(typeof bar())

  // function
  (2)
  var a = 1
  function a() {}
  console.log(a) // 1
  (3)
  var b = 1
  if (true) {
  	console.log(b)	//	1
  	var b = 2
  	var c = 3
  	console.log(c)	//	3
  }
  console.log(b)	//	2
  console.log(c)	//	3

6.写出下面程序的运行结果：

  var x = 3;
  var foo = {
    x: 2,
    baz: {
      x: 1,
      bar: function () {
        return this.x
      }
    }
  }
  var go = foo.baz.bar
  go()
  foo.baz.bar()
  
  // 3
  // 1

7.写出下面程序的运行结果：

  console.log([1, 2] + [2, 1])
  
  // 1,2,2,1

8.判断一串字符串是否为回文

  var test = '12344321'
  var test1 = test.split('').reverse().join('')
  console.log(test === test1)

9.数组去重，数组排序

  //去重：
  (1)Array.from(new Set([1,2,3,5,2,1,22,'1']))
  (2)
  var array = [1, 2, 1, 1, '1']; 
  function unique(array) {
    var res = array.filter(function(item, index, array){
      return array.indexOf(item) === index;
    })
    return res;
  }
  console.log(unique(array));
  (3)
  function unique(arr) {
    arr = arr.sort()
    let res = []
    for (let i = 0; i < arr.length; i++) {
      if (arr[i] !== arr[i-1]) {
          res.push(arr[i])
      }
    }
    return res
  }

更多去重方式：https://juejin.im/post/5949d85f61ff4b006c0de98b
数组排序总结：https://juejin.im/post/57dcd394a22b9d00610c5ec8#heading-24

10.js继承的实现方式

  // (1) 借助构造函数实现继承
  function Parent() {
    this.name = 'parent'
  }
  function Child() {
    Parent.call(this)
    this.age = 18
  }
  // 这种方式只能实现部分继承，即父类的构造方法中的属性，子类可以继承，其缺点是，父类原型上的属性或方法，子类无法继承。
  // (2)借助原型链实现继承
  function Parent() {
    this.name = 'parent'
    this.play = [1, 2, 3]
  }
  function Child() {
    this.age = 18
  }
  Child.prototype = new Parent()
  // 这种继承方式的缺点是用子类Child实例化两个对象后，var s1 = new Child(); var s2 = new Child(); s1.play.push(4); console.log(s2.play); 也会打印出[1,2,3,4]，其原因是两个对象的__proto__指向了同一个原型对象。
  // (3)组合方式(继承的完美实现)
  function Parent() {
    this.name = 'parent'	
  }
  function Child() {
    //	将父对象的构造函数绑定在子对象上
    Parent.call(this)
    this.age = 18
  }
  //  将Parent的prototype拷贝给Child
  Child.prototype = Object.create(Parent.prototype)
  //  修正Child的prototype对象指向的构造函数
  Child.prototype.constructor = Child

11.JavaScript事件循环机制相关问题

// 请写出以下代码执行的顺序

setTimeout(function () {
    console.log(1);
});

new Promise(function(resolve,reject){
    console.log(2)
    resolve(3)
}).then(function(val){
    console.log(val);
})
console.log(4);

// 2 4 3 1
在同步代码执行完成后才回去检查是否有异步任务完成，并执行对应的回调，而微任务又会在宏任务之前执行。
同步代码=>异步代码(微任务=>宏任务)
宏任务: setTimeout
微任务: Promise.then

相关问题推荐：

settimeout实现原理

https://juejin.im/post/6844903990077947912

promise原理

https://juejin.im/post/6844904063570542599

详解js中的eventloop事件循环机制

https://zhuanlan.zhihu.com/p/33058983

12.伪数组转数组

var a={length:2,0:'aaa',1:'bbb'};  
// ES6：
Array.from(a)
// ES5：
Array.prototype.slice.call(a);//  ["aaa", "bbb"]   

var a={length:2};  
Array.prototype.slice.call(a);//  [undefined, undefined]  

13.写出下面程序的运行结果:

  function Foo() {
    getName = function() {
      alert(1)
    }
    return this
  }
  Foo.getName = function() {
    alert(2)
  }
  Foo.prototype.getName = function() {
    alert(3)
  }
  var getName = function() {
    alert(4)
  }
  function getName() {
    alert(5)
  }
  //请写出以下输出结果：
  Foo.getName() // 2
  getName() // 4
  Foo().getName() // 1
  getName() // 1
  new Foo.getName() // 2
  new Foo().getName() // 3
  new new Foo().getName() // 3
  // 详细解释 https://www.jb51.net/article/79461.htm

14. 函数防抖与函数节流

(1) 函数防抖

    function debounce(func, delay) {
      var timeout
      return function(e) {
        console.log('清除', timeout, e.target.value)
        clearTimeout(timeout)
        var context = this,
          args = arguments
        console.log('新的', timeout, e.target.value)
        timeout = setTimeout(function() {
          console.log('----')
          func.apply(context, args)
        }, delay)
      }
    }

    var validate = debounce(function(e) {
      console.log('change', e.target.value, new Date() - 0)
    }, 380)
    // 绑定监听
    document.querySelector('input').addEventListener('input', validate)

(2) 函数节流

	// 函数节流
	    function throttle(fn, threshhold) {
      var timeout
      var start = new Date()
      var threshhold = threshhold || 160
      return function() {
        var context = this,
          args = arguments,
          curr = new Date() - 0

        clearTimeout(timeout) //总是干掉事件回调
        if (curr - start >= threshhold) {
          console.log('now', curr, curr - start) //注意这里相减的结果，都差不多是160左右
          fn.apply(context, args) //只执行一部分方法，这些方法是在某个时间段内执行一次
          start = curr
        } else {
          //让方法在脱离事件后也能执行一次
          timeout = setTimeout(function() {
            fn.apply(context, args)
          }, threshhold)
        }
      }
    }
    var mousemove = throttle(function(e) {
      console.log(e.pageX, e.pageY)
    })

    // 绑定监听
    document.querySelector('#panel').addEventListener('mousemove', mousemove)

15. 什么是hash函数

hash（散列、杂凑）函数，是将任意长度的数据映射到有限长度的域上。直观解释起来，就是对一串数据m进行杂糅，输出另一段固定长度的数据h，作为这段数据的特征（指纹）。也就是说，无论数据块m有多大，其输出值h为固定长度。

hashmap，hash值（key）存在的目的是加速键值对的查找

详解：https://www.zhihu.com/question/26762707

16. Vue 组件 data 为什么必须是函数

每个实例可以维护一份被返回对象的独立的拷贝,否则；将导致多个实例共享一个对象，其中一个组件改变data属性值，其它实例也会受到影响。

17. jQuery.extend()和jQuery.fn.extend()的区别

jQuery.extend()为扩展jQuery类本身.为类添加新的方法。如 $.wang()
jquery.fn.extend(object);给jQuery对象添加方法。如 $('#test').wang()

18. Vue中的虚拟Dom diff 算法

(1)所谓的virtual dom，也就是虚拟节点。它通过JS的Object对象模拟DOM中的节点，然后再通过特定的render方法将其渲染成真实的DOM节点
dom diff 则是通过JS层面的计算，返回一个patch对象，即补丁对象，在通过特定的操作解析patch对象，完成页面的重新渲染
(2)DOM DIFF
比较两棵DOM树的差异是Virtual DOM算法最核心的部分.简单的说就是新旧虚拟dom 的比较，如果有差异就以新的为准，然后再插入的真实的dom中，重新渲染。
比较只会在同层级进行, 不会跨层级比较。新旧虚拟dom比较的时候，是先同层比较，同层比较完看看时候有儿子，有则需要继续比较下去，直到没有儿子。

比较后会出现四种情况：
1、此节点是否被移除 -> 添加新的节点 
2、属性是否被改变 -> 旧属性改为新属性
3、文本内容被改变-> 旧内容改为新内容
4、节点要被整个替换 -> 结构完全不相同 移除整个替换

详解：https://juejin.im/post/5ad6182df265da23906c8627

19.常见Http状态码

// 100  Continue  继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息
// 200  OK   正常返回信息
// 201  Created  请求成功并且服务器创建了新的资源
// 202  Accepted  服务器已接受请求，但尚未处理
// 301  Moved Permanently  请求的网页已永久移动到新位置。
// 302 Found  临时性重定向。
// 303 See Other  临时性重定向，且总是使用 GET 请求新的 URI。
// 304  Not Modified  自从上次请求后，请求的网页未修改过。

// 400 Bad Request  服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。
// 401 Unauthorized  请求未授权。
// 403 Forbidden  禁止访问。
// 404 Not Found  找不到如何与 URI 相匹配的资源。

// 500 Internal Server Error  最常见的服务器端错误。
// 503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）。
// 504 Gateway Timeout 服务器端响应超时。

20. 什么情况出现跨域，如何解决？

同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。若地址里面的协议、域名和端口号均相同则属于同源。

jsonp跨域、nginx反向代理、node.js中间件代理跨域、后端设置http header、后端在服务器上设置cors。

21. 重绘和回流

重绘：当页面中元素样式的改变并不影响它在文档流中的位置时（例如：color、background-color、visibility等），浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘。

回流：当Render Tree（DOM）中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为回流。
回流要比重绘消耗性能开支更大。
回流必将引起重绘，重绘不一定会引起回流。

详解：https://juejin.im/post/5a9923e9518825558251c96a
https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/24

22. 浏览器从加载到渲染的过程，比如输入一个网址到显示页面的过程。

加载过程：

• 浏览器根据 DNS 服务器解析得到域名的 IP 地址
• 向这个 IP 的机器发送 HTTP 请求 服务器收到、处理并返回 HTTP 请求
• 浏览器得到返回内容

渲染过程：

• 根据 HTML 结构生成 DOM 树
• 根据 CSS 生成 CSSOM
• 将 DOM 和 CSSOM 整合形成 RenderTree
• 根据 RenderTree 开始渲染和展示
• 遇到<script>时，会执行并阻塞渲染

23. 浏览器缓存机制

强制缓存：catch-control，expires，catch-control优先级高。不向服务器发送请求

协商缓存：Last-Modified / If-Modified-Since和Etag / If-None-Match，其中Etag / If-None-Match的优先级比Last-Modified / If-Modified-Since高。仍需向发送请求

1. 浏览器第一次加载资源，服务器返回200，浏览器将资源文件从服务器上请求下载下来，并把response header及该请求的返回时间(要与Cache-Control和Expires对比)一并缓存；
2. 下一次加载资源时，先比较当前时间和上一次返回200时的时间差，如果没有超过Cache-Control设置的max-age，则没有过期，命中强缓存，不发请求直接从本地缓存读取该文件（如果浏览器不支持HTTP1.1，则用Expires判断是否过期）；
3. 如果时间过期，则向服务器发送header带有If-None-Match和If-Modified-Since 的请求；
4. 服务器收到请求后，优先根据Etag的值判断被请求的文件有没有做修改，Etag值一致则没有修改，命中协商缓存，返回304；如果不一致则有改动，直接返回新的资源文件带上新的Etag值并返回 200；
5. 如果服务器收到的请求没有Etag值，则将If-Modified-Since和被请求文件的最后修改时间做比对，一致则命中协商缓存，返回304；不一致则返回新的last-modified和文件并返回 200；

详解：https://juejin.im/entry/5ad86c16f265da505a77dca4

https://segmentfault.com/a/1190000008377508

https://zhuanlan.zhihu.com/p/58685072

https://www.jianshu.com/p/54cc04190252

另：缓存数据哪些放在Memory Cache，哪些放在Disk Cache

1. 图片，字体，小脚本等放在Memory Cache中
2. css等非脚本文件放在DiskCache中（该说法不准确）
3. 一般大文件放在DiskCache中
4. 当前系统内存使用率高的话，文件优先存储进硬盘
5. 好像不同浏览器间也有处理差异
   https://www.jianshu.com/p/54cc04190252

24. Vue双向绑定原理

详解：https://juejin.im/post/5acd0c8a6fb9a028da7cdfaf#heading-9

25. 路由导航钩子(导航守卫)

首页可以控制导航跳转，beforeEach，afterEach等，一般用于页面title的修改。一些需要登录才能调整页面的重定向功能。

beforeEach主要有3个参数to，from，next：

1. to：route即将进入的目标路由对象
2. from：route当前导航正要离开的路由
3. next：function一定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。可以控制网页的跳转。

afterEach和beforeResolve(全局解析守卫)没有next参数

路由独享的守卫：beforeEnter，参数同全局前置守卫
组件内的守卫：beforeRouteEnter（组件实例未创建，不能使用this），beforeRouteUpdate，beforeRouteLeave

详解：https://router.vuejs.org/zh/guide/advanced/navigation-guards.html

26. Vue的路由模式，有什么区别？

hash模式：在浏览器中符号“#”，#以及#后面的字符称之为hash，用window.location.hash读取；
特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。
hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 http://www.xxx.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。

history模式：history采用HTML5的新特性；且提供了两个新方法：pushState（），replaceState（）可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更。
history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，如 http://www.xxx.com/items/id。后端如果缺少对 /items/id 的路由处理，将返回 404 错误。Vue-Router 官网里如此描述：“不过这种模式要玩好，还需要后台配置支持……所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。”

27. 安全问题，如 XSS 和 CSRF

Xss

• 跨站脚本攻击，是一种网站应用程序的安全漏洞攻击，是代码注入的一种。常见方式是将恶意代码注入合法代码里隐藏起来，再诱发恶意代码，从而进行各种各样的非法活动。

防范：所有用户输入的都是不可信的，输入过滤和转义，重要cookie设置为HttpOnly

CSRF

• 跨站请求伪造，也称 XSRF，是一种挟制用户在当前已登录的Web应用程序上执行非本意的操作的攻击方法。与 XSS 相比，XSS利用的是用户对指定网站的信任，CSRF利用的是网站对用户网页浏览器的信任。

防范：

1. 验证Http Referer字段，判断请求来源是否合法，Referer记录了该 HTTP 请求的来源地址
2. 在请求地址中添加 token 并验证
3. 在 HTTP 头中自定义属性并验证

详解：https://www.jianshu.com/p/64a413ada155

28. Css实现文本溢出显示省略号

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

29. js实现类似于add(1)(2)(3)调用方式的方法

简单方法:

var add = function(a){
    return function(b){
        return function(c){
            return a+b+c;
        };
    };
};

但是这样的代码在add(1)(2)或者add(1)(2)(3)(4)时便不对了。
正确实现:

function add () {
    var args = Array.prototype.slice.call(arguments);
 
    var fn = function () {
        var arg_fn = Array.prototype.slice.call(arguments);
        return add.apply(null, args.concat(arg_fn));
    }
    
 	// 重写valueOf方法，是为了处理隐式类型转换
    fn.valueOf = function () {
        return args.reduce(function(a, b) {
            return a + b;
        })
    }
 
    return fn;
}

详解：https://www.cnblogs.com/coco1s/p/6509141.html 或
https://blog.csdn.net/m0_37793545/article/details/87862847

30. 定义一个log方法，让它可以代理console.log的方法(支持传入n个参数)

function log(){ 
 console.log.apply(console, arguments); 
}

31. 当new Foo()时发生了什么

1. 创建了一个新对象
2. 将新创建的空对象的隐式原型指向其构造函数的显示原型。
3. 将this指向这个新对象
4. 如果无返回值或者返回一个非对象值，则将新对象返回；如果返回值是一个新对象的话那么直接直接返回该对象。

手写一个new实现
function create() {
	// 创建一个空的对象
    var obj = new Object(),
	// 获得构造函数，arguments中去除第一个参数
    Con = [].shift.call(arguments);
	// 链接到原型，obj 可以访问到构造函数原型中的属性
    obj.__proto__ = Con.prototype;
	// 绑定 this 实现继承，obj 可以访问到构造函数中的属性
    var ret = Con.apply(obj, arguments);
	// 优先返回构造函数返回的对象
	return ret instanceof Object ? ret : obj;
};

详解：《JS高程》 6.2.2 《你不知道的Javascript》2.2.4

32. Css样式的百分比都相对于谁？

• 相对于父级宽度的：
  max-width、min-width、width、left、right、text-indent、padding、margin、grid-template-columns、grid-auto-columns、column-gap 等；

• 相对于父级高度的：

  max-height、min-height、height、top、bottom、grid-template-rows、grid-auto-rows、row-gap 等；

• 相对于主轴长度的：

  flex-basis 等；

• 相对于继承字号的：

  font-size 等；

• 相对于自身字号的：

  line-height 等；

• 相对于自身宽高的：

  border-radius、background-size、border-image-width、transform: translate()、transform-origin、zoom、clip-path 等；

• 相对于行高的：

  vertical-align 等；

• 特殊算法的：
  background-position （方向长度 / 该方向除背景图之外部分总长度）、border-image-slice （相对于图片尺寸）、filter 系列函数等；

如果自身设置 position: absolute，“父级”指：Boring：破坏文档流的div高度设为百分比是相对谁而言的？；

如果 position: fixed，“父级”指视口（父级不存在 transform 为非 none 值的情况下）。

来源：知乎
链接：https://www.zhihu.com/question/36079531/answer/65809167

33. 什么是闭包? 堆栈溢出? 内存泄漏? 哪些操作会造成内存泄漏？怎么样防止内存泄漏？

闭包：就是能够读取其他函数内部变量的函数。
堆栈溢出：就是不顾堆栈中分配的局部数据块大小，向该数据块写入了过多的数据，导致数据越界，结果覆盖了别的数据。经常会在递归中发生。
内存泄露是指：用动态存储分配函数内存空间，在使用完毕后未释放，导致一直占据该内存单元。直到程序结束。指任何对象在您不再拥有或需要它之后仍然存在。

造成内存泄漏：
setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。
闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）
防止内存泄露：
1、不要动态绑定事件；
2、不要在动态添加，或者会被动态移除的dom上绑事件，用事件冒泡在父容器监听事件；
3、如果要违反上面的原则，必须提供destroy方法，保证移除dom后事件也被移除，这点可以参考Backbone的源代码，做的比较好；
4、单例化，少创建dom，少绑事件。

34. 移动端上什么是点击穿透？如何解决？

点击穿透现象有3种：
点击穿透问题：点击蒙层（mask）上的关闭按钮，蒙层消失后发现触发了按钮下面元素的click事件跨页面点击穿透问题：如果按钮下面恰好是一个有href属性的a标签，那么页面就会发生跳转另一种跨页面点击穿透问题：这次没有mask了，直接点击页内按钮跳转至新页，然后发现新页面中对应位置元素的click事件被触发了

解决方案：
1、只用touch
最简单的解决方案，完美解决点击穿透问题
把页面内所有click全部换成touch事件（ touchstart 、’touchend’、’tap’）

2、只用click
下下策，因为会带来300ms延迟，页面内任何一个自定义交互都将增加300毫秒延迟

3、tap后延迟350ms再隐藏mask
改动最小，缺点是隐藏mask变慢了，350ms还是能感觉到慢的

4、pointer-events
比较麻烦且有缺陷， 不建议使用mask隐藏后，给按钮下面元素添上 pointer-events: none; 样式，让click穿过去，350ms后去掉这个样式，恢复响应缺陷是mask消失后的的350ms内，用户可以看到按钮下面的元素点着没反应，如果用户手速很快的话一定会发现

35. TCP协议中的三次握手，四次挥手

TCP是主机对主机层的传输控制协议，提供可靠的连接服务，采用三次握手确认建立一个连接，四次挥手断开连接

位码即tcp标志位,有6种标示:SYN(synchronous建立联机) ACK(acknowledgement 确认) PSH(push传送) FIN(finish结束) RST(reset重置) URG(urgent紧急)

Sequence number(顺序号码) Acknowledge number(确认号码)

三次握手：

第一次握手：主机A发送位码为syn＝1,随机产生seq number=1234567的数据包到服务器并进入SYN_SEND状态，主机B由SYN=1知道，A要求建立联机；

第二次握手：主机B收到请求后要确认联机信息，向A发送ack number=(主机A的seq+1),syn=1,ack=1,随机产生seq=7654321的包并进入SYN_RECV状态

第三次握手：主机A收到后检查ack number是否正确，即第一次发送的seq number+1,以及位码ack是否为1，若正确，主机A会再发送ack number=(主机B的seq+1),ack=1，主机B收到后确认seq值与ack=1则连接建立成功，客户端和服务器进入ESTABLISHED状态。

完成三次握手，主机A与主机B开始传送数据。

四次挥手

中断连接可以是Client端发起，也可以是Server端发起

假设Client端发起中断连接请求，也就是发送FIN报文。Server端接到FIN报文后，意思是说"我Client端没有数据要发给你了"，但是如果你还有数据没有发送完成，则不必急着关闭Socket，可以继续发送数据。所以你先发送ACK，“告诉Client端，你的请求我收到了，但是我还没准备好，请继续你等我的消息”。这个时候Client端就进入FIN_WAIT状态，继续等待Server端的FIN报文。当Server端确定数据已发送完成，则向Client端发送FIN报文，“告诉Client端，好了，我这边数据发完了，准备好关闭连接了”。Client端收到FIN报文后，"就知道可以关闭连接了，但是他还是不相信网络，怕Server端不知道要关闭，所以发送ACK后进入TIME_WAIT状态，如果Server端没有收到ACK则可以重传。“，Server端收到ACK后，“就知道可以断开连接了”。Client端等待了2MSL后依然没有收到回复，则证明Server端已正常关闭，那好，我Client端也可以关闭连接了。Ok，TCP连接就这样关闭了！

相关问题：
1．为什么建立连接协议是三次握手，而关闭连接却是四次握手呢？

这是因为服务端的LISTEN状态下的SOCKET当收到SYN报文的建连请求后，它可以把ACK和SYN（ACK起应答作用，而SYN起同步作用）放在一个报文里来发送。但关闭连接时，当收到对方的FIN报文通知时，它仅仅表示对方没有数据发送给你了；但未必你所有的数据都全部发送给对方了，所以你可以未必会马上会关闭SOCKET,也即你可能还需要发送一些数据给对方之后，再发送FIN报文给对方来表示你同意现在可以关闭连接了，所以它这里的ACK报文和FIN报文多数情况下都是分开发送的.

2．为什么TIME_WAIT状态还需要等2MSL后才能返回到CLOSED状态？

这是因为虽然双方都同意关闭连接了，而且握手的4个报文也都协调和发送完毕，按理可以直接回到CLOSED状态（就好比从SYN_SEND状态到ESTABLISH状态那样）；但是因为我们必须要假想网络是不可靠的，你无法保证你最后发送的ACK报文会一定被对方收到，因此对方处于LAST_ACK状态下的SOCKET可能会因为超时未收到ACK报文，而重发FIN报文，所以这个TIME_WAIT状态的作用就是用来重发可能丢失的ACK报文。

详解解释：http://www.cnblogs.com/cy568searchx/p/3711670.html

36. 写出下面程序的运行结果

// 坑人的连续赋值问题
var a = {n: 1};
var b = a;
a.x = a = {n: 2};
console.log(a.x);  // undefinde
console.log(b);  //  {n:1,x:{n:2}}

详解：https://www.zhihu.com/question/41220520

37. 写出下面程序的运行结果

function f1(){
	var n=999
	nAdd=function(){
		n+=1
		console.log(n)
	}
	function f2(){
		console.log(n)
	}
	return f2
}

f1()()  //  999
nAdd()  //  1000
nAdd()  //  1001

38. require和import的区别

遵循的规范不同

1. require/exports是CommonJS的一部分
2. import/export是ES6新规范

书写形式不一样

require/exports 的用法只有以下三种简单的写法：

const fs = require('fs')
exports.fs = fs
module.exports = fs

而 import/export 的写法就多种多样：

import fs from 'fs'
import {default as fs} from 'fs'
import * as fs from 'fs'
import {readFile} from 'fs'
import {readFile as read} from 'fs'
import fs, {readFile} from 'fs'

export default fs
export const fs
export function readFile
export {readFile, read}
export * from 'fs'

本质上的区别

1. require的引用相当于拷贝，原js内再发生变化不会影响到拷贝的值
2. import的引用是引用了地址

详解：https://www.zhihu.com/question/56820346

39. 前端模块化CommonJS，AMD，CMD，ES6

1. commonJS用同步的方式加载模块。node，webpck
2. AMD规范采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。特点：前置依赖，提前执行。require.js
3. CMD与AMD很类似，CMD推崇依赖就近、延迟执行。此规范其实是在sea.js推广过程中产生的。sea.js
4. ES6的模块不是对象，import命令会被 JavaScript 引擎静态分析，在编译时就引入模块代码，而不是在代码运行时加载，所以无法实现条件加载。也正因为这个，使得静态分析成为可能。import，export。

详解：https://github.com/zgfang1993/blog/issues/29

40. Http1.x和http2和https之间的区别

https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/232

https://segmentfault.com/a/1190000015316332

https://zhuanlan.zhihu.com/p/72616216

扩展：
SSE：Server-Sent Events https://www.ruanyifeng.com/blog/2017/05/server-sent_events.html

SSE是服务端向客户端推送“数据”，http2新增服务端推送是推送静态文件

41. fixed，absolute，relative的优先级问题

42. Funtion和Object区别(主要考察原型)

https://juejin.cn/post/6844903630357659655

43. css七阶层叠水平（stacking level）&层叠顺序

https://www.cnblogs.com/coco1s/p/5899089.html