阿里

阿里健康
招聘高 级前端或前端 leader 会设置哪类问题?
- 架构设计经验,技术视野。
- 技术深广度。
- 产品思维、团队领导力。
淘宝
淘宝网 HTML & CSS 面试题
- Doctype? 严格模式与混杂模式-如何触发这两种模式,区分它们有何意义?
- 行内元素有哪些?块级元素有哪些?CSS 的盒模型?
- CSS 引入的方式有哪些? link 和@import 的区别是?
- CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和 important 哪个优先级高?
- 前端页面有哪三层构成,分别是什么?作用是什么?
- css 的基本语句构成是?
- 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?经常遇到的浏览器的兼容性有哪些?怎么会出现?解决方法是什么?
- 如何居中一个浮动元素?
- 有没有关注 HTML5 和 CSS3?如有请简单说一些您对它们的了解情况!
- 你怎么来实现下面这个设计图,主要讲述思路 (效果图省略)
- 如果让你来制作一个访问量很高的大型网站,你会如何来管理所有 CSS 文件、JS 与图片?
- 你对前端界面工程师这个职位是怎么样理解的?它的前景会怎么样?
淘宝网 Javascript 面试 题
- js 是什么,js 和 html 的开发如何结合?
- 怎样添加、移除、移动、复制、创建和查找节点
- 怎样使用事件以及 IE 和 DOM 事件模型之间存在哪些主要差别
- 面向对象编程:b 怎么继承 a
- 看看下面 alert 的结果是什么
function b(x, y, a) {
arguments[2] = 10;
alert(a);
}
b(1, 2, 3);
如果函数体改成下面,结果又会是什么?
a = 10;
alert(arguments[2]);
\6. 请编写一个 JavaScript 函数 parseQueryString,它的用途是把 URL 参数解析为一个对象
1. var obj = parseQueryString(url);
2. alert(obj.key0) // 输出0
\7. ajax 是什么? ajax 的交互模型? 同步和异步的区别? 如何解决跨域问题?
\8. 什么是闭包?下面这个 ul,如何点击每一列的时候 alert 其 index?
1. <ul id=”test”>
2. <li>这是第一条</li><li>这是第二条</li><li>这是第三条</li>
3. </ul>
\9. 最近看的一篇 Javascript 的文章是?
\10. 常使用的库有哪些?常用的前端开发工具?开发过什么应用或组件?
11.说说 YSlow(可以详细一点)
这个没关注,一般都用严格模式,混杂模式应该主要是渲染机制,还有一些验证,应该可能和 IE6 的渲染模型有关,再有就是是否可以网页内嵌套框架吧。。说实话这方面一直没在没关注
行内元素有哪些说不全, 常用的 span a,img,不换行的都是行类元素看到了就想起来了。
CSS 的盒子模型 2 种一种是 IE 一种是标准,目前设置了 DOCTYPE 可以解决这个问题,不过还有一些问题在于 Border 的计算,这个 BUG 很纠结。标准的:实际盒子 等于 width padding; margin 有里到外
选择符啊; 看 JQ 的选择器就行了
常用的> + ~ 因为要兼容 IE6 所以高级选择符基本没用
MVC 这个问题根本没得答,三层架构看个人理解,有人理解为 HTML 控制结构,CSS 控制显示,JS 控制行为。我个人理解可以分为 4 层,D 数据层,控制数据的验证,网页数据的交互,例如后台与前台的数据交互,M 模型,页面的 HTML 模板,其实也就是所谓的 DOM 结构,C 控制层,处理用户的事件交互,还有就是页面的核心控制器,协调其他层的协做关系,V 渲染也就是 CSS
选择器:表达式 还有一些 CSShack
基本上主流的都玩过 IE6-8 chrome firefox 360 等
用 CSShack 例如 \_color{#fff};\*color{#fff};color{#fff\0;} 等等 其实最主要遇到问题先看看 DOM 是不是对,第二背景色找原因,不行了百度。
办法很多看具体情况
left:50%;top:50%;margin:-xxxpx 0 0 -xxxpx;等
\9. 有没有关注 HTML5 和 CSS3?如有请简单说一些您对它们的了解情况!
\10. 你怎么来实现下面这个设计图,主要讲述思路 (效果图省略).... 求图
网站公共部分一个张图片 ,然后详尽风格一张图片 CSS 精灵解决 减少连接数 然后图片和让后台设置过过期一年 然后 CSS 文件嘛首页一个,其他页面公一个,公共部分一个;JS 嘛 分批加载,理论上用异步,首先显然首页呈现,CSS 放在底部,反正我认为放在头部不如放在底部
越来越被重视,一句话后台在努力只是 20%前端加把劲 80%,后台在怎么和用户不直接打交道。产品再好不如用户觉得满意来到实在
上午把简历发给淘宝前端工程师清羽,下午就接到了淘宝 UED 的面试通知(这次速度真是惊人!以往根本就等不到淘宝的面试通知,即使等到了也要 15-30 天),和淘宝的 HR 约好 7.6 号下午 13:00 去创业大厦面试。当时得到淘宝的面试通知后,心情那是一个痛快啊!啥也别提了,一个字:爽!于是哥为了这场隆重的面试,开始复习前端技术方面的理论知识了(我是临时抱佛脚)。OOP、javascript 闭包、CSS、XHTML、AJAX、用户体验、性能优化等等关系到前端开发技术方面的知识,我全部复习了一遍,准备充足了,开往淘宝面试大厅(结果出乎我的意料),请继续阅读。
到了淘宝公司后,给我面试的刚好也是淘宝的前端工程师清羽,一阵寒暄过后,正式进入面试的第一个环节:笔试(悲剧啊,笔试中的题目全部不在我所复习的知识内,幸好哥在以前的项目经验中都遇见过),请看题:
三、请看以下代码,按照下面的要求回答
if (window.addEventListener) {
var fn = function (type, fn, useCapture) {
el.addEventListener(type, fn, useCapture);
};
} else if (window.attachEvent) {
fn = function (type, fn) {
el.attachEvent("on" + type);
};
}
考点:对事件绑定的深入理解
a)以上代码的作用
b)以上代码的优点
c)以上代码中的问题,如果你有更好的,请把它编写出来
我的答题:
a)以上代码主要是为 HTML 元素绑定一个事件,并且兼容 IE 和 DOM 标准下的浏览器
b)以上代码的优点是做到的了事件绑定的兼容性
c)以上代码中 fn 这个变量是在 DOM 标准下的浏览器中才会声明,在 IE 下它将是一个全局变量
我的简单的编写:
function bind(el, type, fn, useCapture){
if (window.addEventListener) {
el.addEventListener(type, function(){
fn.apply(el, arguments);//始终将this指向DOM
}, useCapture);
}
else if (window.attachEvent) {
el.attachEvent('on' + type, function(){
fn.apply(el, arguments);//始终将this指向DOM
});
}
}
var el = document.getElementById('demo');
var test = function(){
alert(this.nodeName);
}
bind(el, 'click', test);
注意代码中的注释部分。因为在符合 DOM 标准的浏览器中,addEventListener 方法将把 this 指针指向绑定的函数,而 IE 中 attachEvent 方法将始终指向 widow 对象,为了将 this 指针始终指向当前绑定事件的 DOM,我们必须要使用 apply 或者 call 方法来改变函数的作用域。
三、请计算下面变量的值
var a = Math.PI++;
var b = Math.PI++;
alert(a);
alert(b);
考点:对 javascript 中 Math 对象的深入理解
我没有做出来这道题目,平时都没有怎么研究这个 Math 对象呢,因为数学很差。
四、注释的代码是否可以实现?如不能实现,请修改
function test(){
this.name = 'taobao';
this.waitMes = function (){
//隔5秒钟执行this.name
}
}
考点:javascript 闭包
function test(){
this.name = 'taobao';
var waitMes = function (){
//每隔5秒钟执行this.name
setTimeout(function (){alert(self.name)},5000);
}
return waitMes;
}
var _test = test();
_test();
**TaoBao UED:**说说你做过的项目,以及在项目中遇见的问题
**Me:**然后我就开始介绍我参与过的项目等等,并且说出了在阿里软件工作时,前端工程师和后端工程师在协作开发过程当中遇见的一些悲剧的问题
**TaoBao UED:**使用的框架有哪些?以及各个框架之间的区别
**Me:**prototype、jQuery、YUI2、YUI3,至于各个框架之间的区别见这里
**TaoBao UED:**框架中的底层源码是否看过?
**Me:**看过 jquery 的,YUI2 看过一点,YUI3 还没有看。
**TaoBao UED:**使用 YUI 框架做过哪些事情?
**Me:**使用 YUI 框架开发过一些 widget、component
**TaoBao UED:**喜欢加班吗?(莫非淘宝经常加班)
**Me:**不喜欢,呵呵,但是没有办法,因为这是我的工作。曾经在阿里软件工作的时候,加班到凌晨 2 点,在阿里巴巴 ICBU 开发 B2B 安全风险项目时,睡在会议室过。
**TaoBao UED:**你是怎样看待前端开发修 bug?
**Me:**一开始对修 BUG 有点烦燥,但是后来自己的心态逐渐调整过来,逐渐喜欢修 BUG 了,TaoBao 清羽问:为什么呢?我说:因为我在修 bug 的同时可以发现一些新的知识,可以发现自己的不足,然后我会把这些我认为有技术含量的 bug 放进我的博客中与大家分享。对方笑笑。
**TaoBao UED:**喜欢写博客吗?
**Me:**喜欢,我有一个官方博客
**TaoBao UED:**喜欢逛博客吗?
**Me:**喜欢,TaoBao UED 问:喜欢逛哪些博客?我说:国内知名互联网企业的 UED 或 UCD 博客,以及国外 javascript 大师的博客。
**TaoBao UED:**说说你最近看一篇博客,是关于什么的?
**Me:**我最近看的一篇是口啤网前端主管的一篇关于 doctype 文档类型的博客,感觉收获挺大的,他详细说明了 doctype 的触发方式以及几个模式。见这里
**TaoBao UED:**什么是 WEB 标准?
**Me:**妈妈咪呀,这么简单的问题,我居然只回答了一个:首先要语义化 XHTML 标签,因为当时,脑袋不知怎么的,突然空了,悲剧啊!维基百科对 WEB 标准的定义
**TaoBao UED:**你有女朋友吗?
**Me:**我听到这个问题后,心里在想:莫非…..?我实话说了,有女朋友。对方保持沉默
**TaoBao UED:**什么是类?什么是实例?
**Me:**类是静态的,对象是动态的,对象可以看作是运行中的类。类负责产生对象,可以将类当成生产对象的工厂(object factory)。实例是属于某个类的对象。类的每个实例均包含该类的所有属性和方法。例如:
function class(){} // 声明一个类,类名为 class
class.prototype.newMethod = function (){}//类的一个方法
var b = new class() // 实例化 class 类,b 就是 class 类的一个对象,
b 拥有 class 类的属性和方法,而整个 new 的过程则叫做实例化
还有一些问题,我都忘记了,至于问答面试,我就写到这里吧,后面是淘宝 UED 让我来提问 我问了三个问题:
1、淘宝 UED 有多少前端工程师?
淘宝 UED:差不多有 50 多位前端工程师。
2、淘宝 UED 的流程是怎样的?
淘宝 UED:清已羽介绍过后,我觉得这些开发流程大同小异,差不多都是这样。
3、淘宝的前端工程师平时都做些什么项目?
悲剧啊,这个问题还没有来得及回答,另外一位给我面试的淘宝前端工程师就把淘宝的 HR 叫过来了,然后和 HR 聊一会,最后 HR 告诉我一周之内会通知我的。
呵呵整个面试到此结束,共花了 2 个半小时,三天后接到了淘宝网电话。(但是因为之前工作合约中有特别的说明,所以最终没有去淘宝工作,哥非常遗憾)
题目 2:CSS 方面使用纯 CSS 实现未知尺寸的图片(但高宽都小于 200px)在 200px 的正方形容器中水平和垂直居中。
参考答案:
<!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Keywords" content="简单的XHTML页面" />
<meta name="Description" content="这是一个简单的XHTML页面" />
<title>简单的XHTML页面</title>
</head>
<body>
<style type="text/css">
.box {
display: table-cell;
vertical-align: middle;
width: 200px;
height: 200px;
text-align: center;
/* hack for ie */
*display: block;
*font-size: 175px;
/* end */
border: 5px solid red;
}
.box img {
vertical-align: middle;
}
</style>
<div class="box">
<img
src="http://justinyoung.cnblogs.com/images/cnblogs_com/justinyoung/2007/tb_m.PNG"
alt=""
/>
</div>
</body>
</html>
淘宝招聘官评语:
很遗憾,这个解法用到了 css hack。我们也不理解为什么设置 font-size 可以让 IE 显示垂直居中的效果。根据我们的计算,高度/字体大小的比值为 1.14 左右时 IE 可实现垂直居中。
当然还有很多其他的实现方案,但需要引入额外的标签。对于流量超大的淘宝网而言,我们经过权衡,倾向于在此问题上合理的使用 hack。
题目 3:XHMTL 方面在不使用 border 样式的情况下,画出一条一 px 高的横线,在不同浏览器的 Quirksmode 和 CSSCompat 模式下都保持同一效果。
参考答案:
<!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Keywords" content="简单的XHTML页面" />
<meta name="Description" content="这是一个简单的XHTML页面" />
<title>简单的XHTML页面</title>
</head>
<body>
<div style="height:1px;overflow:hidden;background:#000"></div>
</body>
</html>
淘宝招聘官评语:
此题要点是要求在浏览器的 QuirksMode 和 CSSCompat 模式下效果一致。解法有很多,以上是我们认为的最为合理的一种。
题目 4:JavaScript 方面请给 Array 本地对象增加一个原型方法,它的用途是删除数组条目中重复的条目(可能有多个),返回值是一个包含被删除的重复条目的新数组。
参考答案:
Array.prototype.distinct = function () {
var ret = [];
for (var i = 0; i < this.length; i++) {
for (var j = i + 1; j < this.length; ) {
if (this[i] === this[j]) {
ret.push(this.splice(j, 1)[0]);
} else {
j++;
}
}
}
return ret;
};
//for test
alert(["a", "b", "c", "d", "b", "a", "e"].distinct());
淘宝招聘官评语:
这是最为普通的解法。在数组元素数量不高的情况下,它的性能是可以接受的。相信一定有不少朋友有更好的解法,请告诉我们。
题外话:
从 taobao 的这次的考题来看,对 web 前台职位的技能要求,已经很明显——web 标准设计。从 4 道题目来看,考结构的占了一题,考表现的占了一题,考行为的占了两题。从这个比重来看,JavaScript 的重要性,不言而喻。但是恰恰现在很多的学习 web 标准设计的朋友,都一头扎进 css 的研究当中,甚至误以为 css 就是 web 标准设计的全部。这点还是比较值得思考的。
提到 JavaScript,很多做前台的都比较恐惧。美工、页面都可以做到很漂亮,但是就是 JavaScript 的基础比较差。我想这个也是比较值得反思的点。页面的配色、风格、图片等设计应该属于美工的事情,而后面两层(以三层架构为例)又是程序员的事情,所以,如果将自己定位为一个“Frontend Software Engineer”的时候,我们到底应该学习和掌握一些什么。我想淘宝的这个份试卷,还是比较有指导意义的。(当然,如果能力和精力比较好的话,全能是最好的。)
当然,我的意思也不是说,作为 FSE(Frontend Software Engineer),只要掌握这三个方面就可以了。其实还需要一些其他的相关知识,例如 SEO(搜索引擎优化)、UE(用户体验)等方面,甚至软件设计模式等方面也需要一定的能力,才能建设出好的(强壮、易维护、易扩展)网站。对待知识,我认为:第一:要广,只要和自己的职业定位相关的,都要有一定的了解。第二:要深,对自己凭着吃饭的技能一定要深入。掌握一些别人没有掌握的知识和能力,才能更好地体现自己的价值。
阿里巴巴
电话初探
- 说一下你了解 CSS 盒模型。 我就说了一下 IE 的怪异盒模型和标注浏览器的盒模型,然后可以通过 box-sizing 属性控制两种盒模型的变换。
- 说一下 box-sizing 的应用场景。 这个也不难,简单说了一两个应用场景,具体就不一一细说了。
- 说一下你了解的弹性 FLEX 布局. 这个我也比较了解,各种概念和属性能想到的说了一大堆,也扯到了 Grid 布局,基本这个也没啥问题。
- 说一下一个未知宽高元素怎么上下左右垂直居中。 说了一下 flex 弹性布局的实现,说了一下兼容性,扯到了 postcss 的一些东西,然后说了一下常规的兼容性比较好的实现。
- 说一下原型链,对象,构造函数之间的一些联系。 这个我之前写过相关的文章,自己也有比较深入的理解,所以这个也不在话下,噼里啪啦说了一大堆,也不知道面试官听得咋样。
- DOM 事件的绑定的几种方式 说了三种,然后说了一些冒泡,默认事件,以及 DOM2,DOM3 级的一些标准。
- 说一下你项目中用到的技术栈,以及觉得得意和出色的点,以及让你头疼的点,怎么解决的。 这个因人而异,开放性问题,主要考察平时项目的一些积累吧,这个我回答感觉也比较 ok。
- 有没有了解 http2.0,websocket,https,说一下你的理解以及你所了解的特性。 这个我看过一些文章,但是没有什么印象,扯了一些概念,但是回答的不是很深。