面试血泪史

不要问我面的是不是架构师。我只是面的低级前端。总结不易点个赞吧。

JS

1. 包装类跟一般类有什么区别？new String() 和String()的区别

答：：js 提供了3个包装类 别离是 new String()，new Number()，new Boolean()。因为根底类型不能增加属性和办法，js的包装类的作用是将根底类型包装成一个对象，这样就能够有属性和办法。

tips:当咱们对一些根本数据类型的值去调用属性和办法时，浏览器会长期应用包装类将其转换为对象，而后在调用对象的属性和办法；调用完当前，在将其转换为根本数据类型。

2. promise.then 是怎么实现链式调用的

答： 通过从新return 一个new Promise 来实现链式调用

3. 多调用几次bind 比方bind a bind b 最初this指向谁 为啥

答： 永远指向第一次调用bind时传入的上下文，因为bind之后的调用都是绑定在这个上下文上。

4. v8引擎回收机制简述

答： v8垃圾回收次要通过两个策略：

  • 标记革除

  • 援用计数

    标记革除是js最罕用的垃圾回收机制。垃圾回收程序运行的时候，会标记内存中存储的所有变量。而后，它会将所有在上下文中的变量，以及被在上下文中的变量援用的变量的标记去掉。在此之后再被加上标记的变量就是待删除的了，起因是任何在上下文中的变量都拜访不到它们了。随后垃圾回收程序做一次内存清理，销毁带标记的所有值并发出它们的内存。

    援用计数是对每个值都记录它被援用的次数。申明变量并给它赋一个援用值时，这个值的援用数为 1。如果同一个值又被赋给另一个变量，那么援用数加 1。相似地，如果保留对该值援用的变量被其余值给笼罩了，那么援用数减 1。当一个值的援用数为 0 时，就阐明没方法再拜访到这个值了，因而能够平安地发出其内存了。垃圾回收程序下次运行的时候就会开释援用数为 0 的值的内存。（以上摘自js红宝书第四版）

5. v8回收算法运行时会阻塞js吗？为什么

答： 会阻塞。

6. 怎么优化垃圾回收机制

答： https://www.cnblogs.com/cheng... 总结就是多用新生代算法

7. 作用域链简述。怎么能获取函数外部变量？

答： 作用域链就是变量向上查找过程。能够通过函数外部return 一个携带函数外部变量的闭包使得内部能够拜访函数外部的变量

8. 闭包简述，怎么防止内存透露

答： 无论何时申明新函数并将其赋值给变量，都要存储函数定义和闭包，闭包蕴含在函数创立时作用域中的所有变量，相似于背包，函数定义附带一个小背包，他的包中存储了函数创立时作用域中的所有变量。及时将指针指向null能够防止内存透露。

9. class 类能够枚举吗？类 instanceof Function 输入什么?

答： 类的外部所有定义的办法，都是不可枚举的。类的数据类型就是函数，类自身就指向构造函数。 代码如下：

class Point {  constructor(x, y) {    // ...  }  toString() {    // ...  }}Object.keys(Point.prototype)// []Object.getOwnPropertyNames(Point.prototype)// ["constructor","toString"]
class Fn{}Fn instanceof Function // trueconst a = new Fn()a instanceof Function // false

webpack

1. webpack 是怎么实现分模块打包的？

答： 能够通过splitChunks 实现。

webpack 中以下三种常见的代码宰割形式:

  • 入口终点：应用 entry 配置手动地拆散代码。
  • 动静导入：通过模块的内联函数调用来拆散代码。
  • 避免反复：应用 splitChunks 去重和拆散 chunk。 第一种形式，很简略，只须要在 entry 里配置多个入口即可。

splitChunks 代码拆分

splitChunks: {    // 示意抉择哪些 chunks 进行宰割，可选值有：async，initial和all    chunks: "async",    // 示意新拆散出的chunk必须大于等于minSize，默认为30000，约30kb。    minSize: 30000,    // 示意一个模块至多应被minChunks个chunk所蕴含能力宰割。默认为1。    minChunks: 1,    // 示意按需加载文件时，并行申请的最大数目。默认为5。    maxAsyncRequests: 5,    // 示意加载入口文件时，并行申请的最大数目。默认为3。    maxInitialRequests: 3,    // 示意拆分出的chunk的名称连接符。默认为~。如chunk~vendors.js    automaticNameDelimiter: '~',    // 设置chunk的文件名。默认为true。当为true时，splitChunks基于chunk和cacheGroups的key主动命名。    name: true,    // cacheGroups 下能够能够配置多个组，每个组依据test设置条件，合乎test条件的模块，就调配到该组。    // 模块能够被多个组援用，但最终会依据priority来决定打包到哪个组中。默认将所有来自     // node_modules目录的模块打包至vendors组，将两个以上的chunk所共享的模块打包至default组。    cacheGroups: {        vendors: {            test: /[\\/]node_modules[\\/]/,            priority: -10 // 缓存组优先级        },        //     default: {            minChunks: 2,            priority: -20,            reuseExistingChunk: true  // 可设置是否重用该chunk        }    }}

通过 cacheGroups，咱们能够定义自定义 chunk 组，通过 test 条件对模块进行过滤，符合条件的模块调配到雷同的组。

2. webpack4 的tree-shaking是什么？怎么实现的？在什么状况下会生效？为什么？

答： tree-shaking实质是webpack打包时用来舍弃无用的代码。

工作原理： 在ES6以前，咱们能够应用CommonJS引入模块：require()，这种引入是动静的，也意味着咱们能够基于条件来导入须要的代码

let moduleif(true){    module = require('a')}else{    module = require('b')}

CommonJS标准无奈确定在理论运行前须要或者不须要某些模块，所以CommonJS不适宜tree-shaking机制

ES6的import语法能够完满应用tree shaking，因为能够在代码不运行的状况下就能剖析出不须要的代码。

因为tree shaking只能在动态modules下工作。ECMAScript 6 模块加载是动态的,因而整个依赖树能够被动态地推导出解析语法树。

side effects是指那些当import的时候会执行一些动作，然而不肯定会有任何export

tree shaking 不能主动的辨认哪些代码属于side effects，因而手动指定这些代码显得十分重要。如果所有代码都不蕴含副作用，咱们就能够简略地将该属性标记为false，来告知 webpack，它能够平安地删除未用到的export导出。

总结： ES6 Module引入进行动态剖析，故而编译的时候正确判断到底加载了那些模块。再判断那些模块和变量未被应用或者援用，进而删除对应代码。

另外，webpack中能够在我的项目package.json文件中，增加一个 “sideEffects” 属性,手动指定由副作用的脚本。

3. env 晓得吗？是用来干什么的？我的项目须要独自装置吗？为什么？

env是nodejs里内置的一个对象，能够利用process.env拿到以后我的项目运行环境的信息。不须要独立装置，因为是nodejs的内置对象。

4. import 和 require 的区别

答：

  1. CommonJS 模块输入的是一个值的拷贝，ES6 模块输入的是值的援用。
  2. CommonJS 模块是运行时加载，ES6 模块是编译时输入接口。
  3. CommonJs 是单个值导出，ES6 Module能够导出多个
  4. CommonJs 是动静语法能够写在判断里，ES6 Module 动态语法只能写在顶层
  5. CommonJs 的 this 是以后模块，ES6 Module的 this 是 undefined

5. 晓得什么是动态剖析吗？

答： es modules能够在代码不运行的状况下对代码进行剖析，能够晓得哪些模块有没有被应用。

6. webpack babel是如何工作的？

答：

    1. 词法解析 。将字符串模式的代码转换为Tokens(令牌)，Tokens 能够视作是一些语法片段组成的数组。
    1. 语法解析。把Tokens转换为形象语法树AST
    1. 转换阶段。会对 AST 进行遍历，在这个过程中对节点进行增删查改。Babel 所有插件都是在这个阶段工作, 比方语法转换、代码压缩。
    1. 输入阶段。将通过转换的AST通过babel-generator再转换成js代码，过程就是深度优先遍历整个AST，而后构建能够示意转换后代码的字符串。同时这个阶段还会生成Source Map。

7. webpack plugins的执行机会？

答： 加载文件实现后，输入文件前，不同的plugins有不同的执行机会。

node

1. koa 源码理解过，是怎么实现的？

答： koa通过对http模块的封装，在外部实现了一个context上下文的概念，把res跟req都放在ctx下面，并且对req和res进行优雅的setter/getter解决，调用形式更简略。

洋葱模型通过将中间件数组里的异步办法通过dispatch去递归调用，因为在app.use中去调用next办法时去调用下一个中间件。

洋葱模型实现伪代码

function compose(middlewares){    return function(){        return dispatch(0)        function dispatch(i){            let fn = middlewares[i]            if(!fn) return Promise.resolve()            return Promise.resolve(fn(function next(){                // promise 实现之后在执行下一个                return dispatch(i+1)            }))        }    }}

2. koa 洋葱模型

答： 见上

http

1. http 和 https的区别

答： HTTPS就是将HTTP运行在TLS/SSL的加密安全措施下。

  • https须要申请CA证书
  • https更平安。使用了加密伎俩
  • https端口443 http是80

2. udp和tcp的区别

答： 见我的另一篇文章TCP/IP

3. http3.0是基于udp的，为什么udp面向无连贯还会抉择udp？

答： 因为udp高效。而且在应用层解决了udp的不可靠性问题。

4. http3.0怎么解决udp的丢包问题？

答： http3不仅仅只是简略将传输协定替换成了 UDP。还基于 UDP 协定在「应用层」实现了 QUIC 协定。它具备相似 TCP 的连贯治理、拥塞窗口、流量管制的网络个性，相当于将不牢靠传输的 UDP 协定变成“牢靠”的了，所以不必放心数据包失落的问题。而且， QUIC 协定会保障数据包的可靠性，每个数据包都有一个序号惟一标识。当某个流中的一个数据包失落了，即便该流的其余数据包达到了，数据也无奈被 HTTP/3 读取，直到 QUIC 重传失落的报文，数据才会交给 HTTP/3。

5. tcp除了你刚刚说的窗口管制，还有哪些管制？

答： 重发管制，流控制，拥塞管制

6. tcp重发机制是基于哪个工夫节点

答： 引入两个概念：

  • RTT（Round Trip Time）：往返时延，也就是数据包从收回去到收到对应 ACK 的工夫。RTT 是针对连贯的，每一个连贯都有各自独立的 RTT。
  • RTO（Retransmission Time Out）：重传超时，也就是后面说的超时工夫。

我个别认为是两倍的RTT。