2016年Web前端面试题目汇总(共30页).docx

《2016年Web前端面试题目汇总(共30页).docx》由会员分享，可在线阅读，更多相关《2016年Web前端面试题目汇总(共30页).docx（29页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、精选优质文档-倾情为你奉上最新前端开发工程师面试题HTML部分1、Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?（1）、 声明位于文档中的最前面，处于 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。（2）、严格模式的排版和 JS 运作模式是以该浏览器支持的最高标准运行。（3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。（4）、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。2、行内元素有哪些？块级元素有哪些？（1）CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的dis

2、play值，比如div默认display属性值为“block”，成为“块级”元素；span默认display属性值为“inline”，是“行内”元素。（2）行内元素有：a b span img input select strong（强调的语气）块级元素有：div ul ol li dl dt dd h1 h2 h3 h4p3、link 和import 的区别是？（1）link属于XHTML标签，而import是CSS提供的;（2）页面被加载的时，link会同时被加载，而import引用的CSS会等到页面被加载完再加载;（3）import只在IE5以上才能识别，而link是XHTML标签，无兼

3、容问题;（4）link方式的样式的权重 高于import的权重.4、浏览器的内核分别是什么?IE浏览器的内核Trident、Mozilla的Gecko、Chrome的Blink（WebKit的分支）、Opera内核原为Presto，现为Blink；5、HTML5有哪些新特性？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。绘画 canvas用于媒介回放的 video 和 audio 元素 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；sess

4、ionStorage 的数据在浏览器关闭后自动删除语意化更好的内容元素，比如 article、footer、header、nav、section 表单控件，calendar、date、time、email、url、search新的技术webworker, websockt, Geolocation6、对语义化如何理解？用正确的标签做正确的事情！HTML语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解

5、。7、HTML5的离线储存有几种方式？localStorage长期存储数据，浏览器关闭后数据不丢失；sessionStorage数据在浏览器关闭后自动删除。8、iframe有那些缺点？iframe会阻塞主页面的Onload事件；iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以可以绕开以上两个问题。9、请描述一下 cookies，sessionStorage 和 localStorage 的区别？cookie在浏览器和

6、服务器间来回传递。 sessionStorage和localStorage不会sessionStorage和localStorage的存储空间更大；sessionStorage和localStorage有更多丰富易用的接口；sessionStorage和localStorage各自独立的存储空间；最新前端开发工程师面试题CSS部分1、CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？1.id选择器（ # myid） 2.类选择器（.myclassname） 3.标签选择器（div, h1, p） 4.相邻选择器（h1 + p） 5.子选择器（ul id cl

7、ass tag important 比 内联优先级高2、CSS3新增伪类举例：p:first-of-type 选择属于其父元素的首个元素的每个元素。p:last-of-type选择属于其父元素的最后元素的每个元素。p:only-of-type选择属于其父元素唯一的元素的每个元素。p:only-child选择属于其父元素的唯一子元素的每个元素。p:nth-child(2)选择属于其父元素的第二个子元素的每个元素。:enabled:disabled 控制表单控件的禁用态。:checked单选框或复选框被选中。3、如何居中div？如何居中一个浮动元素？给div设置一个宽度，然后添加margin:0

8、auto属性divwidth:200px;margin:0 auto; 居中一个浮动元素确定容器的宽高 宽500 高 300 的层设置层的外边距 .div Width:500px ; height:300px;/高度可以不设Margin: -150px 0 0 -250px;position:relative;相对定位background-color:pink;/方便看效果left:50%;top:50%;列出display的值，说明他们的作用。position的值， relative和absolute定位原点是？1.block 象块类型元素一样显示。none 缺省值。象行内元素类型一样显示。

9、inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。list-item 象块类型元素一样显示，并添加样式列表标记。2.absolute生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。fixed （老IE不支持）生成绝对定位的元素，相对于浏览器窗口进行定位。relative 生成相对定位的元素，相对于其正常位置进行定位。static默认值。没有定位，元素出现在正常的流中*（忽略 top, bottom, left, right z-index 声明）。inherit 规定从父元素继承 position 属性的值。4、为什么要初始化CSS样式？因为

10、浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对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; pa

11、dding: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-decoratio

12、n: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; 5、absolute的containing block计算方式跟正常流有什么不同？6、position跟dis

13、play、margin collapse、overflow、float这些特性相互叠加后会怎么样？7、对BFC规范的理解？（W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关 系和相互作用。）8、css定义的权重以下是权重的规则：标签的权重为1，class的权重为10，id的权重为100，以下例子是演示各种定义的权重值：/*权重为1*/div/*权重为10*/.class1/*权重为100*/#id1/*权重为100+1=101*/#id1 div/*权重为10+1=11*/.class1 div/*权重为10+10+1=21*/.class1 .c

14、lass2 div 如果权重相同，则最后定义的样式会起作用，但是应该避免这种情况出现9、解释下浮动和它的工作原理？清除浮动的技巧10、用过媒体查询，针对移动端的布局吗？11、使用 CSS 预处理器吗？喜欢那个？12、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);/旋转,缩放

15、,定位,倾斜增加了更多的CSS选择器多背景 rgba13、经常遇到的CSS的兼容性有哪些？原因，解决方法是什么？14、介绍一下CSS的盒子模型？（1）有两种， IE 盒子模型、标准 W3C 盒子模型；IE的content部分包含了 border 和 pading;（2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border).1.对WEB标准以及W3C的理解与认识？标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代

16、码和组件，容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性;2.XHTML和HTML有什么区别？HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言最主要的不同：XHTML 元素必须被正确地嵌套。XHTML 元素必须被关闭。标签名必须用小写字母。XHTML 文档必须拥有根元素。3.Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?用于声明文档使用那种规范(HTML/XHTML)一般为 严格 过度 基于框架的html文档加入XMl声明可触发，解析方式更改为IE5.5 拥有IE5.5的bug4.行内元素有哪些?块

17、级元素有哪些?CSS的盒模型?块级元素：div p h1 h2 h3 h4 form ul行内元素: a b br i span input selectCss盒模型:内容，border ,margin，padding5.CSS引入的方式有哪些? link和import的区别是?内联 内嵌 外链 导入区别 ：同时加载前者无兼容性，后者CSS2.1以下浏览器不支持Link 支持使用javascript改变样式，后者不可6.CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高?标签选择符 类选择符 id选择符继承不如指定 Idclass标签选择后者优先级高

18、7.前端页面有哪三层构成，分别是什么?作用是什么?结构层 HTML 表示层 CSS 行为层 js8.CSS的基本语句构成是?选择器属性1:值1;属性2:值2;9.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?Ie(Ie内核) 火狐(Gecko) 谷歌(webkit) opear(Presto)10.写出几种IE6 BUG的解决方法1.双边距BUG float引起的 使用display2.3像素问题 使用float引起的 使用dislpay:inline -3px3.超链接hover 点击后失效 使用正确的书写顺序 link visited hover active4.Ie z-in

19、dex问题 给父级添加position:relative5.Png 透明 使用js代码 改6.Min-height 最小高度 !Important 解决7.select 在ie6下遮盖 使用iframe嵌套8.为什么没有办法定义1px左右的宽度容器(IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px)9.ie 6 不支持!important11.img标签上title与alt属性的区别是什么?Alt 当图片不显示是 用文字代表。Title 为该属性提供信息12.描述css reset的作用和用途。Reset重置浏览器的css默认属性 浏览器的

20、品种不同，样式不同，然后重置，让他们统一13.解释css sprites，如何使用。Css 精灵 把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量14.浏览器标准模式和怪异模式之间的区别是什么?盒子模型 渲染模式的不同使用 patMode 可显示为什么模式15.你如何对网站的文件和资源进行优化?期待的解决方案包括：文件合并文件最小化/文件压缩使用CDN托管缓存的使用16.什么是语义化的HTML?直观的认识标签 对于搜索引擎的抓取有好处17.清除浮动的几种方式，各自的优缺点1.使用空标签清除浮动 clear:both(理论上能清楚任何标签，增加无意义的标签)2.使用overflow

21、:auto(空标签元素清除浮动而不得不增加无意代码的弊端,使用zoom:1用于兼容IE)3.是用afert伪元素清除浮动(用于非IE浏览器)18.css hack_marging IE 6+margin IE 7Marging:0 auto 9 所有IeMargin 0 IE 8Javascript部分1.javascript的typeof返回哪些数据类型Object number function boolean underfind2.例举3种强制类型转换和2种隐式类型转换?强制（parseInt,parseFloat,number）隐式（= =）3.split() join() 的区别前者

22、是切割成数组的形式，后者是将数组转换成字符串4.数组方法pop() push() unshift() shift()Push()尾部添加 pop()尾部删除Unshift()头部添加 shift()头部删除5.事件绑定和普通事件有什么区别6.IE和DOM事件流的区别1.执行顺序不一样、2.参数不一样3.事件加不加on4.this指向问题7.IE和标准下有哪些兼容性的写法Var ev = ev | window.eventdocument.documentElement.clientWidth | document.body.clientWidthVar target = ev.srcEleme

23、nt|ev.target8.ajax请求的时候get 和post方式的区别一个在url后面 一个放在虚拟载体里面有大小限制安全问题应用不同 一个是论坛等只需要请求的，一个是类似修改密码的9.call和apply的区别Object.call(this,obj1,obj2,obj3)Object.apply(this,arguments)10.ajax请求时，如何解释json数据使用eval parse 鉴于安全性考虑 使用parse更靠谱11.b继承a的方法12.JavaScript this指针、闭包、作用域13.事件委托是什么让利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！

24、14.闭包是什么，有什么特性，对页面有什么影响闭包就是能够读取其他函数内部变量的函数。15.如何阻止事件冒泡和默认事件canceBubble return false16.添加 删除 替换 插入到某个接点的方法obj.appendChidl()obj.innersetBeforeobj.replaceChildobj.removeChild17.解释jsonp的原理，以及为什么不是真正的ajax动态创建script标签，回调函数Ajax是页面无刷新请求数据操作18.javascript的本地对象，内置对象和宿主对象本地对象为array obj regexp等可以new实例化内置对象为gload

25、 Math 等不可以实例化的宿主为浏览器自带的document,window 等19.document load 和document ready的区别Document.onload 是在结构和样式加载完才执行jsDocument.ready原生种没有这个方法，jquery中有 $().ready(function)20.”=”和“=”的不同前者会自动转换类型后者不会21.javascript的同源策略一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、协议和端口号的组合22.编写一个数组去重的方法function oSort(arr)var result =;var

26、newArr=;for(var i=0;iarr.length;i+)if(!resultarr)newArr.push(arr)resultarr=1return newArr/arr.length;i+)1.自我评价一下HTML/CSS/JS的掌握情况2.简述HTML经常使用的标签和作用。Div/a/p/span/li/ul/ol/table/tr/td3.你认为最常遇到的兼容Bug有哪些?有哪些问题是你认为解决起来最麻烦的?IE6 PNGIE6 Fixed4.块级元素和行内元素都有哪些? 行内元素有哪些特点?5.介绍所知道的CSS hack技巧(如：_， *， +， 9， !import

27、ant 之类)6.CSS定位方式有哪些?position属性的值有哪些?他们之间的区别是什么?在CSS中关于定位的内容是：position:relative | absolute | static | fixed static 没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级。 relative 不脱离文档流，参考自身静态位置通过 top,bottom,left,right 定位，并且可以通过z-index进行层次分级。 absolute 脱离文档流，通过 top,bottom,left,right 定位。选53D6其最近的父级定位元素，当父级 position 为 st

28、atic 时，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。 fixed 固定定位，这里他所固定的对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。7.函数的几种定义方法？function a(),var a = function()8.对象的定义方法？a = new Object(), a = 9.类的定义方法（prototype）（继承）Var a = function()a.prototype = new a();10.this 关键字的指向obj.foo() = obj /方法调用模式,this指向objfoo() =

29、 window; /函数调用模式,this指向windownew obj.foo() = obj /构造器调用模式, this指向新建立对象foo.call(obj) = obj;/APPLY调用模式,this指向obj11.什么是闭包，及其作用是什么？12.事件绑定的几种方法，事件冒泡？13.Ajax/json/json0070？14.异步ajax的优缺点都有什么？优点： 相对于同步ajax：不会造成UI卡死，用户体验好。 相对于刷新页面，省流量缺点： 后退按钮无效； 多个请求同时触发时，由于回调时间不确定，会造成混乱，避免这种混乱需要复杂的判断机制。 搜索引擎不友好 数据安全15.常用JS

30、框架都有什么？是否使用过jQuery，以及jQuery的优点是什么？16.JS用了多久，介绍一下自己做过的JS项目？17.开发调试工具和方法都有什么（编辑器、浏览器）18.类、函数、对象（代码表达）19.闭包（setTimeout）（产生两个首尾相连的计时器）（使用for循环产生10个计时器）|20.Jquery Mobile 相关21.HTML5/CSS3的掌握情况22.是否听说过和理解webapp？23.个人擅长的语言，优缺点都是什么？24.介绍一下曾经参与过的项目经验，合作开发、独立开发25.编程的重要知识？26.开发过程中遇到困难，如何解决？27.有没有个人/开源项目28.前端开发（H

31、TML/CSS/）最新前端开发工程师面试题JavaScript部分1、eval是做什么的？它的功能是把对应的字符串解析成JS代码并运行；应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）。2、Node.js的适用场景？高并发、聊天、实时消息推送3、介绍js的基本数据类型。number,string,boolean,object,undefined4、Javascript如何实现继承？通过原型和构造器5、如何创建一个对象? （画出此对象的内存图）function Person(name, age) = name;this.age = age;this.sing = f

32、unction() alert(this.name) 6、谈谈This对象的理解。this是js的一个关键字，随着函数使用场合不同，this的值会发生变化。但是有一个总原则，那就是this指的是调用函数的那个对象。this一般情况下：是全局对象Global。 作为方法调用，那么this就是指这个对象7、事件是什么？IE与火狐的事件机制有什么区别？ 如何阻止冒泡？（1） 我们在网页中的某个操作（有的操作对应多个事件）。例如：当我们点击一个按钮就会产生一个事件。是可以被 JavaScript 侦测到的行为。（2） 事件处理机制：IE是事件冒泡、火狐是 事件捕获；（3） ev.stopPropaga

33、tion();8、什么是闭包（closure），为什么要用它？执行say667()后,say667()闭包内部变量会存在,而闭包内部函数的内部变量不会存在.使得Javascript的垃圾回收机制GC不会收回say667()所占用的资源，因为say667()的内部函数的执行需要依赖say667()中的变量。这是对闭包作用的非常直白的描述.function say667() / Local variable that ends up within closurevar num = 666;var sayAlert = function() alert(num); num+;return sayAl

34、ert; var sayAlert = say667(); sayAlert()/执行结果应该弹出的6679、如何判断一个对象是否属于某个类？使用instanceof （待完善） if(a instanceof Person) alert(yes); 10、Javascript中，有一个函数，执行时对象查找时，永远不会去查找原型，这个函数是？hasOwnProperty11、对JSON 的了解？JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小age:12, name:ba

35、ck2016年Web前端面试题目汇总以下是收集一些面试中经常会遇到的经典面试题以及自己面试过程中无法解决的问题，通过对知识的整理以及经验的总结，重新巩固自身的前端基础知识，如有错误或更好的答案，欢迎指正。:）HTML/CSS部分1、什么是盒子模型？在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content），元素的内边距（padding），元素的边框（border），元素的外边距（margin）四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。2、行内元素有哪些？块级元素有哪些？

36、空(void)元素有那些？行内元素：a、b、span、img、input、strong、select、label、em、button、textarea块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote空元素：即系没有内容的HTML元素，例如：br、meta、hr、link、input、img3、CSS实现垂直水平居中一道经典的问题，实现方法有很多种，以下是其中一种实现：HTML结构： CSS：.wrapperposition:relative;.contentbackground-color:#6699FF;width:200px;height:200px;p

37、osition: absolute;/父元素需要相对定位top: 50%;left: 50%;margin-top:-100px ; /二分之一的height，widthmargin-left: -100px;4、简述一下src与href的区别href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图

38、片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。5、什么是CSS Hack?一般来说是针对不同的浏览器写不同的CSS,就是 CSS Hack。IE浏览器Hack一般又分为三种，条件Hack、属性级Hack、选择符Hack（详细参考CSS文档：css文档）。例如：/ 1、条件Hack .testcolor:red; / 2、属性Hack.testcolor:#0909; /* For IE8+ */*color:#f00;/* For IE7 and earlier */_color:#ff0;/* For IE6 and earlier */

39、/ 3、选择符Hack* html .testcolor:#090; /* For IE6 and earlier */* + html .testcolor:#ff0; /* For IE7 */6、简述同步和异步的区别同步是阻塞模式，异步是非阻塞模式。同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去；异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。7、px和em的区别px和em都是长度单位，区别是，px的值是固定的，指

40、定是多少就是多少，计算比较容易。em得值不是固定的，并且em会继承父级元素的字体大小。浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em8、什么叫优雅降级和渐进增强？渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。区别：a. 优雅降级是从复杂的现状开始，并试图减少用户体验的供给b. 渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要c. 降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带9、浏览器的内核分别是什么?IE: trident内核Firefox：gecko内核Safari：we