某科技公司前端三面面经

13,249 阅读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面差不多都是那些东西

以上

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

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

最后

如有错误,还请不吝指正