大佬们，一人出一道前端面试题，年后准备跳槽

这是我面试别人的题，有人说，因为 vue3 可以在 setup 模式下直接用 ref 定义响应式变量，那么我只要把这个变量用全局变量共享出去，就可以实现以前状态管理框架才能实现的功能。

1 、这个说法可不可行

2 、这个说法有没有什么不妥或者漏洞

3 、如果不妥，请指出不妥之处

出一个 JsDistServer 搭建+版本控制+远程加载+局部渲染+事件联动的方案？

根据上面的方案 设计一条链路，我写组件，发布，在线拖拽配置数据源，发布页面，自动部署?

vue 生命周期

@c3de3f21 你这个至少得月薪 50k 的才能回答，我们目前在用的大型 OA 就有这个功能，有一个 react 二开平台，全拖拉拽操作，各种配置，各种操作图形化编程，什么字段校验多复杂的流程直接拖，还有移动端自动适配，换皮什么都是小 case

但是人家光 redis 服务器就一堆节点，这么复杂的配置要做到编译的性能，你缓存得存多大啊

@murmur #5 op 说项目场景题等等无任何限制，如果对方公司刚好就是你们在用的大型 OA 公司呢？我觉得问这个问题也正常，而且可以通过候选人答题的思路以及考虑的范围去了解候选人的知识深度和广度，无非就是最终方案的可行性和完整性跟薪资匹不匹配的问题

@murmur 目前我在做的项目，早期部分模块就是这样做的，这样写有几个问题：1,跟使用 pinia 的状态管理工具相比，组件的状态是不能用游览器调试插件直观地看出来，2 ，整个组件数据流向不清晰，代码可读性非常差，项目会变得非常难维护，3 ，这些变量是存在全局的，如果有多个组件在频繁访问，修改这些全局变量会增高耦合度。

好哥哥们来点 5-6 年的，好久没面过了不知道外面怎样，年后估计要被整走了

@Croow

我其实听到的点，是 ssr 下可能会有问题，具体没看，因为 js 在浏览器上都是单线程的，但是上了 ssr 就未必了

对于我来说，完全可行反倒是我喜欢的答案，企业开发没多少全局变量，全局状态太多了你耦合性是不是太高了，全局数据就一个用户信息一个权限，几个变量就存完了。以前全 event 开发都能调试，现在有 watch 调试不了，你得多不自信啊

还有一个考 css 熟练度，纯八股文的偏题，就是问，如何实现文字超过 2 行才显示省略号

问这么难的干嘛，我都是问，怎么比较两个日期字符串或者日期对象谁先谁后这种

@murmur 大佬，学习了

Q: 浏览器渲染页面的过程是怎样的
A: DOM 树->CSSOM 树->渲染树->布局->绘制->合成

Q: 有哪些方式可以触发浏览器启用 GPU 渲染，浏览器如何知道什么时候是否启用 GPU 渲染？
A: 普通文档流与 Compositing Layer 。3D transforms ，CSS filters ，will-change 属性等可以触发。渲染原理：图层分层，纹理映射。

Q: 如何发现前端性能瓶颈，优化方式有哪些（开放性提问）？
A: 合理使用 GPU 加速，使用 will-change 提前告知浏览器。DevTools 分析，网络优化，代码优化，缓存策略，性能监控工具。Lighthouse ，Sentry ，Microsoft Clarity ，Google Analytics 等。

可能容易混淆的知识点：
强缓存协商缓存
微任务宏任务
事件冒泡事件捕获
前端渲染服务端渲染
原型继承类继承
深拷贝浅拷贝
同步异步
闭包立即执行函数
节流防抖
letconstvar
Promiseasync/await
箭头函数普通函数
模块化规范：CommonJSES Module
优雅降级渐进增强

感觉我能想的都是问问烂的八股文
不过纯搓业务的话感觉不如结对写几行代码有代表性

一定要问的话比如
顺着跨域问 preflight 条件，怎么处理，alloworigin 能不能一律返回*，请求过来现装一个域名返回去有什么风险
vue3 怎么快速的把非受控子组件的状态重置，会不会内存泄漏，要是里面还有保持的长连接怎么搞

状态共享不用 pinia 行不行，不用模板撮 render 函数来看看，设计个简易埋点，sendbeacon 好用不，试过调 wasm 没，掺着算法问一段文字给你几个词第 n 个 A 词，B 词 hover 加粗，剩下的 hover 时造一个用 css 搞一个深色遮罩并关掉鼠标事件

感觉一般糊业务也就差不多到这了

@murmur 测一下有没有思路，比如问题拆解能力，每部分大概要怎样规划，怎样做，包括你说的皮肤，适配，i18n ，联动崩溃如何检测，巴啦巴啦巴啦。迎难嘛。

我这还一个基础题，请将下面 fun1 的位置带入 fun1-fun5 ，说一说执行结果是什么

```
async function fun1(){
return false;
}

async function fun2(){
return Promise.resolve(false);
}

async function fun3(){
return Promise.reject(true);
}

async function fun4(){
return new Error('出错力！');
}

async function fun5(){
throw new Error('又出错力！');
}

async function test(){
try {
await fun1();
}catch(e){
console.log('fun: 捕捉到错误了',);
}
}


test();
```
（ 2 ）如果执行的不是 await fun5()，而是 fun5()结果又是什么

有没有后端的，蹲一条可以吗？

@davin 优雅降级渐进增强 这个是 IE 年代才有的面试题，现在就是上完整版，用户如果浏览器不支持就让他去下个 360

@EmbraceQWQ javaguide.cn 自己去背八股文吧，后端能面的太多了，光一个 spring 系列就能出多少题

@murmur 会点 感谢分享 经典的 java guide ，虽然我现在就在写 java ，但是我比较向往每个后端语言都写写，灵活应对需求的，不知道有没有这样的大杂烩八股文宝典。

什么是原型链

前端有一个按钮，避免用户 500ms 内点击多次，纯 js 层面如何实现

执行 String.prototype.trim(" \n abc\n ")
得到 "\n abc\n"
找出其原因。这是我今天遇到的问题

@murmur #16 盲猜
fun1: undefine
fun2: undefine
fun3: 捕获了一个未被捕获的 Promise 错误
fun4: undefine
fun5: fun: 捕捉到错误了

(2): 捕获了一个未被捕获的 Promise 错误

@FakerLeung #24 啊，执行了一下，3 ，5 反了
(2) 跟 fun3 是一样的

@guanzhangzhang 防抖吗？这个问题我一直想吐槽，我看公司其他同事写提交按扭，就喜欢用防抖来防止重复提交，为什么不直接加一个 loading 变量来控制呢，响应时间长的情况下，恰巧间隔 500ms 重复点击是有可能的。

@jackmod #23
我这儿跑了一下，String.prototype.trim(" \n abc\n ")返回空字符串，" \n abc\n ".trim()返回'abc'

@mxT52CRuqR6o5 #27 空环境下执行的结果都是正确的，所以答案是 trim 被某个依赖库给改了。

年轻人都这么强，俺老老实实地打杂，不加班。^_^

react 的话，我喜欢问 const app=<App/> 这里的 app 在 js 里是什么样的数据结构？
react 组件树 diff 的原理（只需要说出组件树的 diff 怎么比较的就行了）另外这个 diff 比较方法可以手写一下（其实就比较两棵树）

有一个 3 层的书架，有 N 本书（ 1<N<10000 ），书的宽度和高度各不相同（第 i 本书宽高为 w_i ，h_i ），如何摆放才能让书架的宽度 W高度 H 最小？

不算很难但是比较新：react server component 是什么？和 server side rendering 有什么关系？

比较宽泛，什么水平的面试者都能回答，方便后续深入拷打的：什么情况下会触发 react 的重新渲染，如何尽力减少重新渲染

现在 ssr 用得多吗，我感觉大多数项目还是 csr 呢。。。

还是后端面试比较直接：能不能熬夜？去不去洗脚？

只有问题，没有答案么。。

@jackmod #28 应该不是。空环境下 String.prototype.trim(" \n abc\n ")执行返回空字符串才是正确的，想要获得“abc”，应该是 String.prototype.trim.call(" \n abc\n ")，将当前方法的 this 指向这个字符串 ` \n abc\n `。这也是为什么" \n abc\n ".trim()会得到正确结果的原因。

打开浏览器，输入 baidu.com ，按下回车，电脑发生了什么？从硬件和软件层面分别说。我当时校招面试阿里的题

如果让你试一下页面上的小图预览功能，你会怎么实现。
如果要实现从小图过渡到大图，关闭时再由大图过渡回小图（类似知乎等一下网站的小图预览）该怎么实现。
引申出 FILP 和 View Transition ，就可以问 FILP 的原理 浏览器渲染机制，动画性能优化等等了。

收藏了，也求一些 React 的题目

话说现在问源码类的面试还多吗，记得以前面试的时候就喜欢问 react/vue 的 xxx 是怎么实现的，然后让你一直讲下去
但是去年面过一两家发现都没问这种了，就问下哪个 api 的作用还有为什么要用这个等等，不过也有可能我就面了两家，样本有点少

@zzzyyysss 现在我做过的小图大图基本上都是后端返回的，类似这样的结构 "image": {
"tinyImage": {
"width": 200,
"url": "xxx",
"height": 200
},
"originImage": {
"width": 700,
"url": xxx",
"height": 525
}
},

产品经理和 UI 谈恋爱了，作为一个前端，这事你怎么看？

@my201461 可能的影响：
决策效率提高：如果他们能够有效沟通，可能会加速决策过程，减少沟通成本。
设计与需求一致性提高：由于他们关系密切，可能会更频繁地沟通，确保设计和需求一致。
潜在的偏袒：在某些情况下，可能会出现偏袒，导致其他团队成员感到不公平。
情感影响工作：如果他们的关系出现问题，可能会影响工作情绪和效率。
应对策略：
保持专业性：作为前端开发者，保持专业性，专注于技术和项目本身，不受个人关系影响。
明确沟通渠道：确保所有沟通都是通过正式渠道进行，避免私下沟通影响团队协作。
及时反馈问题：如果发现他们的关系影响到项目，及时向上级或项目经理反馈，确保问题得到解决。
总之，保持专业态度，专注于工作，确保项目顺利进行。

1. 对状态管理的理解，各个库的优缺点，使用它们的考量是什么？
2. 前端的性能优化，讲讲你的理解，有多少点可以优化，有多少方式和不同入口？
3. 浏览器的渲染原理是什么？
4. 你想写一辈子前端还是做别的？

1. 前端说白了就是个写界面的，你认为呢 ？
2. 现在主流的 LLM 模型已经可以取代中级前端了，你怎么看 ？

@Croow 我指的是一篇文章里有个图片，点击这个图片会显示大图（放大后的图片居于屏幕中央）。用户点击小图到浏览器显示大图的这个过程，用动画来展现。就是微信里聊天框点击图片 显示大图的过程，可以看一下。

@guanzhangzhang 点击后禁用，定时器 500 毫秒后再打开

@lzblalala 建议你去问问你的 LLM 模型能不能回答楼里的问题

@zzzyyysss 设置遮罩层，获取点击图片位置设置绝对定位，添加过渡动画，设置绝对定位位置和宽高撑满屏幕，过程中替换高分辨率图，是这样？

@murmur #18 不一定的。比如 Responsive Images 设计，使用 srcset 和 sizes ，针对高分辨率屏幕的用户提供 x2 ，x3 倍的高清图像，甚至矢量图，而对老式屏幕的用户提供基础倍数图像。针对新式浏览器，为用户提供推送通知，离线浏览。还有音视频流播放格式和推送等等相关的内容，也可以认为是优雅降级渐进增强的范畴。当然，这其中对很多用户来讲，可能是无感知的，但能提示用户体验的同时，还能节省带宽、流量。说白了，省钱

@SanjinGG 过渡动画和加载高分辨率图片同时进行话，会卡顿

@zzzyyysss 难道一开始就用的高分辨率图？