前端开发面试知识点大纲：
HTML&CSS：
对Web标准的理解 浏览器内核差异 兼容性 hackCSS基本功： 布局 √ 盒子模型 √ 选择器优先级及使用 √ HTML5、CSS3 移动端适应 √
JavaScript：
数据类型 √ 面向对象 继承 √ 闭包 √ 插件 作用域 跨域 原型链 模块化 自定义事件 内存泄漏 事件机制 异步装载回调 模板引擎 Nodejs JSON ajax等其他： HTTP、安全、正则、优化、重构、响应式、移动端、团队协作、可维护、SEO、UED、架构、职业生涯
#cookie的优缺点
优点 *极高的扩展性和可用性 1、通过良好的编程，控制保存在cookie中的session对象的大小 2、通过加密和安全传输技术（SSL），减少cookie被破解的可能性 3、只在cookie中存放不敏感数据，即使被盗也不会有重大损失 4、控制cookie的生命期，使之不会永远有效。偷盗者很可能拿到一个过期的cookie。
缺点 *Cookie数量和长度的限制。每个domain最多只能有20条cookie，每个cookie长度不能超过4KB，否则会被截掉。
*安全性问题。如果cookie被人拦截了，那人就可以取得所有的session信息。即使加密也与事无补，因为拦截者并不需要知道cookie的意义，他只要原样转发cookie就可以达到目的了。
*有些状态不可能保存在客户端例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端，那么它起不到任何作用。
#web storage和cookie的区别
Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。
除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。
####但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生
浏览器的支持除了IE７及以下不支持外，其他标准浏览器都完全支持(ie及FF需在web服务器里运行)，值得一提的是IE总是办好事，例如IE7、IE6中的UserData其实就是javascript本地存储的解决方案。通过简单的代码封装可以统一到所有的浏览器都支持web storage。
localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等
#CSS中 link 和@import 的区别是？
(1) link属于HTML标签，而@import是CSS提供的;
(2) 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
(3) import只在IE5以上才能识别，而link是HTML标签，无兼容问题;
(4) link方式的样式的权重 高于@import的权重.
#position的absolute与fixed共同点与不同点
A：共同点：
1.改变行内元素的呈现方式，display被置为block；
2.让元素脱离普通流，不占据空间；
3.默认会覆盖到非定位元素上
B不同点：
absolute的”根元素“是可以设置的，而fixed的”根元素“固定为浏览器窗口。当你滚动网页，fixed元素与浏览器窗口之间的距离是不变的。
#IE盒子模型和标准W3C盒子模型的区别
可以看到 IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading。
#列举可继承和不可继承的属性
*不可继承的：display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi。
display overflow
盒子模型margin border padding
背景和宽高和位置定位
background
height min-height max-height
width min-width max-width
position left right top bottom z-index
浮动相关 float clear
一些比较冷门的位置设置 table-layout vertical-align page-break-after page-bread-before unicode-bidi
*所有元素可继承：visibility和cursor。
*内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。
都跟字体有关
*终端块状元素可继承：text-indent和text-align。
*列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。
*表格元素可继承：border-collapse。
#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 单选框或复选框被选中。
#CSS中能够将对象从文档流中抽出的方式
absolute fixed
float也脱离文档流。浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。
#列出display的值，说明他们的作用。position的值， relative和absolute定位原点是？
block 象块类型元素一样显示。 inline 缺省值。象行内元素类型一样显示。 inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。 list-item 象块类型元素一样显示，并添加样式列表标记。 2. *absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 *fixed （老IE不支持） 生成绝对定位的元素，相对于浏览器窗口进行定位。 *relative 生成相对定位的元素，相对于其正常位置进行定位。
- static 默认值。没有定位，元素出现在正常的流中 *（忽略 top, bottom, left, right z-index 声明）。
- inherit 规定从父元素继承 position 属性的值。
#CSS3有哪些新特性？
CSS3实现圆角（border-radius），阴影（box-shadow）， 对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform） transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜 增加了更多的CSS选择器 多背景 rgba 在CSS3中唯一引入的伪元素是::selection. （::selection 是选取文本后的效果） 媒体查询，多栏布局 border-image 还有一堆伪类
#为什么要初始化CSS样式。
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。
*最简单的初始化方法就是： * {padding: 0; margin: 0;} （不建议）
#对BFC规范的理解？
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
（W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关 系和相互作用。）#你知道多少种Doctype文档类型？
该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。 HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。 XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。 Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，而 Quirks （包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。
#HTML与XHTML——二者有什么区别
区别： 1.所有的标记都必须要有一个相应的结束标记 2.所有标签的元素和属性的名字都必须使用小写 3.所有的XML标记都必须合理嵌套 4.所有的属性必须用引号""括起来 5.把所有<和&特殊符号用编码表示 6.给所有属性赋一个值 7.不要在注释内容中使“--” 8.图片必须有说明文字
#清除浮动的几种方法：
1，额外标签法，<div style="clear:both;"></div>（缺点：不过这个办法会增加额外的标签使HTML结构看起来不够简洁。） 2，使用after伪类 #parent:after{ content:"."; height:0; visibility:hidden; display:block; clear:both; } 3,浮动外部元素 4,设置overflow为hidden或者auto
#html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？
- HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
- 拖拽释放(Drag and drop) API 语义化更好的内容标签（header,nav,footer,aside,article,section） 音频、视频API(audio,video) 画布(Canvas) API 地理(Geolocation) API 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失； sessionStorage 的数据在浏览器关闭后自动删除 表单控件，calendar、date、time、email、url、search 新的技术webworker, websocket, Geolocation
- 移除的元素 纯表现的元素：basefont，big，center，font, s，strike，tt，u； 对可用性产生负面影响的元素：frame，frameset，noframes； 支持HTML5新标签：
- IE8/IE7/IE6支持通过document.createElement方法产生的标签， 可以利用这一特性让这些浏览器支持HTML5新标签， 浏览器支持新标签后，还需要添加标签默认的样式：
- 当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
<!--[if lt IE 9]> <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script> <![endif]-->
如何区分： DOCTYPE声明\新增的结构元素\功能元素
#webSocket如何兼容低浏览器？
Adobe Flash Socket 、 ActiveX HTMLFile (IE) 、 基于 multipart 编码发送 XHR 、 基于长轮询的 XHR
#new操作符具体干了什么呢?
1、创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。 2、属性和方法被加入到 this引用的对象中。 3、新创建的对象由 this 所引用，并且最后隐式的返回 this 。 var obj = {}; obj.proto = Base.prototype; Base.call(obj);
#js延迟加载的方式有哪些？
defer和async、动态创建DOM方式（创建script，插入到DOM中，加载完毕后callBack）、按需异步载入js
#如何解决跨域问题?
jsonp、 document.domain+iframe、window.name、window.postMessage、服务器上设置代理页面 jsonp的原理是动态插入script标签
#什么叫优雅降级和渐进增强？
优雅降级：Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效. 渐进增强：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用。
#对Node的优点和缺点提出了自己的看法？
*（优点）因为Node是基于事件驱动和无阻塞的，所以非常适合处理并发请求， 因此构建在Node上的代理服务器相比其他技术实现（如Ruby）的服务器表现要好得多。 此外，与Node代理服务器交互的客户端代码是由javascript语言编写的， 因此客户端和服务器端都用同一种语言编写，这是非常美妙的事情。 *（缺点）Node是一个相对新的开源项目，所以不太稳定，它总是一直在变， 而且缺少足够多的第三方库支持。看起来，就像是Ruby/Rails当年的样子。
#前端工程师的工作 参与项目，快速高质量完成实现效果图，精确到1px； 与团队成员，UI设计，产品经理的沟通； 做好的页面结构，页面重构和用户体验； 处理hack，兼容、写出优美的代码格式； 针对服务器的优化、拥抱最新前端技术。
#平时如何管理你的项目？
先期团队必须确定好全局样式（globe.css），编码模式(utf-8) 等； 编写习惯必须一致（例如都是采用继承式的写法，单样式都写成一行）； 标注样式编写人，各模块都及时标注（标注关键样式调用的地方）； 页面进行标注（例如 页面 模块 开始和结束）； CSS跟HTML 分文件夹并行存放，命名都得统一（例如style.css）； JS 分文件夹存放 命名以该JS功能为准的英文翻译。 图片采用整合的 images.png png8 格式文件使用 尽量整合在一起使用方便将来的管理
#说说最近最流行的一些东西吧？常去哪些网站？
Node.js、Mongodb、npm、MVVM、MEAN、three.js,React 。 网站：w3cfuns,sf,hacknews,CSDN,慕课，博客园，InfoQ,w3cplus等
#javascript对象的几种创建方式
1，工厂模式 2，构造函数模式 3，原型模式 4，混合构造函数和原型模式 5，动态原型模式 6，寄生构造函数模式 7，稳妥构造函数模式
#javascript继承的6种方法
1，原型链继承 2，借用构造函数继承 3，组合继承(原型+借用构造) 4，原型式继承 5，寄生式继承 6，寄生组合式继承
#ie各版本和chrome可以并行下载多少个资源
IE6 两个并发，iE7升级之后的6个并发，之后版本也是6个 Firefox，chrome也是6个
#javascript里面的继承怎么实现，如何避免原型链上面的对象共享
用构造函数和原型链的混合模式去实现继承，避免对象共享可以参考经典的extend()函数，很多前端框架都有封装的，就是用一个空函数当做中间变量
#什么是 "use strict"; ? 使用它的好处和坏处分别是什么？
ECMAscript 5添加了第二种运行模式："严格模式"（strict mode）。顾名思义，这种模式使得Javascript在更严格的条件下运行。
设立"严格模式"的目的，主要有以下几个：
- 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;
- 消除代码运行的一些不安全之处，保证代码运行的安全；
- 提高编译器效率，增加运行速度；
- 为未来新版本的Javascript做好铺垫。
注：经过测试IE6,7,8,9均不支持严格模式。
缺点： 现在网站的JS 都会进行压缩，一些文件用了严格模式，而另一些没有。这时这些本来是严格模式的文件，被 merge 后，这个串就到了文件的中间，不仅没有指示严格模式，反而在压缩后浪费了字节。
#WEB应用从服务器主动推送Data到客户端有那些方式？
html5 websoket WebSocket通过Flash XHR长时间连接 XHR Multipart Streaming 不可见的Iframe <script>标签的长时间连接(可跨域)
#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]); } return n; }