前言

面试时间 1.29

面试时长 2h

面试题

前端工程化做了哪些内容？

viteCSS工程化；代码开发体验如alias配置、auto-import；项目规范如prettier、ESLint、husky
- 除了这些还有吗？因为你提到的这些其实都...xxx$$?有没有CICD之类的
有，我们在XXX中使用脚手架创建项目，自动会连接到gitlab创建仓库，同时也会链接到云效CI/CD平台的版本号
你提到性能优化，能说说你做过哪些性能优化相关的内容？
- 那我们说想优化首屏加载时间，你会怎么做？
如果在移动端的话，我们就是尽可能减少网络请求数量和网络请求内容，以减少网络请求时间阻塞页面渲染，还有就是尽可能减少首页的DOM元素数量。如果是web端的话，可以检查一下script标签的位置要放在下面，CSS文件要用link方式引入而不是import
- 网络方面呢？怎么优化网络性能？
网络的话，我想到封装request，然后给timeout超时时间，其他不知道了
你还做过前端监控，说说你怎么做的？
- 你用过前端的senTry吗？如果你是作者你会怎么去做这样一个前端监控的软件？比如捕获报错、捕获性能指标等等？
如果是性能指标如FCP首屏渲染时间之类的，我只能想到定时器实现，但这并不是一个优秀的方式因为他会带来性能问题。然后捕获报错很简单，就是tryCatch
- 你刚才说到try catch，那你要对每个地方都trycatch吗？
不是的，我之前有思考过这个问题，是否可以利用webpack对AST解析然后加入trycatch的代码，但显然也是不现实的，所以其实到现在我也没有答案
- 那对于网络请求呢？
网络请求可以通过拦截器实现，（面试官又问我们不知道用户使用axios还是什么请求，这个拦截器怎么做？）不会
实现骰子点数3的效果

我用flex讲了两个方法，但是面试官想听到分栏布局的方式，我尝试用flex:1来实现，但是失败了。
如果你来做技术选型，对于vue3和react你会怎么取舍？

要讲讲vue3和react的区别，我从生态和上手难度考虑，还有考虑跨端。最后说明还是以团队技术栈为主要考虑因素。其中我主要点了一下双向数据流和单向数据流的问题
对于react的状态管理器你怎么看？
- zustand是否也有双向绑定？
- 有了解过pinia的实现原理吗？
前端安全相关的问题有了解过吗？

前端我们可能遇到XSS攻击，解决手段有比如cookie设置http-only，或者前端禁止使用eval这种js解释器的能力，还有用SSR渲染也能有效防止XSS攻击。除了XSS攻击以外，还有ARP代理人攻击，比如黑客会盗取用户的cookie或token然后对服务器进行攻击这样，那解决方式可以给cookie设置maxAge过期时间、给cookie设置生效的域名范围，以及使用双token机制，来预防token的盗用

看一道代码执行题

async function async1() {
    console.log(1);
    await async2();
    console.log(2);
}

async function async2() {
    console.log(3)
}

console.log(4)

setTimeOut(() => {
    console.log(5)
}, 0)

async1()

new Promise((resolve, reject) => {
    console.log(6)
    resolve()
}).then(() => {
    console.log(7)
})

console.log(8)

实现一个memory工具函数，要求对函数返回结果做缓存，当第二次调用时无需调用函数即刻返回缓存值

function memory(func) {
    // TODO
}

function add(a, b) {
    return new Promise((resolve, reject) => {
        resolve(a + b)
    })
}

console.log(await memory(add)(1, 2));
console.log(await memory(add)(3, 4));
console.log(await memory(add)(5, 6));

【面试】字节正式编一面

前言

面试题

总结