某科技公司前端三面面经

Lieo
13,414 阅读6分钟

okay, it's me again.

哈哈哈我怎么也没想到，我又会经历多一次三面，这次可以说是被狠狠的按在地上摩擦了，没办法，只能奉行一贯的“技术不够，吹牛来凑”原则

btw 应该看多点别人的面经，而不是自己写面经，当然自己写也可以当作一个很好的复盘

这次是某家准备上市的公司，公司的技术部门也是挺强大的，所以也才会有三面吧可能

其实复盘过程中记的也不太清楚，只能说想起来一点写一点，这里建议将整个面试过程录音，以便做一次彻底的复盘，当然最好还是取得面试官同意才这么做

面试流程：boss直聘聊 -> 发邮件邀约面试 -> 一面技术面 -> 二面技术面 -> 三面HR面 -> 电话沟通薪资和入职事宜 -> offer

一面技术面

  1. 自我介绍

  2. 一个业务场景，PC端用vue做后台管理系统的时候，一般路由是动态生成的，前端的文件与路由是一一对应的，假如不小心删了一个文件，这个时候就会跳404页面，会有不好的用户体验，怎么做才能比较好的防止跳去404页面？

  3. 有一个页面，一个绝对够长的背景图，我们知道不给盒子设定高度的情况下默认是100%的高度，盒子高度会被内容所撑开。那么怎么做到第一屏完全显示背景图，第二屏也能继续显示呢？

    好，来看我的第一个错误回答🤣

    <style>
    * {
        margin: 0;
        padding: 0;
    }
    .container {
        width: 100%;
        height: 100vh;
        background-image: url('./assets/images/long.jpeg');
    }
</style>

<body>
    <div class="container">
      <p>1</p>
      这里复制出足够多的<p>1</p>就好，我就不贴出来重复代码占据太大篇幅了
    </div>
</body>

    这是第一屏的效果，嗯很好完全没有问题! 但是当我们鼠标来到第二屏就哦豁了🙈

WechatIMG83.jpeg

然后我的第二个回答是：将图片绝对定位，这样图片就能适应不管多少屏了，但是图片绝对定位的话，没有内容撑开，那么第一屏根本都不会出现背景，所以这样也是不行的😅

答案：将 height: 100vh; 换成 min-height: 100vh;就可以了😂

  1. 我们都知道在谷歌浏览器里面字体的最低像素是 12px ，就算设置font-size: 8px;也会变成 12px ，我现在有一个需求需要 8px 的字体，怎么才能突破 12px 的限制？

    基本原理是使用css3的 transform: scale(); 属性

    需求是 8px 的字体，那我们就 font-size: 16px; transform: scale(0.5); 即可

  2. 讲一下 ES6 的新特性

  3. 说一些你经常用到的数组的方法

  4. 前端性能优化

    传送门：聊一聊前端性能优化

  5. 原型链

    传送门：继承与原型链

    传送门：JavaScript原型系列（三）Function、Object、null等等的关系和鸡蛋问题

  6. 假设在一个盒子里，里面所有小盒子的宽高都是相等的(PS技术不好，画的不相等)，大盒子刚好放得下7个小盒子，使用css实现下面的布局

WechatIMG84.png

  1. 讲一下微信登录流程

  2. 怎么给每个请求加上 Authorization token ? (考察封装请求，axios 拦截器)

  3. 讲一下 vue 的双向数据绑定原理

  4. 移动端防止重复点击，防抖节流

  5. 怎么触发BFC，有什么应用场景？

  6. Promise有哪几种状态？

  7. 如果现在有一个任务，让你来做主力开发，架构已经搭好了，UI设计图也已经出完了，那你第一步会做什么？

  8. 后台管理系统怎么做权限分配？

  9. 怎么判断一个对象是否为空对象？

  10. 数字1-50的累加，不用 for 循环，用递归写

    因为我很抗拒当场写代码，然后满脑子都是1-50的累加为什么不用 for 循环，用 for 循环不是更快吗？为什么要用递归？但是面试官都把纸笔递过来了，没办法也是只能硬着头皮上了，但是这也是很简单的一道题，下面贴出当时手写的代码(是错的)

        // 这是错的这是错的这是错的
    function add(n) {
        let sum = 0;
        
        if (n > 0) {
            sum += add(n - 1);
        } else {
            return sum;
        }
    }
    
    // 这是根据上面改进之后的写法
    function add(n, sum) {
      if (n > 0) {
        return add(n - 1, (sum += n));
      } else {
        return sum;
      }
    }
    
    // 当然还有一种更为优雅与简便的写法
    function add(n) {
      return n === 0 ? 0 : n + add(n - 1);
    }
    
    // 想一行代码搞定的话就是
    const add = (n) => (n === 0 ? 0 : n + add(n - 1));

  11. 怎么解决 vuex 里的数据在页面刷新后丢失的问题？

  12. 说一下 vue 组件通信有几种方式(老生常谈的问题)

  13. 说一下 vue 和微信小程序各自的生命周期

  14. 看一下这个 ts 问题

        let num: string = '1';
    转一下数据类型转成 number

  15. 说一下 ts 总共有多少种数据类型

二面技术面

  1. 封装一个级联组件，讲一下思路

  2. 封装 v-model

  3. POST请求的 Content-Type 有多少种？

  4. css flex: 1; 是哪几个属性的组合写法

  5. vue provide/inject 的数据不会及时回流到父组件的问题(我记得没错的话好像是这么问的)

  6. 不用Promise的情况下，怎么实现一个Promise.all()方法

  7. [1, 2, 3].map((item, index) => parseInt(item, index))的结果

    这里考察了两点，1是parseInt()方法的第二个参数有什么作用，2是进制转换的相关知识

  8. cookie，sessionStorage，localStorage 3者之间有什么区别？

  9. 有 www.xxx.com (a网站) 和 www.api.xxx.com (b网站) 两个网站，在b网站里登录授权拿到了 cookie ，怎么在a网站里拿到这个 cookie ？

  10. 说一下 forEach, map, for...in, for...of 的区别

  11. git fetch和git pull的区别(最后一道题)

    git pull：相当于是从远程获取最新版本并 merge 到本地

    git fetch：相当于是从远程获取最新版本到本地，不会自动 merge

    区别就是会不会自动 merge

三面HR面

这里就不展开了，HR面差不多都是那些东西

以上

其实一面二面还有很多问题都没有写出来，但是碍于当时也没有录音，只记得这么多

严格来讲，这并不太算是一篇面经，在上面很多都只是抛出了问题，因为技术的原因并没有做出相应的解答，还是有些遗憾的

最后

如有错误，还请不吝指正

avatar
文章
阅读
粉丝