《web前端5大类型面试题汇总》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

http://www.qikuedu.com2016年web前端5大类型面试题汇总<一>类型11、常用那几种浏览器测试？有哪些内核(LayoutEngine)?(Q1)浏览器：IE，Chrome，FireFox，Safari，Opera。(Q2)内核：Trident，Gecko，Presto，Webkit。2、说下行内元素和块级元素的区别？行内块元素的兼容性使用？（IE8以下）(Q1)行内元素：会在水平方向排列，不能包含块级元素，设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效。块级元素：各占据一行，垂直方向排列。从新行开始结束接着一个断行。(Q2)兼容性：display:inline-block;*display:inline;*zoom:1;3、清除浮动有哪些方式？比较好的方式是哪一种？(Q1)（1）父级div定义height。（2）结尾处加空div标签clear:both。（3）父级div定义伪类:after和zoom。（4）父级div定义overflow:hidden。（5）父级div定义overflow:auto。（6）父级div也浮动，需要定义宽度。（7）父级div定义display:table。（8）结尾处加br标签clear:both。(Q2)比较好的是第3种方式，好多网站都这么用。4、box-sizing常用的属性有哪些？分别有什么作用？(Q1)box-sizing:content-box|border-box|inherit;(Q2)content-box:宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框(元素默认效果)。border-box:元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。5、Doctype作用？标准模式与兼容模式各有什么区别?(Q1)告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。(Q2)标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中， http://www.qikuedu.com页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。6、HTML5为什么只需要写？HTML5不基于SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）。而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。7、页面导入样式时，使用link和@import有什么区别？（1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS,定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;（2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;（3）import是CSS2.1提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题。8、介绍一下你对浏览器内核的理解？主要分成两部分：渲染引擎(layoutengineer或RenderingEngine)和JS引擎。渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。JS引擎则：解析和执行javascript来实现网页的动态效果。最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。9、html5有哪些新特性？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？(Q1)HTML5现在已经不是SGML的子集，主要是关于图像，位置，存储，多任务等功能的增加。(1)绘画canvas;(2)用于媒介回放的video和audio元素;(3)本地离线存储localStorage长期存储数据，浏览器关闭后数据不丢失;(4)sessionStorage的数据在浏览器关闭后自动删除;(5)语意化更好的内容元素，比如article、footer、header、nav、section;(6)表单控件，calendar、date、time、email、url、search;(7)新的技术webworker,websocket,Geolocation;(Q2)IE8/IE7/IE6支持通过document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还需要添加标签默认的样式。当然也可以直接使用成熟的框架、比如html5shim，10、简述一下你对HTML语义化的理解？用正确的标签做正确的事情。html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。JavaScript1、介绍js的基本数据类型Undefined、Null、Boolean、Number、String2、js有哪些内置对象？数据封装类对象：Object、Array、Boolean、Number和String其他对象：Function、Arguments、Math、Date、RegExp、Error3、this对象的理解this总是指向函数的直接调用者（而非间接调用者）；如果有new关键字，this指向new出来的那个对象；在事件中，this指向触发这个事件的对象，特殊的是，IE中的attachEvent中的this总是指向全局对象Window。4、eval是做什么的？它的功能是把对应的字符串解析成JS代码并运行；应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）。由JSON字符串转换为JSON对象的时候可以用eval，varobj=eval('('+str+')')。5、DOM怎样添加、移除、移动、复制、创建和查找节点//创建新节点createDocumentFragment()//创建一个DOM片段createElement()//创建一个具体的元素createTextNode()//创建一个文本节点//添加、移除、替换、插入appendChild()removeChild()replaceChild()insertBefore()//在已有的子节点前插入一个新的子节点//查找getElementsByTagName()//通过标签名称getElementsByName()//通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)getElementById()//通过元素Id，唯一性 http://www.qikuedu.com6、null和undefined的区别？null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。undefined：（1）变量被声明了，但没有赋值时，就等于undefined。（2)调用函数时，应该提供的参数没有提供，该参数等于undefined。（3）对象没有赋值的属性，该属性的值为undefined。（4）函数没有返回值时，默认返回undefined。null：（1）作为函数的参数，表示该函数的参数不是对象。（2）作为对象原型链的终点。7、new操作符具体干了什么呢?（1）创建一个空对象，并且this变量引用该对象，同时还继承了该函数的原型。（2）属性和方法被加入到this引用的对象中。（3）新创建的对象由this所引用，并且最后隐式的返回this。8、JSON的了解？JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式。它是基于JavaScript的一个子集。数据格式简单,易于读写,占用带宽小。格式：采用键值对，例如：{'age':'12','name':'back'}9、call()和apply()的区别和作用？apply()函数有两个参数：第一个参数是上下文，第二个参数是参数组成的数组。如果上下文是null，则使用全局对象代替。如：function.apply(this,[1,2,3]);call()的第一个参数是上下文，后续是实例传入的参数序列。如：function.call(this,1,2,3);10、如何获取UA？functionwhatBrowser(){document.Browser.Name.value=navigator.appName;document.Browser.Version.value=navigator.appVersion;document.Browser.Code.value=navigator.appCodeName; http://www.qikuedu.comdocument.Browser.Agent.value=navigator.userAgent;}其他1、HTTP状态码知道哪些？100Continue继续，一般在发送post请求时，已发送了httpheader之后服务端将返回此信息，表示确认，之后发送具体参数信息200OK正常返回信息201Created请求成功并且服务器创建了新的资源202Accepted服务器已接受请求，但尚未处理301MovedPermanently请求的网页已永久移动到新位置。302Found临时性重定向。303SeeOther临时性重定向，且总是使用GET请求新的URI。304NotModified自从上次请求后，请求的网页未修改过。400BadRequest服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。401Unauthorized请求未授权。403Forbidden禁止访问。404NotFound找不到如何与URI相匹配的资源。500InternalServerError最常见的服务器端错误。503ServiceUnavailable服务器端暂时无法处理请求（可能是过载或维护）。2、你有哪些性能优化的方法？（1）减少http请求次数：CSSSprites,JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存，图片服务器。（2）前端模板JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数 http://www.qikuedu.com（3）用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。（4）当需要设置的样式很多时设置className而不是直接操作style。（5）少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。（6）避免使用CSSExpression（css表达式)又称Dynamicproperties(动态属性)。（7）图片预加载，将样式表放在顶部，将脚本放在底部加上时间戳。3、什么叫优雅降级和渐进增强？优雅降级：Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效。渐进增强：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用。4、哪些常见操作会造成内存泄漏？内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。setTimeout的第一个参数使用字符串而非函数的话，会引发内存泄漏。闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）。5、线程与进程的区别一个程序至少有一个进程,一个进程至少有一个线程。线程的划分尺度小于进程，使得多线程程序的并发性高。另外，进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率。 http://www.qikuedu.com线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制。从逻辑角度来看，多线程的意义在于一个应用程序中，有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用，来实现进程的调度和管理以及资源分配。这就是进程和线程的重要区别。<二>类型2作者：青青链接：https://zhuanlan.zhihu.com/p/23842369来源：知乎著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。1、http1.1比1.0有哪些改进(1)、支持持久链接Connection:keep-alive;(2)、支持虚拟主机Host:http://tmooc.cn一台服务器中可以同时纯在多个网站，公用IP地址，但域名不同(3)、支持代理链接Proxy:xxx;客户端可以通过中间代理服务器访问目标服务器2、提高一个网站访问性能(1)、域名解析尽可能减少域名解析的次数，减少跨站外部资源的访问(2)、创建链接尽量减少创建链接次数，采用持久链接避免重复链接(3)、发送请求 http://www.qikuedu.com尽力减少请求次数，资源合并，合理使用缓存(4)、等待响应提高服务器端相应速度(5)、接受响应缩短相应消息下载时间3、谈一下对Ajax的理解异步的js和xml,通过Ajax，可以使用js来调用XMLHttpRequest对象，直接与服务器进行通信。可以在页面不完全刷新的情况下，局部更新页面数据。4、原生Ajax代码varxhr=newXMLHttpRequest();xhr.onreadystatechange=function(){if(xhr.readyState==4){if(xhr.status==200){succ();}else{err();}complete();}}xhr.open();//如果为POST http://www.qikuedu.comxhr.open('POST','1.php',true);//设置请求主题的消息类型xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");beforeSend();xhr.send();5、跨域请求浏览器从某个域名下的资源访问另一个域名下的资源，可能是协议，域名，端口号不同1)、方案1给被跨域访问的资源添加相应消息头部，设定允许来至于那个域名下的页面访问当前页面header("Access-Control-Allow-Origin:http://xx.com");2)、方案2JSONP客户端定义操作JSON数据的函数，开始请求资源。被请求资源在设置header头部的时候，把Json改成js格式的类型，返回客户端的时候，字符串改成“函数名(json参数)”的形式....6、HTML5新增了那些标签，废除了那些标签新的表单元素datalist、progress、meter、output7、HTML5新增了那些标签属性，废除了那些标签属性新的inputtype(1)、number显示一个数字输入框 http://www.qikuedu.com(2)、email显示一个邮件地址输入框(3)、url显示一个url地址输入框(4)、tel显示一个电话号码输入框(5)、search显示搜索输入框(6)、range显示一个范围选择滑块(7)、color显示一个颜色选择框(8)、date显示一个日期选择框(9)、month显示一个月份选择器(10)、week显示一个星期/周选择器表单新属性(1)、placeholder：站位消息(2)、autoplay自动获得焦点(3)、multiple:多选，用于email和file(4)、autocomplete:自动完成(5)、form:自定当前输入域所属的表单(6)、required:必填项(7)、min：最小值(8)、max:最大值(9)、min-length/max-length：最小/最大长度(10)、pattern：定义正则表达式PS:总结6、7(1)新的inputtype——10个 http://www.qikuedu.comnumber、email、url、tel、search、range、color、date、month、week(2)新的表单元素——4个datalist、progress、meter、output(3)表单元素新的属性——11个placeholder、autofocus、autocomplete、multiple、form----------------------验证相关required、min、max、minlength、maxlength、pattern8、SVG和Canvas的比较SVGCanvas绘制的是矢量图绘制的是位图每个图形/图像都是独立的标签只有画布是标签容易为每个图形添加事件监听不能为每个图形添加独立的事件监听可以无限缩放，适合地图不能无限放大，适合表现颜色细节，例如游戏9、描述一下浏览器的线程模型Program:程序，编写好的代码经过处理，可以在计算机上执行，放在文件系统上Progress:进程/任务，程序从磁盘中调入内存，分配必须可执行代码空间、数据空间，随时准备被CPU执行thread:线程，进程内部执行代码的基本单位进程和线程的关系：进程是操作系统分配内存的基本单位线程是执行代码的基本单位线程处于进程内部，一个进程内部必须至少有一个线程，也可以有多个线程，这些线程之间可以没有影响，并发执行（宏观上是同时执行，微观上看是交替执行） http://www.qikuedu.com10、JS内置对象String、Number、Boolean----原始类型ArrayMathDateRegExpErrorFunctionObjectGlobal(在浏览器中被替换window)；11、检索关键词的位置while((i=str.indexOf("关键词",fromi))!=-1){i//关键词的位置};while((i=str.lastIndexOf("关键词",fromi))!=-1){i//关键词的位置}12、Error专门封装错误信息的对象6种SyntaxErrorReferenceErrorTypeErrorRangeErrorURIErrorEvalError13、trycatch中的return如果finally中有return则使用finally中的return返回如果finally中没有return,try中的return，会先获得要返回的值，但挂起，暂不返回，要等finally中的代码执行完，才返回14、检索reg.exec(str);while((arr=reg.exec(str))!=null){arr[0]//本次找到的关键词arr[i]//第i个分组的子内容arr.index//本次找打的关键词位置} http://www.qikuedu.com15、DateAPIFullYearMonthDateDayHoursMinutesSecondsMilisecondsDay没有set方法其他都有getset方法<三>类型3链接：https://zhuanlan.zhihu.com/p/23906368来源：知乎1、什么是盒子模型？在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content），元素的内边距（padding），元素的边框（border），元素的外边距（margin）四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。2、行内元素有哪些？块级元素有哪些？空(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结构：