字节Ads Infra 前端实习一面

面了整整两个小时，面试官小姐姐很好，基本都会但是可能我太紧张了没答好，最后还是挂了qwq

自我介绍

项目1：性能优化怎么做，单帧渲染时间和内存是如何计算的，直接看性能指标的

项目2：权限模型是怎么设计的，前端如何限制，其他还有什么鉴权方式，cookie session

jwt的优缺点

flex：0 1 auto 分别代表什么

浏览器是如何渲染一个html文件的

浏览器的存储方式有哪些，有什么差异，session和sessionStorage，用过indexDB吗

css加载会阻塞dom树的解析吗，会阻塞渲染吗

讲一下浏览器的事件循环，如果在执行微任务的时候又产生了微任务，这个是在什么时候执行的

列举你知道的微任务和宏任务有哪些，process.nextTick是什么时候执行的

node事件循环，6个阶段

题1：事件循环输出顺序

为什么需要有微任务这个概念，可以从执行时机方面考虑

网络请求xhr是什么任务

promise.all和promise.once，如何处理报错

promise.race是什么

promise.all如何实现所有的执行完再返回（可以直接catch，或promise.allSettled）

new的过程中做了什么，和构造函数有什么关联

讲一下原型和原型链

用过ts吗，讲一下泛型

题2：实现泛型

const getValue: FN = (obj, key) => {
    return obj[key]
}
getValue({a: 1}, 'a')
getValue({a: 1}, 'b') // error
getValue('1', 'b') // error

type FN<T, K extends keyof T> = (obj: T, key: K) => T[K];

为什么用vue可以直接用this.xxx来赋值，而react不行（vue响应式

为什么react要使用setState显式的设置值

hooks为什么不能在循环或条件语句中执行

express和koa有什么区别，中间件执行方面

题3：大数相加

题4：实现一个eventBus（发布订阅）

class eventBus {
    on() {}
    off() {}
    once() {}
    emit() {}
}

const event = new eventBus()

// 事件绑定
event.on('message', console.log.bind(null, 1))
event.on('message', console.log.bind(null, 2))
// 事件触发
event.emit('message')

// 输出 1 2

题5：封装hooks

// https://xxx.com?status=1&keyword=test
// request.get(url, {})

function useSearch() {
    //your code
    return {
        data
    }
}

反问

岗位职责

后续流程

有什么不足的