很晚才接到一面的电话通知，差点以为我挂了。不得不说，百度的HR是我迄今为止遇到最好的HR，不厌其烦的给我打电话，倘若拿到百度offer的话，那个HR哥哥是我最应该感谢的人~

一面

一面的问题都比较基础，但有一部分答得不是很好，可能是因为太紧张了 - -

实现一个insertAfter方法

这个这么简单的问题我居然没想到，当时忘了节点的 nexSibling 属性，导致我是用 父级元素的 children 方法查找目标元素的兄弟节点的，效率差的不是一点点，怪不得面试官一直说还有更好的方法。

固定宽高的元素实现水平垂直居中

由于宽高已知

1
2
3
4
5
6
7
8
9
10
11
12
.parent { 
	position: relative; 
} 
.child { 
	width: 300px; 
	height: 100px;
	padding: 20px; 
	position: absolute; 
	top: 50%; 
	left: 50%; 
	margin: -70px 0 0 -170px;
}

或使用flex

1
2
3
4
5
.parent {
	display: flex;
	justify-content: center;
	align-items: center;
}

浏览器事件模型

原始事件模型（onclick），IE事件模型（atachEvent），DOM2事件模型（addEventListener）。后面聊到了事件冒泡，事件捕获和事件代理。

原生实现 jsonp ， calback函数如何调用的？

创建一个 script 标签， src 属性设置为目标 url ，服务器接收到请求后返回一个 callback 函数字符串，浏览器解析后是一个函数调用表达式，参数为服务器返回的信息，调用后移除 script 标签。

有哪些块级元素？

当时回答了 div , ul , ol , dl , p , form 。

处理 url ，取出query

通过字符串的split方法

1
2
var query = document.URL.split('?');
var key = query[query.length - 1].split('&');

实现一个排序算法

冒泡，快排，直接插入排序都可以

js 实现私有属性和方法

通过闭包实现

1
2
3
4
5
6
7
8
9
10
11
12
13
function A() {
	var private = 0;
    
    return {
    	add: function(n) {
    		private+=n;
    		return private;
    	},
    	get: function() {
    		return private;
    	}
    }
}

二面

两栏布局

非常规两栏布局

性能优化

前面提到过，回答这个问题已经很熟练了。

实现鼠标拖拽元素

mousedown 和 mousemove事件一起使用， clienX ， clientY ， offsetWidth ， offsetHeight 等属性的使用，注意移除事件。

实现无刷新上传文件

这个当时没答上。

浏览器从输入 url 到页面渲染出来发生了什么？

经典问题，我主要从域名解析， TCP ， Http ，浏览器渲染等几个方面说了下。

有哪些节点类型？

文档节点，元素节点，属性节点，注释节点等。

代码实现输入一个数 n ，生成所有 n 位二进制数

原理是遍历 0 至 n-1，然后通过 toString 方法转换为二进制数，最后为不足 n 位的数补零。

三面

在阿里做了些什么

做过什么组件么？

自己的优缺点？

未来三年的打算

这些问题因人而异了，结合自己的情况谈就好，说了很多在阿里的实习经验。