前端面试题集锦
来源：http://www.qdfuns.com/notes/23515/fa8b1e788ac39b04108fc33e5b543c4a.htmljavascript
整理了一些关于前端的面试题
HTML&CSS
1.请描述一下 cookie，sessionStorage 和 localStorage 的区别？
cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（一般通过加密）。
cookie数据始终在同源的http请求中携带（即便不须要），也会在浏览器和服务器间来回传递。
sessionStorage 和 localStorage不会自动把数据发给服务器，仅在本地保存。
存储大小：
cookie 数据大小不能超过4k 。
sessionStorage 和 localStorage 虽然也有存储大小的限制，但比cookie大得多，能够达到5M或更大。
有效期时长：
localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
sessionStorage 数据在当前浏览器窗口关闭后自动删除。
cookie 设置的cookie过时时间以前一直有效，即便窗口或浏览器关闭html
2.iframe有那些缺点？
iframe会阻塞主页面的Onload事件；
搜索引擎的检索程序没法解读这种页面，不利于SEO;
iframe和主页面共享链接池，而浏览器对相同域的链接有限制，因此会影响页面的并行加载。
使用iframe以前须要考虑这两个缺点。若是须要使用iframe，最好是经过javascript动态给iframe添加src属性值，这样能够绕开以上两个问题。前端
优势：局部刷新 不用每次请求就刷新整个页面。java
3.如何实现浏览器内多个标签页之间的通讯?
WebSocket、SharedWorker
也能够调用localstorge、cookies等本地存储方式。
localstorge另外一个浏览上下文里被添加、修改或删除时，它都会触发一个事件，咱们经过监听事件，控制它的值来进行页面信息通讯。
注意quirks：Safari 在无痕模式下设置localstorge值时会抛出 QuotaExceededError 的异常。面试
4.如何在页面上实现一个圆形的可点击区域？
（1）map+area或者svg
（2）border-radius
（3）纯js实现 须要求一个点在不在圆上简单算法、获取鼠标坐标等等ajax
5.介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不一样的？
（1）有两种： IE 盒子模型、W3C 盒子模型。
（2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)。
（3）区 别： IE的content部分把 border 和 padding计算了进去。算法
6.CSS优先级算法如何计算？
优先级就近原则，同权重状况下样式定义最近者为准;
载入样式以最后载入的定位为准;
优先级为:
!important > id > class > tag
important比内联优先级高(style)数据库
7.为何要使用CSS sprites（精灵）
CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background-position”的组合进行背景定位，这样能够减小不少图片请求的开销，由于请求耗时比较长；请求虽然能够并发，可是若是请求太多会给服务器增长很大的压力。（性能优化）json
8.display:none 和 visibility:hidden的区别？
display:none 隐藏对应的元素，在文档布局中再也不给它分配空间，它各边的元素会合拢，就当他历来不存在 ，不占位。
visibility:hidden 隐藏对应的元素，可是在文档布局中仍保留原来的空间，占位。跨域
9.position的absolute与fixed区别
absolute 浮动定位是相对于父级中设置position为relative或者absolute最近的父级元素（往上找不到父集的relation 就以html定位）。
fixed浮动定位是相对于浏览器视窗的。
10.IE 8如下版本的浏览器中的盒模型有什么不一样？
IE8如下浏览器的盒模型中定义的元素的宽高不包括内边距和边框
JavaScript
1.JS数组去重
如下是展现三种方法：
-
Array.prototype.unique1 = function () {var n = []; //一个新的临时数组for (var i = 0; i < this.length; i++) //遍历当前数组{//如果当前数组的第i已经保存进了临时数组，那么跳过，//否则把当前项push到临时数组里面if (n.indexOf(this[i]) == -1) n.push(this[i]);}return n;}Array.prototype.unique2 = function(){var n = {},r=[]; //n为hash表，r为临时数组for(var i = 0; i < this.length; i++) //遍历当前数组{if (!n[this[i]]) //如果hash表中没有当前项{n[this[i]] = true; //存入hash表r.push(this[i]); //把当前数组的当前项push到临时数组里面}}return r;}Array.prototype.unique3 = function(){var n = [this[0]]; //结果数组for(var i = 1; i < this.length; i++) //从第二项开始遍历{//如果当前数组的第i项在当前数组中第一次出现的位置不是i，//那么表示第i项是重复的，忽略掉。否则存入结果数组if (this.indexOf(this[i]) == i) n.push(this[i]);
2.js操做获取和设置cookie
-
//创建cookiefunction setCookie(name, value, expires, path, domain, secure) {var cookieText = encodeURIComponent(name) + '=' + encodeURIComponent(value);if (expires instanceof Date) {cookieText += '; expires=' + expires;}if (path) {cookieText += '; expires=' + expires;}if (domain) {cookieText += '; domain=' + domain;}if (secure) {cookieText += '; secure';}document.cookie = cookieText;}//获取cookiefunction getCookie(name) {var cookieName = encodeURIComponent(name) + '=';var cookieStart = document.cookie.indexOf(cookieName);var cookieValue = null;if (cookieStart > -1) {var cookieEnd = document.cookie.indexOf(';', cookieStart);if (cookieEnd == -1) {cookieEnd = document.cookie.length;}cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));}return cookieValue;}
3.ajax 有那些优缺点?如何解决跨域问题?
（Q1）
优势：
（1）经过异步模式，提高了用户体验.
（2）优化了浏览器和服务器之间的传输，减小没必要要的数据往返，减小了带宽占用.
（3）Ajax在客户端运行，承担了一部分原本由服务器承担的工做，减小了大用户量下的服务器负载。
（4）Ajax能够实现动态不刷新（局部刷新）
缺点：
（1）安全问题 AJAX暴露了与服务器交互的细节。
（2）对搜索引擎的支持比较弱。
（3）不容易调试。
（Q2）jsonp、 iframe、window.name、window.postMessage、服务器上设置代理页面。
4.JavaScript原型，原型链 ? 有什么特色？
（1）原型对象也是普通的对象，是对象一个自带隐式的 __proto__ 属性，原型也有可能有本身的原型，若是一个原型对象的原型不为null的话，咱们就称之为原型链。
（2）原型链是由一些用来继承和共享属性的对象组成的（有限的）对象链。
5.GET和POST的区别，什么时候使用POST？
GET：通常用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，通常在2000个字符
POST：通常用于修改服务器上的资源，对所发送的信息没有限制。
GET方式须要使用Request.QueryString来取得变量的值，而POST方式经过Request.Form来获取变量的值，
也就是说Get是经过地址栏来传值，而Post是经过提交表单来传值。
然而，在如下状况中，请使用 POST 请求：
没法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
6.请解释一下 JavaScript 的同源策略
概念:同源策略是客户端脚本（尤为是Javascript）的重要的安全度量标准。它最先出自Netscape Navigator2.0，其目的是防止某个文档或脚本从多个不一样源装载。
这里的同源策略指的是：协议，域名，端口相同，同源策略是一种安全协议。
指一段脚本只能读取来自同一来源的窗口和文档的属性。
为何要有同源限制？
咱们举例说明：好比一个黑客程序，他利用Iframe把真正的银行登陆页面嵌到他的页面上，当你使用真实的用户名，密码登陆时，他的页面就能够经过Javascript读取到你的表单中input中的内容，这样用户名，密码就轻松到手了。
7.Flash、Ajax各自的优缺点，在使用中如何取舍？
Flash适合处理多媒体、矢量图形、访问机器；对CSS、处理文本上不足，不容易被搜索。
Ajax对CSS、文本支持很好，支持搜索；多媒体、矢量图形、机器访问不足。
共同点：与服务器的无刷新传递消息、用户离线和在线状态、操做DOM
8.什么是闭包？
闭包，官方对闭包的解释是：一个拥有许多变量和绑定了这些变量的环境的表达式（一般是一个函数），于是这些变量也是该表达式的一部分。闭包的特色：
（1）做为一个函数变量的一个引用，当函数返回时，其处于激活状态。
（2） 一个闭包就是当一个函数返回时，一个没有释放资源的栈区。
简单的说，Javascript容许使用内部函数---即函数定义和函数表达式位于另外一个函数的函数体内。并且，这些内部函数能够访问它们所在的外部函数中声明的全部局部变量、参数和声明的其余内部函数。当其中一个这样的内部函数在包含它们的外部函数以外被调用时，就会造成闭包。
9.javascript里面的继承怎么实现，如何避免原型链上面的对象共享
用构造函数和原型链的混合模式去实现继承，避免对象共享能够参考经典的extend()函数，不少前端框架都有封装的，就是用一个空函数当作中间变量
10.ajax过程
(1)建立XMLHttpRequest对象,也就是建立一个异步调用对象.
(2)建立一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
(3)设置响应HTTP请求状态变化的函数.
(4)发送HTTP请求.
(5)获取异步调用返回的数据.
(6)使用JavaScript和DOM实现局部刷新.
jQuery四种事件绑定方式.bind(),.live(),.delegate(),on()的区别
优势：
- 这个方法提供了一种在各类浏览器之间对事件处理的兼容性解决方案
- 很是方便简单的绑定事件到元素上
- .click(), .hover()...这些很是方便的事件绑定，都是bind的一种简化处理方式
- 对于利用ID选出来的元素是很是好的，不只仅是很快的能够hook上去(由于一个页面只有一个id),并且当事件发生时，handler能够当即被执行(相对于后面的live, delegate)实现方式
缺点：
- 它会绑定事件到全部的选出来的元素上
- 它不会绑定到在它执行完后动态添加的那些元素上
- 当元素不少时，会出现效率问题
- 当页面加载完的时候，你才能够进行bind()，因此可能产生效率问题
.live() 的优势和缺点
优势：
- 这里仅有一次的事件绑定，绑定到document上而不像.bind()那样给全部的元素挨个绑定
- 那些动态添加的elemtns依然能够触发那些早先绑定的事件，由于事件真正的绑定是在document上
- 你能够在document ready以前就能够绑定那些须要的事件
缺点：
- 从1.7开始已经不被推荐了，因此你也要开始逐步淘汰它了。
- Chaining没有被正确的支持
- 当使用event.stopPropagation()是没用的，由于都要到达document
- 由于全部的selector/event都被绑定到document, 因此当咱们使用matchSelector方法来选出那个事件被调用时，会很是慢
- 当发生事件的元素在你的DOM树中很深的时候，会有performance问题
.delegate() 的优势和缺点
优势：
- 你能够选择你把这个事件放到那个元素上了
- chaining被正确的支持了
- jQuery仍然须要迭代查找全部的selector/event data来决定那个子元素来匹配，可是由于你能够决定放在那个根元素上，因此能够有效的减少你所要查找的元素。
- 能够用在动态添加的元素上
缺点：
- 须要查找那个那个元素上发生了那个事件了，尽管比document少不少了，不过，你仍是得浪费时间来查找。
注：.delegate() 比 .live() 好
.On()的优势和缺点
优势：
- 提供了一种统一绑定事件的方法
- 仍然提供了.delegate()的优势，固然若是须要你也能够直接用.bind()
缺点：
- 也许会对你产生一些困扰，由于它隐藏了一前面咱们所介绍的三种方法的细节。
结论：
- 用.bind()的代价是很是大的，它会把相同的一个事件处理程序hook到全部匹配的DOM元素上
- 不要再用.live()了，它已经再也不被推荐了，并且还有许多问题
- .delegate()会提供很好的方法来提升效率，同时咱们能够添加一事件处理方法到动态添加的元素上。
- 咱们能够用.on()来代替上述的3种方法
如何理解闭包？
1.闭包的概念
各类专业文献上的“闭包”（closure）定义很是抽象，很难看懂。个人理解是，闭包就是可以读取其余函数内部变量的函数。
因为在Javascript语言中，只有函数内部的子函数才能读取局部变量，所以能够把闭包简单理解成“定义在一个函数内部的函数”。
因此，在本质上，闭包就是将函数内部和函数外部链接起来的一座桥梁。
2.闭包的用途
闭包能够用在许多地方。它的最大用处有两个，一个是前面提到的能够读取函数内部的变量，另外一个就是让这些变量的值始终保持在内存中。
跨域请求资源的方法有哪些？
1.单向跨域 jsonp
2.双向跨域 document.domain实现跨域
谈谈垃圾回收机制方式及内存管理
开发过程当中遇到的内存泄露状况，如何解决的？
其余
1.一个页面从输入 URL 到页面加载显示完成，这个过程当中都发生了什么？
（1）查找浏览器缓存
（2）DNS解析、查找该域名对应的IP地址、重定向（301）、发出第二个GET请求
（3）进行HTTP协议会话
（4）客户端发送报头(请求报头)
（5）服务器回馈报头(响应报头)
（6）html文档开始下载
（7）文档树创建，根据标记请求所需指定MIME类型的文件
（8）文件显示
2.为何换工做？
3.你经常使用的开发工具是什么，为何？
4.对前端界面工程师这个职位是怎么样理解的？它的前景会怎么样？
5.加班的见解？加班就像借钱，原则应当是------救急不救穷
- 1. 前端面试题集锦
- 2. Web前端面试题库_2018前端最全面试题_react面试题锦集_javascript面试题锦集_vue面试题锦集_css面试题锦集
- 3. 前端面试题集锦——前言
- 4. 前端面试集锦
- 5. 前端面试集锦（2）
- 6. 前端面试集锦（3）
- 7. web前端面试题集锦（转）
- 8. WEB前端面试题集锦
- 9. 2018前端面试题集锦
- 10. 前端面试问题集锦
- 更多相关文章...
- • MySQL客户端和服务器端工具集 - MySQL教程
- • Lua 调试(Debug) - Lua 教程
- • 使用阿里云OSS+CDN部署前端页面与加速静态资源
- • ☆技术问答集锦（13）Java Instrument原理
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 前端面试题集锦
- 2. Web前端面试题库_2018前端最全面试题_react面试题锦集_javascript面试题锦集_vue面试题锦集_css面试题锦集
- 3. 前端面试题集锦——前言
- 4. 前端面试集锦
- 5. 前端面试集锦（2）
- 6. 前端面试集锦（3）
- 7. web前端面试题集锦（转）
- 8. WEB前端面试题集锦
- 9. 2018前端面试题集锦
- 10. 前端面试问题集锦