深圳三日游暨炮灰面试记录

QVQ本人大四狗一枚，前阵子去摆渡面试，本以为过不了二面的了，结果还是完完整整地面完了三面，虽然最后的结果还是炮灰，但是对于我来说，我也知道了我需要了什么：一个好的基础，一个基本的程序员素养，一颗好好学习的心QAQ。

以前觉得写博客是件很牛逼的事情，一直找不到好的平台，如今想了想，虽然我弄了网易博客（太垃圾了），github的博客，还不如就在csdn分享我的心得，虽然没啥人看，哈哈哈。

先来说些我面试的问题以及总体的情况吧。

一面：

1、先来段自我介绍吧

可以从自己的基本学校信息-->自己接触前端的经验-->自己做过的比较有代表性的项目-->自己对前端的理解或者自己在前端方面有哪些优势   的这样的顺序开始说起。

2、有没有学/用过什么框架

已接触：boostrap、Amaze UI、A-frame、Three.js、CreateJS、NodeJS、插件swiper、momentjs

想接触：Angular、vue、react、gulp、https://www.awesomes.cn/repos/Applications/frameworks?sort=hot （框架列表）

关于前端框架这种东西，还是要看实战经验中有用过哪些吧？

3、对切图有哪些技巧？

我回答就是直接批量切图注意压缩图片之类，回头想了想应该对命名方面也应该有些注意，不过一下子还是会想不起来的……

切图详细教程：http://www.jianshu.com/p/367c4e7f46ee

优秀插件cutterman：http://www.25xt.com/appdesign/9476.html

搜下网上的答案，怎么都是说切图无用论……

总结了一下，我觉得第一还是要兢兢业业地掌握基本的切图技能，再在此基础上再考虑性能优化~~再根据实际情况考虑好需要行走的策略是什么（以移动端还是pc端为主？或者是页面构造还是用户体验为主？）根据实际情况变更哦。

https://segmentfault.com/q/1010000000387852

4、 http的请求头？

这个没有用心留意过console台的根本就答不上来。http://jingyan.baidu.com/article/375c8e19770f0e25f2a22900.html

5、http有哪些常见的状态码？

艾玛这个居然让我懵逼了……我背了好几次，居然懵逼了就忘了。国庆不知道能不能把它全部背熟？

http状态码详解：http://tool.oschina.net/commons?type=5

6、对于前端来说，怎么样才能做到SEO？

只能回答出一个meta头。其实有很多啦~~百度是间做搜索的公司，回答不出来我也为自己醉了……

http://www.chinaz.com/web/2013/0131/291456.shtml （前端开发人员应考虑哪些SEO优化技巧）

7、如果给个psd给你，你会怎么样去构造这个页面？？？？

我回答的是一切以还原psd为主，现在回想了一下我回答得太绝对了，想了下我好像又回答了要根据它是移动端还是pc端这种说法，感觉有点暧昧不清，不过答案不是绝对的，面试官只是根据你这个问题了解你是个怎样的人而已。

8、从输入网址到页面完成，会经历些什么过程？？？（二面也有这个问题orz）

我的回答：首先客户端与服务器建立连接（tcp/ip三次握手），建立连接后开始下载响应的html、css 及js文件，浏览器根据这些文件构建dom树，再构建渲染树，再渲染页面，（主要讲了渲染过程把，感觉前端回答这些比较重要些）

对于bat比较看重基础来说，他应该希望回答的是包括网络连接的整个简要过程吧。感觉我对网络这块的基础的确不好。这也是他不会要我的原因吧。http://www.guokr.com/question/554991/

9、自适应布局的原理是什么？？

我突然懵逼，这好像好难啊啊啊啊啊啊，面试官后来又问了我一遍或者说，自适应布局是怎么做到的。。。我说了根据浏览器适配，根本就忘记了媒体查询……

http://www.uqu8.com/html/2015/html-css_0105/386.html

10、前端加载页面有时候会很慢，请问如何才能让页面加载加快？

这回答的就很泛了，不能一下子全部说完，不过我觉得这题我应该都有答到点上了：压缩文件大小，使用延迟加载，减少请求，，利用缓存，利用onload事件（这是错的，面试官指正我了），等等

详细的还有很多，例如精简代码，优化加载文件顺序等等http://jingyan.baidu.com/article/9f7e7ec053c7c26f28155438.html

不过面试官还说，其实百度加载那么快的原因很重要的一点，是因为它有cdn谢谢指导么么哒

11、setInterval & setTimeout的区别？如果你要做一个动画需要用到计时，你会选择用哪个？

这个也是个基础啦，也涉及到这两个定时的基本原理。

我说的答案是settimeout，但是没有具体说清楚这两者的区别，但是面试官说两者其实可以混着用，但是性能的话还是settimeout好很多。

setTimeout递归执行的代码必须是上一次执行完了并间格一定时间才再次执行
比仿说: setTimeout延迟时间为1秒执行, 要执行的代码需要2秒来执行,那这段代码上一次与下一次的执行时间为3秒. 而不是我们想象的每1秒执行一次.

setInterval是排队执行的
比仿说: setInterval每次执行时间为1秒,而执行的代码需要2秒执行, 那它还是每次去执行这段代码, 上次还没执行完的代码会排队, 上一次执行完下一次的就立即执行, 这样实际执行的间隔时间为2秒

这样的话在我看来, 如果setInterval执行的代码时间长度比每次执行的间隔段的话,就没有意义,并且队伍越来越长,内存就被吃光了.如果某一次执行被卡住了,那程序就会被堵死

而setTimout以下写法不会出现因为一次被堵住,而内存被吃光的问题. 但是执行的时间隔是不准确和确定的。

12、有没有做过后台方面的项目？

……我搞过node，感觉不是很熟练，略

13、浏览器内核知道多少

ie：trident

safari/chrome：webkit

firefox：gecko

opera：blink

14、box模型

百度了一下才发现面试官其实想要的是分为ie盒子模型和w3c标准盒子模型啊！！！！！ちくしょう！！

不同的是：ie部分的width/height包括了padding、border部分。

15、block&inline-block的区别

http://www.cnblogs.com/KeithWang/p/3139517.html

16、你对后端开发有什么了解

我讲了些与后台交接的过程之类的，反倒被他说了“其实后台发过来的数据都是字符串”……我“……”他“……”

17、浮动元素了解多少？

这还真的是我软肋，http://www.cnblogs.com/polk6/archive/2013/07/25/3142187.html  ちゃんと理解しないと仕事見つからないよQVQ

二面：

1、先来说说css选择器的优先级吧

    第一等：代表 内联样式，如: style=””，权值为:1000。
    第二等：代表 ID选择器，如：#content，权值为:0100。
    第三等：代表 类，伪类和属性选择器，如: .content , :hover , [type="text"] 权值为:0010。
    第四等：代表 标签选择器和伪元素选择器，如:  p ，::first-line 权值为:0001。
    通配符、子选择器、相邻选择器等的。如: *、>、+,权值为:0000。
    继承的样式没有权值，通配选择器定义的规则优先级高于元素继承过来的规则的优先级。
    最后比较特殊的一个标志!important（权重），它没有特殊性值，但它的优先级是最高的，为了方便记忆，可以认为它的特殊性值为1,0,0,0,0。

（记住！！！！）

2、写出常见的块状元素、行内元素

http://www.cnblogs.com/bingoing/p/5701663.html

3、数据结构：单链表和双链表的结构、分别写出删除一个节点的方法、双链表和循环链表的区别

单链表

在单链表中，每个节点都包含指向下一个节点的指针，最后一个节点的指针为NULL，以标志最后一个节点。之所以叫单链表也是因为每个节点只存在一个节点指针而已，所以只能顺序访问下一个节点，俗话就是过了这个村就没这个店了。为了记住单链表的第一个位置，可以定义一个头指针head。

删除一个单链表的节点：

<span style="font-size:12px;">int Delete(NODE *head , int i)  {      NODE *previous , *current ;      int j=1;      if(i<1)          return 0;      previous = head;      while((j<i) && previous->link != NULL)      {    <span style="white-space:pre"></span>previous = previous->link;          j++;      }      if(previous->link == NULL)  return 0;      current = previous->link;      previous->link = current->link;      free(current);      return 1;}  </span>

双链表

实际上，双向链表仅仅加入的前向指针，前向指针指向的是前一个节点，而前一个指针的后向指针也是指向后一个节点，通过这种方式实现了前后访问。单链表理解了之后，双链表理解起来也很简单，原理是差不多的。

<span style="font-size:12px;">int Delete(NODE *head,int x)  {      NODE *current;      current = head->flink;      while((current != head) && (current->data != x))              current=current->flink;      if(current == head)          return 0;        (current->blink)->flink = current->flink;      (current->flink)->vlink = current->blink;        free(current);      return 1;  }  </span>

区别我暂时没找出来。

4、 问些项目（具体实现）

5、网络：ping这个显示是在tcp/ip的哪层？为哈？

网络层，因为它使用的是网络层协议icmp

6、你会正则吧？会把？（学过）哦，那你写出匹配一个url的表达式呗，http://www.baidu.com/a/b/c?x=y&z=j

我当时一口血没吐出来【。关于正则，到底要怎么学好啊

var vincentbuhuizhengze = "((http|ftp|https)://)(([a-zA-Z0-9\._-]+\.[a-zA-Z]{2,6})|([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}))(:[0-9]{1,4})*(/[a-zA-Z0-9\&%_\./-~-]*)?";

7、href&src的区别？

我又懵逼了……只答了src可以跨域呀……

href 表示超文本引用（hypertext reference），在 link和a 等元素上使用。src 表示来源地址，在 img、script、iframe 等元素上。src 的内容，是页面必不可少的一部分，是引入。href 的内容，是与该页面有关联，是引用。区别就是，引入和引用。

接着他又让我写些src和href分别用于哪些标签上……然后再问我你知道这两者的区别了把？……我“……”【手动再见

8、跨域的方法有哪些？domain的作用是什么？jsonp是吧，那你知道jsonp的限制在哪里呢？

http://blog.csdn.net/yoany/article/details/51841452

domain的作用是设置window.domain为一致的时候就可以跨域了。但要注意的是，document.domain 的设置是有限制的，我们只能把 document.domain 设置成自身或更高一级的父域，且主域必须相同。例如：a.b.example.com 中某个文档的 document.domain 可以设成a.b.example.com、b.example.com、example.com中的任意一个，但是不可以设成c.a.b.example.com,因为这是当前域的子域，也不可以设成baidu.com,因为主域已经不相同了。
这样我们就可以通过js访问到iframe中的各种属性和对象了。

jsonp的限制是只可以使用get请求，而且需要服务端和客户端规定好。

9、与后台的交互中有什么问题？

10、同步与异步的区别？分别适用于哪些情况？你应用过哪些情况？

javascript 异步表示async，指：代码执行不按顺序，‘跳过’执行，待其他某些代码执行完后，再来执行，称为“异步”。

 

javascript同步表示sync，指：代码依次执行。

 

就是这么回事

 

javascript所谓的“线程”，就是这样一种概念

 

这种情况容易出现在 ajax 当中，因为ajax最可能，也最多用到async 或者 sync的概念属性。

 同步一般情况都可以使用，异步的话如果发生线程阻塞可以使用。

……我还真没应用过。。

11、写出localStorage的一些接口吧。

设置和获取数据

sessionStorage.setItem("myFirstKey","myFirstValue");

或者sessionStorage.myFirstKey = myFirstValue;或者sessionStorage["myFirstKey"] ="myFirstValue";

获取数据 

sessionStorage.getItem("myFirstKey");

删除数据

sessionStorage.removeItem("myFirstKey");

删除存储列表中的所有数据

sessionStorage.clear();

12、待补。

三面：

主要是问项目一些问题。（摆渡安全部门总监面试我的，是一位很nice的孕妇，孕妇还要工作真心疼QVQ）

1、自我介绍一下你自己呀

2、可以介绍一下你实习过的公司吗？

3、请说出你最有代表性的一个项目吧。

我说了私伙局。接下来就是她了解我的一些项目进度。

1你们这个项目是没有一个进度跟踪是吗？

2有没有和你的总监/共同开发人员有什么矛盾？

3如果要你重新再去做这个项目，你觉得有什么地方可以改进的？

4从这个项目中你有没有得到些什么难点？？

5项目沟通中有什么阻碍？

4、然后我居然说了上一个通宵了好几天渣渣项目balabala……说了一下我的（不要把情绪表露出来）的感想，说了一堆，她很耐心的听，说到我通宵她眼睛亮了，但是我觉得是装的……

5、如果是在项目中，你更注重团队协作还是个人协作？为哈？

我当然是答团队啦！但是原因答的一般……

6、将来有木有想在深圳发展？

7、将来的职业规划呢？

8、恋爱状况

9、你认为的一个好团队是咋样的？