今日头条前端面试总结

今天早晨刚刚结束了今日头条的前段实习生面试。总的下来感觉自己答的一般，感觉以前看东西太浅尝辄止了，导致了今天的面试有很多细节答不上来。现凭着记忆记录一下碰到的题目。

上来首先是自我介绍，然后问为什么选择前端，对前端的理解。然后问项目，因为项目用的是MVC所以就让讲了下MVC，然后问了解MVVM吗，然后我balabala说了一堆。之后开始按照下面的顺序开始问。

HTML CSS



1、position的属性有哪些，这些属性有什么区别。

这个问题在百度一面的时候也遇到过。

可能的值

值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

同时要注意以下几点：

（1）relative产生的定位并不会让元素脱离文档流，并且其原来的位置也会保留。

（2）当元素设置了  absolute  后，默认就不是100%的宽度了，而是内容多宽就是多宽。如果想让它变成100%的宽度。有两种方法，一个是直接设置width:100%，另一个是设置left:0px   right:0px。
（3）position:absolute常和position:relative一起使用。

2、如何实现一个div垂直水平居中。

这是一个问烂的css问题，可惜我只准备了一个答案。即绝对定位法，然后面试管就说，那如果我不知道元素的高度呢，我有想过说用table-cell。但是没有用过，所以不敢说。然后他还问了各种方法的使用场景，优缺点什么的。这个我打算重新开一篇文章来总结。

3、盒子模型

就问了标准盒子模型和IE盒子模型，然后这两种盒子模型通过什么设置。

标准 W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。 

E 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading。

通过box-sizing设置。

值	描述
content-box	这是由 CSS2.1 规定的宽度高度行为。 宽度和高度分别应用到元素的内容框。 在宽度和高度之外绘制元素的内边距和边框。
border-box	为元素设定的宽度和高度决定了元素的边框盒。 就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。 通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit	规定应从父元素继承 box-sizing 属性的值。

4、了解BFC吗

这个真的没有了解过，so～直接说了不了解

JAVASCRIPT

1、了解过ES6吗，说下ES6新增的哪种数据类型。

2、var，let，const区别，let适用场景。

3、头函数的比ES5函数的好处

4、跨域常见的方法，跨域发生在哪个阶段

5、Jsonp跨域的缺点

REACT

    因为我说是从5月份刚开始接触react的项目，然后面试管针对这个也没有问很多。让我说一下对react的理解。
我说react组建化开发和虚拟DOM节点。然后他就问虚拟DOM一定比程序员手动进行DOM操作性能高吗？答案肯定是否定的，然后面试官问为什么。我记得读过一篇文章，上面说：
React 从来没有说过 “React 比原生操作 DOM 快”。React给我们的保证是，在不需要手动优化的情况下，它依然可以给我们提供过得去的性能。React掩盖了底层的 DOM 操作，可以用更声明式的方式来描述我们目的，从而让代码更容易维护。下面还是借鉴了知乎上的回答：没有任何框架可以比纯手动的优化 DOM 操作更快，因为框架的 DOM 操作层需要应对任何上层 API 可能产生的操作，它的实现必须是普适的。针对任何一个
benchmark，我都可以写出比任何框架更快的手动优化，但是那有什么意义呢？在构建一个实际应用的时候，你难道为每一个地方都去做手动优化吗？出于可维护性的考虑，这显然不可能。

也就是说，如果程序员采用最优的DOM插入算法，那肯定是比React要快的，但是开发过程中不能保证每个程序员采用的都是最有的DOM插入算法，这时候React的性能就有可能比原生的DOM快。

然后面试官又问我，说一下你对虚拟DOM节点的理解，如果理解其中的Diff算法的话，也说一下。这个算法只听过，没有了解过，所以就说了不了解～
关于React的一些问题，我也打算重新写一篇博客来说一下。

计算机网络

计算机网络这块的化，就让说一下HTTP常见的状态码，这个问题准备过很久，所以自己暗暗窃喜，但是没想到，面试官又追问，304是什么意思？这个我之前没有注意到过，然后面试官说这个是协商缓存的意思，然后问我知道协商缓存的机制吗？我连协商缓存都不知道，怎么知道他的机制啊～
面试官并没有就此罢休，他好像对缓存这块很有兴趣，然后问了我session、localStorage、sessionStorage的区别，他们分别的适用场景。然后我balabala说了一堆。
面试官继续追问如果我这里有一个很大的list，里面存放的是很多学生的基础数据，这么庞大的数据，如果我每次都像服务器请求的话，会特别的慢，让我设计一个缓存机制。我说用localStorage，然后设置一个缓存固定刷新时间。面试官说如果有一个用户刚好在你两个刷新缓存的时间内修改自己的数据，这样他的数据是不做修改的，然后问怎么才能随时更新缓存的数据。因为自己没有做过缓存，所以当时想到的就是说对比缓存的数据跟此次请求的数据，然后面试官笑着说，那我做缓存干什么，每次请求每次对比，哈哈哈哈。。。。
最后面试官说，对比两个文件有没有被修改，我们一般用什么？我说MD5。然后他说可以把每个学生的数据进行MD5保存在数据裤中，然后我每次请求，服务器只给我返回这个MD5就行了，然后跟客户端缓存进行对比，如果没有我就再次去请求新的数据。

网络安全
问我了解前端安全吗，这个我之前没太准备，就说只知道一些，没有太了解，他就没有接着往下问。

其他：
1、了解其他后台的技术吗
2、平时了解东西通过什么途径

然后我的头条面试就结束了，进行了一个小时多一点。总的来说学到了很多东西，也了解到了自己的不足。另外觉得面试官很nice～