资源描述
前端开发面试题.docx
《前端开发面试题.docx》由会员分享，可在线阅读，更多相关《前端开发面试题.docx（25页珍藏版）》请在冰豆网上搜索。
前端开发面试题
HTML
1.Doctype作用？
标准模式与兼容模式各有什么区别?
（1）、
DOCTYPE>声明位于位于HTML文档中的第一行，处于标签之前。
告知阅读器的解析器用什么文档标准解析那个文档。
DOCTYPE不存在或格式不正确会致使文档以兼容模式呈现。
（2）、标准模式的排版和JS运作模式都是以该阅读器支持的最高标准运行。
在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式阅读器的行为以避免站点无法工作。
2.HTML5什么缘故只需要写
DOCTYPEHTML>？
HTML5不基于SGML，因此不需要对DTD进行引用，可是需要doctype来标准阅读器的行为（让阅读器依照它们应该的方式来运行）；而HTML4.01基于SGML,因此需要对DTD进行引用，才能告知阅读器文档所利用的文档类型。
3.行内元素有哪些？
块级元素有哪些？
空（void）元素有那些？
第一：
CSS标准规定，每一个元素都有display属性，确信该元素的类型，每一个元素都有默许的display值，如div的display默许值为“block”，那么为“块级”元素；span默许display属性值为“inline”，是“行内”元素。
（1）行内元素有：
abspanimginputselectstrong（强调的语气）
（2）块级元素有：
divulollidldtddh1h2h3h4…p
（3）常见的空元素：
![]()
鲜为人知的是：
11.iframe有那些缺点？
*iframe会阻塞主页面的Onload事件；
*iframe和主页面共享连接池，而阅读器对相同域的连接有限制，因此会阻碍页面的并行加载。
利用iframe之前需要考虑这两个缺点。
若是需要利用iframe，最好是通过javascript
动态给iframe添加src属性值，如此能够能够绕开以上两个问题。
12.HTML5的form如何关闭自动完成功能？
给不想要提示的form或下某个input设置为autocomplete=off。
13.请描述一下cookies，sessionStorage和localStorage的区别？
cookie在阅读器和效劳器间来回传递。
sessionStorage和localStorage可不能
sessionStorage和localStorage的存储空间更大；
sessionStorage和localStorage有更多丰硕易用的接口；
sessionStorage和localStorage各自独立的存储空间；
14.如何实现阅读器内多个标签页之间的通信?
（阿里）
挪用localstorge、cookies等本地存储方式
15.webSocket如何兼容低阅读器？
（阿里）
AdobeFlashSocket、ActiveXHTMLFile（IE）、基于multipart编码发送XHR、基于长轮询的XHR
CSS
16.介绍一下CSS的盒子模型？
（1）有两种，IE盒子模型、标准W3C盒子模型；IE的content部份包括了border和pading;
（2）盒模型：
内容（content）、填充（padding）、边界（margin）、边框（border）.
17.CSS选择符有哪些？
哪些属性能够继承？
优先级算法如何计算？
CSS3新增伪类有那些？
*1.id选择器（#myid）
2.类选择器（.myclassname）
3.标签选择器（div,h1,p）
4.相邻选择器（h1+p）
5.子选择器（ul>li）
6.后代选择器（lia）
7.通配符选择器（*）
8.属性选择器（a[rel="external"]）
9.伪类选择器（a:
hover,li:
nth-child）
*可继承的样式：
font-sizefont-familycolor,ULLIDLDDDT;
*不可继承的样式：
borderpaddingmarginwidthheight;
*优先级就近原那么，同权重情形下样式概念最近者为准;
*载入样式以最后载入的定位为准;优先级为:
!
important>id>class>tag
important比内联优先级高
18.CSS3新增伪类举例：
p:
first-of-type选择属于其父元素的首个
元素的每一个
元素。
p:
last-of-type选择属于其父元素的最后
元素的每一个
元素。
p:
only-of-type选择属于其父元素唯一的
元素的每一个
元素。
p:
only-child选择属于其父元素的唯一子元素的每一个
元素。
p:
nth-child
（2）选择属于其父元素的第二个子元素的每一个
元素。
:
enabled:
disabled操纵表单控件的禁用状态。
:
checked单项选择框或复选框被选中。
19.如何居中div？
如何居中一个浮动元素？
给div设置一个宽度，然后添加margin:
0auto属性
div{
width:
200px;
margin:
0auto;
}
居中一个浮动元素：
确信容器的宽高宽500高300的层
设置层的外边距
.div{
Width:
500px;height:
300px;//高度能够不设
Margin:
-150px00-250px;
position:
relative;相对定位
background-color:
pink;//方便看成效
left:
50%;
top:
50%;
}
20.列出display的值，说明他们的作用。
position的值，relative和absolute定位原点是？
1.block象块类型元素一样显示。
none缺省值。
象行内元素类型一样显示。
inline-block象行内元素一样显示，但其内容象块类型元素一样显示。
list-item象块类型元素一样显示，并添加样式列表标记。
2.absolute：
生成绝对定位的元素，相关于static定位之外的第一个父元素进行定位。
fixed（老IE不支持）：
生成绝对定位的元素，相关于阅读器窗口进行定位。
relative：
生成相对定位的元素，相关于其正常位置进行定位。
static：
默许值。
没有定位，元素出此刻正常的流中（忽略top,bottom,left,rightz-index声明）。
inherit规定从父元素继承position属性的值。
21.CSS3有哪些新特性？
CSS3实现圆角（border-radius:
8px），阴影（box-shadow:
10px），对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
transform:
rotate（9deg）scale（0.85,0.90）translate（0px,-30px）skew（-9deg,0deg）;//旋转,缩放,定位,倾斜增加了更多的CSS选择器多背景rgba
22.什么缘故要初始化CSS样式。
因为阅读器的兼容问题，不同阅读器对有些标签的默许值是不同的，若是没对CSS初始化往往会显现阅读器之间的页面显示不同。
固然，初始化样式会对SEO有必然的阻碍，但鱼和熊掌不可兼得，但力求阻碍最小的情形下初始化。
*最简单的初始化方式确实是：
*{padding:
0;margin:
0;}（不建议）
淘宝的样式初始化：
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:
0;padding:
0;}
body,button,input,select,textarea{font:
12px/1.5tahoma,arial,\5b8b\4f53;}
h1,h2,h3,h4,h5,h6{font-size:
100%;}
address,cite,dfn,em,var{font-style:
normal;}
code,kbd,pre,samp{font-family:
couriernew,courier,monospace;}
small{font-size:
12px;}
ul,ol{list-style:
none;}
a{text-decoration:
none;}
a:
hover{text-decoration:
underline;}
sup{vertical-align:
text-top;}
sub{vertical-align:
text-bottom;}
legend{color:
#000;}
fieldset,img{border:
0;}
button,input,select,textarea{font-size:
100%;}
table{border-collapse:
collapse;border-spacing:
0;}
23.对BFC标准的明白得？
（W3CCSS2.1标准中的一个概念,它决定了元素如何对其内容进行定位,和与其他元素的关系和彼此作用。
）
以下是权重的规那么：
标签的权重为1，class的权重为10，id的权重为100，以下例子是演示各类概念的权重值：
/*权重为1*/
div{
}
/*权重为10*/
.class1{
}
/*权重为100*/
#id1{
}
/*权重为100+1=101*/
#id1div{
}
/*权重为10+1=11*/
.class1div{
}
/*权重为10+10+1=21*/
.class1.class2div{
}
若是权重相同，那么最后概念的样式会起作用，可是应该幸免这种情形显现
24.若是需要手动写动画，你以为最小时刻距离是多久，什么缘故？
（阿里）
多数显示器默许频率是60Hz，即1秒刷新60次，因此理论上最小距离为1/60＊1000ms=
25.display:
inline-block何时会显示间隙？
（携程）
移除空格、利用margin负值、利用font-size:
0、letter-spacing、word-spacing
JavaScript
1.JavaScript原型，原型链?
有什么特点？
*原型对象也是一般的对象，是对象一个自带隐式的__proto__属性，原型也有可能有自己的原型，若是一个原型对象的原型不为null的话，咱们就称之为原型链。
*原型链是由一些用来继承和共享属性的对象组成的（有限的）对象链。
2.JavaScript的数据对象有那些属性值？
writable：
那个属性的值是不是能够改。
configurable：
那个属性的配置是不是能够删除，修改。
enumerable：
那个属性是不是能在for…in循环中遍历出来或在Object.keys中列举出来。
value：
属性值。
*当咱们需要一个属性的时，Javascript引擎会先看当前对象中是不是有那个属性，若是没有的话，就会查找他的Prototype对象是不是有那个属性。
functionclone（proto）{
functionDummy（）{}
Dummy.prototype=proto;
Dummy.prototype.constructor=Dummy;
returnnewDummy（）;//等价于Object.create（Person）;
}
functionobject（old）{
functionF（）{};
F.prototype=old;
returnnewF（）;
}
varnewObj=object（oldObject）;
3.说几条写JavaScript的大体标准？
1.不要在同一行声明多个变量。
2.请利用===/!
==来比较true/false或数值
3.利用对象字面量替代newArray这种形式
4.不要利用全局函数。
6.函数不该该有时候有返回值，有时候没有返回值。
9.for-in循环中的变量应该利用var关键字明确限定作用域，从而幸免作用域污染。
4.eval是做什么的？
它的功能是把对应的字符串解析成JS代码并运行；
应该幸免利用eval，不平安，超级耗性能（2次，一次解析成js语句，一次执行）。
5.写一个通用的事件侦听器函数。
markyun.Event={
//页面加载完成后
readyEvent:
function（fn）{
if（fn==null）{
fn=document;
}
varoldonload=window.onload;
if（typeofwindow.onload!
='function'）{
window.onload=fn;
}else{
window.onload=function（）{
oldonload（）;
fn（）;
};
}
},
//视能力别离利用dom0||dom2||IE方式来绑定事件
//参数：
操作的元素,事件名称,事件处置程序
addEvent:
function（element,type,handler）{
if（element.addEventListener）{
//事件类型、需要执行的函数、是不是捕捉
element.addEventListener（type,handler,false）;
}elseif（element.attachEvent）{
element.attachEvent（'on'+type,function（）{
handler.call（element）;
}）;
}else{
element['on'+type]=handler;
}
},
//移除事件
removeEvent:
function（element,type,handler）{
if（element.removeEventListener）{
element.removeEventListener（type,handler,false）;
}elseif（element.datachEvent）{
element.detachEvent（'on'+type,handler）;
}else{
element['on'+type]=null;
}
},
//阻止事件（主若是事件冒泡，因为IE不支持事件捕捉）
stopPropagation:
function（ev）{
if（ev.stopPropagation）{
ev.stopPropagation（）;
}else{
ev.cancelBubble=true;
}
},
//取消事件的默许行为
preventDefault:
function（event）{
if（event.preventDefault）{
event.preventDefault（）;
}else{
event.returnValue=false;
}
},
//获取事件目标
getTarget:
function（event）{
returnevent.target||event.srcElement;
},
//获取event对象的引用，取到事件的所有信息，确保随时能利用event；
getEvent:
function（e）{
varev=e||window.event;
if（!
ev）{
varc=this.getEvent.caller;
while（c）{
ev=c.arguments[0];
if（ev&&Event==ev.constructor）{
break;
}
c=c.caller;
}
}
returnev;
}
};
6.Node.js的适用处景？
高并发、谈天、实时消息推送
7.介绍js的大体数据类型。
number,string,boolean,object,undefined
8.Javascript如何实现继承？
通过原型和构造器
9.["1","2","3"].map（parseInt）答案是多少？
[1,NaN,NaN]因为parseInt需要两个参数（val,radix），其中radix表示解析时用的基数。
map传了3个（
升级会员 