面试

真心觉得美团的面试官人都好好 。告诉你哪里不足，也很有耐心，感动ing
下午两点多打来的电话，主要的问的内容很广，计算机基本知识。
第一面：
三次握手
http缓存
tcp/ip／http对应哪一层 七层模型
网址传过去具体的过程解析域名服务器
css居中的方式
cookie和session
前端的学习怎么学，怎么接触web新知识
盒子模型
js对象／数据类型／对象和数组的区别
推荐看两本书 js高级编程 js dom艺术 关注一些前端公众号
推荐用chrom浏览器（翻墙）
第二面：
主要问项目,考察学习能力。

面试前的准备

接到面试通知的电话一阵兴奋，随即网上查了一下别人面试美团的面经，发现面试的范围相当广泛，又有学长说美团面试喜欢当场写代码，数据结构算法什么的都有，虽然有点担心过不了，可是一想到要去北京面试就好兴奋~
接到电话当晚就把之前整理问题的本子拿了出来，从头到尾把这些之前的面试中问到过的方面都浏览一遍，然而真的是看到的越多就越觉得自己掌握的太少太少。为了能安慰一下自己激动而又紧张的的小心脏，上火车前给手机浏览器里打开了一大堆的网页，全是干货，留给车上的十四个小时慢慢消化。

面试中的部分题目

普通的HTTP请求和XHR请求对cookies处理的区别
对浏览器来说，cookies每次向服务器发送请求时会自动携带，但是XHR请求默认是不携带cookies，在需要时手动设置。

如何利用cookie拿到session
由于HTTP是无状态的，但是很多网站在用户访问时常常需要用户维持登录状态，所以目前大多数站点采用基于cookie的session管理策略来维持对话，也就是说，session是通过cookie来实现的，用户登陆成功后，设置一个唯一的cookie标识本次会话并基于该标识对用户授权，只要请求中带有这个标识，都认为是登录态。也就是说，如果攻击者获取到了cookie，Ta就可以拿到session。之前以为session和cookie是在两端分别管理的，没有考虑过分布式的问题，这是不对的。

RESTful 的用户鉴权
RESTful API 设计最佳实践
身份认证一般使用OAuth框架，在header中携带鉴权access_token。这块儿不熟，还得好好学。

CSS3 animation动画如何再一次触发
animation动画只应用在页面上已存在的DOM元素上，不需要动作去触发，这就意味着要是不设置循环播放的话它就只能播放一次。但是，如果把持有动画的这个元素中和动画相关的类去掉，在添加上，就可以实现动画的再一次触发。

如果一个项目使用jQuery的选择器，进行了一半后要弃用jQuery怎么处理
第一感觉是改用Zepto，体积小而且选择器和jQuery一样，还有就是自己把原生的JS DOM API封装一下。

cookie存储超出了会怎样
一般浏览器允许的cookie大小在4KB左右，不同浏览器之间会有细微的差别。cookie大小超出限制的时候都不予设置。
还见到过这个：

当很多的cookie被设置，浏览器如何去响应:
　　除Safari（可以设置全部cookie，不管数量多少），有两个方法：
　　最少最近使用（leastrecentlyused(LRU)）的方法：当Cookie已达到限额，自动踢除最老的Cookie，以使给最新的Cookie一些空间。Internet Explorer和Opera使用此方法。

　　Firefox很独特：虽然最后的设置的Cookie始终保留，但似乎随机决定哪些cookie被保留。似乎没有任何计划（建议：在Firefox中不要超过Cookie限制）。
不同浏览器间cookie总大小也不同：
　　Firefox和Safari允许cookie多达4097个字节，包括名（name）、值（value）和等号。
　　Opera允许cookie多达4096个字节，包括：名（name）、值（value）和等号。
　　Internet Explorer允许cookie多达4095个字节，包括：名（name）、值（value）和等号。
注：多字节字符计算为两个字节。在所有浏览器中，任何cookie大小超过限制都被忽略，且永远不会被设置。
localstorage的大小限制、如何判断达到临界值
localstorage的大小一般在5MB左右（每个域名独有，不能跨域访问），而且存储的数据理论上来说只要不手动清除就永久存在，但在WebView之类的场景里可能会由于应用退出、内存不足而被清理掉。
JSON.stringify(localStorage).length可以查看当前使用了的大小，用5M减一下可以得出粗略的剩余大小（但是很不精确），超出的话数据就存不上了。
有一个写代码的题是写一个function，传入金额和红包个数，返回一个分配好金额的红包数组。

还问了一个JS继承的问题，答的不好，研究一下单拿这个问题写个总结吧。

以上回答均为个人观点，如有不对请指出~

面试总结

想想自己从学前端到现在，大部分的关注点都在移动web上，偶尔几个PC端页面也会有意无意地做成响应式来适配移动端。学习前端是兴趣驱动，因此比较多地关心应用而对一些基础细节的关注明显不够，需要更系统地过一遍。前端可以大且全也可以小而美。
1. 基础
2. 知识的扩展和灵活运用
3. 不要太内向

css的基础，很细很细。
js的基础，闭包，作用域链，原型链，this的用法，正则，浏览器的加载原理，性能优化等等

排除美团，只看其他的前端题目来说，总而言之，只要你的基础好，认真看过书，做过小试验，那么基本上都不是问题。

涉及到的题目基本上可以分为下面几类：

1.html

～概念：

如聚美的选择题：HTML是什么？－－答案：超文本标记语言（英文：HyperText Markup Language，HTML）。

～标签的用法：

如聚美简答题：img中alt和title的区别－－答案：（请自查）

2.css

～ie hack

如木瓜的题目＋美团的面试题：定义一个50*50的div在按照下面背景色显示，ie6:red，ie7:yellow，ie8:black，ie9:blue，opera：orange，chrome：green，其他：white；

刚看到这个题目的时候很镇定，但是当写着写着，就发现很容易搞混，你可以试一下哦。

～css定位（float，absolute，relative等）

如聚美题目：如何让文字处置居中？－－答案？line-height

如阿里题目： 如何让图片垂直左右居中。

～盒子的概念（padding，margin，border）

如聚美题目： padding与margin的区别。－－我当时好像把图画上去了，注意ie的区别。

3Javascript

～写函数（闭包，拆解url）

大部分都有：解析某个URL。

～javascript中的类。

如木瓜，阿里和美团中都有：写一个类，写出继承等（网上有很多类似的题目，可以着重研究下）

4.ajax（大部分比实体都会涉及）

～异步与同步的区别

～写一个异步加在javascript的函数

注：由于只是靠脑子记忆的，所以说有不全和出入，请见谅。

三、心得体会

阿里的前端笔试我是很早以前参加的实习笔试，猜测应该和校招的笔试差不多。

美团的笔试题是和研发做一样的，但是只有一道选作题是前端的，对于美团的这种做法的话，我没有太搞懂，因为题目太难，但是最终没有想到的是被通知去面试，考官问的问题也很基础，有一些是HTML5的东西，有一些是javascript的东西，基本和笔试一样。

总结下，其实应对这些笔试的话，我建议只要细心研读两本是就够了。

《html和css深入潜出》《javascri

1.如何去除浮动？

方法一：使用一个空的div

方法二：overflow:hidden

方法三： display:inline-block;

方法四： position:absolute;

方法五：float:left;

方法六： zoom:1

方法七：after伪类+content方式

2.jsonp原理和缺点：利用在页面中创建