前端面试

某科技公司前端三面面经

okay, it's me again.

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

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

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

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

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

一面技术面

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

有一个页面，一个绝对够长的背景图，我们知道不给盒子设定高度的情况下默认是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>

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

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

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

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

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

需求是 8px 的字体，那我们就 font-size: 16px; transform: scale(0.5); 即可
讲一下 ES6 的新特性
说一些你经常用到的数组的方法
前端性能优化

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

传送门：继承与原型链

传送门：JavaScript原型系列（三）Function、Object、null等等的关系和鸡蛋问题
假设在一个盒子里，里面所有小盒子的宽高都是相等的(~~PS技术不好，画的不相等~~)，大盒子刚好放得下7个小盒子，使用css实现下面的布局

讲一下微信登录流程
怎么给每个请求加上 Authorization token ? (考察封装请求，axios 拦截器)
讲一下 vue 的双向数据绑定原理
移动端防止重复点击，防抖节流
怎么触发BFC，有什么应用场景？
Promise有哪几种状态？
如果现在有一个任务，让你来做主力开发，架构已经搭好了，UI设计图也已经出完了，那你第一步会做什么？
后台管理系统怎么做权限分配？
怎么判断一个对象是否为空对象？

数字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));

怎么解决 vuex 里的数据在页面刷新后丢失的问题？
说一下 vue 组件通信有几种方式(老生常谈的问题)
说一下 vue 和微信小程序各自的生命周期

看一下这个 ts 问题

    let num: string = '1';

    转一下数据类型转成 number

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

二面技术面

封装一个级联组件，讲一下思路
封装 v-model
POST请求的 Content-Type 有多少种？
css flex: 1; 是哪几个属性的组合写法
vue provide/inject 的数据不会及时回流到父组件的问题(我记得没错的话好像是这么问的)
不用Promise的情况下，怎么实现一个Promise.all()方法
[1, 2, 3].map((item, index) => parseInt(item, index))的结果

这里考察了两点，1是parseInt()方法的第二个参数有什么作用，2是进制转换的相关知识
cookie，sessionStorage，localStorage 3者之间有什么区别？
有 http://www.xxx.com (a网站) 和 http://www.api.xxx.com (b网站) 两个网站，在b网站里登录授权拿到了 cookie ，怎么在a网站里拿到这个 cookie ？
说一下 forEach, map, for...in, for...of 的区别
git fetch和git pull的区别(最后一道题)

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

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

区别就是会不会自动 merge

三面HR面

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

以上

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

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

作者：Lieo
链接：https://juejin.cn/post/7021394272519716872

0

2021-12-21

0 个评论

要回复文章请先登录或注册

某科技公司前端三面面经

一面技术面

二面技术面

三面HR面

以上

0 个评论

发起人