1. 1. 关于面试准备
  2. 2. 关于面试谈话
  3. 3. 面试的内容
  4. 4. 写在最后
  5. 5. 更新：第二次电面
    1. 5.1. 应对移动端高ppi屏幕：
    2. 5.2. 解析JSON字符串
    3. 5.3. 关于HTTP协议
    4. 5.4. get和post请求的区别
    5. 5.5. 数组去重
    6. 5.6. 如何获取浏览器UA

今天接到百度的电话面试了，人生中第一次电话面试啊，感觉有很多做不好的地方，必须来好好总结整理下。

关于面试准备

之前由于一直没有消息，还以为自己笔试没通过来着，直到昨天晚上偶然翻了下才知道自己被安排面试了。而且一直都没有好好刷过面试题，本来还想趁这几天好好查漏补缺下的，结果今天就来了电话。

而在这种情况下第一个电话我还漏接了T_T…，这种情况下回拨回去是根本就打不通的，幸好下午面试官再打来了一遍。然而此时我又犯了个错，原以为在图书馆楼梯间里接电话应该没问题，结果偏偏那时人来人往，在嘈杂的环境中本身就听不太清，同时好像面试官感冒得有点严重，所以很多问题都得重复几遍才听得清，这样双方都挺累的，严重影响面试效果。

总之面试的准备挺糟糕的，事后好好反思了下，其实在知道面试那一刻就要好好准备、同时保持通信畅通，这种电话要是错过了只能干着急。至于面试环境，好的环境必须保证安静无干扰，同时还得准备在面前准备好纸笔以备不时之需；此外最好备点水喝，在电话里长谈近一个小时免不了口干舌燥、影响发挥的。

关于面试谈话

前面说了环境很嘈杂，说话得重复，这就导致在紧张的面试过程中情绪有点急躁，估计降低给面试官的印象分了吧。

而且在谈话过程中，若需要思考、或者回答完成时，应该有所反馈。要不然你突然间就不说话，不仅气氛很尴尬，而且面试官还得来不断确认你是否还在线，这也会拉低印象分的。

最后在谈话结束时，还忘了问结果何时出来、后续面试安排等问题，没有好好利用好面试的时间显示对该工作的关心、显得过于随意了。

面试的内容

一开始先自我介绍一番，然后问我做过什么项目，我就把我简历上写的念了一遍。

然后就直入主题了，问题以基础题为主吧，认真把百度IFE的第一期做下就基本涵盖了，当然。顺带还插了点前端工程化、node和es6的内容。

首先问的都是css上的问题，第一个就是position有几个值，不就是absolute, relative, static, fixed吗？最多再加个万金油inherit。但是面试官说还有，然而我闻所未闻，回来查了下，发现css3里居然还有个sticky值。该属性在其容器尚在视口内时，相当于relative，而当容器滚动出视口时其行为又相当于fixed，不过目前只有火狐和Safari可以用。。。

接下来是问居中的处理，分几种情况：已知div宽高、div宽高未知、文本元素居中。我把我知道的方式全说了一遍，但div高度未知时的垂直居中我就只能想想出flexbox布局的align-item了，但是面试官说还有，我就傻了。万没想到平时不怎么用的transform用百分比值时也有此奇效，一直只把它和margin负值一起记作居中微调的工具而已。

再接下来给了一个场景：页面内有许多背景图，问如何优化。一开始我有点不知所措，然后面试官提醒了下雪碧图，这下才我才恍然大悟，赶紧把原理和我知道的雪碧图优点诸如减少http请求、在老旧浏览器上模拟css圆角或阴影等统统说了一遍。然后面试官再问：“知道字体文件吗？”，这里所谓字体点含糊不清，不过由于刚问了雪碧图，我就猜是在问字体图标了，便把字体图标的缩放不失真、只支持纯色、文件小、可多个图标合并为一个文件特点说了，面试官也没做回应，估计猜对了吧。

然后问我一段文字太长如何把超出部分用几个点替代，但我忘了使用哪个属性了。其实就是设置一个text-overflow:ellipsis；然而这样还不够，必须按实际情况搭配其他属性。如果文字要求多行那情况就复杂了，可参见张鑫旭文章中给出的方法。但如果文字只要求单行，采用如下样式即可：

1
2
3
4
5
xx {
 overflow:hidden;
 white-space:nowrap;
 text-overflow:ellipsis;
}

接着再问了个a元素有几个伪类，当时回答少个了link，所以还是得罗列下备忘：

  • a:link - 普通的、未被访问的链接
  • a:hover - 鼠标指针位于链接的上方
  • a:active - 链接被点击的时刻
  • a:visited - 用户已访问的链接
  • a:target - 向链接访问的锚点元素添加样式

预处理器稍微提及了下，因为我说只是了解点sass，便没有细问。

差点忘了，还问了清除浮动，这个直接上clearfix大法呀。

然后就轮到js了，首先要我说出数组和字符串各自带有的方法，这个虽然经常用但是要集中报出来还是得想一想的，最好就想一想平时处理数组和字符串的各种场景，需求只要出现、那解决方法就自然冒出来了。

下一个问题是对是否用过js的模块化，然而我只能说我对模块化的认识尽停留在node下用过的exports、require（标准叫CommonJS吧）。听到我在node下用过，面试官便再问了下：“你没在浏览器环境下用过吗？”，真没有，我只能如实说就听过两个词RequireJS（AMD标准）、seajs（CMD标准），平时开发小打小闹，还没深入模块化这么高端的东西。

然后还是工程化的问题，问构建工具的使用。因为真没用过，这个也只能报名词：grunt、gulp、webpack…

接下来问我是否了解XSS，然而我只记得这是种攻击方式（中文意思都想不起来了，叫跨站脚本攻击），安全方面只是偶尔有点好奇去整点hacker的行为，也没深入研究过，囧。

回到js，问如何实现继承，有好多种方法吧，可以有绑定父类型的构造函数、原型链继承、组合式继承、原型式继承、寄生式继承、寄生组合式继承等等，平常用的多的也就是原型链继承或组合式继承。

接着问了call和apply的作用、事件冒泡、事件委托等，比较基础，也没啥好说。不过当面试官问我老版本IE下的事件是否有event对象时，我答不上来了，印象中得通过window来调用才行，回来一查果然是这样。。。

接下来是ajax方面的问题，因为一直做静态页面，这竟成我的短板了。首先问跨域的解决方案，只记得高程上列了不少方法，有点印象的也就是CORS、JSONP了，现在查了下，还有图像PING、Comet（有长轮询、http流两种方式，以SSE为代表）、Web Sockets等技术。然后问ajax有几种状态，光知道http的状态了，而这个真答不上来，罗列如下：

  • 0：未初始化。未调用open()方法。
  • 1：启动。已调用open()方法，未调用send()方法。
  • 2：发送。已调用send()方法，未调收到响应。
  • 3：接收。已接收到部分响应。
  • 4：完成、已接收到全部响应。

接下来问我对node的使用、及es6的了解程度，这两个我现在还处于入门阶段，也实在没什么好说，但也是该找时间深入学习下了，现在做前端不了解这个都不能和人谈笑风生。。。

至于jquery，面试官问我有没有看过源码，我说我只是偶尔偷懒用用选择器，不太依赖框架，于是他就问我jquery选择器中eq和get，eq简单，但get是什么选择器？现在查了下，觉得他应该是问我jquery对象eq和get方法的区别才对（答案是返回值不同，eq返回jquery对象，而get返回dom元素），只是环境太吵我听不清、而且也没用过。。。T_T

还问我知道哪些浏览器存储技术，也就是cookie、sessionStorage、globalStorage、localStorage。翻翻书，发现还忘了IndexDB这东西。

最后问了下我的实习的时间安排，面试就结束了。

写在最后

其实我估计面试官不是看简历（或者只看招聘系统上那个没写技能点的简历）在面试，虽然我简历上写的前端技术点都有问到，但并不是直接点出来而是在谈话中慢慢给带出来的。

而就这些提及的技术点来说，如果刨去面试过程中的环境等因素，因为自己面试经验和准备不足，其实对上面提及的内容回答的也不是很好：

  • css的问题出现在细节上了解不充分
  • 而原生js写了那么多题目，但其实做的都是偏应用方向的，对js主干的面向对象、闭包等知识到有点生疏了；尤其是ajax，因为基本没怎么做过，导致现在成为一大短板
  • 对主流的jquery等框架，虽然最近正在重新了解和用起来，但还是得翻翻api才能上手，经验的缺乏这点也不是几天就能突击提升的
  • 而对于新技术，往往就只是有个印象而已。

所以感觉要通过有点够呛啊，但通过这次面试和上面的总结，也算是给自己提了个醒吧，接下来的学习和开发也得有点针对性了：

  • 对于基础的css和原生js还是要多看看经典著作，老老实实把基础打牢，而且要在平时的开发中尝试融入这些特性才能掌握得全面。
  • 对于主流技术和框架，和上面一样，多练多攒经验才是真理。
  • 由于技术来自实际的生产环境，要创造机会多了解生产环境。毕竟现在的前端可不只是切切图，而是整个web开发流程中的一环，所以得把自己当成一个web开发者而不是只守着前端，才能对实际的工作和具体业务场景有更深的体会。比如要真正掌握ajax，就可以把它和用node.js搭建后台、mysql操作数据库等结合起来学习；这样掌握的可就是一个web应用的开发流程，而不是仅有前端这点ajax操作，这对于你的工作，不论是想从事全栈开发还是和后端的同事沟通，想来也是大有裨益的。
  • 最后对于新技术，虽然说没必要步步紧跟、也没时间步步紧跟的，但作为一个工程师怎么能丧失好奇心呢？多了解一些总不是坏事，至于何时深入使用，还是得看时机和需求吧。

更新：第二次电面

没想到第二次面试隔了一天就来了，当然也就难有长足点的准备了，但是吸取上次的经验，也没犯什么低级错误。这次面试主要是考察项目经历，但我毕竟还是写静态页面比较多，能上线的应用真没怎么做过。所以面试官也只能问问简历上写的东西了，比如在IFE学习到了什么、python的学习经历、用node来做什么、以及对node和python间的比较等等。当然也还问了些技术细节上的问题，这里就把我觉得当时回答不太好的整理下：

应对移动端高ppi屏幕：

高像素密度会导致物理像素和css像素间的比值（即缩放比window.devicePixelRatio = dip / px）变大，这样就让页面上的内容看起来缩小了。要解决这个问题，最常想到的思路是不使用px做长度单位而使用相对单位rem，只要针对不同屏幕去修改html元素的font-size属性即可。

对那些缩放不改变清晰度的内容，上面采用相对单位的方法是没有问题的。但对于高清图片，这样随便缩放大小便失去了高清屏的意义了。而使用html5的picture标签就解决该问题，常用格式如下：

1
2
3
<picture>
    <source srcset="图像文件名, n倍像素密度图像文件名 nx" media="媒体查询">
</picture>

该标签会根据媒体查询结果按需下载我们准备好的不同像素密度图片。

解析JSON字符串

当然是用JSON.parse了，但面试官还问我对老旧浏览器如何实现，当时思路有点混乱没讲明白。翻了翻高程，发现简单用个eval就可以了，因为JSON本身就是用的js语法嘛。如果觉得用eval不优雅，那就使用老道亲自写的js脚本吧。

关于HTTP协议

只是有点印象，全称超文本传输协议，无连接、无状态等。至于为什么是无连接、无状态，就不清楚了，摘了计算机网络课本上的解释：

超文本传送协议 HTTP (HyperText Transfer Protocol)是一个应用层协议，它使用 TCP 连接进行可靠的传送。

HTTP 的主要特点 :

  1. 面向事务的客户服务器协议。
  2. 无状态的协议
  3. 无连接的协议，虽然它使用了面向连接的 TCP 向上提供的服务。

HTTP 有两类报文：
请求报文——从客户向服务器发送请求报文。
响应报文——从服务器到客户的回答。
报文由三个部分组成，即开始行、首部行和实体主体。

请求报文的一些方法：

OPTION： 请求一些选项的信息
GET： 请求读取由 URL所标志的信息
HEAD： 请求读取由 URL所标志的信息的首部
POST： 给服务器添加信息（例如，注释）
PUT： 在指明的 URL下存储一个文档
DELETE： 删除指明的 URL所标志的资源
TRACE： 用来进行环回测试的请求报文
CONNECT： 用于代理服务器

至于各种响应码的含义，也附送如下：

1xx 表示通知信息，如请求收到了或正在进行处理。
2xx 表示成功，如接受或知道了。
3xx 表示重定向，表示要完成请求还必须采取进一步的行动。
4xx 表示客户的差错，如请求中有错误的语法或不能完成。
5xx 表示服务器的差错，如服务器失效无法完成请求。

get和post请求的区别

经典的面试题了，上面也稍微提及了下，摘个比较全点的答案：

GET：一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符。
POST：一般用于修改服务器上的资源，对所发送的信息没有限制。
也就是说Get是通过地址栏来传值，而Post是通过提交表单来传值。

数组去重

也是经典面试题，写出来也不难：

1
2
3
4
5
6
7
8
9
function uniqArray(arr) {
    var newArr = [];
    for (var i = 0 , len = arr.length; i < len; i++) {
        if (newArr.indexOf(arr[i]) === -1) {
            newArr.push(arr[i]);
        }
    }
    return newArr;
}

如何获取浏览器UA

记错了，应该是navigator.userAgent。与此相关的还有navigator.appCodeName（基本都是Mozilla）、navigator.appVersion（获取UA中Mozilla后面的部分）等等。