前端面试题汇总2.0（附答案）

1. div和span的区别？div是块级标签，span是行级标签
2. 在html中，position取值有哪几种，默认值是什么？取值：static、relative、fixed、absolute默认值：static
3. .前端页面由哪三层构成，分别是什么？作用是什么？前端页面构成：结构层、表示层、行为层结构层（structural layer）由 HTML 或 XHTML之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P标签表达了这样一种语义：“这是一个文本段。”表示层（presentation layer）由 CSS 负责创建。 CSS对“如何显示有关内容”的问题做出了回答。行为层（behaviorlayer）负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM主宰的领域。
4. 如何居中一个浮动元素？ 方式1:设置容器的浮动方式为相对定位，然后确定容器的宽高比如宽500 高 300 的层，然后设置层的外边距。<!DOCTYPEHTML><styletype=“text/css”> div{ width: 500px; height: 300px; margin: -150px 0 0 -250px; position: absolute; left: 50%; top: 50%; background-color: yellow; }
   元素居中
   方式2：需要position:absolute;绝对定位。而层的定位点，使用外补丁margin负值的方法。负值的大小为层自身宽度高度除以二。<styletype=“text/css”>
   让层垂直居中于浏览器窗口
5. 请简述HTML和XHTML最重要的4点不同？不同： XHTML要求正确嵌套 XHTML 所有元素必须关闭 XHTML 区分大小写 XHTML 属性值要用双引号 XHTML 用 id 属性代替 name 属性 XHTML 特殊字符的处理6
6. 页面布局中常听说的“结构与表现”分离，“结构”是指？“表现”是指？“结构”：HTML“表现”：CSS
7. 怎么样从web前端方面优化性能？至少列举5点？1) HTML部分u 语义化HTML：好处在于可以使代码简洁清晰，支持不同设备，利于搜索引擎，便于团队开发；u 减少DOM节点：加速页面渲染；u 给图片加上正确的宽高值：这可以减少页面重绘，同时防止图片缩放；u 防止src属性和link的href属性为空：当值为空时，浏览器很可能会把当前页面当成其属性值加载；u 正确的闭合标签：如避免使用
   ，浏览器会多一个将它解析成<div></div>的过程；u 链接为目录或首页的地址后面加”/”，如http://www.5icool.org/；u 用LINK而不用@import方式导入样式；u 样式放在页头，JS放在页尾；u 缩小favicon.ico并缓存；2) CSS部分u 避免使用CSS Expressions(CSS表达式)：如background-color: expression( (newDate()).getHours()%2 ? “#B8D4FF” : “#F08A00″ ) ;u 避免使用CSS Filter（CSS滤镜）；u 使用CSS缩写，减少代码量；u 通过CSSSprites把同类图片合成一张，减少图片请求；u 减少查询层级：如.header .logo要好过.header .top .logo；u 减少查询范围：如.header>li要好过.header li；u 避免TAG标签与CLASS或ID并存：如a.top、button#submit；u 删除重复的CSS；3) Javscript部分u 尽量少用全局变量；u 使用事件代理绑定事件，如将事件绑定在body上进行代理；u 避免频繁操作DOM节点；u 不使用EVAL；u 减少对象查找，如a.b.c.d这种查找方式非常耗性能，尽可能把它定义在变量里；u 类型转换：把数字转换成字符串使用”” + 1，浮点数转换成整型使用Math.floor()或者Math.round()；u 对字符串进行循环操作，譬如替换、查找，应使用正则表达式；u 删除重复的JS；4) 服务器部分u 尽量合并CSS、JS文件，或将其直接写在页面上，减少HTTP请求；u 压缩CSS、JS文件，缩短文件传输时间；u 避免404错误：特别要避免给404指定一个停摆页面，否则所有404错误都将会加载一次页面；u 一般要求减少DNS查询次数，如同一个页面的请求资源尽量少的使用不同的主机名，这可以减少网站并行下载的数量，但很多网站为了加速下载资源其实是特意用了多个主机名，这里要做一个权衡；u 使用CDN加速，使用户从离自己最近的服务器下载文件；u 减少Cookie的大小，使用无cookie的域，客户端请求静态文件的时候，减少 Cookie 的反复传输对主域名的影响；u 为文件头指定Expires，使内容具有缓存性；u 使用gzip压缩内容；
8. JavaScript中哪些方法获取元素?getElementByIdgetElementsByClassNamegetElementsByTagNamegetElementsByName9
9. 描述CSS hack技巧?条件注释：仅适用于IE特定符号：适用于能识别特定符号的浏览器内核符号：针对不同浏览器内核
10. 用JS截取字符串，asdfgh，要fgh;?方式1： ‘asdfgh’.substr(3,3)方式2： ’asdfgh’.substring(3,5) 或者 ‘asdfgh’.substring(3)
11. IE6的双倍边距BUG指的是什么？怎么解决？双边距：当块级元素有浮动样式的时候，给元素添加margin-left和margin-right样式，在ie6下就会出现双倍边距。解决方案：给当前元素添加样式，使当前元素不为块，如：display:inline;display:list-item
12. 如果制作一个访问量很大的网站，对css，js和图片应该怎么处理?方法1：资源文件按模块进行放置，有利于团队开发方法2：图片尽量采取聚合技术方法3：精简压缩css和js文件，减少文件大小方法4：类库、媒体使用CDN加速，减轻服务器压力
13. 述ajax原理，什么是同步异步(主观题，答案不唯一)?Ajax的工作原理：相当于在用户和服务器之间加了—个中间层，使用户操作与服务器响应异步化。这样把以前的一些服务器负担的工作转嫁到客户端，利于客户端闲置的处理能力来处理，减轻服务器和带宽的负担，从而达到节约ISP的空间及带宽租用成本的目的。同步异步：
14. 平时有没有使用xml和json，在ajax交互中，哪一种更易于开发和维护，js中怎么序列化JSON字符串?有，json相比xml可读性和可扩张性好、编码及解码难度较低、在数据交互中带宽占用少，并且在当下是最流行的数据交互格式。序列化JSON字符串：eval() 或者 JSON.parse()
15. JS怎么创建一个类?方式1 : var obj = new Object();方式2 : var obj = {};
16. JS的typeof返回哪些数据类型?string、number、object、boolean、function、undefined
17. HTTP请求有哪几种？post、get
18. 完成下面布局（兼容IE6-10以及FF、谷歌、苹果浏览器）?<!DOCTYPEhtml><htmllang=“en”> <metahttp-equiv=“Content-Type” content=“text/html;charset=utf-8”/> <divid=“header”><divid=“body”> <divid=“sidebar”> <divid=“content”><divid=“footer”>
19. 闭包是什么？有什么特性？请简单书写一个简单事例？必包：闭包是指可以包含自由（未绑定到特定对象）变量的代码块；这些变量不是在这个代码块内或者任何全局上下文中定义的，而是在定义代码块的环境中定义（局部变量）特性：闭包是能够读取其他函数内部变量的函数，即在外面可以调用函数中的函数的变量，其实他就是将函数内外部连接起来的桥梁事例：<scripttype=’text/javascript’>function a(){var i = 99;iAdd = function(){i++;}function b(){alert(i);}return b;}var result = a();result();//结果为99iAdd();result();//结果为100
20. 解释jsonp的原理，以及为什么不是真正的ajax（主观题）？JSONP是一种非正式传输协议，该协议的一个要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。
21. js延迟加载的方式有哪些？defer和async、动态创建DOM方式（用得最多）、按需异步载入js
22. 对WEB标准以及W3C的理解与认识？标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维 护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性；
23. xhtml和html有什么区别？HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言最主要的不同：XHTML 元素必须被正确地嵌套。XHTML 元素必须被关闭。标签名必须用小写字母。XHTML 文档必须拥有根元素。
24. Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?用于声明文档使用那种规范（html/Xhtml）一般为严格 过度 基于框架的html文档加入XMl声明可触发，解析方式更改为IE5.5 拥有IE5.5的bug
25. 行内元素有哪些？块级元素有哪些？CSS的盒模型？块级元素：div p h1 h2 h3 h4 form ul行内元素: a b br i span input selectCss盒模型:内容，border ,margin，padding
26. CSS引入的方式有哪些?link和@import的区别是?内联 内嵌 外链 导入区别 ：同时加载前者无兼容性，后者CSS2.1以下浏览器不支持Link 支持使用javascript改变样式，后者不可
27. CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？内联和important哪个优先级高？标签选择符 类选择符 id选择符继承不如指定 Id>class>标签选择后者优先级高28.前端页面有哪三层构成，分别是什么？作用是什么？结构层 Html 表示层 CSS 行为层 js
28. css的基本语句构成是？选择器{属性1:值1;属性2:值2;……}
29. 你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?Ie(Ie内核)火狐（Gecko）谷歌（webkit） opear(Presto)
30. 写出几种IE6 BUG的解决方法？1.双边距BUG float引起的使用display2.3像素问题使用float引起的使用dislpay:inline-3px3.超链接hover 点击后失效使用正确的书写顺序link visited hover active4.Ie z-index问题给父级添加position:relative5.Png 透明使用js代码改6.Min-height 最小高度！Important解决’7.select 在ie6下遮盖使用iframe嵌套8.为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）
31. 标签上title与alt属性的区别是什么？Alt 当图片不显示是用文字代表。Title 为该属性提供信息
32. 描述css reset的作用和用途？Reset重置浏览器的css默认属性浏览器的品种不同，样式不同，然后重置，让他们统一
33. 解释css sprites，如何使用？Css 精灵把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量
34. 浏览器标准模式和怪异模式之间的区别是什么？盒子模型渲染模式的不同使用 window.top.document.compatMode 可显示为什么模式
35. 你如何对网站的文件和资源进行优化？期待的解决方案包括：文件合并文件最小化/文件压缩使用CDN托管缓存的使用37.什么是语义化的HTML？直观的认识标签对于搜索引擎的抓取有好处
36. 清除浮动的几种方式，各自的优缺点？1.使用空标签清除浮动 clear:both（理论上能清楚任何标签，，，增加无意义的标签）2.使用overflow:auto（空标签元素清除浮动而不得不增加无意代码的弊端,使用zoom:1用于兼容IE）3.是用afert伪元素清除浮动(用于非IE浏览器)39.javascript的typeof返回哪些数据类型？Object number function boolean underfind
37. 例举3种强制类型转换和2种隐式类型转换？强制（parseInt,parseFloat,number）隐式（== – ===）
38. split() join() 的区别？前者是切割成数组的形式，后者是将数组转换成字符串
39. 数组方法pop() push() unshift() shift()？Push()尾部添加 pop()尾部删除Unshift()头部添加 shift()头部删除
40. JS中的call()和apply()方法的区别？例子中用 add 来替换 sub，add.call(sub,3,1) == add(3,1) ，所以运行结果为：alert(4);注意：js 中的函数其实是对象，函数名是对 Function 对象的引用。function add(a,b){ alert(a+b);}function sub(a,b){ alert(a-b);}add.call(sub,3,1);
41. IE和DOM事件流的区别？1.执行顺序不一样、2.参数不一样3.事件加不加on4.this指向问题45.IE和标准下有哪些兼容性的写法？Var ev = ev || window.eventdocument.documentElement.clientWidth || document.body.clientWidthVar target = ev.srcElement||ev.target46.ajax请求的时候get 和post方式的区别？一个在url后面一个放在虚拟载体里面有大小限制安全问题应用不同一个是论坛等只需要请求的，一个是类似修改密码的
42. call和apply的区别？Object.call(this,obj1,obj2,obj3)Object.apply(this,arguments)
43. ajax请求时，如何解释json数据？使用eval parse 鉴于安全性考虑使用parse更靠谱
44. new操作符具体干了什么呢? 1、创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。 2、属性和方法被加入到 this 引用的对象中。 3、新创建的对象由 this 所引用，并且最后隐式的返回 this 。 var obj = {}; obj.proto = Base.prototype; Base.call(obj);
45. 写一个获取非行间样式的函数？functiongetStyle(obj,attr,value){if(!value){if(obj.currentStyle){return obj.currentStyle(attr)}else{obj.getComputedStyle(attr,false)}}else{obj.style[attr]=value}}51.事件委托是什么？让利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！http://www.webasily.com/?p=78 例子可见此链接
46. 闭包是什么，有什么特性，对页面有什么影响？闭包就是能够读取其他函数内部变量的函数。http://blog.csdn.net/gaoshanwudi/article/details/7355794 此链接可查看（问这个问题的不是一个公司）
47. 如何阻止事件冒泡和默认事件？canceBubble return false
48. 添加删除替换插入到某个接点的方法？obj.appendChidl()obj.innersetBeforeobj.replaceChildobj.removeChild
49. 解释jsonp的原理，以及为什么不是真正的ajax？动态创建script标签，回调函数Ajax是页面无刷新请求数据操作
50. javascript的本地对象，内置对象和宿主对象？本地对象为array obj regexp等可以new实例化内置对象为gload Math 等不可以实例化的宿主为浏览器自带的document,window 等
51. .document load 和document ready的区别？Document.onload 是在结构和样式加载完才执行jsDocument.ready原生种没有这个方法，jquery中有 $().ready(function)
52. ”==”和“===”的不同？前者会自动转换类型后者不会
53. javascript的同源策略？一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、协议和端口号的组合
54. 编写一个数组去重的方法？function oSort(arr){varresult ={};varnewArr=[];for(vari=0;i<arr.length;i++){if(!result[arr]){newArr.push(arr)result[arr]=1}}returnnewArr}
55. Doctype作用? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?（1）、<!DOCTYPE> 声明位于文档中的最前面，处于 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。（2）、严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。（3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。（4）、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
56. .行内元素有哪些？块级元素有哪些？空(void)元素有那些？（1）CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，比如div默认display属性值为“block”，成为“块级”元素；span默认display属性值为“inline”，是“行内”元素。 （2）行内元素有：a b span img input select strong（强调的语气） 块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p （3）知名的空元素： <br> <hr> <img> <input> <link><meta>鲜为人知的是： <area><base> <col> <command> <embed> <keygen><param> <source> <track> <wbr>
57. .CSS的盒子模型？（1）两种， IE 盒子模型、标准 W3C 盒子模型；IE 的content部分包含了border 和 pading;（2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border).
58. link 和@import 的区别是?（1）、link属于XHTML标签，而@import是CSS提供的;（2）、页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;（3）、import只在IE5以上才能识别，而link是XHTML标签，无兼容问题;（4）、link方式的样式的权重 高于@import的权重.
59. CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？1.id选择器（ # myid）2.类选择器（.myclassname）3.标签选择器（div, h1, p）4.相邻选择器（h1 + p）5.子选择器（ul < li）6.后代选择器（li a）7.通配符选择器（ * ）8.属性选择器（a[rel = “external”]）9.伪类选择器（a: hover, li: nth - child）可继承： font-sizefont-family color, UL LI DL DD DT;不可继承 ：border paddingmargin width height ;优先级就近原则，样式定义最近者为准;载入样式以最后载入的定位为准;优先级为:!important > id > class > tag important 比 内联优先级高CSS3新增伪类