面试分享：一年经验面试头条前端的失败总结

老年阿童木
934 阅读8分钟

前言

简单说一下自己的背景

  • 18年毕业于南京某工业大学，工业工程专业
  • 跨考浙大计算机失败，完全没有准备校招，彻底拉跨
  • 焦虑异常，遂从去年8月份开始通过网络学习前端知识，直到1月份开始找工作，进入了一家线下教育机构，担任前端开发，制作类似于慕课网的线上平台，后由于通勤时间太长（来回4个小时），跳槽至离家不远的一所公司，制作智能工业方面的前端页面

最近因为种种原因，想换个环境，于是开始找工作，把简历重新写一写，然后通过掘金沸点的内推和BOSS直聘，陆陆续续投了十几家，结果，只有帆软和头条的面试。。。真的感觉好尴尬，不过不谈其他的，就讲讲头条的失败经历吧。

面试过程

第一轮视频面

一开始定了5点半的面试时间，结果5点15面试间就开了，倒让我有些猝不及防。面试官是个小姐姐，年纪应该也不大，估计跟我差不多，但想想人家这个年纪已经开始面试候选人了，我还在想着怎么获得一个面试的机会，还是有点后悔的，假如考研成功，假如校招就能来面头条，肯定会是一个崭新的局面。所以还是要早点努力啊，努力的越早结果才会越好。下面写下流程：

  1. 自我介绍

    一开始还是有点紧张，磕磕绊绊地讲了一下自己的经历，不过面试官应该也不是很感兴趣，就直接开始问问题了。

  2. 盒模型

    这个问题比较基础，我就回答了盒模型的标准模式和怪异模式，然后又具体讲了相关的属性名，之后还给了一道题目，

    <!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
  width: 10px;
  height: 10px;
  border: 1px solid #000;
  padding: 2px;
  margin: 2px;
  background: blue;
}

#box1 {
  box-sizing: border-box;
}

#box2 {
  box-sizing: content-box;
}
</style>
</head>

<body>
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
</body>

</html>

    问这两个盒子的蓝色区域高度是多少。这个时候我还没缓过神，回答了几次都没考虑清楚，还好面试官不时提出反问，我才彻底想明白。

  3. 垂直居中怎么做

    这里就是回答了几个常见的作法，flex，绝对定位，然后面试官根据我的回答继续问，比如flex的align-items有几个属性，分别是什么作用，然后绝对定位的top, transform的尺寸都是根据什么计算的，总体来说还是面的比较细的。

  4. js的数据类型

    这边首先是问了js有多少种数据类型，然后问typeof的用法，然后又扩展到有几种判断数据类型的方式，我回答了Object.prototype.string，然后在面试官的暗示下，又想到instanceof也可以，到这就基本上答完了。

  5. url从输入到渲染完成发生了什么。

    这题非常经典，其实我今天才刚研究过，就直接开始讲了，从dns到TCP到http到渲染树，每一个都稍微讲了一些细节，结果讲完之后，面试官好像关注的不在这些上面，而是开始询问页面渲染的细节，于是我又开始讲dom树和cssom树合并成渲染树，但好像还是没达到面试官的要求，于是她又出了道题：

        <!DOCTYPE html>
    <html lang="en">

    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="a.css">
    <script src="a.js"></script>
    </head>

    <body>
    <script src="b.js"></script>
    </body>

    </html>

    问这个html文件是怎么执行的。这个问题还真难住我了，因为我从开始学就很少会去写纯html文件，都是在用框架，所以反而对这种写法不熟悉，然后胡乱地答了些，面试官再次使出绝技：无情反问。于是我开始从浏览器内部线程地角度去考虑，回答先加载script并顺序执行，然后dom树和css树去获取css文件并渲染，其实答得问题挺大的，但面试官到此也就没继续问了。

  6. 写一个函数获取最长无重复字串

    这算是来了道算法题吧，不过我看到后还是挺开心的，因为可以用动态规划做，其实几种算法思想，我也就对动态规划熟悉一点，然后就直接马不停蹄地开写了，一波直接写完，还在肉眼debug的时候，面试官看我写完了，就开始问我细节问题，这个时候我还算讲的比较自信的，但说的和想的总是不一样，写的时候感觉思路非常清晰，但说出来就感觉自己像个弱智，说了好几遍，面试官也没太听懂，那咋办呢，再给个字符串测试一下吧。测试下来没问题，好，那就算通过了。

  7. 有什么要问的

    到这里其实我还真不知道问什么，毕竟才第一轮，所以也没说什么，面试官就跟我说，他去给主管汇报一下，等10分钟。

第二轮视频面

等了10分钟左右，面试间再次开通，我以为是来说一下面试结果，结果主管来了，说直接开始下一轮面试。我？？？？然后就直接开始了。

  1. 用ruduce实现map

    这第一道题就给我整懵了，我倒是之前用forEach实现过，但ruduce还真没试过，于是想了半天，面试官也一直在给我提示，但我确实是愣住了，怎么都想不出来，其实现在再思考一下，基本思路还是有的，但当时真就是没思路，确实面试遇到没遇见过的东西，下意识就开始慌了，最后只能无奈放弃，然后面试官说，看你简历上写的熟悉es5，es6，但好像还不是很熟练，我只能尴尬的笑，心里感叹，给自己挖坑了。

  2. 写一个render方法

    JS编码实现一个render方法，使得可以这样调用，例如:

const year = '2017';
const month = '09';
const day = '21';
const str = render('${year}-${month}-${day}'); 
console.log(str); // 输出 2017-09-21

    这时候我还是懵圈状态，然后也没有思路，面试官倒是一直再提醒我，可惜我不争气啊，搞来搞去搞不定，最后还是只能放弃。

  3. 一个常规的异步问题

    这个算是唯一一个我能回答的问题了，结果async的用法记岔了，还是错了几个，这是最难受的，其实之前异步问题我已经蛮自信的了，所以这次面试完全没有去复习这方面的内容，结果太长时间没看就中招了，这个问题答错是我对自己最不满意的地方，前两个问题不会还情有可原，这个问题答错真是活该被刷。

  4. 尾声

    到了这一步，面试官应该也对我上一个问题没答出来接受不了，直接就说我不契合他们的工作，并且直言我的基础还要再补一补，确实如此，其实我准备了挺多框架相关的知识，但完全没机会被问到，就倒在了js的基础上。之后面试官很和善地开始跟我交流面试的情况，提到了我的问题所在，我也就乘机问了一些让我很困惑地问题，最后我们互相加了微信，面试就这样“愉快”地结束了。

总结

这次面试对我的触动还是蛮大的，也因此，在结束后我立刻写下了这篇失败感言，实际上，从整体来看，题目算很难吗？我觉得远远谈不上，至少和掘金上其他大佬面试时见到的题目一比，我这个就是小菜，但就是这样的一些基础题，我却没有全部回答到位，这里面很值得深思。我真的要好好想一想，我的js基础是不是像我认为的那样熟练了。真正扎实的基础，是值得被给予机会的。

相信有缘看到我这篇文章的人，会觉得自己可以稳稳通过，但还是不要太乐观，因为我也问了面试官，其实面试题的难度是跟你的工作经验有关的，就是因为我的经验比较少，所以才都是基础题，不过如果有和我经历相似的人，倒是可以去尝试一下，也未尝不是个机会。

总之，这次面试，让我对于大厂有了进一步的认识，至少他们不再是遥不可及，只要我稳扎稳打，一步一个脚印，说不定半年后，我就可以写一篇新的文章《面试分享：一年经验面试头条的成功经历》。

最后，如果大家有什么内推机会的话，希望能带带我。。。

avatar
文章
阅读
粉丝