V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Croow
V2EX  ›  职场话题

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

  •  1
     
  •   Croow · 21 小时 27 分钟前 · 2047 次点击

    如题,op 目前 3 年经验,准备年后投一波,大佬们,html ,css,es5,es6,ts,vue,react,vite,webpack,常见算法手写题,项目场景题等等无任何限制, 任意发挥,可以自创,可以搜索,金三银四,可以准备一波。

    43 条回复    2025-01-22 11:17:09 +08:00
    murmur
        1
    murmur  
       21 小时 17 分钟前
    这是我面试别人的题,有人说,因为 vue3 可以在 setup 模式下直接用 ref 定义响应式变量,那么我只要把这个变量用全局变量共享出去,就可以实现以前状态管理框架才能实现的功能。

    1 、这个说法可不可行

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

    3 、如果不妥,请指出不妥之处
    c3de3f21
        2
    c3de3f21  
       21 小时 12 分钟前
    出一个 JsDistServer 搭建+版本控制+远程加载+局部渲染+事件联动的方案?
    c3de3f21
        3
    c3de3f21  
       21 小时 10 分钟前
    根据上面的方案 设计一条链路,我写组件,发布,在线拖拽配置数据源,发布页面,自动部署?
    lyyhello
        4
    lyyhello  
       21 小时 7 分钟前
    vue 生命周期
    murmur
        5
    murmur  
       21 小时 7 分钟前   ❤️ 1
    @c3de3f21 你这个至少得月薪 50k 的才能回答,我们目前在用的大型 OA 就有这个功能,有一个 react 二开平台,全拖拉拽操作,各种配置,各种操作图形化编程,什么字段校验多复杂的流程直接拖,还有移动端自动适配,换皮什么都是小 case

    但是人家光 redis 服务器就一堆节点,这么复杂的配置要做到编译的性能,你缓存得存多大啊
    musi
        6
    musi  
       21 小时 3 分钟前
    @murmur #5 op 说项目场景题等等无任何限制,如果对方公司刚好就是你们在用的大型 OA 公司呢?我觉得问这个问题也正常,而且可以通过候选人答题的思路以及考虑的范围去了解候选人的知识深度和广度,无非就是最终方案的可行性和完整性跟薪资匹不匹配的问题
    Croow
        7
    Croow  
    OP
       21 小时 2 分钟前
    @murmur 目前我在做的项目,早期部分模块就是这样做的,这样写有几个问题:1,跟使用 pinia 的状态管理工具相比,组件的状态是不能用游览器调试插件直观地看出来,2 ,整个组件数据流向不清晰,代码可读性非常差,项目会变得非常难维护,3 ,这些变量是存在全局的,如果有多个组件在频繁访问,修改这些全局变量会增高耦合度。
    courtier
        8
    courtier  
       21 小时 0 分钟前
    好哥哥们来点 5-6 年的,好久没面过了不知道外面怎样,年后估计要被整走了
    murmur
        9
    murmur  
       21 小时 0 分钟前
    @Croow

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

    对于我来说,完全可行反倒是我喜欢的答案,企业开发没多少全局变量,全局状态太多了你耦合性是不是太高了,全局数据就一个用户信息一个权限,几个变量就存完了。以前全 event 开发都能调试,现在有 watch 调试不了,你得多不自信啊
    murmur
        10
    murmur  
       20 小时 58 分钟前
    还有一个考 css 熟练度,纯八股文的偏题,就是问,如何实现文字超过 2 行才显示省略号
    shadowyue
        11
    shadowyue  
       20 小时 57 分钟前
    问这么难的干嘛,我都是问,怎么比较两个日期字符串或者日期对象谁先谁后这种
    Croow
        12
    Croow  
    OP
       20 小时 56 分钟前
    @murmur 大佬,学习了
    davin
        13
    davin  
       20 小时 46 分钟前
    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 等。

    可能容易混淆的知识点:
    强缓存🆚协商缓存
    微任务🆚宏任务
    事件冒泡🆚事件捕获
    前端渲染🆚服务端渲染
    原型继承🆚类继承
    深拷贝🆚浅拷贝
    同步🆚异步
    闭包🆚立即执行函数
    节流🆚防抖
    let🆚const🆚var
    Promise🆚async/await
    箭头函数🆚普通函数
    模块化规范:CommonJS🆚ES Module
    优雅降级🆚渐进增强
    SchwarzeR
        14
    SchwarzeR  
       20 小时 46 分钟前 via Android
    感觉我能想的都是问问烂的八股文
    不过纯搓业务的话感觉不如结对写几行代码有代表性

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

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

    感觉一般糊业务也就差不多到这了
    c3de3f21
        15
    c3de3f21  
       20 小时 46 分钟前
    @murmur 测一下有没有思路,比如问题拆解能力,每部分大概要怎样规划,怎样做,包括你说的皮肤,适配,i18n ,联动崩溃如何检测,巴啦巴啦巴啦。迎难嘛。
    murmur
        16
    murmur  
       20 小时 45 分钟前
    我这还一个基础题,请将下面 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()结果又是什么
    EmbraceQWQ
        17
    EmbraceQWQ  
       20 小时 42 分钟前
    有没有后端的,蹲一条可以吗?
    murmur
        18
    murmur  
       20 小时 41 分钟前
    @davin 优雅降级🆚渐进增强 这个是 IE 年代才有的面试题,现在就是上完整版,用户如果浏览器不支持就让他去下个 360
    murmur
        19
    murmur  
       20 小时 41 分钟前
    @EmbraceQWQ javaguide.cn 自己去背八股文吧,后端能面的太多了,光一个 spring 系列就能出多少题
    EmbraceQWQ
        20
    EmbraceQWQ  
       20 小时 33 分钟前
    @murmur 会点 感谢分享 经典的 java guide ,虽然我现在就在写 java ,但是我比较向往每个后端语言都写写,灵活应对需求的,不知道有没有这样的大杂烩八股文宝典。
    guyeu
        21
    guyeu  
       20 小时 32 分钟前
    什么是原型链
    guanzhangzhang
        22
    guanzhangzhang  
       20 小时 26 分钟前
    前端有一个按钮,避免用户 500ms 内点击多次,纯 js 层面如何实现
    jackmod
        23
    jackmod  
       19 小时 45 分钟前
    执行 String.prototype.trim(" \n abc\n ")
    得到 "\n abc\n"
    找出其原因。这是我今天遇到的问题
    FakerLeung
        24
    FakerLeung  
       19 小时 39 分钟前
    @murmur #16 盲猜
    fun1: undefine
    fun2: undefine
    fun3: 捕获了一个未被捕获的 Promise 错误
    fun4: undefine
    fun5: fun: 捕捉到错误了

    (2): 捕获了一个未被捕获的 Promise 错误
    FakerLeung
        25
    FakerLeung  
       19 小时 37 分钟前
    @FakerLeung #24 啊,执行了一下,3 ,5 反了
    (2) 跟 fun3 是一样的
    ltaoo1o
        26
    ltaoo1o  
       19 小时 14 分钟前
    @guanzhangzhang 防抖吗?这个问题我一直想吐槽,我看公司其他同事写提交按扭,就喜欢用防抖来防止重复提交,为什么不直接加一个 loading 变量来控制呢,响应时间长的情况下,恰巧间隔 500ms 重复点击是有可能的。
    mxT52CRuqR6o5
        27
    mxT52CRuqR6o5  
       19 小时 8 分钟前
    @jackmod #23
    我这儿跑了一下,String.prototype.trim(" \n abc\n ")返回空字符串," \n abc\n ".trim()返回'abc'
    jackmod
        28
    jackmod  
       18 小时 16 分钟前
    @mxT52CRuqR6o5 #27 空环境下执行的结果都是正确的,所以答案是 trim 被某个依赖库给改了。
    dyv9
        29
    dyv9  
       18 小时 10 分钟前
    年轻人都这么强,俺老老实实地打杂,不加班。^_^
    Torpedo
        30
    Torpedo  
       18 小时 2 分钟前
    react 的话,我喜欢问 const app=<App/> 这里的 app 在 js 里是什么样的数据结构?
    react 组件树 diff 的原理(只需要说出组件树的 diff 怎么比较的就行了)另外这个 diff 比较方法可以手写一下(其实就比较两棵树)
    spkingr
        31
    spkingr  
       17 小时 13 分钟前 via Android
    有一个 3 层的书架,有 N 本书( 1<N<10000 ),书的宽度和高度各不相同(第 i 本书宽高为 w_i ,h_i ),如何摆放才能让书架的宽度 W✖️高度 H 最小?
    chesha1
        32
    chesha1  
       16 小时 59 分钟前
    不算很难但是比较新:react server component 是什么?和 server side rendering 有什么关系?

    比较宽泛,什么水平的面试者都能回答,方便后续深入拷打的:什么情况下会触发 react 的重新渲染,如何尽力减少重新渲染
    LASockpuppet
        33
    LASockpuppet  
       16 小时 48 分钟前 via iPhone
    现在 ssr 用得多吗,我感觉大多数项目还是 csr 呢。。。
    kk2syc
        34
    kk2syc  
       16 小时 23 分钟前
    还是后端面试比较直接:能不能熬夜?去不去洗脚?
    vicky1124
        35
    vicky1124  
       6 小时 9 分钟前
    只有问题,没有答案么。。
    tomorrowan
        36
    tomorrowan  
       5 小时 40 分钟前
    @jackmod #28 应该不是。空环境下 String.prototype.trim(" \n abc\n ")执行返回空字符串才是正确的,想要获得“abc”,应该是 String.prototype.trim.call(" \n abc\n "),将当前方法的 this 指向这个字符串 ` \n abc\n `。这也是为什么" \n abc\n ".trim()会得到正确结果的原因。
    tsja
        37
    tsja  
       5 小时 36 分钟前
    打开浏览器,输入 baidu.com ,按下回车,电脑发生了什么?从硬件和软件层面分别说。我当时校招面试阿里的题😵‍💫
    zzzyyysss
        38
    zzzyyysss  
       5 小时 36 分钟前   ❤️ 1
    如果让你试一下页面上的小图预览功能,你会怎么实现。
    如果要实现从小图过渡到大图,关闭时再由大图过渡回小图(类似知乎等一下网站的小图预览)该怎么实现。
    引申出 FILP 和 View Transition ,就可以问 FILP 的原理 浏览器渲染机制,动画性能优化等等了。
    Morning009
        39
    Morning009  
       5 小时 33 分钟前
    收藏了,也求一些 React 的题目🫡
    courtier
        40
    courtier  
       4 小时 49 分钟前
    话说现在问源码类的面试还多吗,记得以前面试的时候就喜欢问 react/vue 的 xxx 是怎么实现的,然后让你一直讲下去
    但是去年面过一两家发现都没问这种了,就问下哪个 api 的作用还有为什么要用这个等等,不过也有可能我就面了两家,样本有点少
    Croow
        41
    Croow  
    OP
       3 小时 58 分钟前
    @zzzyyysss 现在我做过的小图大图基本上都是后端返回的,类似这样的结构 "image": {
    "tinyImage": {
    "width": 200,
    "url": "xxx",
    "height": 200
    },
    "originImage": {
    "width": 700,
    "url": xxx",
    "height": 525
    }
    },
    my201461
        42
    my201461  
       3 小时 57 分钟前
    产品经理和 UI 谈恋爱了,作为一个前端,这事你怎么看?
    Croow
        43
    Croow  
    OP
       3 小时 46 分钟前
    @my201461 可能的影响:
    决策效率提高:如果他们能够有效沟通,可能会加速决策过程,减少沟通成本。
    设计与需求一致性提高:由于他们关系密切,可能会更频繁地沟通,确保设计和需求一致。
    潜在的偏袒:在某些情况下,可能会出现偏袒,导致其他团队成员感到不公平。
    情感影响工作:如果他们的关系出现问题,可能会影响工作情绪和效率。
    应对策略:
    保持专业性:作为前端开发者,保持专业性,专注于技术和项目本身,不受个人关系影响。
    明确沟通渠道:确保所有沟通都是通过正式渠道进行,避免私下沟通影响团队协作。
    及时反馈问题:如果发现他们的关系影响到项目,及时向上级或项目经理反馈,确保问题得到解决。
    总之,保持专业态度,专注于工作,确保项目顺利进行。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5437 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 33ms · UTC 07:03 · PVG 15:03 · LAX 23:03 · JFK 02:03
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.