转自：
http://utopiascript.github.io/2015/08/18/undefined/%E9%98%BF%E9%87%8C%E3%80%81%E7%99%BE%E5%BA%A6%E6%A0%A1%E6%8B%9B%E9%9D%A2%E7%BB%8F/Blog/
重要的总结写在前面：
-
准备好一个项目经历，深入总结。
-
所有的面试题都有过程分，比如：
“http协议中302这个状态码是什么？”，“我不记得了。”
“http协议中302这个状态码是什么？”，“哦，记不清了，我只记得404是找不到页面，3xx是重定向，5xx是服务端错误。” -
不会的问题千万别瞎猜。
“http协议中302这个状态码是什么？”，“啊，那个，应该是服务端错误吧？”
我问过阿里二面的面试官 “为什么有些问题与一面是一样的？”，“每个面试官都是根据答题情况现场准备问题的。”
-
问题只是话题的起点。所以精心准备的答案可能在面试官的一次追问后全盘崩溃，一开始支支吾吾的面试者，也可能在面试官逐渐的引导下展示出自己的能力。
-
遇到的面试官都是好人，不用紧张。
阿里巴巴
一面
提前预约好的，电话面试在线编程（1hour）
CSS三列布局，水平方向平均分配，垂直高度占满屏幕
解决方案好多种，当时想到的：使用百分制单位；flex布局；
setTimeout、作用域、this结合的一道题
关键点：setTimeout中的this在非严格模式下指向window对象
图片懒加载
<ul>
<li><img data-src="http://www.taobao.com/img/a.jpg" />li> <li><img data-src="http://www.taobao.com/img/b.jpg" />li> <li><img data-src="http://www.taobao.com/img/c.jpg" />li> <li><img data-src="http://www.taobao.com/img/d.jpg" />li> <li><img data-src="http://www.taobao.com/img/e.jpg" />li> ul> 当时只写了个大概思路
window.onscroll=function(){
var seeHeight = document.documentElement.clientHeight; var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; var img = document.getElementsByTagName("img"); for(var i=0, imgNum=img.length; iif(img[i].offsetTop < seeHeight + scrollTop){ if(img[i].src === ""){ img[i].src = img[i].getAttribute("data-src"); } } } } 其他琐碎问题已经记不得了
二面
提前预约好的，电话面试在线编程（1hour）
现有一个Form表单如下，需要使用Javascript提取所表中所有的字段及值
<form >
<label>Alabel> <input name=”a” type=”number”> <input name=”b” type=“text” value=”1”> <textarea name=”description”>textarea> form> 如输出：{ a: 0 , b : “1” }
function getFormValue(){
var form = document.getElementsByTagName(“form”)[0];
var input = document.getElementsByTagName(“input”); // 使用querySelectorAll 改一下 //var form=querySelector(“form.class”); //var input=querySelectorAll(“form input”); var o={}; for(var i=0, len=input.length; iif(input[i].type === “number”){ o[input[i].name] = parseInt(input[i].value, 10); }else if(input[i].type === “text”){ o[input[i].name] = input[i].value + “”; } } return o; } var value = getFormValue(); console.log(value); （一般自己会用class标识输入元素，然后用getElementsByClassName方法查找。）
标准的盒子模型从内到外依次都有哪些属性，知道哪几种盒子模型
W3C盒子与IE盒子
content padding border margin
addEventListener都有哪些参数
第一个事件名
第二个是事件处时回调
第三个是是否允许事件泡冒
JavaScript事件代理机制
事件冒泡和事件捕获（区别和发生阶段）IE的事件代理
function f(e){
e.preventDefault(); //阻止浏览器默认行为 } stopPropagation() //阻止事件冒泡 假定有insertAfter方法但是没有insertBefore方法，要求实现一个insertBefore方法
function(element, new_element){
var pre= element.previousSibling();
if(pre){ pre.insertAfter(new_element); }else{ parent = element.parentNode(); parent.firstChild() = new_element; } } 关于零界值的处理：可以先把节点加到第一个节点的后面，然后把第一个节点再插入到这个节点的后面？。。。或者更笨的方法就是把全部节点用for循环挨个移位置T^T
三面
winter老大亲自面试，依旧是在线编程，电话打来已经是下午六点半多了，没有提前预约，猝不及防。
你的优势在哪里？
有过实际项目开发，前后端数据交互，自己封装过Ajax
那就封装一下Ajax吧
= =! no zuo no die 啊
//创建XHR对象
function createXHR () { if(typeof XMLHttpRequest != "undefined"){ return new XMLHttpRequest(); }else if(typeof ActiveXObject != "undefined"){ var version = [ "MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp" ]; for (var i = 0; i < version.length; i++) { try{ return new ActiveXObject(version[i]); }catch(e){ //跳过 } } }else{ throw new Error("您的浏览器不支持XHR对象！"); } } //名值对转换为字符串 function params(data){ var arr = []; for(var i in data){ arr.push(encodeURIComponent(i)+"="+encodeURIComponent(data[i])); //特殊字符编码 } return arr.join("&"); } //定义ajax function ajax(obj){ var xhr = createXHR(); obj.url = obj.url+ "?rand=" + Math.random(); obj.data = params(obj.data); if(obj.method === "get"){ obj.url += obj.url.indexOf("?") == -1? "?" + obj.data: "&" + obj.data; } if(obj.async === true){ xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ callback(); } } } xhr.open(obj.method,obj.url,obj.async); if(obj.method === "post"){ xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.send(obj.data); }else{ xhr.send(null); } if(obj.async === false){ callback(); } function callback(){ if(xhr.status == 200){ obj.success(xhr.responseText); //回掉传参 }else{ alert("获取数据错误！错误代号："+ xhr.status +"，错误信息："+ xhr.statusText); } } } //调用ajax document.addEventListener("click",function(){ ajax({ method: "post", url: "ajax.php", data: { "name": "Lee", "age": 20 }, success: function(text){ alert(text); }, async: true }); }, true); 当时还没写完，老大说没想到你考虑的情况这么多，以为只是随便封装一下的，我差不多知道了，进行下一题好吧？
节点反序问题：
function reverse(div) {
var children = div.childNodes;
for(var i = 0, len = children; i<len; i++){
for(var j=len; j>0; j++){ var t = children[i]; children[i] = children[j]; children[j] = t; } } } <div id="div"> <p>1p> <p>2p> <p>3p> <p>4p> <p>5p> div> <button id="btn">changebutton> <script type="text/javascript"> var btn = document.getElementById('btn'); var div = document.getElementById('div'); btn.onclick = function reverse() { var children = div.childNodes; for(var i = 0, len = children.length; iif(children[i].nodeType !== 1){ div.removeChild(children[i]); console.log(children); } } var node = div.appendChild(div.firstChild); for(var i = 0, len = children.length-1; idiv.insertBefore(div.firstChild, node); } } script> HR面
巴巴地等了一天，都快放弃以为前一天的技术面挂了，结果晚上七点多打来电话（互联网公司当加班成为习惯），聊了20分钟。
自我介绍，一个印象最深的项目，为什么学前端，如何学习的。
内蒙的是少数民族吗？家在内蒙为啥要去厦门读书，又为啥去杭州工作，为啥不去北京！
简直就是十万个为什么。。。
知道或者认识哪些前端牛人
吹捧无线不犯法2333
罗列好多人名：计算机之子winter、勾三股四、大漠、teambition的寸志、豆瓣和百度的好多大大不记得名字了
还投哪些公司了，如果都拿到offer去哪？
必须阿里，技术氛围好。。。
交叉面
北京的电话，20多分钟，被虐的好惨
闭包、prototype、继承、JS模块化AMD/CMD、有没有研究过jQurey源码
呵呵呵呵。。。全程抱着能撇多少是多少的心态。。。
百度
一面
技术面试竟是位声音甜美的女子，说好聊半小时，活活说了50多分钟
没得好总结的了，我赌五毛钱她是按照JavaScript高级程序设计和CSS权威指南目录提问的！
还涉及一些计算机网络和数据结构、算法的知识。
二面
一面结束半小时后接到二面电话，防不甚防
基本是对一面问题的深入探讨，第二天面试官还发了封email给了好多学习建议^_^
附一张winter老大博客里面的前端面试知识体系图