很早之前就在看web前端面试题，一直想总结一个比较全面又详细的面试题库，现在总结了一些，分享给大家，以后还会持续更新，有些题目有多种答案，本文只给出其中一种，哪里有问题的欢迎指出。

1、谈谈你对web标准的理解

2、列举html中至少三个实体

cellpadding：代表单元格边框到内容之间的距离（留白）

cellspacing：cellspacing属性用来指定表格各单元格之间的空隙。此属性的参数值是数字，表示单元格间隙所占的像素点数。

4、CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有哪些？

6.后代选择器（li a）

7.通配符选择器(*)

优先级就近原则，同权重情况下样式定义最近者为准，载入样式以最后载入的定位为准;

:checked 单选框或复选框被选中。

6、怎么在网页中实现绝对定位？

①table-layout：设置表格是否自动调整宽高

②border-collapse：表格与单元格及单元格间的边框是否融合在一起。

10、你对浏览器兼容怎么看？通常你都做哪些处理？

GET：一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符

POST：一般用于修改服务器上的资源，对所发送的信息没有限制。

GET方式需要使用Request.QueryString来取得变量的值，而POST方式通过Request.Form来获取变量的值，也就是说Get是通过地址栏来传值，而Post是通过提交表单来传值。

然而，在以下情况中，请使用 POST 请求：

①无法使用缓存文件（更新服务器上的文件或数据库）向服务器发送大量数据（POST 没有数据量限制）。

②发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠。

①HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言

XHTML 元素必须被正确地嵌套。

XHTML 元素必须被关闭。

标签名必须用小写字母。

XHTML 文档必须拥有根元素。

13、行内元素有哪些?块级元素有哪些?空(void)元素有那些？

行内元素和块级元素的区别是什么？行内块元素的兼容性使用？（IE8 以下）

行内元素：会在水平方向排列，不能包含块级元素，设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效。

块级元素：各占据一行，垂直方向排列。从新行开始结束接着一个断行。

CSS引入的方式包括内联 内嵌 外链 导入

①link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS；

②页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载；

③import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题；

15、你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?介绍一下你对浏览器内核的理解

①渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。

②JS引擎：解析和执行java来实现网页的动态效果。

最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。

Css 精灵 把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量。

①静态图片，不随用户信息的变化而变化

②小图片，图片容量比较小

17、清除浮动的几种方式，各自的优缺点

（6）父级div也浮动，需要定义宽度。

比较好的是第3种方式，好多网站都这么用。

18、Doctype作用？标准模式与兼容模式各有什么区别?

①<!DOCTYPE>告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。

②标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

HTML5 只需要写<!DOCTYPEHTML>不需要对DTD进行引用，因为HTML5不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）。

而HTML4.01基于SGML,所以需要对DTD进行引用,才能告知浏览器文档所使用的文档类型。

①iframe会阻塞主页面的事件，搜索引擎的检索程序无法解读这种页面，不利于SEO；

②iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。

使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过java动态给iframe添加src属性值，这样可以绕开以上两个问题。

20、如何实现浏览器内多个标签页之间的通信?

localstorge另一个浏览上下文（另一个标签页）里被添加、修改或删除时，它都会触发一个事件，我们通过监听事件，控制它的值来进行页面信息通信。

21、如何在页面上实现一个圆形的可点击区域？

③纯js实现 需要求一个点在不在圆上简单算法、获取鼠标坐标等等

22、CSS3有哪些新特性？

//旋转,缩放,定位,倾斜

④ 增加了更多的CSS选择器 多背景 rgba

1、Html5与html4相比，各有何优缺点？ 怎样处理html5新标签的兼容性问题？

html5余html4的异同请看以下的链接

IE8/IE7/IE6支持通过document.方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还需要添加标签默认的样式。当然也可以直接使用成熟的框架、比如html5shim。

1、JS如何使页面跳转?怎么引入一个外部JS文件?

①直接在head标签内写入js代码，如下

②引入写好的js文件，使用语句

也是直接放入到head标签里头，也有的是放在</body>前面。

2、输入框的验证用什么事件?

null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。

（1）变量被声明了，但没有赋值时，就等于undefined。

（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。

（3）对象没有赋值的属性，该属性的值为undefined。

（4）函数没有返回值时，默认返回undefined。

（1） 作为函数的参数，表示该函数的参数不是对象。

（2） 作为对象原型链的终点。

它们都表示空，转换为boolean后都为false，但是null代表一个对象变量已经被初始化，但未装入对象；undefined表示未初始化变量

4、===与==有何异同？

相同点：都是判定两个值是否相等

不同点：==不会判断类型，而===会判断类型

5、如何判断一个变量的值是否为数字？以及有哪些手段判断变量值的数据类型？

全局函数isNaN可以判断一个变量的值是否为数字。

可以使用运算符type、instanceof判断变量值的数据类型。

join：使用指定间隔符连接所有元素为字符串

splice与slice都是截取一部分元素。不同的在于：slice返回截取后的新实例，splice在原array实例上操作，更详细的请见下文链接。

8、如何阻止表单提交？

9、如何动态操作表格？

match只会返回没有分组的全部匹配结果或者有分组的第一次匹配结果；

而exec可以利用循环返回全部匹配结果。

11、为验证手机号写一个正则。

12、正则的i标记与g标记各有何用途？

15、谈谈java数组排序方法sort()的使用，重点介绍sort()参数的使用及其内部机制。

JS数组排序方法sort()的使用

②innerHTML代表一个元素节点内由所有子节点，不包括当前节点组成的html代码；

③outerHTML代表一个元素节点内由所有子节点和当前节点组成的html代码；

④innerText代表一个元素节点内由所有子文本节点内容组成的文本；

①setTimeout和setInterval的语法相同。它们都有两个参数，一个是将要执行的代码字符串，还有一个是以毫秒为单位的时间间隔，当过了那个时间段之后就将执行那段代码。

②不过这两个函数还是有区别的，setInterval在执行完一次代码之后，经过了那个固定的时间间隔，它还会自动重复执行代码，而setTimeout只执行一次那段代码。

19、你在js中用过array吗？如果用过，array中添加数据用什么方法？

在任意位置添加使用splice(),但要注意把它的删除个数设置为0;

array详细介绍请看下文链接

20、简述java的优缺点。

优点：简单易用，与Java有类似的语法，可以使用任何文本编辑工具编写，只需要浏览器就可执行程序，并且事先不用编译，逐行执行，无需进行严格的变量声明，而且内置大量现成对象，编写少量程序可以完成目标；

缺点：不适合开发大型应用程序；

21、Java有哪些内置对象?

22、列举Java的本地对象。

24、例举3种强制类型转换和2种隐式类型转换?

25、IE和DOM事件流的区别

26、事件绑定和普通事件有什么区别

①事件绑定就是针对dom元素的事件，绑定在dom元素上

②普通事件即为非针对dom元素的事件

利用事件冒泡的原理，让自己的所触发的事件，由他的父元素代替执行！

通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。

28、闭包是什么，有什么特性，对页面有什么影响

“官方”的解释：所谓“闭包”，指的是一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。

通俗的讲就是函数a的内部函数b，被函数a外部的一个变量引用的时候，就创建了一个闭包。

①.封闭性：外界无法访问闭包内部的数据，如果在闭包内声明变量，外界是无法访问的，除非闭包主动向外界提供访问接口；

②.持久性：一般的函数，调用完毕之后，系统自动注销函数，而对于闭包来说，在外部函数被调用之后，闭包结构依然保存在；

使用闭包会占有内存资源，过多的使用闭包会导致内存溢出等。

深入理解Java的闭包特性 如何给循环中的对象添加事件

29、java的本地对象，内置对象和宿主对象

②内置对象为gload Math 等不可以实例化的

30、编写一个数组去重的方法

1.创建一个新的数组存放结果

3.for循环时，每次取出一个元素与对象进行对比，如果这个元素不重复，则把它存放到结果数组中，同时把这个元素的内容作为对象的一个属性，并赋值为1，存入到第2步建立的对象中。

说明：至于如何对比，就是每次从原数组中取出一个元素，然后到对象中去访问这个属性，如果能访问到值，则说明重复。

①this总是指向函数的直接调用者（而非间接调用者）；

②如果有new关键字，this指向new出来的那个对象；

③在事件中，this指向触发这个事件的对象，特殊的是，IE中的attachEvent中的this总是指向全局对象Window；

32、eval是做什么的？

①它的功能是把对应的字符串解析成JS代码并运行；

②应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）。

33、new操作符具体干了什么呢?

①创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。

②属性和方法被加入到 this 引用的对象中。

③新创建的对象由 this 所引用，并且最后隐式的返回 this 。

①apply()函数有两个参数：第一个参数是上下文，第二个参数是参数组成的数组。如果上下文是null，则使用全局对象代替。

②call()的第一个参数是上下文，后续是实例传入的参数序列。

35、请解释一下 Java 的同源策略

概念:同源策略是客户端脚本（尤其是Java）的重要的安全度量标准。它最早出自Netscape Navigator2.0，其目的是防止某个文档或脚本从多个不同源装载。

这里的同源策略指的是：协议，域名，端口相同，同源策略是一种安全协议。指一段脚本只能读取来自同一来源的窗口和文档的属性。

我们举例说明：比如一个黑客程序，他利用Iframe把真正的银行登录页面嵌到他的页面上，当你使用真实的用户名，密码登录时，他的页面就可以通过Java读取到你的表单中input中的内容，这样用户名，密码就轻松到手了。

2、如何使用Ajax从服务器获取数据？

①创建对象，注意兼容IE6的情况

②使用对象的open方法，其中有三个参数：

b.要访问的服务器的URL。

c.Boolean值，true表示异步，flase表示同步，一般情况下是异步，默认为true。

③ajax的回调函数。xhr.readyState==4表示请求已经结束，服务器响应完成。

status表示http请求的状态，200表示正常响应；404表示资源找不到；500表示服务器端错误。

④发送ajax请求。如果没有数据，可以不传或者传递null；如果post请求传递数据：首先设置xhr的请求头信息：

是我们得以实现异步通讯的根本。最早在IE5 中以ActiveX组件实现；最近，Mozilla 1.0和Safari 1.2中实现为本地对象。虽然不是W3C标准，但却得到了FireFox、Safari、Opera、Konqueror、IE等绝大多数浏览器的支持。

4、谈谈你对Ajax的理解。你在项目中如何使用Ajax？手写一个简单的Ajax操作。

Ajax（Asynchronous Java + XML），即异步Java + XML的缩写，主要用来页面异步刷新，也是构建RIA的一种基础技术。因为它涉及浏览器兼容、跨域等问题，在项目中一般会使用一些基础类库辅助实现，如jQuery等。

一个简单的Ajax操作如下。

5、谈谈你对JSON的理解。

所以它往往在AJAX中替代XML，交换数据。

6、你的项目中有使用到跨域吗？你在项目中是如何处理JS跨域问题的？

②主要是使用其它网站提供的java api如QQ。使用的src可以直接读取跨域资源。

③当然跨域还有其它处理方式：如代理服务器、改变domain、JSONP等。

7、你在项目中有使用到网页到服务器的即时通信吗？说说你都采用什么手段处理以及你所知道的处理办法？

8、你在AJAX中有遇到乱码吗？如果遇到，你是如何解决的？

②一般我首先统一页面和服务器编码，对请求和响应的Content-Type设置正确编码；对请求参数进行编码处理。

9、解释jsonp的原理，以及为什么不是真正的ajax

①Ajax与JSONP这两种技术看起来很像，目的也一样，都是请求一个url，然后把服务器返回的数据进行处理，因此jQuery等框架都把JSONP作为Ajax的一种形式。

②实际上Ajax与JSONP有着本质上的不同。Ajax的核心是通过获取数据，而JSONP的核心则是动态添加<>标签来调用服务器提供的js文件。

③Ajax与JSONP的区别也不在于是否跨域，Ajax通过服务端代理也可以跨域，JSONP也可获取同源数据。具体请看一下参考：

【原创】说说json和jsonp,也许你会豁然开朗，含jQuery用例

浏览器的同源策略-MDN

10、ajax 有那些优缺点?如何解决跨域问题?

①通过异步模式，提升了用户体验.

②优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用.

③Ajax在客户端运行，承担了一部分本来由服务器承担的工作，减少了大用户量下的服务器负载。

④Ajax可以实现动态不刷新（局部刷新）

①安全问题 AJAX暴露了与服务器交互的细节。

②对搜索引擎的支持比较弱。

11、Java原型，原型链 ? 有什么特点？

①原型对象也是普通的对象，是对象一个自带隐式的proto属性，原型也有可能有自己的原型，如果一个原型对象的原型不为null的话，我们就称之为原型链。

②原型链是由一些用来继承和共享属性的对象组成的（有限的）对象链。

1、你使用过jQuery吗？如果有，你为什么要使用jQuery呢？

②如果使用原生java开发的话，会面临很多问题，如浏览器兼容、Ajax数据解析、Dom、事件注册操作等都非常烦锁，而jQuery正好解决了这些问题。

③当然jQuery还有非常有用的其它特性，如为dom对象绑定数据、动画、等。并且jQuery还非常容易扩展，在它的基础上开发非常灵活，也有众多的插件可用，如jQueryUI、easyUI等。

jquery 就对java的一个扩展，封装，就是让java更好用，更简单。

3、在jQuery中如何注册事件？

使用bind()方法注册事件，但通常我们使用与事件同名的方法注册更方便，如：click()、hover()等。

4、如何获取Html内容？如何获取文本内容？如何获取属性值？如何获取input值？如何创建新的节点？

使用text()获取文本内容。

使用attr()可以获取属性值，使用css()可以获取样式属性值。

5、如何向页面插入节点？

调用append方法，将新节点作为参数。

①ajax：jQuery对ajax执行的核心方法。其它ajax方法都是使用该方法实现。

②get：专门用于发送get请求的便捷方法。

③post：专门用于发送post请求的便捷方法。

④ajaxSetup：设置调用ajax方法时的默认值。

⑤getJSON：专门用于向服务器请求json格式数据的便捷方法。

7、如何使用从服务器获取一个复杂数据（对象）？

①通常会把这个数据转换为通用的数据交换格式，如xml或json。由于xml解析比较麻烦，所以使用json比较多。

②在jQuery中有专门的获取服务器json数据的方法，getJSON()，在回调中，jQuery会自动将json转换为java对象。

①addClass：为元素设置class属性，如果该元素已经存在class属性，则在其值后添加空格及新的class值。

②css：操作元素的style属性的方法。

9、如何获取一个元素的实际位置？

bind()：注册特定事件。

hover()：同时注册鼠标移入、移出事件。

11、你知道jQuery插件吗？你了解jQuery执行原理和插件机制吗？你都用过哪些jQuery插件？

②其原理是扩展jQuery本身及其核心函数的原型实现。可以调用其extend实现对它的扩展。

1、HTTP状态码知道哪些？

100 Continue 继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息

201 Created 请求成功并且服务器创建了新的资源

202 Accepted 服务器已接受请求，但尚未处理

304 Not Modified 自从上次请求后，请求的网页未修改过。

400 Bad Request 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。

2、你有哪些性能优化的方法

（1） 减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。

（2） 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数。

（4） 当需要设置的样式很多时设置className而不是直接操作style。

（5） 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。

（7） 图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。

3、什么叫优雅降级和渐进增强？

优雅降级：Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效。

渐进增强：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用。

4、哪些常见操作会造成内存泄漏？

①内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。

②垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。

③setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。

④闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）

①一个程序至少有一个进程,一个进程至少有一个线程。

②线程的划分尺度小于进程，使得多线程程序的并发性高。

③另外，进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率。

④线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制。

⑤从逻辑角度来看，多线程的意义在于一个应用程序中，有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用，来实现进程的调度和管理以及资源分配。这就是进程和线程的重要区别。

6、一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？

（2）DNS解析、查找该域名对应的IP地址、重定向（301）、发出第二个GET请求

（3）进行HTTP协议会话

（4）客户端发送报头(请求报头)

（5）服务器回馈报头(响应报头)

（6）html文档开始下载

（7）文档树建立，根据标记请求所需指定MIME类型的文件

②你常用的开发工具是什么，为什么？

③对前端界面工程师这个职位是怎么样理解的？它的前景会怎么样？