「前端」腾讯音乐一面面经

总体面试体验还行，就是面试官也不开摄像头，然后问的问题都比较浅，很喜欢问一些开放性的问题，也没有手撕，不知道是不是一面的原因。

1. 在你写的项目中，觉得比较有难点的是哪一个（开放问题1）？
   1. 聊了一些项目里的异步编程debug/防抖功能
2. 发现我项目里的输入框搜索tag不能带井号，就聊到了前端网络安全的问题
   1. 聊了前端可以做一些转义和过滤，但是考虑到用户可能绕过前端直接通过接口发送请求，所以主要的安全工作比如防止sql注入之类的都要放在后端完成
3. 进一步的问了存储型的需求怎么避免出现安全问题，举例QQ可以用特殊字符做昵称，怎么避免SQL注入？
   1. 转义
4. 项目难点里聊到了异步debug，那什么是异步的？
   1. Vue和React里的副作用是异步的，状态更新也是异步的；原生JS里Promise，setTimeout是异步的
5. async和await了解吗？
   1. 就是Promise的语法糖
6. 具体怎么实现的呢？
   1. 可以完全等价的转化为es5里的Promise.then/catch/finally
7. Callback 是异步的吗？为什么？
   1. 以setTimeout为例，里面的callback会成为下一个宏任务，在js的事件循环里就是异步的
8. 看过React或者Vue的源码吗？
   1. 没有看过完整的项目，但是看过尤雨溪写的核心代码
9. 对于源码你了解比较深入的一个点能跟我讲讲吗（开放问题2）
   1. 讲了响应式和虚拟DOM的一些核心实现，比如patch, mount, h, ref, reactive的一些实现原理，一些响应式的优化手段，比如静态节点标记、回调函数缓存，假设节点只在同级移动，Block 等等
10. 聊聊ref和reactive
    1. 这里聊的不太好，把Vue3对于Vue2的提升当成reactive相对于ref的提升了，这里简言之就是：
       1. 从性能上，对于对象类型，Vue 3 的 ref === reactive
       2. reactive 只能代理对象类型，不支持替换整个对象，不支持解构，所以应该使用ref作为主要的响应式api（官方文档推荐）
11. 学习前端的方式（开放问题3）
    1. 看文档，写项目
12. 看了你的博客，发现你也有一些文章输出
    1. 写文章也是将项目经验内化成个人技术的手段
13. 介绍一下Next.js（项目里的东西）
    1. 讲了一下服务端渲染，追问下聊了一下服务端渲染的需求以及流程
14. 服务端渲染下，服务器挂了怎么办？
    1. 挂了就404
15. 有什么办法避免？
    1. 服务器挂了本身是不可避免的，能避免的就是在有限的容灾范围内至少提供一个友好的404页面（通过重定向），告知用户正在升级/故障原因/恢复时间之类的
16. 可不可以让服务端渲染在渲染服务挂掉的情况下退化成客户端渲染？
    1. 技术上可行，但至少客户端渲染需要的服务还活着，直接一个重定向到客户端渲染的url就行
17. 聊的时候聊到了CDN，问了CDN是什么，一般什么资源放在上面？
    1. 内容分发网络，用更多离用户更近的服务器加速静态资源的访问，主要放图片等，当然大的js/视频你也可以放，无非就是花钱买体验罢了
18. CDN和用户本地的缓存如何更新？
    1. 通过两对请求响应头，[lastModified, IfModifiedSince] [Etag, ifNoneMatch] 来进行协商缓存，更新了会自动请求新资源的
19. 如果我就是要用强制缓存，还要及时更新用户的资源怎么办？
    1. 因为强制缓存根本不向服务器发请求，所以是指望不上用户能通知服务器了，只能是服务器主动告知用户，比如用服务端推送的方式告知用户端文件更新了，用户端的js再负责更新新的文件或者通知用户刷新页面；
    2. 还可以使用版本化文件名（把版本号放在文件名里，直接视作不同的资源）/使用Service Worker静默更新
20. 有没有了解跨段的框架，简要介绍一下原理
    1. 了解过uni-app和React Native，原理无非就是所谓的没有加一个中间层不能解决的事情，这些框架本质上提供了一个中间层，让你能用熟悉的语法去写页面，然后将其翻译成对应的原生平台的实现
21. 反问环节

总得来说这个面试官非常喜欢问开放性问题，这种问题如果正好准备到了答起来可以说是荡气回肠，从三皇五帝讲到春秋战国，当然如果没有准备到的话可能就是直接哑火或者在记忆里找点东西东拼西凑了。