记录了2017年5月下旬刚毕业时面试的经典面试题
布局方面
1. 响应式布局，左侧栏目固定，右侧内容随着屏幕宽度变化而变化（高频）
- flex布局
- position布局
- css3计算宽度
- float布局
flex布局
// html <div class="box"> <div class="left"></div> <div class="right"></div> </div> // css .box { display: flex; } .left { 200px; } .right { flex: 1; }
右侧div设置flex：1 自动填充满容器。
position布局
// html <div class="box"> <div class="left"></div> </div> // css .box { padding-left: 200px; 100%; position: relative; } .left { position: absolute; 200px; left: 0; }
用pading将要显示的右侧内容挤到右边，常用在图文列表
css3计算宽度
// html <div class="box"> <div class="left"></div> <div class="right"></div> </div> // css .left { float: left; 200px; } .right { float: left; calc(100% - 200px); }
通过css3的calc函数可以计算宽度来定义宽度
float布局（面试官想要的答案）
// html <div class="box"> <div class="left"></div> <div class="right"> <div class="inner"></div> </div> </div> // css .left { float: left; 200px; margin-right: -200px; } .right { float: left; 100%; } .inner { margin-left: 200px; }
根据float元素的margin特性布局，兼容性好。以上css都没有给出高度和颜色区分。
javascript方面
1. 闭包和作用域、this的理解
2. 原型链有关的问题
3. es6方面：let块级作用域、generator函数的应用
4. javascript中的setTimeout、promise异步的考查
5. jQuery中的设计模式
- 原型模式 ： 整个jQuery库的构造就是一个原型继承的模式。
- 发布/订阅模式：事件监听模块为发布订阅模式
- 代理模式：jQuery中内置proxy方法便是代理模式
- 外观模式：post、get等方法是对ajax的包装
- 等等
6. jsonp的实现原理
js算法技巧方面
1. a[n] 数组中取值是 [1, n-1] ，也就是必然有重复数字，在时间复杂度和空间复杂度最小的情况下找出一个重复数字
博主也不懂复杂度，用正则写了个， a[n].toString().match(/(d+).*?1/)[1]
2. 两个单向链表的交点
博主懵逼，不懂数据结构不知啥叫链表交点。后来查了下就是两个链表成Y状，相交后必定后面的数据一样。这就不难了。
3. 给定一个 ram函数，该函数有50%几率返回0 和 50%几率返回1，根据这个ram函数写一个ran函数，ran函数有25%几率返回0 1 2 3。
博主脑子转不快，很慢很慢才理清楚这个简单的题，很尴尬。
http方面
1. 在浏览器输入一个网址到页面呈现，计算机做了哪些事情。
在一家公司的CTO问的，尴尬了，之前博主故意百度看了一遍这个问题，结果也是忘得一干二净。
在前端层面上就是 发送请求资源 - 建立连接 - 数据传输 - 解析数据
有很多大神写了完整过程： http://blog.csdn.net/xingxingba123/article/details/52743335 http://www.cnblogs.com/webhb/p/5615063.html
2. put和post请求的区别
一般情况我们用post请求来插入一条数据，用put请求更新一条数据。插入与更新的区别。。。
3. cookie和localStorage、sessionStorage的区别
cookie存储量小，存储数据小，跟随着http请求传输。
几次面试的总结，希望尽快掌握，下一次面试表现好一些