很早之前就在看web前端面试题，一直想总结一个比较全面又详细的面试题库，现在总结了一些，分享给大家，以后还会持续更新，有些题目有多种答案，本文只给出其中一种，哪里有问题的欢迎指出。
Html&CSS
1、谈谈你对web标准的理解
3、cellpadding与cellspacing有何区别？
cellpadding：代表单元格边框到内容之间的距离（留白）
cellspacing：cellspacing属性用来指定表格各单元格之间的空隙。此属性的参数值是数字，表示单元格间隙所占的像素点数。
4、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-size font-family color, UL LI DL DD DT;
不可继承的样式：
border padding margin width height
优先级
优先级就近原则，同权重情况下样式定义最近者为准，载入样式以最后载入的定位为准;
优先级为:
!important > id > class > tag
important 比 内联优先级高
CSS3新增伪类举例
p:first-of-type 选择属于其父元素的首个<p>元素的每个<p>元素。
p:last-of-type 选择属于其父元素的最后<p>元素的每个<p>元素。
p:only-of-type 选择属于其父元素唯一的<p>元素的每个<p>元素。
p:only-child 选择属于其父元素的唯一子元素的每个<p>元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个<p>元素。
:enabled :disabled 控制表单控件的禁用状态。
:checked 单选框或复选框被选中。
5、display与visibility有何异同？
display可以有很多值，visibility只有两个常用值：visible、hidden。
当display为none、visibility为hidden时都会隐藏元素。但display会隐藏掉元素空间，visibility会保留元素空间。
6、怎么在网页中实现绝对定位？
absolute
Html5
1、Html5与html4相比，各有何优缺点？ 怎样处理html5新标签的兼容性问题？
html5余html4的异同请看以下的链接
28、闭包是什么，有什么特性，对页面有什么影响
什么是闭包
“官方”的解释：所谓“闭包”，指的是一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。
在 Scala、Scheme、Common Lisp、Smalltalk、Groovy、JavaScript、Ruby、 Python、Go、Lua、objective c、swift 以及Java（Java8及以上）等语言中都能找到对闭包不同程度的支持。
通俗的讲就是函数a的内部函数b，被函数a外部的一个变量引用的时候，就创建了一个闭包。
闭包的特性：
①.封闭性：外界无法访问闭包内部的数据，如果在闭包内声明变量，外界是无法访问的，除非闭包主动向外界提供访问接口；
②.持久性：一般的函数，调用完毕之后，系统自动注销函数，而对于闭包来说，在外部函数被调用之后，闭包结构依然保存在；
对页面的影响
使用闭包会占有内存资源，过多的使用闭包会导致内存溢出等。
详细请看以下推荐链接
深入理解JavaScript的闭包特性 如何给循环中的对象添加事件
29、javascript的本地对象，内置对象和宿主对象
①本地对象为array obj regexp等可以new实例化
②内置对象为gload Math 等不可以实例化的
③宿主为浏览器自带的document,window 等
30、编写一个数组去重的方法
思路：
1.创建一个新的数组存放结果
2.创建一个空对象
3.for循环时，每次取出一个元素与对象进行对比，如果这个元素不重复，则把它存放到结果数组中，同时把这个元素的内容作为对象的一个属性，并赋值为1，存入到第2步建立的对象中。
说明：至于如何对比，就是每次从原数组中取出一个元素，然后到对象中去访问这个属性，如果能访问到值，则说明重复。
代码如下：
Array.prototype.unique3 =function(){varres = [];varjson = {};for(vari =0; i
31、this对象的理解
①this总是指向函数的直接调用者（而非间接调用者）；
②如果有new关键字，this指向new出来的那个对象；
③在事件中，this指向触发这个事件的对象，特殊的是，IE中的attachEvent中的this总是指向全局对象Window；
32、eval是做什么的？
①它的功能是把对应的字符串解析成JS代码并运行；
②应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）。
③由JSON字符串转换为JSON对象的时候可以用eval，var obj =eval('('+ str +')');
33、new操作符具体干了什么呢?
①创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。
②属性和方法被加入到 this 引用的对象中。
③新创建的对象由 this 所引用，并且最后隐式的返回 this 。
34、call() 和 apply() 的区别和作用？
①apply()函数有两个参数：第一个参数是上下文，第二个参数是参数组成的数组。如果上下文是null，则使用全局对象代替。
如：function.apply(this,[1,2,3])；
②call()的第一个参数是上下文，后续是实例传入的参数序列。
如：function.call(this,1,2,3)；
如何获取UA
JS代码
functionwhatBrowser(){document.Browser.Name.value=navigator.appName;document.Browser.Version.value=navigator.appVersion;document.Browser.Code.value=navigator.appCodeName;document.Browser.Agent.value=navigator.userAgent; }
35、请解释一下 JavaScript 的同源策略
概念:同源策略是客户端脚本（尤其是Javascript）的重要的安全度量标准。它最早出自Netscape Navigator2.0，其目的是防止某个文档或脚本从多个不同源装载。
这里的同源策略指的是：协议，域名，端口相同，同源策略是一种安全协议。指一段脚本只能读取来自同一来源的窗口和文档的属性。
为什么要有同源限制？
我们举例说明：比如一个黑客程序，他利用Iframe把真正的银行登录页面嵌到他的页面上，当你使用真实的用户名，密码登录时，他的页面就可以通过Javascript读取到你的表单中input中的内容，这样用户名，密码就轻松到手了。
36、请描述一下 cookies，sessionStorage 和 localStorage 的区别？
cookie在浏览器和服务器间来回传递。 sessionStorage和localStorage不会
sessionStorage和localStorage的存储空间更大；
sessionStorage和localStorage有更多丰富易用的接口；
sessionStorage和localStorage各自独立的存储空间；
Ajax
1、什么是Ajax？
Ajax（Asynchronous JavaScript + XML），即异步JavaScript + XML的缩写，主要用来页面异步刷新，也是构建RIA的一种基础技术。
2、如何使用Ajax从服务器获取数据？
①创建XMLHttpRequest对象，注意兼容IE6的情况
②使用XMLHttpRequest对象的open方法，其中有三个参数：
a.字符串，代表html的请求:GET,POST。
b.要访问的服务器的URL。
c.Boolean值，true表示异步，flase表示同步，一般情况下是异步，默认为true。
③ajax的回调函数。xhr.readyState==4表示请求已经结束，服务器响应完成。
status表示http请求的状态，200表示正常响应；404表示资源找不到；500表示服务器端错误。
④发送ajax请求。如果没有数据，可以不传或者传递null；如果post请求传递数据：首先设置xhr的请求头信息：
xhr.setRequestHeader("Content-type","application/x-www-formurlencoded");
再传递参数：
xhr.send(name=liujianhong&password=123);
3、解释XMLHttpRequest是什么？
XMLHttpRequest是我们得以实现异步通讯的根本。最早在IE5 中以ActiveX组件实现；最近，Mozilla 1.0和Safari 1.2中实现为本地对象。XMLHttpRequest虽然不是W3C标准，但却得到了FireFox、Safari、Opera、Konqueror、IE等绝大多数浏览器的支持。
4、谈谈你对Ajax的理解。你在项目中如何使用Ajax？手写一个简单的Ajax操作。
Ajax（Asynchronous JavaScript + XML），即异步JavaScript + XML的缩写，主要用来页面异步刷新，也是构建RIA的一种基础技术。因为它涉及浏览器兼容、跨域等问题，在项目中一般会使用一些基础类库辅助实现，如jQuery等。
一个简单的Ajax操作如下。
varxhr =newXMLHttpRequest();//在环境中需要做浏览器兼容，这里省略了xhr.onreadystatechange =function(){//这里注册当xhr状态发生改变后调用事件if( xhr.readyState ==4) {//通常在读取状态为4的时候才能获取到部分数据所以一般状态在4的时候才进行处理if(status==200) {//当正常请求到资源时的处理,可以调用xhr.responseText或xhr.responseXml获取数据 }else{//当请求资源失败时的处理} }}xhr.open("GET", url);//设置xhr的请求方式和url,这里使用的是GET方式，//如果有参数，则连接在url后面/*
如果是POST请求，还当设置请求的Content-Type
数据使用send作为参数发送
*/xhr.send();
5、谈谈你对JSON的理解。
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。 易于人阅读和编写。同时也易于机器解析和生成。 它基于JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C, C++, C#, Java, JavaScript, Perl, Python等）。 这些特性使JSON成为理想的数据交换语言。
所以它往往在AJAX中替代XML，交换数据。
6、你的项目中有使用到跨域吗？你在项目中是如何处理JS跨域问题的？
①有。
②主要是使用其它网站提供的javascript api如QQ。使用script的src可以直接读取跨域资源。
③当然跨域还有其它处理方式：如代理服务器、改变domain、JSONP等。
7、你在项目中有使用到网页到服务器的即时通信吗？说说你都采用什么手段处理以及你所知道的处理办法？
没有用到，但我知道html的websockets、flash的socket、ajax长轮询等都可以实现。
8、你在AJAX中有遇到乱码吗？如果遇到，你是如何解决的？
①遇到过。
②一般我首先统一页面和服务器编码，对请求和响应的Content-Type设置正确编码；对请求参数进行编码处理。
9、解释jsonp的原理，以及为什么不是真正的ajax
①Ajax与JSONP这两种技术看起来很像，目的也一样，都是请求一个url，然后把服务器返回的数据进行处理，因此jQuery等框架都把JSONP作为Ajax的一种形式。
②实际上Ajax与JSONP有着本质上的不同。Ajax的核心是通过XMLHttpRequest获取数据，而JSONP的核心则是动态添加标签来调用服务器提供的js文件。
③Ajax与JSONP的区别也不在于是否跨域，Ajax通过服务端代理也可以跨域，JSONP也可获取同源数据。具体请看一下参考：
【原创】说说json和jsonp,也许你会豁然开朗，含jQuery用例
10、ajax 有那些优缺点?如何解决跨域问题?
优点：
①通过异步模式，提升了用户体验.
②优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用.
③Ajax在客户端运行，承担了一部分本来由服务器承担的工作，减少了大用户量下的服务器负载。
④Ajax可以实现动态不刷新（局部刷新）
缺点：
①安全问题 AJAX暴露了与服务器交互的细节。
②对搜索引擎的支持比较弱。
③不容易调试。
跨域问题：
jsonp、 iframe、window.name、window.postMessage、服务器上设置代理页面。
11、JavaScript原型，原型链 ? 有什么特点？
①原型对象也是普通的对象，是对象一个自带隐式的proto属性，原型也有可能有自己的原型，如果一个原型对象的原型不为null的话，我们就称之为原型链。
②原型链是由一些用来继承和共享属性的对象组成的（有限的）对象链。
JQuery
1、你使用过jQuery吗？如果有，你为什么要使用jQuery呢？
①用过。
②如果使用原生javascript开发的话，会面临很多问题，如浏览器兼容、Ajax数据解析、Dom、事件注册操作等都非常烦锁，而jQuery正好解决了这些问题。
③当然jQuery还有非常有用的其它特性，如为dom对象绑定数据、动画、等。并且jQuery还非常容易扩展，在它的基础上开发非常灵活，也有众多的插件可用，如jQueryUI、easyUI等。
2、Javascript与jQuery有什么区别？
jquery 就对javascript的一个扩展，封装，就是让javascript更好用，更简单。
3、在jQuery中如何注册事件？
使用bind()方法注册事件，但通常我们使用与事件同名的方法注册更方便，如：click()、hover()等。
4、如何获取Html内容？如何获取文本内容？如何获取属性值？如何获取input值？如何创建新的节点？
可以使用html()获取html内容。
使用text()获取文本内容。
使用attr()可以获取属性值，使用css()可以获取样式属性值。
通过val()便可以获取input的值
把节点元素名加上<、>作为参数调用jQuery方法便可创建新节点,如：jQuery(“
5、如何向页面插入节点？
调用append方法，将新节点作为参数。
6、ajax、get、post、ajaxSetup、getJSON各有何用途？
①ajax：jQuery对ajax执行的核心方法。其它ajax方法都是使用该方法实现。
②get：专门用于发送get请求的便捷方法。
③post：专门用于发送post请求的便捷方法。
④ajaxSetup：设置调用ajax方法时的默认值。
⑤getJSON：专门用于向服务器请求json格式数据的便捷方法。
7、如何使用从服务器获取一个复杂数据（对象）？
①通常会把这个数据转换为通用的数据交换格式，如xml或json。由于xml解析比较麻烦，所以使用json比较多。
②在jQuery中有专门的获取服务器json数据的方法，getJSON()，在回调中，jQuery会自动将json转换为javascript对象。
8、addClass、css有何用途？
①addClass：为元素设置class属性，如果该元素已经存在class属性，则在其值后添加空格及新的class值。
②css：操作元素的style属性的方法。
9、如何获取一个元素的实际位置？
使用position()或offset()都可以。
10、bind()、unbind()、hover()有何用途？
bind()：注册特定事件。
unbind()：删除特定事件。
hover()：同时注册鼠标移入、移出事件。
11、你知道jQuery插件吗？你了解jQuery执行原理和插件机制吗？你都用过哪些jQuery插件？
①知道jQuery插件。
②其原理是扩展jQuery本身及其核心函数的原型实现。可以调用其extend实现对它的扩展。
③jQuery插件有很多，常见的有：jQueryUI、jQuery-Cookie、jQuery-Timer等。
其它
1、HTTP状态码知道哪些？
100 Continue 继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息
200 OK 正常返回信息
201 Created 请求成功并且服务器创建了新的资源
202 Accepted 服务器已接受请求，但尚未处理
301 Moved Permanently 请求的网页已永久移动到新位置。
302 Found 临时性重定向。
303 See Other 临时性重定向，且总是使用 GET 请求新的 URI。
304 Not Modified 自从上次请求后，请求的网页未修改过。
400 Bad Request 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。
401 Unauthorized 请求未授权。
403 Forbidden 禁止访问。
404 Not Found 找不到如何与 URI 相匹配的资源。
500 Internal Server Error 最常见的服务器端错误。
503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）。
2、你有哪些性能优化的方法
（1） 减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。
（2） 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数。
（3） 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。
（4） 当需要设置的样式很多时设置className而不是直接操作style。
（5） 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
（6） 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。
（7） 图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。
3、什么叫优雅降级和渐进增强？
优雅降级：Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效。
渐进增强：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用。
4、哪些常见操作会造成内存泄漏？
①内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。
②垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。
③setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。
④闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）
5、线程与进程的区别
①一个程序至少有一个进程,一个进程至少有一个线程。
②线程的划分尺度小于进程，使得多线程程序的并发性高。
③另外，进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率。
④线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制。
⑤从逻辑角度来看，多线程的意义在于一个应用程序中，有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用，来实现进程的调度和管理以及资源分配。这就是进程和线程的重要区别。
6、一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？
（1）查找浏览器缓存
（2）DNS解析、查找该域名对应的IP地址、重定向（301）、发出第二个GET请求
（3）进行HTTP协议会话
（4）客户端发送报头(请求报头)
（5）服务器回馈报头(响应报头)
（6）html文档开始下载
（7）文档树建立，根据标记请求所需指定MIME类型的文件
（8）文件显示
以下自行发挥
①换工作的原因
②你常用的开发工具是什么，为什么？
③对前端界面工程师这个职位是怎么样理解的？它的前景会怎么样？
④对加班有何看法？
⑤有没有对象？
