前端--笔试（个人实习）第二篇

2015.4.17 youmi面试和笔试

一面，总的来说，这次去面试真的很值得，不管是笔试题的质量，还是面试官问的很多问题，都是很多我不知道

比如SEO啊，grunt啊，SASS啊，CSS图片精灵啊，好像还有CSS地图精灵啊，CSS《link》还有defer。。JS代码放在前面是不是立即执行，放在后面呢？有defer呢，有asyn呢？还有怎么确定新浪微博向下拉的时候是新的内容？

2015.4.20 二面

二面总的来说，真TM糟心，因为一步步向我答的方向深入，步步紧逼的感觉很不好，而且在我思考的时候时不时在看手机,所以面试后自我感觉很不好，所以果然被刷了，可惜了，待遇比第一个面试的好太多了，双屏，技术氛围又好，青轴键盘，_(:зゝ∠)_

1.自我介绍

2.问了一些关于前端的理解

3.为什么你说前端杂而乱，具体说的是什么？前端要多懂一门后端就很杂了吗？

4.你是怎么学习前端的？看了哪些书籍？

5.怎么实现0.5px的细线？还有别的方法吗？多想一下

6.接下来你会怎么学习？ （我回答会补一下JS知识）

接下来是笔试题：                                                               可惜没有记录手机端的笔试题啊啊啊啊

1.写出k的值  结果是: 10

var i,j,k;
for(i=0,j=0;i<36,j<6;i++,j++){
     k = i + j;
}
console.log(k);

这问题也不好百度，╮(╯▽╰)╭，是直接在控制台上得出答案的

2.下面代码的运行结果是什么? 结果是:20,20,10,10

var x = 10;
 foo = {
      x: 20,
     bar: function(){
        var x =30;
        return this.x;
    }
 };
console.log(
   foo.bar(),
   (foo.bar)(),
   (foo.bar = foo.bar)();
   (foo.bar,foo.bar)()
);

第一个和第二个比较好理解，其实是一样的，第三个书上说是赋值语句使得this不能指向foo，所以就是window对象下的x,第四个不知道呢，_(:зゝ∠)_

3.下面代码运行后，点击div#e结果是什么？ 结果：点击一次控制台上就会有5个e

<div id="a">
	<div id="b">
		<div id="c">
			<div id="d">
				<div id="e">
					clck me
				</div>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
	var  a = document.getElementById("a");
	b = document.getElementById("b");
	c = document.getElementById("c");
	d = document.getElementById("d");
	e = document.getElementById("e");
	function handle(e){ console.log(e.target.id);}
	a.addEventListener('click',handle,true);
	b.addEventListener('click',handle,true);
	c.addEventListener('click',handle,false);
	d.addEventListener('click',handle,true);
	e.addEventListener('click',handle,true);
</script>

搞不懂。。

查了一下书，第三个参数'true'和'false'分别表示在捕获阶段获取事件和在冒泡阶段捕获事件，这样看来，就明白无论如何都会输出'e'了

4.如何强制ajax不缓存？并且列举你知道的解决跨域问题方法。

http://blog.csdn.net/hjjk123/article/details/5420495

5.请将以下uml转为javascript代码

大概就是：

Animal { +name   +eat()    }      -----继承  Bird {  +name     +eat() }

6.编写一个函数，获取连接http:....?sourceid=chrome&id=utf-8问号后面的参数，以对象方式返回

这个问题其实比较简单，但是不是这样：

var url = "http:__";

var arr1 = url.split(“?”);

var arr2 = arr1[1].split("&");

7.*{padding:0;margin:0}的目的是什么？

8.ul下面包含1000个li，请问如何快速将li颠倒显示？（写下你的思路或伪代码）

http://www.cnblogs.com/littledu/archive/2012/05/19/2508672.html

http://www.v2ex.com/t/100982?p=1

9.block、inline、inline-block的区别是什么？

10.列举客户端数据存储方式,并简要说明。

有cookie,HTML5上的localStorage(没有时间限制)和sessionStorage(基于一个会话的数据存储)

另附页面如何传递数据：http://www.cnblogs.com/huangjacky/p/4021250.html

11.http状态码206表示什么意思,哪些场景比较多见。

12.如何实现0.5px的细线？（写下你的思路）

13.列举并描述你在项目中使用过提升web性能的方法技巧。

http://www.chinaz.com/web/2013/0217/292422.shtml

http://blog.csdn.net/li2274221/article/details/25193381

14.一个经理有三个女儿，三个女儿的年龄加起来等于13，三个女儿的年龄乘起来等于经理自己的年龄，有一个下属知道已经经理的年龄，但仍不能确定经理三个女儿的年龄，这时经理说只有一个女儿的头发是黑的，然后这个下属就知道了经理三个女儿的年龄。请问三个女儿的年龄分别是什么？为什么？

15.一个页面要求输入银行卡账号，为了更好的用户体验，要求输入数字过程中4个数字后加一个空格方式显示用户输入的数字，即银行卡账号格式化处理，请大致实现该功能的代码（若时间不足，可以写大概思路）