大厂

2023-07-24
快手本地生活前端一面

面试时间 2023年7月20日16点

1. TCP协议为什么是三次握手，四次挥手，为什么断开时会多一次？

因为一个连接建立之前，并不需要考虑其他因素，但是在连接断开之前，客户端和服务端可能还存在其他通信操作，所以就需要多一次连接用来通知双方取消其他通信操作。

2. VUE&SSR 原理，在注水时框架做了什么操作，对比CSR有什么缺点？

Vue框架在浏览器注水时，会根据服务端返回的HTML文本对应生成VNode（虚拟DOM），并且将HTML文本中的静态State等数据初始化在VNode中作为初始化状态数据，以及绑定事件等操作。

3. HTTP协议在每个版本都改进了什么？
http各版本的改进都是什么？

4. WebPack&Vue组件在编译过程是什么样的，Vue3比Vue2做了哪些优化？
编译图示

  1. 将模板进行词法分析，转化为对应的ast树（JS描述对象，与虚拟DOM原理差不多）。

  2. 转换流程transform，对动态节点做一些标记

    • 标记动态节点（Block）：指令、事件、插槽、动态属性、模板语法等，渲染时进行动态节点比对即可（靶向更新）。
    • 标记节点动态类型(patchFlag)，后续更新时只更新该部分即可，减少比对内容（如文本、class）。

  3. 生成代码codegen – 虚拟dom

  4. 经过render方法将该虚拟dom挂载到宿主元素上

  5. render时直接比对动态节点。

Vue3源码-运行时编译模板&优化总结
Vue3模板编译优化

5. 笔试题
笔试内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
class Lottery {
    users: string[] = []
    count: number
    constructor(users: string[], count: number) {
        users.sort(() => Math.random() > .5 ? 1 : -1)
        this.users = users
        this.count = count
    }

    getRadomIndex() {
        return Math.floor(Math.random() * (this.users.length + 1))
    }

    timer: any = null
    goUsers: string[] = []
    go() {
        const startIndex = this.getRadomIndex()
        this.timer = setTimeout(() => {
            this.goUsers.push(this.users[startIndex])
            this.timer && clearTimeout(this.timer)
            this.timer = null
            this.go()
        }, 100)
    }

    clearTimeout() {
        if (this.timer) {
            clearTimeout(this.timer)
            this.timer = null
        }
    }

    getRes() {
        return this.goUsers[this.goUsers.length - 1]
    }

    runTime = 0
    start() {
        this.runTime++
        this.go()
    }

    stop() {
        return this.runTime <= this.count ? this.getRes() : null
    }
}
Read More
▲