Web前端相关面试题

Posted 2023-01-17 刘元涛

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Web前端相关面试题相关的知识，希望对你有一定的参考价值。

2012-09-01 10:19:02| 分类： js |举报 |字号订阅

1,判断字符串是否是这样组成的，第一个必须是字母，后面可以是字母、数字、下划线，总长度为5-20

var reg = /^[a-zA-Z][a-zA-Z_0-9]4,19$/;/*注意：1.要用^开头和$结尾，2.总长度5-20翻译为4,19；3.别忘了还有下划线；*/

reg.test("a1a__a1a__a1a__a1a__");

2，截取字符串abcdefg的efg

var str = "abcdefg";

if (/efg/.test(str)) /*判断是否有efg*/

varefg = str.substr(str.indexOf("efg"), 3);//indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。Substr中的3表示取3个的意思

alert(efg);

3，判断一个字符串中出现次数最多的字符，统计这个次数

/*将字符串的字符保存在一个hashtable中，key是字符，value是这个字符出现的次数*/

var str = "abcdefgaddda";

var obj = ;

for (var i = 0, l = str.length; i < l;i++)

var key = str[i];//取一个字符出来，比如c

if(!obj[key]) //在对象中存在这个【字符的个数】么？注意，是字符的个数（比如1,3,4），而不是字符（a,b,d）

obj[key] = 1;//如果不存在，就将这个字符出现的个数设置为1

else

obj[key]++;//如果个数已经存在了，就加1

var max = -1;

var max_key = "";

var key;//只是初始化一个变量，用于下面的遍历，没什么

for (key in obj) //遍历对象中的所有字符（个数）

if(max < obj[key])

max = obj[key];

max_key = key;

alert("max:"+max+"max_key:"+max_key);

4，IE与FF脚本兼容性问题

(1) window.event：

表示当前的事件对象，IE有这个对象，FF没有，FF通过给事件处理函数传递事件对象

(2) 获取事件源

IE用srcElement获取事件源，而FF用target获取事件源

(3) 添加，去除事件

IE：element.attachEvent(“onclick”, function)element.detachEvent(“onclick”, function)

FF：element.addEventListener(“click”, function,true) element.removeEventListener(“click”, function,true)

(4) 获取标签的自定义属性

IE：div1.value或div1[“value”]

FF：可用div1.getAttribute(“value”)

(5) document.getElementByName()和document.all[name]

IE；document.getElementByName()和document.all[name]均不能获取div元素

FF：可以

(6) input.type的属性

IE：input.type只读

FF：input.type可读写

(7) innerText textContent outerhtml

IE：支持innerText,outerHTML

FF：支持textContent

(8) 是否可用id代替HTML元素

IE：可以用id来代替HTML元素

FF：不可以

//这里只列出了常见的，还有不少，更多的介绍可以参看javascript在IE浏览器和Firefox浏览器中的差异总结

5，规避javascript多人开发函数重名问题

(1) 可以开发前规定命名规范，根据不同开发人员开发的功能在函数前加前缀//万一有同名的人，也是悲剧..不过出现的几率很小啦

(2) 将每个开发人员的函数封装到类中，调用的时候就调用类的函数，即使函数重名只要类名不重复就ok //这个方法好

6，javascript面向对象中继承实现

javascript面向对象中的继承实现一般都使用到了构造函数和Prototype原型链，简单的代码如下：

function Animal(name)

this.name = name;

Animal.prototype.getName = function()alert(this.name)

function Dog() ;

Dog.prototype = newAnimal("Buddy");

Dog.prototype.constructor = Dog;

var dog = new Dog();

//JS面向对象的内容推荐看李琰灰老师的视频教程

7，FF下面实现outerHTML//这一题看不懂什么意思

FF不支持outerHTML，要实现outerHTML还需要特殊处理

思路如下：

在页面中添加一个新的元素A，克隆一份需要获取outerHTML的元素，将这个元素append到新的A中，然后获取A的innerHTML就可以了。

<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<title>获取outerHMTL</title>

<style>

divbackground:#0000FF;width:100px;height:100px;

spanbackground:#00FF00;width:100px;height:100px;

pbackground:#FF0000;width:100px;height:100px;

</style>

</head>

<body>

<divid="a"><span>SPAN</span>DIV</div>

<scripttype="text/javascript">

function getOuterHTML(id)

varel = document.getElementByIdx_x(id);

varnewNode = document.createElement_x("div");

document.appendChild(newNode);

varclone = el.cloneNode(true);

newNode.appendChild(clone);

alert(newNode.innerHTML);

document.removeChild(newNode);

getOuterHTML("a");

</script>

</body>

</html>

8，编写一个方法求一个字符串的字节长度

假设：

一个英文字符占用一个字节，一个中文字符占用两个字节

function GetBytes(str)

var len = str.length;

var bytes = len;

for(var i=0; i<len; i++)

if (str.charCodeAt(i) > 255) bytes++;//这里有拓展阅读http://mrthink.net/js-cn-en-character/

return bytes;

alert(GetBytes("你好,as"));

9，编写一个方法去掉一个数组的重复元素//和第三题的思路是一样的

var arr = [1 ,1 ,2, 3, 3, 2, 1];

Array.prototype.unique = function()

var ret = [];

var o = ;

var len = this.length;

for (var i=0; i<len; i++)

var v = this[i];

if (!o[v])

o[v] = 1;

ret.push(v);

return ret;

;

alert(arr.unique());

10，写出3个使用this的典型应用

（1）在html元素事件属性中使用，如

（2）构造函数

function Animal(name, color)

this.name = name;

this.color = color;

（3）

<scripttype="text/javascript">

var btn =document.getElementByIdx_x("text");

btn.onclick = function()

alert(this.value); //此处的this是按钮元素

</script>

（4）CSS expression表达式中使用this关键字

<tr>

<td>

<divstyle="width:expression_r(this.parentNode.width);">divelement</div>

</td>

</tr>

</table>

12，如何显示/隐藏一个DOM元素？

el.style.display = "";//显示的话就是空值

el.style.display = "none";

el是要操作的DOM元素

13，JavaScript中如何检测一个变量是一个String类型？请写出函数实现

String类型有两种生成方式：//注意第二种方式，构造函数的

(1)Var str = “hello world”;

(2)Var str2 = new String(“hello world”);

function IsString(str)

return (typeof str == "string" || str.constructor == String);

var str = "";

alert(IsString(1));

alert(IsString(str));

alert(IsString(new String(str)));

14，网页中实现一个计算当年还剩多少时间的倒数计时程序，要求网页上实时动态显示“××年还剩××天××时××分××秒”

<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

</head>

<body>

<input type="text"value="" id="input" size="1000"/>//时间将在这里显示

<scripttype="text/javascript">

function counter()

var date = new Date();

var year = date.getFullYear();

var date2 = new Date(year, 12, 31, 23, 59, 59);

//注意下面的时间表示方法！！

var time = (date2 - date)/1000;

var day =Math.floor(time/(24*60*60))

var hour = Math.floor(time%(24*60*60)/(60*60))

var minute = Math.floor(time%(24*60*60)%(60*60)/60);

var second = Math.floor(time%(24*60*60)%(60*60)`);

var str = year + "年还剩"+day+"天"+hour+"时"+minute+"分"+second+"秒";

document.getElementByIdx_x("input").value = str;

window.setInterval("counter()", 1000);//每一秒执行一次

</script>

</body>

</html>

15，补充代码，鼠标单击Button1后将Button1移动到Button2的后面<div><input type=”button” id =”button1″ value=”1″ οnclick=”???”> <input type=”button” id =”button2″ value=”2″ /”> </div>

<div>

</div>

<scripttype="text/javascript">

function moveBtn(obj) //思路：先克隆一个，然后挂上，然后删除原来的那个

var clone = obj.cloneNode(true);

var parent = obj.parentNode;

parent.appendChild(clone);

parent.removeChild(obj);

</script>

16，JavaScript有哪几种数据类型

简单：Number，Boolean，String，Null，Undefined

复合：Object，Array，Function

17，下面css标签在JavaScript中调用应如何拼写，border-left-color，-moz-viewport

borderLeftColor

mozViewport

18，JavaScript中如何对一个对象进行深度clone

function cloneObject(o)

if(!o|| 'object' !== typeof o)

return o;

var c = 'function' === typeof o.pop ? [] : ;

var p, v;

for(p in o)

if(o.hasOwnProperty(p))

v = o[p];

if(v && 'object' === typeof v)

c[p] = Ext.ux.clone(v);

else

c[p] = v;

return c;

;

19，如何控制alert中的换行

\\n alert(“p\\np”);

20，请实现，鼠标点击页面中的任意标签，alert该标签的名称．（注意兼容性）

<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<metahttp-equiv="Content-Type" content="text/html;charset=gb2312" />

<title>鼠标点击页面中的任意标签，alert该标签的名称</title>

<style>

div background:#0000FF;width:100px;height:100px;

spanbackground:#00FF00;width:100px;height:100px;

pbackground:#FF0000;width:100px;height:100px;

</style>

<scripttype="text/javascript">

document.onclick = function(evt)

vare = window.event || evt;

vartag = e["target"] || e["srcElement"];

alert(tag.tagName);

;

</script>

</head>

<body>

<divid="div"><span>SPAN</span>DIV</div>

</body>

</html>

21，请编写一个JavaScript函数parseQueryString，它的用途是把URL参数解析为一个对象，如：

var url = “http://witmax.cn/index.php?key0=0&key1=1&key2=2″;

function parseQueryString(url)

var params = ;

var arr = url.split("?");

if(arr.length <= 1)

return params;

arr = arr[1].split("&");

for(var i=0, l=arr.length; i<l; i++)

var a = arr[i].split("=");

params[a[0]] = a[1];

return params;

var url ="http://witmax.cn/index.php?key0=0&key1=1&key2=2";

var ps = parseQueryString(url);

alert(ps["key1"]);

22，ajax是什么? ajax的交互模型? 同步和异步的区别? 如何解决跨域问题?

Ajax是多种技术组合起来的一种浏览器和服务器交互技术，基本思想是允许一个互联网浏览器向一个远程页面/服务做异步的http调用，并且用收到的数据来更新一个当前web页面而不必刷新整个页面。该技术能够改进客户端的体验。包含的技术：

XHTML：对应W3C的XHTML规范，目前是XHTML1.0。

CSS：对应W3C的CSS规范，目前是CSS2.0

DOM：这里的DOM主要是指HTML DOM，XML DOM包括在下面的XML中

JavaScript：对应于ECMA的ECMAScript规范

XML：对应W3C的XML DOM、XSLT、XPath等等规范

XMLHttpRequest：对应WhatWG的WebApplications1.0规范（http://whatwg.org/specs/web-apps/current-work/）

AJAX交互模型

同步：脚本会停留并等待服务器发送回复然后再继续

异步：脚本允许页面继续其进程并处理可能的回复

跨域问题简单的理解就是因为JS同源策略的限制，a.com域名下的JS无法操作b.com或c.a.com下的对象，具体场景如下：

PS：（1）如果是端口或者协议造成的跨域问题前端是无能为力的

(2) 在跨域问题上，域仅仅通过URL的首部来识别而不会尝试判断相同的IP地址对应的域或者两个域是否对应一个IP

前端对于跨域的解决办法：

(1) document.domain+iframe

(2) 动态创建script标签

23，什么是闭包？下面这个ul，如何点击每一列的时候alert其index?

<li>这是第一条</li>

<li>这是第二条</li>

<li>这是第三条</li>

</ul>

内部函数被定义它的函数的外部区域调用的时候就产生了闭包。

(function A()

var index = 0;

var ul = document.getElementByIdx_x("test");

var obj = ;

for (var i = 0, l = ul.childNodes.length; i < l; i++)

if (ul.childNodes[i].nodeName.toLowerCase() == "li")

var li = ul.childNodes[i];

li.onclick = function()

index++;

alert(index);

)();

24，请给出异步加载js方案，不少于两种

默认情况javascript是同步加载的，也就是javascript的加载时阻塞的，后面的元素要等待javascript加载完毕后才能进行再加载，对于一些意义不是很大的javascript，如果放在页头会导致加载很慢的话，是会严重影响用户体验的。

异步加载方式：

(1) defer，只支持IE

(2) async：

(3) 创建script，插入到DOM中，加载完毕后callBack，见代码：

function loadScript(url, callback)

var script = document.createElement_x("script")

script.type = "text/javascript";

if(script.readyState) //IE

script.onreadystatechange = function()

if (script.readyState == "loaded" ||

script.readyState == "complete")

script.onreadystatechange = null;

callback();

;

else //Others: Firefox, Safari, Chrome, and Opera

script.onload = function()

callback();

;

script.src = url;

document.body.appendChild(script);

25，请设计一套方案，用于确保页面中JS加载完全。

var n =document.createElement_x("script");

n.type = "text/javascript";

//以上省略部分代码

//ie支持script的readystatechange属性(IE supportthe readystatechange event for script and css nodes)

if(ua.ie)

n.onreadystatechange = function()

var rs = this.readyState;

if('loaded' === rs || 'complete'===rs)

n.onreadystatechange = null;

f(id,url); //回调函数

;

//省略部分代码

//safari 3.x supports the load event forscript nodes(DOM2)

n.addEventListener('load',function()

f(id,url);

);

//firefox and opera support onload(but notdom2 in ff) handlers for

//script nodes. opera, but no ff, supportthe onload event for link

//nodes.

else

n.onload = function()

f(id,url);

;

26，js中如何定义class,如何扩展prototype?

Ele.className = “***”; //***在css中定义，形式如下：.***…

A.prototype.B = C;

A是某个构造函数的名字

B是这个构造函数的属性

C是想要定义的属性的值

27，如何添加html元素的事件,有几种方法.

（1）为HTML元素的事件属性赋值

（2）在JS中使用ele.on*** = function() …

（3）使用DOM2的添加事件的方法 addEventListener或attachEvent

28，documen.write和 innerHTML的区别

document.write只能重绘整个页面

innerHTML可以重绘页面的一部分

29，多浏览器检测通过什么？

（1） navigator.userAgent

（2）不同浏览器的特性，如addEventListener

30，js的基础对象有那些,window和document的常用的方法和属性列出来

String,Number,Boolean

Window:

方法：setInterval,setTimeout,clearInterval,clearTimeout,alert,confirm,open

属性：name,parent,screenLeft,screenTop,self,top,status

Document

方法：createElement_x,execCommand,getElementById,getElementsByName,getElementByTagName,write,writeln

属性：cookie,doctype,domain,documentElement,readyState,URL,

31，前端开发的优化问题

（1）减少http请求次数：css spirit,data uri

（2） JS，CSS源码压缩

（3）前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数

（4）用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能

（5）用setTimeout来避免页面失去响应

（6）用hash-table来优化查找

（7）当需要设置的样式很多时设置className而不是直接操作style

（8）少用全局变量

（9）缓存DOM节点查找的结果

（10）避免使用CSS Expression

（11）图片预载

（12）避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢

32，如何控制网页在网络传输过程中的数据量

启用GZIP压缩

保持良好的编程习惯，避免重复的CSS，JavaScript代码，多余的HTML标签和属性

33，Flash、Ajax各自的优缺点，在使用中如何取舍？

Ajax的优势

（1）可搜索型

（2）开放性

（3）费用

（4）易用性

（5）易于开发

Flash的优势

（1）多媒体处理

（2）兼容性

（3）矢量图形比SVG，Canvas优势大很多

（4）客户端资源调度，比如麦克风，摄像头

// 引用致：http://blog.sina.com.cn/s/blog_491997ee0100axxb.html

Javascript检测字符串字节长度（for VS 正则）

(2008-11-09 21:30:46)

标签：

javascript

字符串

检测

字节长度

for

正则表达式

regexp

分类：JAVASCRIPT

先来几句题外话。今天面试百度公司web前端研发部的职位，整个面试持续了一个小时。面试结束的时候，我心情格外地好，虽然有部分问题还是回答不上来或者回答得不好，但面试官是一个很好的人，面试就像在谈心，我抒发了许多压在心中很久的想法，所以面试结束后心情格外地舒畅^_^

有一道题今天没回答好，给我的印象也特别深：用Javascript检测一个字符串的字节长度。

当然，首先必须弄清楚‘字节长度’的含义。字符串有一个length属性，可以检测该字符串的长度，但是这里所说的长度是‘字符长度’。而‘字节长度’，呵呵，比如说吧，中文字符占用2个字节（与编码有关），所以，字节长度！= 字符长度^_^

我在考试的时候一般都用惯性思维（所以每次竞赛的时候都不能拿到好成绩^_^），于是马上就想到给它一个for循环，然后判断每一个字符的编码，但是我没有马上回答。面试官见我好像不敢回答，就主动地提示说可不可以用for循环，我当然是肯定了一下啦。但是我不马上回答说用for循环，是因为我清楚这是一般人的思维，百度公司哟，不可能简单地考一个for循环的啦。果然不出我所料，在我肯定了之后，面试官进一步问我，有没有其他更好的方法，用for循环似乎复杂度高了些。

于是，我苦思冥想，绞尽脑汁，最后害怕时间拖拉得太长就放弃了。面试官真是个好人，在我放弃的时候他没有不了了之，还提示说能不能用正则表达式，呀，我恍然大悟啊！我花了那么长时间去学正则表达式，真正要用到的时候竟然忽略了它，罪过啊！

好吧，在面试的时候，我承认自己的确认为用正则表达式去检测在复杂度上会胜于for。

但是，我想说的是但是……

先看看一下两段代码吧，它们分别用for循环和正则表达式来检测字符串的字节长度：

for循环检测字符串的字节长度：

var lenFor = function(str)

var byteLen=0,len=str.length;

if(str)

for(var i=0; i<len; i++)

if(str.charCodeAt(i)>255)

byteLen += 2;

else

byteLen++;

return byteLen;

else

return 0;

正则表达式检测字符串的字节长度：

var lenReg = function(str)

return str.replace(/[^\\x00-\\xFF]/g,'**').length;

;

我用以下代码段对以上两个函数进行测试，主要是测试其运行时间：

var s = '......';//一个很长的字符串，这里不罗列

function a()

var timeStart,timeEnd;

timeStart = new Date();

var s1 = lenReg(s);

timeEnd = new Date();

var t1 = (timeEnd - timeStart)*1000;

timeStart = new Date();

var s2 = lenFor(s);

timeEnd = new Date();

var t2 = (timeEnd - timeStart)*1000;

alert('lenReg: ' + s1 + ' time: ' + t1 + '\\nlenFor: ' + s2 + ' time: ' +t2);

window.onload = function()

a();

;

以上代码在浏览器载入完毕的时候弹出一个警示窗口，窗口上有两行信息：第一行是用正则表达式检测的字符串字节长度和所用时间（×1000）；第二行是用for循环检测字符串字节长度和所用时间（×1000）。

我得到两种答案：

第一种：

lenReg: 25824 time: 20000

lenFor: 25824 time: 10000

第二种：

lenReg: 48795 time: 15000

lenFor: 48795 time: 25000

需要说明的是，两次测试所用的字符串为同一字符串。

为什么会相差那么大呢？我到底偷偷改了什么？？以上我提过，“中文字符占用2个字节（与编码有关）”（本文第三段），中文字符占用多少个字节是与编码有关的，一般情况下，GB-2312和UTF-8编码中，中文字符占用2个字节，但是在iso-8859-1编码中，中文字符占用5个字节。

是的，问题就在于文档的编码。以上第一种情况的编码为：charset=UTF-8，第二种情况的编码为charset=iso-8859-1。

在中文网页中，我们一般都不会用charset=iso-8859-1进行编码（中文乱码），而是用charset=UTF-8或GB-2312进行编码。问题就在这里，比较一下以上的第一种情况吧：

lenReg: 25824 time: 20000

lenFor: 25824 time: 10000

如上所示，用正则表达式检测所用的时间竟然是for循环的两倍！！！！（其实，测试多次之后也不全部都是两倍，但大部分测试都是两倍）

为什么呢？

str.replace(/[^\\x00-\\xFF]/g,'**').length;

看看以上语句（lenReg函数中的语句）。就我个人理解，问题就出现在这里——replace的时候要遍历一次字符串，在调用length的时候又要遍历一次字符串，所以整个运算过程需要遍历两次字符串。而for循环只需要遍历一次——这应该就是问题所在了，但是我不是非常确定。

我不太确定以上的理解是否确切，但是从表面上分析应该是这样的。

那么，用正则表达式检测真的使算法更加复杂吗？还是以上没有充分利用正则表达式的优势？现在我还没有意义的想法，需要进一步去推敲。先保持着怀疑吧^_^……

跨域操作

引用致

http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html

什么是跨域？

答：简单理解就是A域的js无法操作B域下的文件对象。

什么情况下便跨域了？

答：协议、域名、端口号如果有不相同的便是跨域。

跨域产生的原因

答：因为同源策略的限制。

什么是同源策略

答：同源策略指的是相同的协议、域名和端口号。简单的理解就是来自同一个地方的文件。

什么是跨子域

答：主域相同，子域不同的情况；

如：http://www.a.com/a.js和 http://a.com/b.js

http://www.a.com/a.js和 http://script.a.com/b.js

跨域的解决办法

答：如果是跨子域：

1、可以通过设置document.domain的办法来解决；

非跨子域的情况：

1、动态创建script

2、利用iframe和location.hash，需要借助一个proxy的代理文件来完成

3、window.name

4、使用HTML5postMessage

5、利用flash

引用致

http://www.kekaku.com/webdevelop/1052

sass和less有什么不同点

答：

1、sass和less在定义变量上，前缀符号不相同，sass用的是$，less用的是@符；

2、sass是基于ruby的，需要在服务器端处理；less是用less.js文件来处理less代码输出css。

h5和html4有什么不同点

答：

1、简化了doctype；

2、新增了不少的元素（header、footer、nav、aside、article、section...）和属性（form、placehoder、autofocus）；

3、新增了canvas元素；

4、新增了WebStorage功能（本地存储）

css3有新不同点或css3有什么新特性

答：

1、css3中新增了很多的选择器（属性选择器）

2、新增了阴影、圆角效果、transform、transition等

3、css3中的Media Query（媒介查询）

前端优化一般是怎么做的？

答：

前端优化分两类 1.性能优化 2.体验优化

性能优化：主要通过图片优化、脚本样式优化、HTTP请求优化

体验优化：

通过思考用户进入到页面之后最想干什么、接下来会干什么做出能够让用户很方便进行查找和操作的页面；

另外，可以通过引导的方式让一些小白用户进行学习式操作；

总之，一切围绕用户的操作简便、傻瓜化进行。

体验优化你就说把每个界面要解决的问题弄清楚对这些交互点进行重点导航和视觉优化

说到你在阿里这段时间的时候着重说下做了哪些项目什么特点有什么想法

前面的工作经历用个一两分钟说完后面阿里这段最少说5分钟

收获一般说用了什么技术什么组件有什么好处

每个项目都会有收获多想想就好了

答：近期做过的项目有 eCRM（会员关系管理）和smartp（购物车营销）；

这些项目主要都是用在商家中心，属于商家后台的项目；它不像前台项目会有很多炫丽的动画，后台项目主要偏交互行为；

这些项目一般都有一些共性，大都会用到表格、表单、以及提示消息。

技术保障部

僧稠

数据可视化

http://d3js.org/

http://datavlab.org/

http://www.vizinsight.com/

http://10.125.11.34/mointor-rtc/aliyunmail.html

这是我们目前做的时实态展示

Q：在阿里这两年你有什么收获？

A：阿里是个大家庭，通常一个项目的开始会涉及到多个部门和团队的合作；通过这些跨部门、跨团队的合作，使我的沟通能力得到了锻炼。

在阿里，项目需求是非常多的，在完成这些项目需求的同时，自己的技术能力也得到了提升。

Q：你觉得阿里怎么样？

A：阿里是个大家庭；环境优美，办公设施齐全；

阿里前端更是牛人多多，引领了整个业界的发展，是大多数前端开发人员梦寐以求的工作地方。

Q：这两个月有什么改变？

A：说实在的，这两个月自己的状态我觉得我自己都不满意。由于外包同学转正的问题，心情比较低落，在工作和学习上都有所耽误。我希望自己能够早点走出这种不良状态，回到自己正常的状态。积极的去完成和推动工作，坚持每天学一点，持之以恒，不断的积累。

Q：你的缺点是什么？

A：沟通能力还有待提高，技术研究深度还不够。在今后的工作和生活当中，争取能够多参加一些分享交流活动，提交自己的沟通技巧和技术能力。此外，坚持每天学一点，持之以恒，不断的积累，以提高自己的技术能力。

Q：你的优势/优点/核心价值是什么？

A：踏实，做事认真负责。

Q：会不会经常加班？

A：一般来说，我不大喜欢加班。

但是，工作需要时我会主动的加班完成。

Q：有没有了解阿里最近的新闻，怎么看？

Q：未来的规划是什么？

A：扎实自己的基础知识，学习新技术；今后的前端开发面向的是多个终端，在这方面进行学习研究（响应式设计、响应式布局）。

Q：怎么看待前端？

A：前端同学对接的是设计同学交互同学和开发同学，做出来的产品最终呈现给用户；

它需要将设计同学的设计和交互同学的想法给做出来，配合开发同学完成最终的产品。给到用户一个最好的用户体验。

Q：怎么看待公司6点前食堂排队就很长了这种现象？

A：阿里是个弹性工作制的公司，部分员工在合理的安排时间之后，我觉得在6点钟吃饭也是没关系的，可以早去吃完饭早些回到自己的工作岗位上；如果仅仅只是为了吃饭而排很长的队伍，我觉得没有多大必要，吃饭只是一个作息时间的问题，可以将自己的作息时间稍微往后调整一下，改成6点半应该差不多，可以省掉很多的排队时间。

Q：公司有没有一些不好的地方?

A：目前来看，我觉得公司在各方面做得都还是挺好的，我没发现有什么不好的地方。

Q：介绍一下最近做的比较有亮点的项目？

A：eCRM（会员关系管理）、smartp（购物车营销）；

会员关系管理改版，从商家中心独立出来做为一个单独的门户，提供商家会员管理和活动管理等功能。

项目新增了自己的首页、美化了之前老的页面；

购物车营销-自由搭

卖家可以创建自己的搭配套餐；

项目当中将两组宝贝选择器关联起来，主选择器只能选择主件宝贝，辅选择器可以选择多件宝贝，同时主件宝贝和辅件宝贝之间必须是互斥的关系。

Q：别人怎么评价你？

A：踏实，可靠

Q：评价你身边一个人？

A：我的师兄“影风”为人豁达开朗。

Q：如果没转正？

A：如果转正没有成功，说明我自身还存在不足点，我希望公司能够给我指出，让我能够改掉那些坏毛病早日达到公司期望的要求。

Q：如果转正？

A：如果转正成功，我会更加努力的去工作，为公司的发展建设付出自己的一份力量。

Q：为什么要转正？

A：公司所处的产业，以及在业界的声誉、工作性质都很吸引我；另外，由于公司的决策，外包同学不转正就得搬去滨江工作，会影响到项目开发时正常的沟通。

Q：最近有没有看书？

A：最近由于忙于工作的问题，学习上有所耽误；在这之前，我会坚持每天早半个小时到工作，每天学一点，不断提高自己。

Q：有人投诉？

A：坦然面对人家的投诉，及时了解人家为什么投诉以及正确的去处理投诉问题，避免在今后的工作当中再次遇到相同的情况。

Q：谈谈你身上的优看缺点？

A：优点：踏实，做事认真负责。

缺点：沟通能力和和技术深度还有待提高。

阿里巴巴企业文化

1、远景目标

成为一家持续发展102年的企业

成为全球十大网站之一

只要是商人就一定要用阿里巴巴

2、使命

让天下没有难做的生意！

3、阿里巴巴“六脉神剑”的价值体系

客户第一：关注客户的关注点,为客户提供建议和资讯,帮助客户成长

团队合作：共享共担，以小我完成大我

拥抱变化：突破自我，迎接变化

诚信：诚实正直，信守承诺

激情：永不言弃，乐观向上

敬业：以专业的态度和平常的心态做非凡的事情

引用致：

http://zhidao.baidu.com/link?url=xyPv-wgmtz7gT_YjS_GdFWBwGcaFsb_eTkMrhkcJ9Nn8RGBAqTFdjbuUie9ibGAeOzcpHcWYlNDDab1EpHjsWa

1、请你自我介绍一下你自己？

回答提示：一般人回答这个问题过于平常，只说姓名、年龄、爱好、工作经验，这些在简历上都有。其实，企业最希望知道的是求职者能否胜任工作，包括：最强的技能、最深入研究的知识领域、个性中最积极的部分、做过的最成功的事，主要的成就等，这些都可以和学习无关，也可以和学习有关，但要突出积极的个性和做事的能力，说得合情合理企业才会相信。企业很重视一个人的礼貌，求职者要尊重考官，在回答每个问题之后都说一句“谢谢”，企业喜欢有礼貌的求职者。

A：各位考官好，我叫李永凯，大家可以称呼我阿凯；

我从湖南来到杭州，差不多有4年的时间了；

在这期间，我曾在 “杭州商聪信息技术有限公司” 和 “阿里巴巴天猫-商家业务事业部” 就职过，主要从事前端开发工作。

工作当中，我能够很好的配合交互设计同学和开发同学；推动项目的完成。

我觉得，前端开发不是一项目简单的工作，它不仅仅只是几个 div、css和js，最重要的是做出来的产品能够给用户提供一个良好的操作体验；

今后的前端开发，更加不是一项简单的工作，它需要面对的是多个终端的开发，包括PC端、手机端以及平板，这方面将会是我今后的学习和发展方向；

2、你觉得你个性上最大的优点是什么？

回答提示：沉着冷静、条理清楚、立场坚定、顽强向上、乐于助人和关心他人、适应能力和幽默感、乐观和友爱。我经过一到两年的培训及项目实战，加上实习工作，使我适合这份工作。

3、说说你最大的缺点？

回答提示：这个问题企业问的概率很大，通常不希望听到直接回答的缺点是什么等，如果求职者说自己小心眼、爱忌妒人、非常懒、脾气大、工作效率低，企业肯定不会录用你。绝对不要自作聪明地回答“我最大的缺点是过于追求完美”，有的人以为这样回答会显得自己比较出色，但事实上，他已经岌岌可危了。企业喜欢求职者从自己的优点说起，中间加一些小缺点，最后再把问题转回到优点上，突出优点的部分，企业喜欢聪明的求职者。

4、你对加班的看法？

回答提示：实际上好多公司问这个问题，并不证明一定要加班，只是想测试你是否愿意为公司奉献。

回答样本：如果是工作需要我会义不容辞加班，我现在单身，没有任何家庭负担，可以全身心的投入工作。但同时，我也会提高工作效率，减少不必要的加班。

5、你对薪资的要求？

回答提示：如果你对薪酬的要求太低，那显然贬低自己的能力；如果你对薪酬的要求太高，那又会显得你分量过重，公司受用不起。一些雇主通常都事先对求聘的职位定下开支预算，因而他们第一次提出的价钱往往是他们所能给予的最高价钱，他们问你只不过想证实一下这笔钱是否足以引起你对该工作的兴趣。

回答样本一：我对工资没有硬性要求，我相信贵公司在处理我的问题上会友善合理。我注重的是找对工作机会，所以只要条件公平，我则不会计较太多。

回答样本二：我受过系统的软件编程的训练，不需要进行大量的培训，而且我本人也对编程特别感兴趣。因此，我希望公司能根据我的情况和市场标准的水平，给我合理的薪水。

回答样本三：如果你必须自己说出具体数目，请不要说一个宽泛的范围，那样你将只能得到最低限度的数字。最好给出一个具体的数字，这样表明你已经对当今的人才市场作了调查，知道像自己这样学历的雇员有什么样的价值。

6、在五年的时间内，你的职业规划？

回答提示：这是每一个应聘者都不希望被问到的问题，但是几乎每个人都会被问到，比较多的答案是“管理者”。但是近几年来，许多公司都已经建立了专门的技术途径。这些工作地位往往被称作“顾问”、“参议技师”或“高级软件工程师”等等。当然，说出其他一些你感兴趣的职位也是可以的，比如产品销售部经理，生产部经理等一些与你的专业有相关背景的工作。要知道，考官总是喜欢有进取心的应聘者，此时如果说“不知道”，或许就会使你丧失一个好机会。最普通的回答应该是“我准备在技术领域有所作为”或“我希望能按照公司的管理思路发展”。

7、你朋友对你的评价？

回答提示：想从侧面了解一下你的性格及与人相处的问题。

回答样本一：我的朋友都说我是一个可以信赖的人。因为，我一旦答应别人的事情，就一定会做到。如果我做不到，我就不会轻易许诺。

回答样本二：我觉的我是一个比较随和的人，与不同的人都可以友好相处。在我与人相处时，我总是能站在别人的角度考虑问题。

8、你还有什么问题要问吗？

回答提示：企业的这个问题看上去可有可无，其实很关键，企业不喜欢说“没问题”的人，因为其很注重员工的个性和创新能力。企业不喜欢求职者问个人福利之类的问题，如果有人这样问：贵公司对新入公司的员工有没有什么培训项目，我可以参加吗？或者说贵公司的晋升机制是什么样的？企业将很欢迎，因为体现出你对学习的热情和对公司的忠诚度以及你的上进心。

9、如果通过这次面试我们单位录用了你，但工作一段时间却发现你根本不适合这个职位，你怎么办？

回答提示：一段时间发现工作不适合我，有两种情况：①如果你确实热爱这个职业，那你就要不断学习，虚心向领导和同事学习业务知识和处事经验，了解这个职业的精神内涵和职业要求，力争减少差距；②你觉得这个职业可有可无，那还是趁早换个职业，去发现适合你的，你热爱的职业，那样你的发展前途也会大点，对单位和个人都有好处。

10、在完成某项工作时，你认为领导要求的方式不是最好的，自己还有更好的方法，你应该怎么做？

回答提示：①.原则上我会尊重和服从领导的工作安排，同时私底下找机会以请教的口吻，婉转地表达自己的想法，看看领导是否能改变想法。②如果领导没有采纳我的建议，我也同样会按领导的要求认真地去完成这项工作。③.还有一种情况，假如领导要求的方式违背原则，我会坚决提出反对意见，如领导仍固执己见，我会毫不犹豫地再向上级领导反映。

11、如果你的工作出现失误，给本公司造成经济损失，你认为该怎么办？

回答提示：①我本意是为公司努力工作，如果造成经济损失，我认为首要的问题是想方设法去弥补或挽回经济损失。如果我无能力负责，希望单位帮助解决。②分清责任，各负其责，如果是我的责任，我甘愿受罚；如果是一个我负责的团队中别人的失误，也不能幸灾乐祸，作为一个团队，需要互相提携共同完成工作，安慰同事并且帮助同事查找原因总结经验。③总结经验教训，一个人的一生不可能不犯错误，重要的是能从自己的或者是别人的错误中吸取经验教训，并在今后的工作中避免发生同类的错误。检讨自己的工作方法、分析问题的深度和力度是否不够，以致出现了本可以避免的错误。

12、如果你做的一项工作受到上级领导的表扬，但你主管领导却说是他做的，你该怎样？

回答提示：我首先不会找那位上级领导说明这件事，我会主动找我的主管领导来沟通，因为沟通是解决人际关系的最好办法，但结果会有两种：①我的主管领导认识到自己的错误，我想我会视具体情况决定是否原谅他。②他更加变本加厉的来威胁我，那我会毫不犹豫地找我的上级领导反映此事，因为他这样做会造成负面影响，对今后的工作不利。

13、谈谈你对跳槽的看法？

回答提示：①正常的“跳槽”能促进人才合理流动，应该支持。②频繁的跳槽对单位和个人双方都不利，应该反对。

14、工作中你难以和同事、上司相处，你该怎么办？

回答提示：①我会服从领导的指挥，配合同事的工作。②我会从自身找原因，仔细分析是不是自己工作做得不好让领导不满意，同事看不惯。还要看看是不是为人处世方面做得不好，如果是这样的话我会努力改正。③如果我找不到原因，我会找机会跟他们沟通，请他们指出我的不足，有问题就及时改正。④作为优秀的员工，应该时刻以大局为重，即使在一段时间内，领导和同事对我不理解，我也会做好本职工作，虚心向他们学习，我相信，他们会看见我在努力，总有一天会对我微笑的。

15、假设你在某单位工作，成绩比较突出，得到领导的肯定。但同时你发现同事们越来越孤立你，你怎么看这个问题？你准备怎么办？

回答提示：①成绩比较突出，得到领导的肯定是件好事情，以后更加努力。②检讨一下自己是不是对工作的热心度超过同事间交往的热心了，加强同事间的交往及共同的兴趣爱好。③工作中，切勿伤害别人的自尊心④不再领导前拨弄是非。

16、你最近是否参加了培训课程？谈谈培训课程的内容。是公司资助还是自费参加？

回答提示：自费参加，就是北大青鸟的培训课程（可以多谈谈自己学的技术）。

17、你对于我们公司了解多少？

回答提示：在去公司面试前上网查一下该公司主营业务。如回答：贵公司有意改变策略，加强与国外大厂的OEM合作，自有品牌的部分则透过海外经销商。

18、请说出你选择这份工作的动机？

回答提示：这是想知道面试者对这份工作的热忱及理解度，并筛选因一时兴起而来应试的人，如果是无经验者，可以强调“就算职种不同，也希望有机会发挥之前的经验”。

19、你最擅长的技术方向是什么？

回答提示：说和你要应聘的职位相关的课程，表现一下自己的热诚没有什么坏处。

20、你能为我们公司带来什么呢？

回答提示：①假如你可以的话，试着告诉他们你可以减低他们的费用——“我已经接受过北大青鸟近两年专业的培训，立刻就可以上岗工作”。②企业很想知道未来的员工能为企业做什么，求职者应再次重复自己的优势，然后说：“就我的能力，我可以做一个优秀的员工在组织中发挥能力，给组织带来高效率和更多的收益”。企业喜欢求职者就申请的职位表明自己的能力，比如申请营销之类的职位，可以说：“我可以开发大量的新客户，同时，对老客户做更全面周到的服务，开发老客户的新需求和消费。”等等。

21、最能概括你自己的三个词是什么？

回答提示：我经常用的三个词是：适应能力强，有责任心和做事有始终，结合具体例子向主考官解释，

22、你的业余爱好是什么？

回答提示：找一些富于团体合作精神的，这里有一个真实的故事：有人被否决掉，因为他的爱好是深海潜水。主考官说：因为这是一项单人活动，我不敢肯定他能否适应团体工作。

23、作为被面试者给我打一下分？

回答提示：试着列出四个优点和一个非常非常非常小的缺点（可以抱怨一下设施，没有明确责任人的缺点是不会有人介意的）。

24、你怎么理解你应聘的职位？

回答提示：把岗位职责和任务及工作态度阐述一下。

25、喜欢这份工作的哪一点？

回答提示：相信其实大家心中一定都有答案了吧！每个人的价值观不同，自然评断的标准也会不同，但是，在回答面试官这个问题时可不能太直接就把自己心理的话说出来，尤其是薪资方面的问题，不过一些无伤大雅的回答是不错的考虑，如交通方便，工作性质及内容颇能符合自己的兴趣等等都是不错的答案，不过如果这时自己能仔细思考出这份工作的与众不同之处，相信在面试上会大大加分。

26、为什么要离职?

回答提示：①回答这个问题时一定要小心，就算在前一个工作受到再大的委屈，对公司有多少的怨言，都千万不要表现出来，尤其要避免对公司本身主管的批评，避免面试官的负面情绪及印象。建议此时最好的回答方式是将问题归咎在自己身上，例如觉得工作没有学习发展的空间，自己想在面试工作的相关产业中多加学习，或是前一份工作与自己的生涯规划不合等等，回答的答案最好是积极正面的。②我希望能获得一份更好的工作，如果机会来临，我会抓住。我觉得目前的工作，已经达到顶峰，即没有升迁机会。

27、说说你对行业、技术发展趋势的看法？

回答提示：企业对这个问题很感兴趣，只有有备而来的求职者能够过关。求职者可以直接在网上查找对你所申请的行业部门的信息，只有深入了解才能产生独特的见解。企业认为最聪明的求职者是对所面试的公司预先了解很多，包括公司各个部门，发展情况，在面试回答问题的时候可以提到所了解的情况，企业欢迎进入企业的人是“知己”，而不是“盲人”。

28、对工作的期望与目标何在？

回答提示：这是面试者用来评断求职者是否对自己有一定程度的期望、对这份工作是否了解的问题。对于工作有确实学习目标的人通常学习较快，对于新工作自然较容易进入状况，这时建议你，最好针对工作的性质找出一个确实的答案，如业务员的工作可以这样回答：“我的目标是能成为一个超级业务员，将公司的产品广泛的推销出去，达到最好的业绩成效；为了达到这个目标，我一定会努力学习，而我相信以我认真负责的态度，一定可以达到这个目标。”其他类的工作也可以比照这个方式来回答，只要在目标方面稍微修改一下就可以了。

29、说你的家庭？

回答提示：企业面试时询问家庭问题不是非要知道求职者家庭的情况，探究隐私，企业不喜欢探究个人隐私，而是要了解家庭背景对求职者的塑造和影响。企业希望听到的重点也在于家庭对求职者的积极影响。企业最喜欢听到的是：我很爱我的家庭，我的家庭一向很和睦，虽然我的父亲和母亲都是普通人，但是从小，我就看到我父亲起早贪黑，每天工作特别勤劳，他的行动无形中培养了我认真负责的态度和勤劳的精神。我母亲为人善良，对人热情，特别乐于助人，所以在单位人缘很好，她的一言一行也一直在教导我做人的道理。企业相信，和睦的家庭关系对一个人的成长有潜移默化的影响。

30、就你申请的这个职位，你认为你还欠缺什么？

回答提示：企业喜欢问求职者弱点，但精明的求职者一般不直接回答。他们希望看到这样的求职者：继续重复自己的优势，然后说：“对于这个职位和我的能力来说，我相信自己是可以胜任的，只是缺乏经验，这个问题我想我可以进入公司以后以最短的时间来解决，我的学习能力很强，我相信可以很快融入公司的企业文化，进入工作状态。”企业喜欢能够巧妙地躲过难题的求职者。

31、你欣赏哪种性格的人？

回答提示：诚实、不死板而且容易相处的人、有“实际行动”的人。

32、你通常如何处理别人的批评？

回答提示：①沈默是金，不必说什么，否则情况更糟，不过我会接受建设性的批评。②我会等大家冷静下来再讨论。

33、怎样对待自己的失败？

回答提示：我们大家生来都不是十全十美的，我相信我有第二个机会改正我的错误。

34、什么会让你有成就感？

回答提示：为贵公司竭力效劳，尽我所能，完成一个项目。

35、眼下你生活中最重要的是什么？

回答提示：对我来说，能在这个领域找到工作是最重要的，能在贵公司任职对我说最重要。

36、你为什么愿意到我们公司来工作？

回答提示：对于这个问题，你要格外小心，如果你已经对该单位作了研究，你可以回答一些详细的原因，像“公司本身的高技术开发环境很吸引我。”、“我同公司出生在同样的时代，我希望能够进入一家与我共同成长的公司。”、“你们公司一直都稳定发展，在近几年来在市场上很有竞争力。”、“我认为贵公司能够给我提供一个与众不同的发展道路。”这都显示出你已经做了一些调查，也说明你对自己的未来有了较为具体的远景规划。

37、你和别人发生过争执吗？你是怎样解决的？

回答提示：这是面试中最险恶的问题，其实是考官布下的一个陷阱，千万不要说任何人的过错，应知成功解决矛盾是一个协作团体中成员所必备的能力。假如你工作在一个服务行业，这个问题简直成了最重要的一个环节。你是否能获得这份工作，将取决于这个问题的回答。考官希望看到你是成熟且乐于奉献的。他们通过这个问题了解你的成熟度和处世能力。在没有外界干涉的情况下，通过妥协的方式来解决才是正确答案。

38、问题：你做过的哪件事最令自己感到骄傲？

回答提示：这是考官给你的一个机会，让你展示自己把握命运的能力。这会体现你潜在的领导能力以及你被提升的可能性。假如你应聘于一个服务性质的单位，你很可能会被邀请去午餐。记住：你的前途取决于你的知识、你的社交能力和综合表现。

39、新到一个部门，一天一个客户来找你解决问题，你努力想让他满意，可是始终达不到群众得满意，他投诉你们部门工作效率低，你这个时候怎么作？

回答提示：(1)首先，我会保持冷静。作为一名工作人员，在工作中遇到各种各样的问题是正常的，关键是如何认识它，积极应对，妥善处理。 (2)其次，我会反思一下客户不满意的原因。一是看是否是自己在解决问题上的确有考虑的不周到的地方，

以上是关于Web前端相关面试题的主要内容，如果未能解决你的问题，请参考以下文章

2021年最新Web前端面试题精选大全及答案

Web前端求职时都会被问到的Redis面试题分享