Skip to main content

阿里

img

阿里健康

招聘高级前端或前端 leader 会设置哪类问题?

  1. 架构设计经验,技术视野。
  2. 技术深广度。
  3. 产品思维、团队领导力。

淘宝

淘宝网 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(用户体验)等方面,甚至软件设计模式等方面也需要一定的能力,才能建设出好的(强壮、易维护、易扩展)网站。对待知识,我认为:第一:要广,只要和自己的职业定位相关的,都要有一定的了解。第二:要深,对自己凭着吃饭的技能一定要深入。掌握一些别人没有掌握的知识和能力,才能更好地体现自己的价值。

阿里巴巴

电话初探

  1. 说一下你了解 CSS 盒模型。 我就说了一下 IE 的怪异盒模型和标注浏览器的盒模型,然后可以通过 box-sizing 属性控制两种盒模型的变换。
  2. 说一下 box-sizing 的应用场景。 这个也不难,简单说了一两个应用场景,具体就不一一细说了。
  3. 说一下你了解的弹性 FLEX 布局. 这个我也比较了解,各种概念和属性能想到的说了一大堆,也扯到了 Grid 布局,基本这个也没啥问题。
  4. 说一下一个未知宽高元素怎么上下左右垂直居中。 说了一下 flex 弹性布局的实现,说了一下兼容性,扯到了 postcss 的一些东西,然后说了一下常规的兼容性比较好的实现。
  5. 说一下原型链,对象,构造函数之间的一些联系。 这个我之前写过相关的文章,自己也有比较深入的理解,所以这个也不在话下,噼里啪啦说了一大堆,也不知道面试官听得咋样。
  6. DOM 事件的绑定的几种方式 说了三种,然后说了一些冒泡,默认事件,以及 DOM2,DOM3 级的一些标准。
  7. 说一下你项目中用到的技术栈,以及觉得得意和出色的点,以及让你头疼的点,怎么解决的。 这个因人而异,开放性问题,主要考察平时项目的一些积累吧,这个我回答感觉也比较 ok。
  8. 有没有了解 http2.0,websocket,https,说一下你的理解以及你所了解的特性。 这个我看过一些文章,但是没有什么印象,扯了一些概念,但是回答的不是很深。

一轮技术面

然后当天晚上一个女的面试官就给我打电话了,说八点半进行下一轮技术面试,没想到效率这么快,我都没怎么准备。这次就直接省略自我介绍了。

  1. webpack 的入口文件怎么配置,多个入口怎么分割啥的,我也没太听清楚。 这个自己就说了一下自己的理解,以及自己用 node 写的多入口怎么配置,然后面试官说不是多入口配置,然后我又说了一下自己的理解,然后这题就过了。
  2. 我看到你的项目用到了 Babel 的一个插件:transform-runtime 以及 stage-2,你说一下他们的作用。 这个我也还算比较了解,就说了一下 ES 的一些 API,比如 generator 啥的默认不转换,只转换语法,需要这个来转换,然后说 profill 啥的,扯了一下 stage-1,stage-2,stage-3,这个问题回答还算清楚。
  3. 我看到你的 webpack 配置用到 webpack.optimize.UglifyJsPlugin 这个插件,有没有觉得压缩速度很慢,有什么办法提升速度。 这个我主要回答了一下,我之前也没怎么了解,一个想到是缓存原理,压缩只重新压缩改变的,还有就是减少冗余的代码,压缩只用于生产阶段,然后面试官问还有呢?我就说,还可以从硬件上提升,可以得到质的飞跃,比如换台 I9 处理器的电脑。。。。
  4. 简历上看见你了解 http 协议。说一下 200 和 304 的理解和区别 这个噼里啪啦说了一堆,协商缓存和强制缓存的区别,流程,还有一些细节,提到了 expires,Cache-Control,If-none-match,Etag,last-Modified 的匹配和特征,这一块之前有过比较详细的了解,所以还是应答如流。
  5. DOM 事件中 target 和 currentTarget 的区别 这个没答上来。。。
  6. 说一下你平时怎么解决跨域的。以及后续 JSONP 的原理和实现以及 cors 怎么设置。 我就说了一下 Jason 和 cors,然后问我 JSONP 的原理以及 cors 怎么设置,这一块自己也实践过,所以还是对答如流的。
  7. 说一下深拷贝的实现原理。 这个也还好,就是考虑的细节不是很周全,先是说了一种 JSON.stringify 和 JSON.parse 的实现,以及这种实现的缺点,主要就是非标准 JSOn 格式无法拷贝以及兼容性问题,然后问了我有么有用过 IE8 的一个什么 JSON 框架,我也不记得是什么了,因为我压根没听过,然后说了一下尾递归实现深拷贝的原理,还问了我typeof null 是啥,这个当然是 Object。。。
  8. 说一下项目中觉得可以改进的地方以及做的很优秀的地方? 这个也是因人而异,开放性问题,大致扯了一下自己的经历,也还 OK。

二轮技术面

  1. 有没有自己写过 webpack 的 loader,他的原理以及啥的,记得也不太清楚。 这个我就说了一下,然后 loader 配置啥的,也还 ok。
  2. 有没有去研究 webpack 的一些原理和机制,怎么实现的。 这个我简单说了一下我自己了解的,因为这一块我也没深入去研究,所以说的应该比较浅。
  3. babel 把 ES6 转成 ES5 或者 ES3 之类的原理是什么,有没有去研究。 这一块我说了一下自己的思路,大致也还 OK,我也没去深入研究怎么转换的,之前好像看过类似的文章,自己也只观察过转换之后的代码是啥样的,至于怎么转换的规则,真的没去深入观察。
  4. git 大型项目的团队合作,以及持续集成啥的。 这里我就说了一下自己了解的 git flow 方面的东西,因为没有实战经验,所以我就选择性说明了这一块的不熟练,然后面试官也没细问。
  5. 什么是函数柯里化?以及说一下 JS 的 API 有哪些应用到了函数柯里化的实现? 这个我就说了一下函数柯里化一些了解,以及在函数式编程的应用,最后说了一下 JS 中 bind 函数和数组的 reduce 方法用到了函数柯里化。
  6. ES6 的箭头函数 this 问题,以及拓展运算符。 这一块主要是 API 和概念的问题,扯了一些规范以及严格模式下其他情况 this 只想问题。
  7. JS 模块化 Commonjs,UMD,CMD 规范的了解,以及 ES6 的模块化跟其他几种的区别,以及出现的意义。 这个也是说了一下自己的理解和认知,自己对模块化历史以及一些规范都有所涉猎,这一块也还凑合。
  8. 说一下 Vue 实现双向数据绑定的原理,以及 vue.js 和 react.js 异同点,如果让你选框架,你怎么怎么权衡这两个框架,分析一下。 主要是发布订阅的设计模式,还有就是 ES5 的 Object.defineProperty 的 getter 和 setter 机制,然后顺便扯了一下 Angular 的脏检测,以及 alvon.js 最先用到这种方式。然后扯了一下 vue.js 和 react.js 异同点,权衡框架选择,调研分析之类,噼里啪啦说了一大堆。
  9. 我看你也写博客,说一下草稿的交互细节以及实现原理。 这一款就按照自己用过简书或者掘金,SG 这类草稿的体验,详细说了一下,这个开放性问题,说到点基本就 OK。我们每天晚上八点在腾讯课堂都有前端的免费课程, 你要来听课学习一下吗?有没有兴趣呢?

三轮技术面

第一个面试官

  1. 先自我介绍一下,说一下项目的技术栈,以及项目中遇到的一些问题啥的。 这个问题就是个开场白,简要说明一下,问题都不大,这个面试官就是第一次打电话给我面试的那个 boss,所以技术那块 boss 心里也有个底细,所以没再问技术问题。
  2. 一个业务场景,面对产品不断迭代,以及需求的变动该怎么应对,具体技术方案实现。 具体业务场景,我就不一一描述,Boss 在白板上画了一个大致的模块图,然后做了一些需求描述。然后需求一层一层的改变,然后往下挖,主要是考察应对产品能力,以及对代码的可维护性和可拓展性这些考察,开放性问题,我觉得还考察一些沟通交流方面的能力,因为有些地方面试官故意说得很含糊,反正就是一个综合能力,以及对产品的理解,中间谈到怎么实现,也问到了一些具体的点,记得问到的有一下几个。

① 怎么获取一个元素到视图顶部的距离。

② getBoundingClientRect 获取的 top 和 offsetTop 获取的 top 区别

③ 事件委托

第二个面试官

  1. 业务场景:比如说百度的一个服务不想让阿里使用,如果识别到是阿里的请求,然后跳转到 404 或者拒绝服务之类的? 主要是考察 http 协议头 Referer,然后怎么判断是阿里的 ip 或者啥的,我也不太清楚。
  2. 二分查找的时间复杂度怎么求,是多少 。。。排序的还算清楚一点,查找真的不知所措,没回答上来,也没猜,意义不大,不会就是不会。
  3. XSS 是什么,攻击原理,怎么预防。 这个很简单,跨站脚本攻击 XSS(cross site scripting),攻击类型主要有两种:反射型和存储型,简单说了一下如何防御:

① 转义

②DOM 解析白名单

③ 第三方库

④CSP

自己对 web 安全这块系统学习过,前前后后大约了解了很多,对于 XSS,CSRF,点击劫持,Cookie 安全,HTTP 窃听篡改,密码安全,SQL 注入,社会工程学都有一定了解,所以这个自然也不在话下。

  1. 线性顺序存储结构和链式存储结构有什么区别?以及优缺点。 我是类比 JS 数组和对象来回答的,反正还算凑合吧,自己都数据结构这块多少还是有些印象,所以入了前端,对数据结构和算法确实一直淡忘了。
  2. 分析一下移动端日历,PC 端日历以及桌面日历的一些不同和需要注意的地方。 这个我能想到的大致都说了一遍,不同的场景交互和细节以及功能都有所偏差,以及功能的侧重都可能不同。
  3. 白板写代码,用最简洁的代码实现数组去重。 我写了两种实现方式:ES6 实现:
   [...new Set([1,2,3,1,'a',1,'a'])]
ES5 实现:
[1,2,3,1,'a',1,'a'].filter(function(ele,index,array){ return index===array.indexOf(ele)})
  1. 怎么实现草稿,多终端同步,以及冲突问题? 这个回答的不算好,本来也想到类比 git 的处理方式,但是说的时候往另外一个方面说了,导致与面试官想要的结果不一样。