2016腾讯校招前端开发笔试初试总结

今天来总结下9月5号做的前端笔试题和9月16号的腾讯初试，这段时间真的没怎么准备面试和笔试，可想而知，腾讯的面试肯定是挂了。
首先是9月5号的腾讯校招笔试题，在做笔试之前，我都没怎么去刷题，做的时候，完全是凭借自己的记忆来做的，总的来说，做的不是很好。在做的过程中，截图了一些比较好的笔试题，今天是时候看看了。

233423s8w8rsppu6761261.png

看到选择题，是不是觉得有点坑爹，30道选择题，居然只给30分钟，而且还有75分的分值。第一题做的时候，我选的是第一个，不知道同学们会选什么，这题肯定不止一个答案，但是我没敢学其他的，因为这个属性我根本就不是很熟悉。
tableLayout 属性用来显示表格单元格、行、列的算法规则。固定表格布局(fixed)与自动表格布局(auto)相比，允许浏览器更快地对表格进行布局。在固定表格布局中，水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关。在自动表格布局中，列的宽度是由列单元格中没有折行的最宽的内容设定的。在自动表格布局中，列的宽度是由列单元格中没有折行的最宽的内容设定的。此算法有时会较慢，这是由于它需要在确定最终的布局之前访问表格中所有的内容。所以第一个是正确的。对于第二个选项，只能是用示例来证实了，可以参考下面的截图：

233423hro3ooo4ab0p5wyg.png

从图中红色部分可以看到，当我设置col元素的width 为100px时，那一列的单元格的宽度恰好就是col元素的宽度，所以第二个选项也是对的。第三个选项，我们任然可以从实际例子中得出答案，看下面截图：

233424fe4yr6k3qeu4uyce.png

当我们给第一个单元格设置了width为200px时，那列的单元格宽度恰好是第一个单元格的宽度，所以第三个选项也是对的。最后一个选项经过实际测试，是个错误的选项，表格的宽度并不会与父元素等宽。所以这个题目的正确答案时1，2，3。在做这题的时候，我根本不知道这些，我唯一肯定的答案就是第一个选项。

233424w1d5hzjkqq38ow42.png

这一题，又是一道很有深度的题目，我选的是1和3。不过在看完这篇文章（ http://www.haorooms.com/post/web_http_request）之后，发现这一题似乎没有正确答案，不知道腾讯出笔试题的人知不知道。上面那篇文章列举了几中常见的图片的http请求情况：
1、对于隐藏图片和隐藏元素的背景，Opera不会产生请求。
2、对于隐藏元素的背景，Firefox也不会产生请求。
3、对于尚未插入DOM树的img元素，Opera不会产生请求。
4、基于webkit引擎的Safari和Chrome，支持多背景图。
5、其它情景，所有主流浏览器保持一致。
对于第二个选项，经过实际的测试，并不能触发http请求，因为我在 textarea标签中加入其它的标签根本就没用，只能以文本的形式显示在textarea标签中。其他的情况我在这里就不细说了，各位可以看看我链接的那篇文章，还是非常有参考价值的。

233424su7otjjg8ot78tt7.png

看了这题，不知道大家有没有什么头绪，我是一点都不知道的，因为我连什么是界标角色都不知道，所以这题只能靠猜了。我做的时候，理解的界标元素就是边界的标志。百度了一下，与我理解的差不多，这题其实没多少意思，就是根据英文单词的意思来判断是不是一个界标属性，这题选择1，2，4，5，6。

233424x2fgkggvaqlqwq3a.png

看完这题的题目，我又醉了，css的特殊性我根本没听说过啊，怎么破，没办法，只能瞎猜了！这题肯定错了。今天百度了一下，还是很涨姿势的。
在CSS中，会根据选择器的特殊性来决定所定义的样式规则的次序，具有更特殊选择器的规则优先于具有一般选择器的规则，如果两个规则的特殊性相同，那么后定义的规则优先。计算规则可以看下面一张图：

233425suh81dcu7mzv7rrp.png

我们把特殊性分为4个等级，每个等级代表一类选择器，每个等级的值为其所代表的选择器的个数乘以这一等级的权值，最后把所有等级的值相加得出选择器的特殊值。
第一等：代表内联样式，如: style=””，权值为1000。
第二等：代表ID选择器，如：#content，权值为100。
第三等：代表类，伪类和属性选择器，如.content，权值为10。
第四等：代表类型选择器和伪元素选择器，如div p，权值为1。
注意：通用选择器（*），子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以他们的权值都为0。
知道了这些，就知道这道题的答案了。这道题正确选项应该是2，3，4。关于css特殊性的问题，可以看看这篇文章的介绍（ http://www.iinterest.net/2010/05/08/css-specificity/）。

233425yzb9ztnmmj4wihnq.png

这一题相对比较简单，值得一提的是，Media Queries到底能不能用高度来过滤设备呢？我看了看CSS3的规范，发现高度也是可以过滤设备的，只不过我们习惯用宽度来过滤设备，所以这题应该选1，2，3，4。我又错了，！

233425f9w11yrfkqfsn9kb.png

这一题又一个坑，基本没怎么接触reflow这个东西，笔试前又没怎么去刷题，所以这题只能凭感觉了。百度了一下reflow，有一篇文章写的不错（ http://blog.sina.com.cn/s/blog_877284510101jo8l.html）。这篇还介绍了repaint这个东西，对这些不熟悉的可以看看。什么叫reflow呢？浏览器为了重新渲染部分或整个页面，重新计算页面元素位置和几何结构（geometries）的进程叫做 reflow。在哪些情况下会发生reflow呢？在以下情况会发生reflow：
1.改变窗囗大小
2.改变文字大小
3.添加/删除样式表
4.内容的改变，如用户在输入框中敲字(这样也会-_-||)
5.激活伪类，如:hover (IE里是一个兄弟结点的伪类被激活)
6.操作class属性
7.脚本操作DOM
8.计算offsetWidth和offsetHeight
9.设置style属性
根据reflow的定义，这下就知道这题选什么了，这题的正确答案是1，2，3，5，6。

233426m55g9javjt8tbvh6.png

这题考的是绝对定位，绝对定位在css中是个比较重要的知识，里面包含很多细节。设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。所以这题应该选1，4，第二个选项明显是错误的，包含块并不是viewport（视窗）。总算是对了一题了。

233426uevl4ylhq6l9qwh4.png

这一题又是一个坑，对于http代码所表示的含义，不常用的还真不记得了。只能百度了。这题正确选项是4。贴出http代码所表示含义大全，请戳（ http://tool.oschina.net/commons?type=5），这么多真心记不来。

233426kwzareayj3a9aqjw.png

终于碰到一道比较熟悉的题了，这题毫不犹豫的就选了3。这题考的是闭包，再熟悉不过了，这里不详解。不清楚的可以看看这篇有关闭包的文章（ http://www.mamicode.com/info-detail-500673.html）。

233427zp1b2a2xpo0vwtto.png

后面终于碰到算是比较正常的题了，这题果断选了第3个。substring函数接受两个参数，即substring(start,end)，从零开始索引。这个要与substr()这个函数区分，substr()函数的第二个参数是length，表示取多长的字符串。所以这题就不多说了。

233427ex2pp77d7dipvd7m.png

最后是三道大题，感觉腾讯笔试给的时间不是一般的坑，30道选择题，而且大部分都是多选 ，但是只给你30分钟，而后面三道大题，居然给你90分钟去完成。后面的大题虽然做的不太好，但是我花了半个小时就交卷了。选择题做的不是很好，所以就不指望大题能做多好了，几个大题只是象征性的给了个思路。各位感兴趣的可以自己做着试试看，这几道大题难度不大，就是有很多细节需要注意的。

    腾讯校招笔试就这么完了，做的很一般，笔试也没怎么去准备，就这样结束了。

    9月11号，突然收到腾讯校招发来的邮件，邮件是调查面试地点意向的。我投的是UI开发这个岗位，在深圳没有设置该岗位，只有广州有，于是直接填了可以去广州面试。

接下来的几天，我根本就没心思去关心腾讯校招这事儿。时逢接到了一个网站前端外包和网页设计的私活，我就专心的做这个去了。
9月15号下午，我正做一个网页设计，突然，收到腾讯校招发来一封邮件。看了邮件，居然是腾讯校招的面试邀请，地点是广州天河区的一家酒店。收到面试邀请的通知，我既有种说不出的高兴，又感到有些紧张。高兴是因为笔试做的不怎么样，居然收到了面试邀请，紧张是因为我压根儿就没准备面试，怎么面啊！搞得我做私活儿时都按捺不住自己的心情。不管了，去广州吧！当时直接就下定决心去广州面试，试试水，毕竟是鹅厂发来的面试邀请。
当晚做网页设计，跟客户发生了纠纷，对方的设计要求没达到。为了不影响去面试，只能跟客户说我会解决的。晚上就拼命的做。第二天发给客户看设计稿，结果客户依然觉得没达到要求，要求退款。坑爹啊，当时心情是一万个草泥马！不管了，鹅厂的面试比较重要，最后直接跟客户说，随便你！跟客户说了几句，就奔向去广州的路上了。
从深圳坐高铁到广州，很快就到了，接着坐地铁，到了腾讯发的邮件说的那个路口。刚从地铁站出战，就看到一个大巴车——腾讯接送面试者用的车。跟着我就上车了。
终于到了腾讯说的那家酒店。在酒店门口，站了很多人，都是来面试的。进去酒店里面，感觉人更多，酒店大堂都是面试的。大堂中间放着一个牌子，写着“罢免处”，看着我都激动了，还有这么来霸面的！在大堂转悠了一会儿，就上了二楼，来到二楼的一个大堂里面。里面人更多，大部分都是面试产品经理和市场营销的，这些人都是群面。看到这么多人，心中又有些不安分了，还没到面试，心情就紧张起来。

233432tn6u52az2nqeoimv.jpg

233436izrsjsj26y9y2276.jpg

233440bn76dd7l8i6o818d.jpg


环顾四周，看到有个签到的地方，就跑去签到了。签到处的人给了张卡片，上面写的是面试地点和面试时间，看到是两点钟面试，时间还早，我就找了个座位坐下了！才12点多，坐我后排的人已经面试完了，于是就转过头跟他们了解情况。一询问，才知道他们都是面试后台开发的，一同的还有个女孩子，也是做后台开发技术的。真是难得啊，算是碰上女程序猿了。向他们了解了一下面试官问的问题，他们都说问的很基本，感觉面试官很水，很快就结束了面试！听他们这么一说，心情瞬间舒畅了许多，感觉没什么好担心的。

233451lmlypfyf1drrdyrk.jpg

233455mk8khnj333p9e29h.jpg

233459lcp3134cnkmxc3vz.jpg

233503kvkiugriha1x5qk6.jpg

离我面试时间还有一个多小时，我就到处转悠了下，看了看现场的其它情况！其实说白了，心中还是有点虚，对接下来的面试情况还是没底！在接下来的一个多小时里，我不停的喝水，肚子也有些饿，就吃了点腾讯提供的饼干，坐在那听人家聊面试情况！
在焦急的等待中，我也不时的找人搭讪，了解一下其他人都是面试什么岗位的，同时也缓解一下我那紧张的心情。问了好几个身边的人，发现没一个是面试我那个岗位的，搞得我又没底了！
离面试时间越来越近了，我也越来越紧张，不停的喝水，不停的上厕所！最后，终于念到我的名字，终于要上战场了，终于要去面试了！我赶紧收拾好东西，走向电梯口，进了电梯！
面试地点在22楼，真是高处不胜寒！到了22楼，平静了一下心情，拿出包里的简历，就朝着面试房间去了！
面试房间的门开着，里面的面试官正坐在那儿等待着，我敲了几下门，就进去了！面试官请我坐下，我坐下之后，拿出自己的简历给他了！只见他喵了一眼简历，就把简历放到一边，接着就问：“简历上没看到你最近做的作品，你最近有做什么作品吗？”“有。”我紧张的答道。于是手指着简历上的第一条，说：“这个是暑假在公司实习做的一个项目，由我负责前端页面的设计与开发”。突然，房间来个电话，打断了我的话，还好没吓到我，不然心情只会越发紧张。面试官接完电话，就接着面试我，说：“你有带作品吗？我想看看作品。”幸好我带的有优盘，毫不有的就回答说：“有。”于是我就从包里拿出我的优盘给他。打开优盘，我指着一个图片给他看，自豪的说：“这是暑假做的项目设计稿。”说到这里，其实是有点装逼的，只是想让他看到我还会做设计！结果他什么都没说，只是嗯了一下。接着，我就打开了暑假做的那个web app项目给他看。打开之后，他就开始看这些页面，而我就不停的在旁边向他介绍这个项目用到的技术，为了显得我很6！接着，他打开了浏览器的开发者工具，看里面的源代码。接着就问了一连串的问题，问我这里为什么要这么写，问我那里为什么要加这段代码。前面的问题还好，都知道，到了后面，问到一个我不是很熟的问题，这个布局还能用什么方式实现。这时，我就说了一个我记得不是很清楚的属性，说的不明不白的。接着又说到了flexbox布局，到了这里，我说话已经没什么逻辑了，因为我对flexbox布局不太熟，接触flexbox布局已经是半年多以前的事儿了。没办法，只能说我对flexbox布局不是很熟。
到后面，又问到一个很久之前接触的问题，你用的字体图标，能说说字体图标有哪些格式吗？问的我有些不知所措，我只说出来两个，还有两个格式实在接触的不多，用字体图标的时候也没怎么去记它的格式。这时他又问，你在用字体图标的时候有没有遇到过什么问题？我直接就回答没有，因为是web app开发，所以用字体图标的时候真的没有遇到什么问题。结果他补充到，那你是怎么解决兼容性问题的？我突然意识到，这跟前面的问题其实是一个问题，就是字体图标格式问题，不同的浏览器兼容不同的格式。可想而知，这题又答不好了，我只回答说，不同的浏览器加对应的前缀。
就这样，面试官的问题问完了，到了最后一个问题，老套路，问我还有没有什么问题要问他的！我就发问了，UI开发这个岗位平时都做些什么工作？面试官就解释道，UI开发是，吧啦吧啦吧啦。最后才知道，UI开发原来就是界面架构师。我已经醉了，我理解的UI开发就是又能开发又能设计，恰好我这两个都学了，以为会很有优势，然并卵！
面试结束了，我坐着电梯就下楼了！在电梯中，碰到一个刚面试好的妹子，就问她面试什么岗位的，她说是面试前端开发的。居然碰到同行了，接着就多聊了几句，问她面试怎么样，面试官问了什么，学前端学了多久了之类问题。聊完之后才发现，我应该投前端开发的，因为我并没有打算做界面重构。
就这样结束了鹅厂校招的初试，回到深圳的时候已经晚上六点多了，什么都没想，等面试结果。第二天起来，在腾讯校招微信公众号上查询了一下面试结果。

233504yplypi22z5ap2i92.png

很遗憾，没能过初试。
面试虽然没过，但是觉得也没什么。因为我投简历的时候，没想到还能去初试，我也没怎么花时间准备面试，面试也算是正常发挥。不过这给我明年的实习应聘又增加了一些经验，已经很不错了！
今天的总结就到这里了，希望在接下来的半年里，继续深入学习，争取明年能找一家合适的公司。

最近建了一个前端高质量的圈子，里面邀请了一些前端大牛作为嘉宾，可以跟大家一起探讨前端技术，欢迎加入前端开发攻城狮小蜜圈！

IMG_7515.JPG