今日头条前端面试总结

今天早晨刚刚结束了今日头条的前段实习生面试。总的下来感受本身答的通常，感受之前看东西太浅尝辄止了，致使了今天的面试有不少细节答不上来。现凭着记忆记录一下碰到的题目。

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

HTML CSS

一、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一块儿使用。

二、如何实现一个div垂直水平居中。
这是一个问烂的css问题，惋惜我只准备了一个答案。即绝对定位法，而后面试管就说，那若是我不知道元素的高度呢，我有想过说用table-cell。可是没有用过，因此不敢说。而后他还问了各类方法的使用场景，优缺点什么的。这个我打算从新开一篇文章来总结。


三、盒子模型
就问了标准盒子模型和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 属性的值。

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


JAVASCRIPT

一、了解过ES6吗，说下ES6新增的哪一种数据类型。
二、var，let，const区别，let适用场景。
三、头函数的比ES5函数的好处
四、跨域常见的方法，跨域发生在哪一个阶段
五、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就好了，而后跟客户端缓存进行对比，若是没有我就再次去请求新的数据。


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


其余：
一、了解其余后台的技术吗
二、平时了解东西经过什么途径


而后个人头条面试就结束了，进行了一个小时多一点。总的来讲学到了不少东西，也了解到了本身的不足。另外以为面试官很nice～