金三银四，记录一次前端面试经历

今年的前端还是很火的，市场需求量特别大，从2月16日来广州，进行了为期2周的面试，3月份就入职了，下面分享我在一家公司的面试经历，希望大家能在这金三银四的日子里能拿到自己满意的offer

• 找工作时间 ：2月18日~2月28日
• 地点 ：广州
• 期望薪资 ：8k~10K
• 面试时间 ：2月27日下午，2月28日下午

职位要求：

1、两年以上前端开发工作经验，精通HTML5,CSS3，精通DIV+CSS网页布局，熟悉W3C网页标准，有开发前端框架经验；
2、精通Javascript，从事过javascript代码优化工作且懂得部分javascript高性能写法，熟悉常用的前端性能优化原理及手段以及性能分析工具；
3、熟悉常见JS开发框架源码实现，（如：Bootstrap、jQuery、React），至少熟练其中一种，有过Angular开发经验优先；
4、能够理解后端架构，与后端工程师配合，为后台工程师编写数据接口，为项目提供最优化的技术解决方案；
5、熟悉HTTP、WebSocket、SSE、REST等网络／服务协议优先；
6、良好的沟通能力和团队协作精神，能与产品经理、UI人员、后台开发人员很好的沟通、协作；
7、有微信公众号开发经验；
复制代码

技术一面

那天天气阴沉，下了一点小雨，但这并不能阻止我面试的热情。坐地铁到动物园站下车，走几分钟就到公司了。到了公司人事小姐姐就让你登记下，然后就来个前端，面试开始：

• 一面前端 ：你好，先自我介绍下吧。
• 我 ：好勒，我叫***，工作1年多，然后balabalaaaa...
• 一面前端 ：看你简历会的知识还挺多的，那你说下position地位有哪些？
• 我 ：大概有5种，分别是：static，relative,absolute,fixed,sticky。
• 一面前端 ：能重点说下sticky定位吗？
• 我 ：这个是css3新属性，当它再可视窗口内是以absolute定位存在的，当它即将进入可视区域外，就变成了fixed定位了。
• 一面前端 ：一般简单的动画为什么用css3的animation而不是用position动画？
• 我 ：position动画会脱离文本流，动画性能消耗大，而css3动画基于帧动画，浏览器可对动画做优化，性能提高不少 （其实华哥也不太确定这样答对不对，只见面试官点了点头）
• 一面前端 ：js基本数据类型有哪些？
• 我 ：string,number,null,undefined,boolean,symbol
• 一面前端 ：typeof 不能区分哪些类型。
• 我 ：不能区分对象，数组，正则。它们返回的都是Object
• 一面前端 ：怎么把字符串的首字母变大写呢？
• 我 ：不知道（当时脑子一时卡住，还真没记起，后面就想起charAt()）
• 一面前端 ：说下promise的实现过程
• 我 ：promise函数里面存入两个参数，成功返回resolve，失败返回reject。new出来的promise函数就可以用.then().catch()捕捉到信息了
• 然后看了下我的项目，并介绍一下项目情况，balabalaaaa...说了半小时。
• 一面前端 ：你的情况我大概都了解了，如果有复试的话我们会尽快通知你。
• 我 ：好的，谢谢

走出写字楼，心想这次面试好简单，估计面试官的知识水平比我还差。
坐地铁回家的路上，就接到电话通知明天下午来复式了

技术二面

天气还是一如既往的阴沉，下午5点准时到达公司，告诉人事我是来复式的，后面人事通知了技术。那个技术迟迟还不来面试，我足足在那里等了40分钟，忍无可忍在问了人事：你们这里没有技术面试官的吗？人事小姐姐又紧急地崔技术面试官来面试，这时终于来了个面试官了，心里一顿mmp，不说了，先面试。

• 二面前端 ：你好，请自我介绍
• 我 ：好勒，我叫***，工作1年多，然后balabalaaaa...

然后大佬就问了我几个问题

• 从1244abc6548找出字母部分并把它第一个字母变成大写，返回Abc。（这道题没答出来，回去的时候才想起，尴尬了）

var str = '1244abc6548';
function filters(str) {
    var newStr = str.replace(/[0-9]/g,'');
    return newStr.charAt(0).toUpperCase() + newStr.substring(1);
}
console.log(filters(str))
复制代码

• 你是怎么上传一个图片到服务器的？

我就说先将图片转成base64格式，然后上传。
复制代码

• 手写一个冒泡排序

//这个倒是写出来了
    var arr = [3,2,8,4,1];
    for(var i=0; i<arr.length; i++) {
        for(var j=0; j<arr.length-i-1; j++) {
            if( arr[j] > arr[j+1] )
            [ arr[j] , arr[j+1] ] = [ arr[j+1] , arr[j] ];
        }
    }
    console.log(arr)
复制代码

• 一个dom结构,用jq寻找con里面的所以dom元素？

<div id="con">
    <span></span>
    <div>
        <a></a>
    </div>
</div>
我说我用过jq，他就出这道题了，结果没答出来，回去想了想应该用$('#con>*')，是不是有点搞笑。
复制代码

后面还问了一些问题其它技术问题，忘记了。 总体来说这次面试体验极差，面完6点多了，他说怎么不早点来？（黑人问号？？？？），我都在公司等了快1个小时了

天黑了，回家