欢迎光临
我们一直在努力

前端面试-面试题梳理总结(持续更新…)

面试血泪史

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

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 // true

const 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 module
if(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。

https://segmentfault.com/a/1190000039918109

赞(0)
未经允许不得转载:ITyet » 前端面试-面试题梳理总结(持续更新…)
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址