搜索
2014年最新前端开发面试题Thelasttimethatrefresh:2014/1/1312:37:57本文主要是由于我最近在找前端开发职位，所以总结了一些常见前端面试（多数来源于网络），希望看的朋友，阅后也要用心钻研其中的原理，重要知识需要系统学习，形成自己的知识链。万不可投机取巧。只求当时过关，非长久之计也！面试有几点需要注意：（来源@wintercn）面试题目会根据你的等级和职位变化，入门级到专家级：范围↑、深度↑、方向↑;类型：技术视野、项目细节、理论知识型题，算法题，开放性题，案例题。进行追问，可以确保问到你开始不懂或者面试官开始不懂为止，这样可以大大延展题目的区分度和深度，知道你的实际能力。因为这种关联知识是长时期的学习，绝对不是临时记得住。回答问题再棒，面试官（一般是你顶头上司面你），会考虑，我要不要这个人做我的同事？所以态度很重要。资深的工程师能把absolute和relative弄混，这样的人不要也罢，因为团队需要的你这个人具有可以依靠的才能（靠谱）。另外：资料刚刚收集，答案有些不够正确和全面，欢迎补充你所知道的答案、技巧、题目；最好是现在网上找不到的。格式不太美观，容我学一下markdown语法再来排版。Begin！HTML、CSS部分要点：对Web标准的理解、浏览器差异、CSS基本功：布局、盒子模型、选择器优先级及使用、HTML5、CSS3技术等Doctype作用?严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?（1）、!DOCTYPE声明位于文档中的最前面，处于html标签之前。告知浏览器的解析器，用什么文档类型规范来解析这个文档。（2）、严格模式的排版和JS运作模式是以该浏览器支持的最高标准运行。（3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。（4）、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。2.行内元素有哪些？块级元素有哪些？（1）CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，比如div默认display属性值为“block”，成为“块级”元素；span默认display属性值为“inline”，是“行内”元素。（2）行内元素有：abspanimginputselectstrong（强调的语气）块级元素有：divulollidldtddh1h2h3h4…p3.CSS的盒子模型？（1）两种，IE盒子模型、标准W3C盒子模型；IE的content部分包含了border和pading;（2）盒模型：内容(content)、填充(padding)、边界(margin)、边框(border).4.link和@import的区别是?（1）、link属于XHTML标签，而@import完全是CSS提供的一种方式;（2）、页面被加载的时候，link-会同时被加载，而@import引用的CSS会等到页面被加载完再加载;（3）、import只有在IE5以上的才能识别，而link是XHTML标签，无兼容问题;（4）、link方式的样式的权重高于@import的权重.5.CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？em和px有什么关系？*ID和Class;*Class可继承、font-sizefont-familycolor,列表ULLIDLDDDT可继承;*不可继承：borderpaddingmarginwidthheight;*优先级就近原则，样式定义最近者为准;*载入样式以最后载入的定位为准;优先级为:!importantidclasstagimportant比内联优先级高如果父元素定义字体大小12px，子元素定义1em，大小就是12px。6.如何居中div,如何居中一个浮动元素?给div设置一个宽度，然后添加margin:0auto属性div{width:200px;margin:0auto;}设置容器的浮动方式为相对定位确定容器的宽高宽500高300的层设置层的外边距.Div{Width:500px;height:300px;Margin:-150px00-250px;position:absolute;left:50%;top:50%;}7.浏览器的内核分别是什么?经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，hack的技巧？*IE浏览器的内核Trident、Mozilla的Gecko、google的WebKit、Opera内核Presto；*png24为的图片在iE6浏览器上出现背景，解决方案是做成PNG8.*浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。*IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。解决方案是在float的标签样式控制中加入display:inline;将其转化为行内属性。*浮动ie产生的双倍距离#box{float:left;width:10px;margin:000100px;//这种情况之下IE会产生20px的距离，这时需要设置display:inline;//使浮动忽略}*渐进识别的方式，从总体中逐渐排除局部。*首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。```css.bb{background-color:#f1ee18;/*所有识别*/.background-color:#00deff\9;/*IE6、7、8识别*/+background-color:#a200ff;/*IE6、7识别*/_background-color:#1e0bd1;/*IE6识别*/}```*IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;Firefox下,只能使用getAttribute()获取自定义属性.解决方法:统一通过getAttribute()获取自定义属性.*IE下,even对象有x,y属性,但是没有pageX,pageY属性;Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.*（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。8.html5\CSS3有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？HTML5现在已经不是SGML的子集，主要是关于图像，位置，存储，功能的优化和改进。*绘画canvas元素用于媒介回放的video和audio元素本地离线存储localStorage长期存储数据，浏览器关闭后数据不丢失；sessionStorage的数据在浏览器关闭后自动删除语意化更好的内容元素，比如article、footer、header、nav、section表单控件，calendar、date、time、email、url、searchCSS3实现圆角，阴影，对文字加特效，增加了更多的CSS选择器多背景rgba新的技术webworkerwebsockt移除的元素纯表现的元素：basefont，big，center，font,s，strike，tt，u；对可用性产生负面影响的元素：frame，frameset，noframes；*是IE8/IE7/IE6支持通过document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还需要添加标签默认的样式：*当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架!--[ifltIE9]scriptsrc=![endif]--9.你怎么来实现设计图，你认为前端应该如何高质量完成工作?一个满屏品字布局如何设计?*首先划分成头部、body、脚部；。。。。。*实现效果图是最基本的工作，精确到2px；与设计师，产品经理的沟通和项目的参与做好的页面结构，页面重构和用户体验处理hack，兼容、写出优美的代码格式针对服务器的优化、拥抱HTML5。10.常使用的库有哪些？常用的前端开发工具？开发过什么应用或组件？*使用率较高的框架有jQuery、YUI、Prototype、Ext.js、Mootools等。尤其是jQuery，超过91%。轻量级框架有Modernizr、underscore.js、backbone.js、Raphael.js等。（理解这些框架的功能、性能、设计原理）*SublimeText、Eclipse、Notepad、Firebug、HttpWatch*城市选择插件，汽车型号选择插件、幻灯片插件。弹出层。（写过开源程序，加载器，js引擎更好）11.什么是面向对象，有什么特点？*。。。。。待完善*抽象：抽象为了简化问题，简单即美，相信我，人类很笨*继承：为了便于扩展或改写原有的功能Object.create()来实际继承,（不会看6）demo：varStudent=Object.create(Person);Person是父类*多态：为了便于改写原有的功能*封装：组件化，便于理解、替换与复用，因此系统会更加灵活*（后文提到封装XXX时，就不具体说这些优点了）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);12.列出display的值和position的值相对谁进行定位？*可用值的说明block象块类型元素一样显示。none缺省值。向行内元素类型一样显示。inline-block象行内元素一样显示，但其内容象块类型元素一样显示。list-item象块类型元素一样显示，并添加样式列表标记。*absolute生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。*fixed生成绝对定位的元素，相对于浏览器窗口进行定位。*relative生成相对定位的元素，相对于其正常位置进行定位。*static默认值。没有定位，元素出现在正常的流中*（忽略top,bottom,left,rightz-index声明）。inherit规定应该从父元素继承position属性的值。13.页面重构怎么操作？14.语义化的理解？W3C标准的理解？弹性布局和响应式的理解？15.HTML5的离线储存？16.为什么要初始化CSS样式。考虑到浏览器的兼容问题，其实不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面差异。当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。*最简单的初始化方法就是：*{padding:0;margin:0;}*淘宝的样式初始化：body,h1,h2,h3,h4,h5,h6,hr,