前端面试题
面试有几点需注意：
1.面试题目： 根据你的等级和职位变化，入门级到专家级：范围↑、深度↑、方向↑。
2.题目类型： 技术视野、项目细节、理论知识题，算法题，开放性题，案例题。
3.进行追问： 可以确保问到你开始不懂或面试官开始不懂为止，这样可以大大延展题目的区分度和深度，知道你的实际能力。因为这种关联知识是长时期的学习，绝对不是临时记得住的。 回答问题再棒，面试官（可能是你的直接领导面试），会考虑我要不要这个人做我的同事？所以态度很重要。（感觉更像是相亲）
4.资深的工程师能把absolute和relative弄混，这样的人不要也罢，因为团队需要的你这个人具有可以依靠的才能（靠谱）。
前端开发面试知识点大纲：
HTML&CSS：
对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功：布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端适应
JavaScript：
数据类型、面向对象、继承、闭包、插件、作用域、跨域、原型链、模块化、自定义事件、内存泄漏、事件机制、异步装载回调、模板引擎、Nodejs、JSON、ajax等。
其他：
HTTP、安全、正则、优化、重构、响应式、移动端、团队协作、可维护、SEO、UED、架构、职业生涯
无论工作年头长短都应该必须掌握的知识点：
1、DOM结构 —— 两个节点之间可能存在哪些关系以及如何在节点之间任意移动。
2、DOM操作 ——如何添加、移除、移动、复制、创建和查找节点等。
3、事件 —— 如何使用事件，以及IE和标准DOM事件模型之间存在的差别。
4、XMLHttpRequest —— 这是什么、怎样完整地执行一次GET请求、怎样检测错误。
5、严格模式与混杂模式 —— 如何触发这两种模式，区分它们有何意义。
(1）、<!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器的解析器， 用什么文档类型 规范来解析这个文档。
（2）、严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。
（3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
（4）、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
6、盒模型 —— 外边距、内边距和边框之间的关系，及IE8以下版本的浏览器中的盒模型
7、块级元素与行内元素 —— 怎么用CSS控制它们、以及如何合理的使用它们
8、浮动元素——怎么使用它们、它们有什么问题以及怎么解决这些问题。
9、HTML与XHTML——二者有什么区别，你觉得应该使用哪一个并说出理由。
XHTML与HTML之间的主要差异是他遵守XML约定，这意味着与常规的HTML不同，所有XHTML属性必须包含引号，所有元素必须是封闭的。概念上XHMLT页面可以作为HTML文档，而XHTML页面是作为XML发送给浏览器的，即使有错误也不会显示页面的。
10、JSON —— 作用、用途、设计结构。
html
11、行内元素有哪些？块级元素有哪些？ 他们的区别？空(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>
区别：
1.行内元素与块级元素直观上的区别：
行内元素会在一条直线上排列，都是同一行的，水平方向排列；
块级元素各占据一行，垂直方向排列。块级元素从新行开始结束接着一个断行。
2.块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。
3.行内元素与块级元素属性的不同，主要是盒模型属性上：
行内元素设置width无效，height无效(可以设置line-height)；
margin上下无效。
12、link 和@import 的区别是？
（1）link属于XHTML标签，而@import是CSS提供的;
（2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
（3）import只在IE5以上才能识别，而link是XHTML标签，无兼容问题;
（4）link方式的样式的权重 高于@import的权重.
13、浏览器的内核分别是什么?
IE浏览器的内核Trident、Mozilla的Gecko、Chrome的Blink（WebKit的分支）、Opera内核原为Presto，现为Blink；
14、常见兼容性问题？|| 经常遇到的CSS的兼容性有哪些？原因，解决方法是什么？
* png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.
* 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。
* IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。 浮动ie产生的双倍距离 #box{ float:left; width:10px; margin:0 0 0 100px;} 这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 ——_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)
渐进识别的方式，从总体中逐渐排除局部。
首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。
接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。
css
.bb{
background-color:#f1ee18;/*所有识别*/
.background-color:#00deff\9; /*IE6、7、8识别*/
+background-color:#a200ff;/*IE6、7识别*/
_background-color:#1e0bd1;/*IE6识别*/
}
* IE下,可以使用获取常规属性的方法来获取自定义属性,
也可以使用getAttribute()获取自定义属性;
Firefox下,只能使用getAttribute()获取自定义属性.
解决方法:统一通过getAttribute()获取自定义属性.
* IE下,even对象有x,y属性,但是没有pageX,pageY属性;
Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.
pageX（页面坐标） = ClientX(视口的坐标) + srollLeft(滚轮的长度);
pageY = ClientY + scrollTop;
* 解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。
*FireFox不支持元素的innerText属性，需用textContent
* Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,
可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决.
超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:
L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
* 在一定宽度下，溢出文字显示省略号：textoverflow：ellipsis white-space：nowrap段落文本不换行
* border属性中dotted与dashed的区别 dotted(点状轮廓)在ie6下不兼容，显示为dashed(虚线轮廓)，而dashed显示一致
*border:0;和border:none区别：
性能上：0会进行渲染，占用内存值，none不会消耗内存值
兼容差异：只针对浏览器ie6,ie7与标签button和input而言，0无效边框仍然存在，none无边框。火狐下none /0 表现一直均无边框
*IE选择符空格：IE有个BUG，在处理伪类时，如果伪类的名称中带有连字符”-”，伪类名称后面就得跟一个空格，不然样式的定义就无效
*Inline-block不支持问题
display:inline-block; /* 现代浏览器 +IE6、7 inline 元素 */
*display:inline; /* IE6、7 block 元素 */
*zoom:1;
Inline-block间隙问题
font-size:0;/* 所有浏览器 */
letter-spacing:-5px;/* Safari 等不支持字体大小为 0 的浏览器 */
*letter-spacing:normal;
word-spacing:-1px;/* IE6、7 */
1.怪异盒模型
2.垂直外边距重叠
3.浮动清除
4.inline-block的统一
5.ul的不同表现
6.IE的双倍边距
7.3px偏移
8.“断头台”
9.多个浮动重复字样
10.高度不固定heigth->min-height
11.透明度问题
12.img默认下有间距
13. IE6 IE7 IE8(Q) 中行内元素后相邻的浮动元素在某些情况下会折行放置在之前行内元素所在行框的底部
15、html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？
* HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
* 绘画 canvas
用于媒介回放的 video 和 audio 元素
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 的数据在浏览器关闭后自动删除
语意化更好的内容元素，比如 article、footer、header、nav、section 利于搜索引擎搜索。更加友好。
表单控件，calendar、date、time、email、url、search
新的技术webworker, websockt, Geolocation
*div、section、article的区别
section 表示一段专题性的内容，一般会带有标题。
当元素内容聚合起来更加言之有物时，应该使用 article 来替换 section。
section 应用的典型场景有文章的章节、标签对话框中的标签页、或者论文中有编号的部分
* 移除的元素
纯表现的元素：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声明\新增的结构元素\功能元素
16、语义化的理解？
用正确的标签做正确的事情！，html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
17、HTML5的离线储存？
localStorage 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 数据在浏览器关闭后自动删除。
18、iframe有那些缺点？
*iframe会阻塞主页面的Onload事件；
*iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript
动态给iframe添加src属性值，这样可以可以绕开以上两个问题。
19、请描述一下 cookies，sessionStorage 和 localStorage 的区别？
cookie在浏览器和服务器间来回传递。 sessionStorage和localStorage不会
sessionStorage和localStorage的存储空间更大；
sessionStorage和localStorage有更多丰富易用的接口；
sessionStorage和localStorage各自独立的存储空间；
css
20、介绍一下CSS的盒子模型？
（1）有两种， IE 盒子模型、标准 W3C 盒子模型；IE的content部分包含了 border 和 pading;
（2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border).
21、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
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 单选框或复选框被选中。
22、如何居中div？如何居中一个浮动元素？
给div设置一个宽度，然后添加margin:0 auto属性
div{
width:200px;
margin:0 auto;
}
居中一个浮动元素
确定容器的宽高 宽500 高 300 的层
设置层的左、上外边距分别为宽、高的负1/2像素
.div {
Width:500px ; height:300px;//高度可以不设
Margin: -150px 0 0 -250px;
position:relative;相对定位
background-color:pink;//方便看效果
left:50%;
top:50%;
}
23、列出display的值，说明他们的作用。position的值， relative和absolute定位原点是？
1.
block 象块类型元素一样显示。
none 缺省值。象行内元素类型一样显示。
inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。
list-item 象块类型元素一样显示，并添加样式列表标记。
2.
*absolute
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
*fixed （老IE不支持）
生成绝对定位的元素，相对于浏览器窗口进行定位。
*relative
生成相对定位的元素，相对于其正常位置进行定位。
* static 默认值。没有定位，元素出现在正常的流中
*（忽略 top, bottom, left, right z-index 声明）。
* inherit 规定从父元素继承 position 属性的值。
24、CSS3有哪些新特性？
CSS3实现圆角（border-radius:8px），阴影（box-shadow:10px），
对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜
增加了更多的CSS选择器 多背景 rgba
25、为什么要初始化CSS样式。
- 因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
- 当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。
absolute的containing block计算方式跟正常流有什么不同？
根元素
默认条件下，html元素为包含块，一些浏览器把body设为包含块。
非根元素分为两种情况：
1、对于没有设置position:absolute的非根元素如position:relative position:static
这种情况下包含块设置为最近的块级元素内容区的边缘，注意是内容区的边缘，而不是margin和padding边缘。
2、使用了position:absolute绝对定位的元素，
这种情况下包含块设置在最近的postion不是static的祖先元素(这里的祖先元素可以是块级元素，也可是内联元素)
a、如果祖先元素是块级元素，包含块设为该块级元素的padding边沿
b、如果祖先元素是内联元素则包含块设为该内联元素的内容边沿
position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？
涉及到正常流、包含块、浮动、BFC、hasLayout、块行元素、行高
对BFC规范的理解？W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。
BFC 定义
BFC(Block formatting context)直译为”块级格式化上下文”。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
BFC布局规则：
内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算
二、哪些元素会生成BFC?
根元素
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible
29、解释下浮动和它的工作原理？清除浮动的技巧？
浮动：浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不属于文档中的普通流，当一个元素浮动之后，不会影响到块级框的布局而只会影响内联框（通常是文本）的排列，文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，也就会出现包含框不会自动伸高来闭合浮动元素（“高度塌陷”现象）。
清除浮动的方法：1.通过在浮动元素的末尾添加一个空元素，设置 clear：both属性，after伪元素其实也是通过 content 在元素的后面生成了内容为一个点的块级元素；
2.通过设置父元素 overflow 或者display：table 属性来闭合浮动,触发BFC/haslayout
从各个方面比较，after伪元素闭合浮动无疑是相对比较好的解决方案了
.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }
.clearfix { *zoom:1; }
1) display:block 使生成的元素以块级元素显示,占满剩余空间;
2) height:0 避免生成内容破坏原有布局的高度。
3) visibility:hidden 使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互;
4）通过 content:"."生成内容作为最后一个元素，至于content里面是点还是其他都是可以的，例如oocss里面就有经典的 content:"XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",有些版本可能content 里面内容为空,一丝冰凉是不推荐这样做的,firefox直到7.0 content:”" 仍然会产生额外的空隙；
5）zoom：1 触发IE hasLayout。
通过分析发现，除了clear：both用来闭合浮动的，其他代码无非都是为了隐藏掉content生成的内容，这也就是其他版本的闭合浮动为什么会有font-size：0，line-height：0。
用过媒体查询，针对移动端的布局吗？
<!-- //对于显示屏 -->
<link rel="stylesheet" type="text/css" media="screen" href="screen-styles.css">
<!-- //对于纵向放置的显示屏 -->
<link rel="stylesheet" type="text/css" media="screen and (orientation: portrait)" href="portrait-sreen.css">
<!-- //对于非纵向放置的显示屏 -->
<link rel="stylesheet" type="text/css" media="not screen and (orientation: portrait)" href="not-portrait-sreen.css">
<!-- //800px的纵向放置显示屏 -->
<link rel="stylesheet" type="text/css" media="not screen and (orientation: portrait) and (min-width:800px)" href="800wide-portrait-sreen.css">
<!-- //媒体查询列表，以逗号隔开，任何一项为真即可 -->
<link rel="stylesheet" type="text/css" media="not screen and (orientation: portrait) and (min-width:800px), projection" href="800wide-portrait-sreen.css">
<!-- //屏幕宽度小于等于400px; -->
<style>
/* 屏幕宽度小于400px; */
@media sreen and (max-device-width: 400px) {
h1 {
background: green;
}
}
/* //为小于等于400px的显示屏应用这个样式 */
@import url("phone.css") screen and (max-device-width: 400px);
/* width 屏幕宽度（设备物理显示区域） device-width 视口宽度（网页实际显示区域）*/
/* width、height、device-width、device-height、orientation、aspec-ratio、device-aspec-ratio、color、color-index、monochrome、resolution、scan、grid*/
@media sreen and (max-width: 960px) {}
@media sreen and (max-width: 768px) {}
@media sreen and (max-width: 550px) {}
@media sreen and (max-width: 320px) {}
javascript
JavaScript原型，原型链 ? 有什么特点？
原型：将对象的方法和属性定义在对象的protortype上，让所有的实例共享
原型链：基于原型的性质。构造函数的prototype指向原型，原型的contructor的指向构造函数，实例的_proto_属性指向原型，由此构成原型链
32、eval是做什么的？它的功能是把对应的字符串解析成JS代码并运行；应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）。
33、null，undefined 的区别？
Undefined派生自null。Undefined表示值未定义，缺少值；null表示值为空，没有对象，一般变量为对象的时候初始化为null。typeof undefined === ‘undefined’ typeof null === ‘object’
null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。
34、写一个通用的事件侦听器函数。
if (typeof xhong === ‘undefined’) {
window.xhong = {};
}
Xhong.event = {
onload : function(fn){
if (fn === null) {
fn = document;
}
var oldonload = window.onload;
if (typeof window.onload !== ‘function’) {
Window.onload = fn;
} else {
Window.onload = function(){
oldonload();
fn();
};
}
},
addEventListener: function(elem, type, handler){
if (elem.addEventListener) {
elem.addEventListener(type, handler, false);
} else if (elem.attachEvent) {
elem.attachEvent(‘on’+type, handler);
//elem.attachEvent(‘on’+type, function(){
return handler.call(elem, window.event);
});
} else {
elem[‘on’+type] = hanlder;
}
},
removeEventListener: function(elem,type, handler){
if (elem.removeEventListener) {
elem.removeEventListener(type, handler, false);
} else if (elem.detachEvent) {
elem.detachEvent(‘on’+type, handler);
} else {
elem[‘on’+type] = null;
}
},
getEvent: function(event){
return event || window.event;
},
getTarget: function(event){
return event.target || event.srcElement;
},
stopPropagation: function(event){
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
},
preventDefault: function(event){
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
}
}
35、Node.js的适用场景？ 高并发、聊天、实时消息推送
36、介绍js的基本数据类型。Undeinfed、Null、Boolean、Number、String、Object
37、Javascript如何实现继承？通过原型和构造器实现。原理：向上遍历原型链
38、["1", "2", "3"].map(parseInt) 答案是多少？
[1, NaN, NaN] 因为 parseInt 需要两个参数 (val, radix) 但 map 传了 3 个 (element, index, array)
39、如何创建一个对象? （画出此对象的内存图）
function Person(name, age) {
this.name = name;
this.age = age;
this.sing = function() { alert(this.name) }
}
40、谈谈This对象的理解。
this是js的一个关键字，随着函数使用场合不同，this的值会发生变化。
但是有一个总原则，那就是this指的是调用函数的那个对象。
this一般情况下：是全局对象Global。
作为函数调用：this指向Global、
作为方法调用：this就是指向所属对象 、
作为构造函数调用：this指向一个连接该函数的prototype成员的新对象上、
作为apply/call调用：this指向第一个参数值。
41、事件是？IE与火狐的事件机制有什么区别？ 如何阻止冒泡？
1. 我们在网页中的某个操作（有的操作对应多个事件）。例如：当我们点击一个按钮就会产生一个事件。是可以被 JavaScript 侦测到的行为。
2. 事件处理机制：IE是事件冒泡、火狐是 事件捕获；
3. ev.stopPropagation();
什么是闭包（closure），为什么要用它？
闭包：有权访问另外一个函数作用域中的变量的函数。作用：1.可以读取函数内部数据。2.让这些变量的值始终保持在内存中，信息隐藏封装。3.缓存。4.内部的代码处于私有状态。
由于闭包的[[Scope]]属性包含与运行期上下文作用域链相同的对象引用，会产生副作用。通常，一个函数的激活对象与运行期上下文一同销毁。当涉及闭包时，激活对象就无法销毁了，因为引用仍然存在于闭包的[[Scope]]属性中。这意味着脚本中的闭包与非闭包函数相比，需要更多内存开销。闭包导致内存泄漏。
执行say667()后,say667()闭包内部变量会存在,而闭包内部函数的内部变量不会存在.使得Javascript的垃圾回收机制GC不会收回say667()所占用的资源，因为say667()的内部函数的执行需要依赖say667()中的变量。这是对闭包作用的非常直白的描述.
function say667() {
// Local variable that ends up within closure
var num = 666;
var sayAlert = function() { alert(num); }
num++;
return sayAlert;
}
var sayAlert = say667();
sayAlert()//执行结果应该弹出的667
"use strict";是什么意思 ? 使用它的好处和坏处分别是什么？
意思：使Javascript解释器可以用"严格"的语法来解析代码
好处：这样很巧妙地兼容了那些不支持strict mode老的浏览器，不会报错。更早发现隐藏的错误
44、如何判断一个对象是否属于某个类？
使用instanceof （待完善）
if(a instanceof Person){
alert('yes');
}
45、new操作符具体干了什么呢?
当使用new创建对象的时候，
首先创建一个空对象并且this引用这个对象，同时还继承该函数的原型。
2.属性和方法被添加到this指向的对象中。
3.隐式的返回this。或者显示返回其它对象
46、Javascript中，有一个函数，执行时对象查找时，永远不会去查找原型，这个函数是？
hasOwnProperty
47、JSON 的了解？
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它是基于JavaScript的一个子集。数据格式简单, 易于读写阅读, 占用带宽小，传输速度快{'age':'12', 'name':'back'}
JSON解析和序列化Stringify()和parse()
Stringfigy第二个参数可以用于过滤。
对象内部自定义的toJson对象可以作为函数过滤器的补充。序列化步骤：
1.如果有toJson()而且取得有效值则调用该方法，否则返回本身。
2.如果有第二个参数，则应用这个函数过滤器。
3.如果提供第三个参数，则执行相应的格式化。
48、js延迟加载的方式有哪些？
Defer(立即下载，延迟执行)和async（立即下载，但不能保证顺序）、动态创建DOM方式（用得最多）、按需异步载入js(xhr注入)
ajax 是什么?
Ajax:局部刷新，异步加载。
1.首先创建xmlhttprequest或者ActiveObjct对象
2.指定onreadystatechange事件，监听readystate是否为4的情况下看status状态码是否为200~300之间或者304，否则
3.open(请求类型,请求的url，是否异步);
4.使用setRequestHeader()设置自定义的请求头部信息
4.send(请求主体发送的数据);
同步和异步的区别?
同步：后一个语句必须等到前一个语句执行结束才能开始执行。
异步: 创建eventloop线程执行异步语句，无需等待。
51、如何解决跨域问题?
jsonp、 iframe、window.name、window.postMessage、服务器上设置代理页面
52、模块化怎么做？ 立即执行函数,不暴露私有成员
53、AMD（Modules/Asynchronous-Definition）、CMD（Common Module Definition）规范区别？
AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。
CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。
区别：
1. 对于依赖的模块，AMD 是提前执行，CMD 是延迟执行。不过 RequireJS 从 2.0 开始，也改成可以延迟执行（根据写法不同，处理方式不同）。CMD 推崇 as lazy as possible.
2. CMD 推崇依赖就近，AMD 推崇依赖前置。看代码：
// CMD
define(function(require, exports, module) {
var a = require('./a')
a.doSomething()
// 此处略去 100 行
var b = require('./b') // 依赖可以就近书写
b.doSomething()
// ...
})
// AMD 默认推荐的是
define(['./a', './b'], function(a, b) { // 依赖必须一开始就写好
a.doSomething()
// 此处略去 100 行
b.doSomething()
...
})
虽然 AMD 也支持 CMD 的写法，同时还支持将 require 作为依赖项传递，但 RequireJS 的作者默认是最喜欢上面的写法，也是官方文档里默认的模块定义写法。
3. AMD 的 API 默认是一个当多个用，CMD 的 API 严格区分，推崇职责单一。比如 AMD 里，require 分全局 require 和局部 require，都叫 require。CMD 里，没有全局 require，而是根据模块系统的完备性，提供 seajs.use 来实现模块系统的加载启动。CMD 里，每个 API 都简单纯粹。
定位有差异。RequireJS 想成为浏览器端的模块加载器，同时也想成为 Rhino / Node 等环境的模块加载器。Sea.js 则专注于 Web 浏览器端，同时通过 Node 扩展的方式可以很方便跑在 Node 环境中。
遵循的规范不同。RequireJS 遵循 AMD（异步模块定义）规范，Sea.js 遵循 CMD （通用模块定义）规范。规范的不同，导致了两者 API 不同。Sea.js 更贴近 CommonJS Modules/1.1 和 Node Modules 规范。
54、documen.write和 innerHTML的区别
document.write只能重绘整个页面
innerHTML可以重绘页面的一部分
55、call() 和 .apply() 的区别？
对于apply和call两者在作用上是相同的，但两者在参数上有区别的。
对于第一个参数意义都一样，但对第二个参数：
apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入，而call则作为call的参数传入（从第二个参数开始）。
如 func.call(func1,var1,var2,var3)对应的apply写法为：func.apply(func1,[var1,var2,var3])
56、Jquery与jQuery UI 有啥区别？
*jQuery是一个js库，主要提供的功能是选择器，属性修改和事件绑定等等。
*jQuery UI则是在jQuery的基础上，利用jQuery的扩展性，设计的插件。
提供了一些常用的界面元素，诸如对话框、拖动行为、改变大小行为等等
57、JQuery的源码看过吗？能不能简单说一下它的实现原理？
58、jquery 中如何将数组转化为json字符串，然后再转化回来？
59、针对 jQuery 的优化方法？
1.使用最新版本的jquery类库（记得测试自己的代码，不是完全向后兼容的）
2.使用合适的选择器 id > tag > class > 属性选择器 > 伪类选择器 （性能上）
3.缓存对象。频繁操作的DOM，先缓存起来再操作。用Jquery的链式调用更好。
4.循环时的DOM操作，先存储元素元素列表
5.数组方式使用jquery对象。（如用for或while代替$.each()。检测长度也是检查jquery对象是否存在的方式）
6.事件代理
7.将自己的代码转成jquery插件（增强重用性，有效组织代码）
8.使用join()来拼接字符串
9.合理使用html5的data属性
10.尽量使用原生的javascript方法
11.压缩javascript代码
60.JavaScript中的作用域与变量声明提升？
作用域：作用域由定义时决定，而不是执行时决定。
变量提升：在使用var声明变量的时候，会将变量的声明提升到代码块的顶部。
如何编写高性能的Javascript？
哪些操作会造成内存泄漏？
内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。
垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。
setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。
闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）
JQuery一个对象可以同时绑定多个事件，这是如何实现的？
其它问题
64.你遇到过比较难的技术问题是？你是如何解决的？
1.数据库一对多的关系。需要使用checkbox展示.解决:本来可以使用struct解决但那是不太熟练所以使用js里面操作jsp
2.猜数字游戏：判断数字正确。想了很久。做出来了，后来发现用集合的思想实现的思路比较方便。
3.一些兼容性问题等
65.常使用的库有哪些？常用的前端开发工具？开发过什么应用或组件？
Jquery、boostrap。Sublime、使用原生js写过一些小demo放在github上
67.页面重构怎么操作？
写交互，画交互原稿，写静态网页。
68.列举IE 与其他浏览器不一样的特性？
事件操作、css一些默认样式、兼容性、调试工具
69.99%的网站都需要被重构是那本书上写的？（重构之美？）
70.什么叫优雅降级和渐进增强？
优雅降级：向后兼容。如果正确的使用了javascript脚本，就可以让访问者在他们的浏览器不支持javascript的情况下仍能继续顺利的浏览你的网站，也就是说，虽然某些功能不能无法使用，但基本的操作仍能顺利完成。
渐进增强：用一些额外的信息去包裹原始的数据
71.WEB应用从服务器主动推送Data到客户端有那些方式？
xmlHttpRequest、websocket、webRTC
72.对Node的优点和缺点提出了自己的看法？
*（优点）因为Node是基于事件驱动和无阻塞的，所以非常适合处理并发请求，
因此构建在Node上的代理服务器相比其他技术实现（如Ruby）的服务器表现要好得多。
此外，与Node代理服务器交互的客户端代码是由javascript语言编写的，
因此客户端和服务器端都用同一种语言编写，这是非常美妙的事情。
*（缺点）Node是一个相对新的开源项目，所以不太稳定，它总是一直在变，
而且缺少足够多的第三方库支持。看起来，就像是Ruby/Rails当年的样子。
73.你有哪些性能优化的方法？(减少延迟)（看雅虎14条性能优化原则）。
（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） 图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。
（8） 避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢。
74.http状态码有哪些？分别代表是什么意思？
100-199 用于指定客户端应相应的某些动作。 101协议转换
200-299 用于表示请求成功。200请求成功、204无内容、206部分内容
300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息。 301永久重定向。302暂时重定向。304使用缓存
400-499 用于指出客户端的错误。400 1、语义有误，当前请求无法被服务器理解。401 当前请求需要用户验证 403 服务器已经理解请求，但是拒绝执行它。
500-599 用于支持服务器错误。 503 – 服务不可用
75.一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？（流程说的越详细越好）
查找浏览器缓存->DNS解析、查找该域名对应的IP地址->套接字发送数据->TCP连接->（SSL/TLS连接）->HTTP协议会话->客户端发送报头(请求报头)->(重定向（301）->发出第二个GET请求)-> 服务器回馈报头(响应报头)->并行下载文->html->DOM ->css->CSSOM->js->渲染树->绘制->加载
浏览器这边做的工作大致分为以下几步：
加载：根据请求的URL进行域名解析，向服务器发起请求，接收文件（HTML、JS、CSS、图象等）。
解析：对加载到的资源（HTML、JS、CSS等）进行语法解析，建议相应的内部数据结构（比如HTML的DOM树，JS的（对象）属性表，CSS的样式规则等等）
除了前端以外还了解什么其它技术么？你最最厉害的技能是什么？
SSH、php、正则、http
你常用的开发工具是什么，为什么？
Sublime 好用，人性化。增快开发速度
Chrome 方便调试
78.对前端界面工程师这个职位是怎么样理解的？它的前景会怎么样？
前端是最贴近用户的程序员，比后端、数据库、产品经理、运营、安全都近。
1、实现界面交互
2、提升用户体验
3、有了Node.js，前端可以实现服务端的一些事情
前端的能力就是能让产品从 90分进化到 100 分，甚至更好，参与项目，快速高质量完成实现效果图，精确到1px； 与团队成员，UI设计，产品经理的沟通； 做好的页面结构，页面重构和用户体验；处理hack，兼容、写出优美的代码格式；针对服务器的优化、拥抱最新前端技术。
79.加班的看法？
加班就像借钱，原则应当是------救急不救穷
80.平时如何管理你的项目？
1.根据能力和时间明确分工；2.组员讨论确定功能、样式风格、编码环境和模式，约定好各人各模块写好注释，方便维护；4.分工玩讨论统一编码习惯，如前端人员确定好全局样式（globe.css）；5.确定数据关系写好数据库；3.由前端人员沟通先快速开发出原型并整合后期加以优化；4.后台人员写好后台并随时与各个分工人员沟通及时修改错误。5.整合整个项目并进行测试。
编写习惯必须一致（例如都是采用继承式的写法，单样式都写成一行）；标注样式编写人，各模块都及时标注（标注关键样式调用的地方）；页面进行标注（例如 页面 模块 开始和结束）；CSS跟HTML 分文件夹并行存放，命名都得统一（例如style.css）；JS 分文件夹存放 命民以该JS 功能为准英文翻译；图片采用整合的 images.png png8 格式文件使用 尽量整合在一起使用方便将来的管理。
81.如何设计突发大规模并发架构？
82.说说最近最流行的一些东西吧？常去哪些网站？
Node.js、Mongodb、npm、MVVM、MEAN、three.js
83.移动端（Android IOS）怎么做好用户体验?
清晰的视觉纵线、信息的分组、极致的减法、
利用选择代替输入、标签及文字的排布方式、
依靠明文确认密码、合理的键盘利用、
84.你在现在的团队处于什么样的角色，起到了什么明显的作用？
85.你认为怎样才是全端工程师（Full Stack developer）？
86.介绍一个你最得意的作品吧？
87.你的优点是什么？缺点是什么？
88.如何管理前端团队? 分工明确，多沟通，确定好统一编码习惯
89.最近在学什么？能谈谈你未来3，5年给自己的规划吗？
90.想问公司的问题？
问公司问题：
目前关注哪些最新的Web前端技术（未来的发展方向）？
前端团队如何工作的（实现一个产品的流程）？
公司的薪资结构是什么样子的？
如何发生reflow
添加或删除可见的DOM元素
元素位置改变
元素尺寸改变（因为边距，填充，边框宽度，宽度，高度等属性改变）
内容改变，例如，文本改变或图片被另一个不同尺寸的所替代
最初的页面渲染
浏览器窗口改变尺寸
DOM值的获取
92cookies和session的区别：
具体来说cookie机制采用的是在客户端保持状态的方案，而session机制采用的是在服务器端保持状态的方案。
同时我们也看到，由于采用服务器端保持状态的方案在客户端也需要保存一个标识，所以session机制可能需要借助于cookie机制
来达到保存标识的目的，但实际上它还有其他选择。
cookie机制。正统的cookie分发是通过扩展HTTP协议来实现的，服务器通过在HTTP的响应头中加上一行特殊的指示以提示浏览器按照指示生成相应的cookie。
然而纯粹的客户端脚本如JavaScript或者VBScript也可以生成cookie。而cookie的使用是由浏览器按照一定的原则在后台自动发送给服务器的。浏览器检查所有存储的cookie，如果某个cookie所声明的作用范围大于等于将要请求的资源所在的位置，则把该cookie附在请求资源的HTTP请求头上发送给服务器。cookie的内容主要包括：名字，值，过期时间，路径和域。路径与域一起构成cookie的作用范围。若不设置过期时间，则表示这个cookie的生命期为浏览器会话期间，关闭浏览器窗口，cookie就消失。这种生命期为浏览器会话期的cookie被称为会话cookie。会话cookie一般不存储在硬盘上而是保存在内存里，当然这种行为并不是规范规定的。若设置了过期时间，浏览器就会把cookie保存到硬盘上，关闭后再次打开浏览器，这些cookie仍然有效直到超过设定的过期时间。存储在硬盘上的cookie可以在不同的浏览器进程间共享，比如两个IE窗口。而对于保存在内存里的cookie，不同的浏览器有不同的处理方式
session机制。session机制是一种服务器端的机制，服务器使用一种类似于散列表的结构（也可能就是使用散列表）来保存信息。
当程序需要为某个客户端的请求创建一个session时，服务器首先检查这个客户端的请求里是否已包含了一个session标识（称为session id），如果已包含则说明以前已经为此客户端创建过session，服务器就按照session id把这个session检索出来使用（检索不到，会新建一个），如果客户端请求不包含session id，则为此客户端创建一个session并且生成一个与此session相关联的session id，session id的值应该是一个既不会重复，又不容易被找到规律以仿造的字符串，这个session id将被在本次响应中返回给客户端保存。保存这个session id的方式可以采用cookie，这样在交互过程中浏览器可以自动的按照规则把这个标识发送给服务器。一般这个cookie的名字都是类似于SEEESIONID。但cookie可以被人为的禁止，则必须有其他机制以便在cookie被禁止时仍然能够把session id传递回服务器。
1、cookie数据存放在客户的浏览器上，session数据放在服务器上。
2、cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗
考虑到安全应当使用session。
3、session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能
考虑到减轻服务器性能方面，应当使用COOKIE。
4、单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。
5、所以个人建议：
将登陆信息等重要信息，存放为SESSION
其他信息如果需要保留，可以放在COOKIE中
面试有几点需注意：
1.面试题目： 根据你的等级和职位变化，入门级到专家级：范围↑、深度↑、方向↑。
2.题目类型： 技术视野、项目细节、理论知识题，算法题，开放性题，案例题。
3.进行追问： 可以确保问到你开始不懂或面试官开始不懂为止，这样可以大大延展题目的区分度和深度，知道你的实际能力。因为这种关联知识是长时期的学习，绝对不是临时记得住的。 回答问题再棒，面试官（可能是你的直接领导面试），会考虑我要不要这个人做我的同事？所以态度很重要。（感觉更像是相亲）
4.资深的工程师能把absolute和relative弄混，这样的人不要也罢，因为团队需要的你这个人具有可以依靠的才能（靠谱）。
前端开发面试知识点大纲：
HTML&CSS：
对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功：布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端适应
JavaScript：
数据类型、面向对象、继承、闭包、插件、作用域、跨域、原型链、模块化、自定义事件、内存泄漏、事件机制、异步装载回调、模板引擎、Nodejs、JSON、ajax等。
其他：
HTTP、安全、正则、优化、重构、响应式、移动端、团队协作、可维护、SEO、UED、架构、职业生涯
无论工作年头长短都应该必须掌握的知识点：
1、DOM结构 —— 两个节点之间可能存在哪些关系以及如何在节点之间任意移动。
2、DOM操作 ——如何添加、移除、移动、复制、创建和查找节点等。
3、事件 —— 如何使用事件，以及IE和标准DOM事件模型之间存在的差别。
4、XMLHttpRequest —— 这是什么、怎样完整地执行一次GET请求、怎样检测错误。
5、严格模式与混杂模式 —— 如何触发这两种模式，区分它们有何意义。
(1）、<!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器的解析器， 用什么文档类型 规范来解析这个文档。
（2）、严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。
（3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
（4）、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
6、盒模型 —— 外边距、内边距和边框之间的关系，及IE8以下版本的浏览器中的盒模型
7、块级元素与行内元素 —— 怎么用CSS控制它们、以及如何合理的使用它们
8、浮动元素——怎么使用它们、它们有什么问题以及怎么解决这些问题。
9、HTML与XHTML——二者有什么区别，你觉得应该使用哪一个并说出理由。
XHTML与HTML之间的主要差异是他遵守XML约定，这意味着与常规的HTML不同，所有XHTML属性必须包含引号，所有元素必须是封闭的。概念上XHMLT页面可以作为HTML文档，而XHTML页面是作为XML发送给浏览器的，即使有错误也不会显示页面的。
10、JSON —— 作用、用途、设计结构。
html
11、行内元素有哪些？块级元素有哪些？ 他们的区别？空(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>
区别：
1.行内元素与块级元素直观上的区别：
行内元素会在一条直线上排列，都是同一行的，水平方向排列；
块级元素各占据一行，垂直方向排列。块级元素从新行开始结束接着一个断行。
2.块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。
3.行内元素与块级元素属性的不同，主要是盒模型属性上：
行内元素设置width无效，height无效(可以设置line-height)；
margin上下无效。
12、link 和@import 的区别是？
（1）link属于XHTML标签，而@import是CSS提供的;
（2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
（3）import只在IE5以上才能识别，而link是XHTML标签，无兼容问题;
（4）link方式的样式的权重 高于@import的权重.
13、浏览器的内核分别是什么?
IE浏览器的内核Trident、Mozilla的Gecko、Chrome的Blink（WebKit的分支）、Opera内核原为Presto，现为Blink；
14、常见兼容性问题？|| 经常遇到的CSS的兼容性有哪些？原因，解决方法是什么？
* png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.
* 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。
* IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。 浮动ie产生的双倍距离 #box{ float:left; width:10px; margin:0 0 0 100px;} 这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 ——_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)
渐进识别的方式，从总体中逐渐排除局部。
首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。
接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。
css
.bb{
background-color:#f1ee18;/*所有识别*/
.background-color:#00deff\9; /*IE6、7、8识别*/
+background-color:#a200ff;/*IE6、7识别*/
_background-color:#1e0bd1;/*IE6识别*/
}
* IE下,可以使用获取常规属性的方法来获取自定义属性,
也可以使用getAttribute()获取自定义属性;
Firefox下,只能使用getAttribute()获取自定义属性.
解决方法:统一通过getAttribute()获取自定义属性.
* IE下,even对象有x,y属性,但是没有pageX,pageY属性;
Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.
pageX（页面坐标） = ClientX(视口的坐标) + srollLeft(滚轮的长度);
pageY = ClientY + scrollTop;
* 解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。
*FireFox不支持元素的innerText属性，需用textContent
* Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,
可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决.
超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:
L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
* 在一定宽度下，溢出文字显示省略号：textoverflow：ellipsis white-space：nowrap段落文本不换行
* border属性中dotted与dashed的区别 dotted(点状轮廓)在ie6下不兼容，显示为dashed(虚线轮廓)，而dashed显示一致
*border:0;和border:none区别：
性能上：0会进行渲染，占用内存值，none不会消耗内存值
兼容差异：只针对浏览器ie6,ie7与标签button和input而言，0无效边框仍然存在，none无边框。火狐下none /0 表现一直均无边框
*IE选择符空格：IE有个BUG，在处理伪类时，如果伪类的名称中带有连字符”-”，伪类名称后面就得跟一个空格，不然样式的定义就无效
*Inline-block不支持问题
display:inline-block; /* 现代浏览器 +IE6、7 inline 元素 */
*display:inline; /* IE6、7 block 元素 */
*zoom:1;
Inline-block间隙问题
font-size:0;/* 所有浏览器 */
letter-spacing:-5px;/* Safari 等不支持字体大小为 0 的浏览器 */
*letter-spacing:normal;
word-spacing:-1px;/* IE6、7 */
1.怪异盒模型
2.垂直外边距重叠
3.浮动清除
4.inline-block的统一
5.ul的不同表现
6.IE的双倍边距
7.3px偏移
8.“断头台”
9.多个浮动重复字样
10.高度不固定heigth->min-height
11.透明度问题
12.img默认下有间距
13. IE6 IE7 IE8(Q) 中行内元素后相邻的浮动元素在某些情况下会折行放置在之前行内元素所在行框的底部
15、html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？
* HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
* 绘画 canvas
用于媒介回放的 video 和 audio 元素
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 的数据在浏览器关闭后自动删除
语意化更好的内容元素，比如 article、footer、header、nav、section 利于搜索引擎搜索。更加友好。
表单控件，calendar、date、time、email、url、search
新的技术webworker, websockt, Geolocation
*div、section、article的区别
section 表示一段专题性的内容，一般会带有标题。
当元素内容聚合起来更加言之有物时，应该使用 article 来替换 section。
section 应用的典型场景有文章的章节、标签对话框中的标签页、或者论文中有编号的部分
* 移除的元素
纯表现的元素：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声明\新增的结构元素\功能元素
16、语义化的理解？
用正确的标签做正确的事情！，html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
17、HTML5的离线储存？
localStorage 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 数据在浏览器关闭后自动删除。
18、iframe有那些缺点？
*iframe会阻塞主页面的Onload事件；
*iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript
动态给iframe添加src属性值，这样可以可以绕开以上两个问题。
19、请描述一下 cookies，sessionStorage 和 localStorage 的区别？
cookie在浏览器和服务器间来回传递。 sessionStorage和localStorage不会
sessionStorage和localStorage的存储空间更大；
sessionStorage和localStorage有更多丰富易用的接口；
sessionStorage和localStorage各自独立的存储空间；
css
20、介绍一下CSS的盒子模型？
（1）有两种， IE 盒子模型、标准 W3C 盒子模型；IE的content部分包含了 border 和 pading;
（2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border).
21、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
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 单选框或复选框被选中。
22、如何居中div？如何居中一个浮动元素？
给div设置一个宽度，然后添加margin:0 auto属性
div{
width:200px;
margin:0 auto;
}
居中一个浮动元素
确定容器的宽高 宽500 高 300 的层
设置层的左、上外边距分别为宽、高的负1/2像素
.div {
Width:500px ; height:300px;//高度可以不设
Margin: -150px 0 0 -250px;
position:relative;相对定位
background-color:pink;//方便看效果
left:50%;
top:50%;
}
23、列出display的值，说明他们的作用。position的值， relative和absolute定位原点是？
1.
block 象块类型元素一样显示。
none 缺省值。象行内元素类型一样显示。
inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。
list-item 象块类型元素一样显示，并添加样式列表标记。
2.
*absolute
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
*fixed （老IE不支持）
生成绝对定位的元素，相对于浏览器窗口进行定位。
*relative
生成相对定位的元素，相对于其正常位置进行定位。
* static 默认值。没有定位，元素出现在正常的流中
*（忽略 top, bottom, left, right z-index 声明）。
* inherit 规定从父元素继承 position 属性的值。
24、CSS3有哪些新特性？
CSS3实现圆角（border-radius:8px），阴影（box-shadow:10px），
对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜
增加了更多的CSS选择器 多背景 rgba
25、为什么要初始化CSS样式。
- 因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
- 当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。
absolute的containing block计算方式跟正常流有什么不同？
根元素
默认条件下，html元素为包含块，一些浏览器把body设为包含块。
非根元素分为两种情况：
1、对于没有设置position:absolute的非根元素如position:relative position:static
这种情况下包含块设置为最近的块级元素内容区的边缘，注意是内容区的边缘，而不是margin和padding边缘。
2、使用了position:absolute绝对定位的元素，
这种情况下包含块设置在最近的postion不是static的祖先元素(这里的祖先元素可以是块级元素，也可是内联元素)
a、如果祖先元素是块级元素，包含块设为该块级元素的padding边沿
b、如果祖先元素是内联元素则包含块设为该内联元素的内容边沿
position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？
涉及到正常流、包含块、浮动、BFC、hasLayout、块行元素、行高
对BFC规范的理解？W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。
BFC 定义
BFC(Block formatting context)直译为”块级格式化上下文”。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
BFC布局规则：
内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算
二、哪些元素会生成BFC?
根元素
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible
29、解释下浮动和它的工作原理？清除浮动的技巧？
浮动：浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不属于文档中的普通流，当一个元素浮动之后，不会影响到块级框的布局而只会影响内联框（通常是文本）的排列，文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，也就会出现包含框不会自动伸高来闭合浮动元素（“高度塌陷”现象）。
清除浮动的方法：1.通过在浮动元素的末尾添加一个空元素，设置 clear：both属性，after伪元素其实也是通过 content 在元素的后面生成了内容为一个点的块级元素；
2.通过设置父元素 overflow 或者display：table 属性来闭合浮动,触发BFC/haslayout
从各个方面比较，after伪元素闭合浮动无疑是相对比较好的解决方案了
.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }
.clearfix { *zoom:1; }
1) display:block 使生成的元素以块级元素显示,占满剩余空间;
2) height:0 避免生成内容破坏原有布局的高度。
3) visibility:hidden 使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互;
4）通过 content:"."生成内容作为最后一个元素，至于content里面是点还是其他都是可以的，例如oocss里面就有经典的 content:"XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",有些版本可能content 里面内容为空,一丝冰凉是不推荐这样做的,firefox直到7.0 content:”" 仍然会产生额外的空隙；
5）zoom：1 触发IE hasLayout。
通过分析发现，除了clear：both用来闭合浮动的，其他代码无非都是为了隐藏掉content生成的内容，这也就是其他版本的闭合浮动为什么会有font-size：0，line-height：0。
用过媒体查询，针对移动端的布局吗？
<!-- //对于显示屏 -->
<link rel="stylesheet" type="text/css" media="screen" href="screen-styles.css">
<!-- //对于纵向放置的显示屏 -->
<link rel="stylesheet" type="text/css" media="screen and (orientation: portrait)" href="portrait-sreen.css">
<!-- //对于非纵向放置的显示屏 -->
<link rel="stylesheet" type="text/css" media="not screen and (orientation: portrait)" href="not-portrait-sreen.css">
<!-- //800px的纵向放置显示屏 -->
<link rel="stylesheet" type="text/css" media="not screen and (orientation: portrait) and (min-width:800px)" href="800wide-portrait-sreen.css">
<!-- //媒体查询列表，以逗号隔开，任何一项为真即可 -->
<link rel="stylesheet" type="text/css" media="not screen and (orientation: portrait) and (min-width:800px), projection" href="800wide-portrait-sreen.css">
<!-- //屏幕宽度小于等于400px; -->
<style>
/* 屏幕宽度小于400px; */
@media sreen and (max-device-width: 400px) {
h1 {
background: green;
}
}
/* //为小于等于400px的显示屏应用这个样式 */
@import url("phone.css") screen and (max-device-width: 400px);
/* width 屏幕宽度（设备物理显示区域） device-width 视口宽度（网页实际显示区域）*/
/* width、height、device-width、device-height、orientation、aspec-ratio、device-aspec-ratio、color、color-index、monochrome、resolution、scan、grid*/
@media sreen and (max-width: 960px) {}
@media sreen and (max-width: 768px) {}
@media sreen and (max-width: 550px) {}
@media sreen and (max-width: 320px) {}
javascript
JavaScript原型，原型链 ? 有什么特点？
原型：将对象的方法和属性定义在对象的protortype上，让所有的实例共享
原型链：基于原型的性质。构造函数的prototype指向原型，原型的contructor的指向构造函数，实例的_proto_属性指向原型，由此构成原型链
32、eval是做什么的？它的功能是把对应的字符串解析成JS代码并运行；应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）。
33、null，undefined 的区别？
Undefined派生自null。Undefined表示值未定义，缺少值；null表示值为空，没有对象，一般变量为对象的时候初始化为null。typeof undefined === ‘undefined’ typeof null === ‘object’
null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。
34、写一个通用的事件侦听器函数。
if (typeof xhong === ‘undefined’) {
window.xhong = {};
}
Xhong.event = {
onload : function(fn){
if (fn === null) {
fn = document;
}
var oldonload = window.onload;
if (typeof window.onload !== ‘function’) {
Window.onload = fn;
} else {
Window.onload = function(){
oldonload();
fn();
};
}
},
addEventListener: function(elem, type, handler){
if (elem.addEventListener) {
elem.addEventListener(type, handler, false);
} else if (elem.attachEvent) {
elem.attachEvent(‘on’+type, handler);
//elem.attachEvent(‘on’+type, function(){
return handler.call(elem, window.event);
});
} else {
elem[‘on’+type] = hanlder;
}
},
removeEventListener: function(elem,type, handler){
if (elem.removeEventListener) {
elem.removeEventListener(type, handler, false);
} else if (elem.detachEvent) {
elem.detachEvent(‘on’+type, handler);
} else {
elem[‘on’+type] = null;
}
},
getEvent: function(event){
return event || window.event;
},
getTarget: function(event){
return event.target || event.srcElement;
},
stopPropagation: function(event){
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
},
preventDefault: function(event){
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
}
}
35、Node.js的适用场景？ 高并发、聊天、实时消息推送
36、介绍js的基本数据类型。Undeinfed、Null、Boolean、Number、String、Object
37、Javascript如何实现继承？通过原型和构造器实现。原理：向上遍历原型链
38、["1", "2", "3"].map(parseInt) 答案是多少？
[1, NaN, NaN] 因为 parseInt 需要两个参数 (val, radix) 但 map 传了 3 个 (element, index, array)
39、如何创建一个对象? （画出此对象的内存图）
function Person(name, age) {
this.name = name;
this.age = age;
this.sing = function() { alert(this.name) }
}
40、谈谈This对象的理解。
this是js的一个关键字，随着函数使用场合不同，this的值会发生变化。
但是有一个总原则，那就是this指的是调用函数的那个对象。
this一般情况下：是全局对象Global。
作为函数调用：this指向Global、
作为方法调用：this就是指向所属对象 、
作为构造函数调用：this指向一个连接该函数的prototype成员的新对象上、
作为apply/call调用：this指向第一个参数值。
41、事件是？IE与火狐的事件机制有什么区别？ 如何阻止冒泡？
1. 我们在网页中的某个操作（有的操作对应多个事件）。例如：当我们点击一个按钮就会产生一个事件。是可以被 JavaScript 侦测到的行为。
2. 事件处理机制：IE是事件冒泡、火狐是 事件捕获；
3. ev.stopPropagation();
什么是闭包（closure），为什么要用它？
闭包：有权访问另外一个函数作用域中的变量的函数。作用：1.可以读取函数内部数据。2.让这些变量的值始终保持在内存中，信息隐藏封装。3.缓存。4.内部的代码处于私有状态。
由于闭包的[[Scope]]属性包含与运行期上下文作用域链相同的对象引用，会产生副作用。通常，一个函数的激活对象与运行期上下文一同销毁。当涉及闭包时，激活对象就无法销毁了，因为引用仍然存在于闭包的[[Scope]]属性中。这意味着脚本中的闭包与非闭包函数相比，需要更多内存开销。闭包导致内存泄漏。
执行say667()后,say667()闭包内部变量会存在,而闭包内部函数的内部变量不会存在.使得Javascript的垃圾回收机制GC不会收回say667()所占用的资源，因为say667()的内部函数的执行需要依赖say667()中的变量。这是对闭包作用的非常直白的描述.
function say667() {
// Local variable that ends up within closure
var num = 666;
var sayAlert = function() { alert(num); }
num++;
return sayAlert;
}
var sayAlert = say667();
sayAlert()//执行结果应该弹出的667
"use strict";是什么意思 ? 使用它的好处和坏处分别是什么？
意思：使Javascript解释器可以用"严格"的语法来解析代码
好处：这样很巧妙地兼容了那些不支持strict mode老的浏览器，不会报错。更早发现隐藏的错误
44、如何判断一个对象是否属于某个类？
使用instanceof （待完善）
if(a instanceof Person){
alert('yes');
}
45、new操作符具体干了什么呢?
当使用new创建对象的时候，
首先创建一个空对象并且this引用这个对象，同时还继承该函数的原型。
2.属性和方法被添加到this指向的对象中。
3.隐式的返回this。或者显示返回其它对象
46、Javascript中，有一个函数，执行时对象查找时，永远不会去查找原型，这个函数是？
hasOwnProperty
47、JSON 的了解？
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它是基于JavaScript的一个子集。数据格式简单, 易于读写阅读, 占用带宽小，传输速度快{'age':'12', 'name':'back'}
JSON解析和序列化Stringify()和parse()
Stringfigy第二个参数可以用于过滤。
对象内部自定义的toJson对象可以作为函数过滤器的补充。序列化步骤：
1.如果有toJson()而且取得有效值则调用该方法，否则返回本身。
2.如果有第二个参数，则应用这个函数过滤器。
3.如果提供第三个参数，则执行相应的格式化。
48、js延迟加载的方式有哪些？
Defer(立即下载，延迟执行)和async（立即下载，但不能保证顺序）、动态创建DOM方式（用得最多）、按需异步载入js(xhr注入)
ajax 是什么?
Ajax:局部刷新，异步加载。
1.首先创建xmlhttprequest或者ActiveObjct对象
2.指定onreadystatechange事件，监听readystate是否为4的情况下看status状态码是否为200~300之间或者304，否则
3.open(请求类型,请求的url，是否异步);
4.使用setRequestHeader()设置自定义的请求头部信息
4.send(请求主体发送的数据);
同步和异步的区别?
同步：后一个语句必须等到前一个语句执行结束才能开始执行。
异步: 创建eventloop线程执行异步语句，无需等待。
51、如何解决跨域问题?
jsonp、 iframe、window.name、window.postMessage、服务器上设置代理页面
52、模块化怎么做？ 立即执行函数,不暴露私有成员
53、AMD（Modules/Asynchronous-Definition）、CMD（Common Module Definition）规范区别？
AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。
CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。
区别：
1. 对于依赖的模块，AMD 是提前执行，CMD 是延迟执行。不过 RequireJS 从 2.0 开始，也改成可以延迟执行（根据写法不同，处理方式不同）。CMD 推崇 as lazy as possible.
2. CMD 推崇依赖就近，AMD 推崇依赖前置。看代码：
// CMD
define(function(require, exports, module) {
var a = require('./a')
a.doSomething()
// 此处略去 100 行
var b = require('./b') // 依赖可以就近书写
b.doSomething()
// ...
})
// AMD 默认推荐的是
define(['./a', './b'], function(a, b) { // 依赖必须一开始就写好
a.doSomething()
// 此处略去 100 行
b.doSomething()
...
})
虽然 AMD 也支持 CMD 的写法，同时还支持将 require 作为依赖项传递，但 RequireJS 的作者默认是最喜欢上面的写法，也是官方文档里默认的模块定义写法。
3. AMD 的 API 默认是一个当多个用，CMD 的 API 严格区分，推崇职责单一。比如 AMD 里，require 分全局 require 和局部 require，都叫 require。CMD 里，没有全局 require，而是根据模块系统的完备性，提供 seajs.use 来实现模块系统的加载启动。CMD 里，每个 API 都简单纯粹。
定位有差异。RequireJS 想成为浏览器端的模块加载器，同时也想成为 Rhino / Node 等环境的模块加载器。Sea.js 则专注于 Web 浏览器端，同时通过 Node 扩展的方式可以很方便跑在 Node 环境中。
遵循的规范不同。RequireJS 遵循 AMD（异步模块定义）规范，Sea.js 遵循 CMD （通用模块定义）规范。规范的不同，导致了两者 API 不同。Sea.js 更贴近 CommonJS Modules/1.1 和 Node Modules 规范。
54、documen.write和 innerHTML的区别
document.write只能重绘整个页面
innerHTML可以重绘页面的一部分
55、call() 和 .apply() 的区别？
对于apply和call两者在作用上是相同的，但两者在参数上有区别的。
对于第一个参数意义都一样，但对第二个参数：
apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入，而call则作为call的参数传入（从第二个参数开始）。
如 func.call(func1,var1,var2,var3)对应的apply写法为：func.apply(func1,[var1,var2,var3])
56、Jquery与jQuery UI 有啥区别？
*jQuery是一个js库，主要提供的功能是选择器，属性修改和事件绑定等等。
*jQuery UI则是在jQuery的基础上，利用jQuery的扩展性，设计的插件。
提供了一些常用的界面元素，诸如对话框、拖动行为、改变大小行为等等
57、JQuery的源码看过吗？能不能简单说一下它的实现原理？
58、jquery 中如何将数组转化为json字符串，然后再转化回来？
59、针对 jQuery 的优化方法？
1.使用最新版本的jquery类库（记得测试自己的代码，不是完全向后兼容的）
2.使用合适的选择器 id > tag > class > 属性选择器 > 伪类选择器 （性能上）
3.缓存对象。频繁操作的DOM，先缓存起来再操作。用Jquery的链式调用更好。
4.循环时的DOM操作，先存储元素元素列表
5.数组方式使用jquery对象。（如用for或while代替$.each()。检测长度也是检查jquery对象是否存在的方式）
6.事件代理
7.将自己的代码转成jquery插件（增强重用性，有效组织代码）
8.使用join()来拼接字符串
9.合理使用html5的data属性
10.尽量使用原生的javascript方法
11.压缩javascript代码
60.JavaScript中的作用域与变量声明提升？
作用域：作用域由定义时决定，而不是执行时决定。
变量提升：在使用var声明变量的时候，会将变量的声明提升到代码块的顶部。
如何编写高性能的Javascript？
哪些操作会造成内存泄漏？
内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。
垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。
setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。
闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）
JQuery一个对象可以同时绑定多个事件，这是如何实现的？
其它问题
64.你遇到过比较难的技术问题是？你是如何解决的？
1.数据库一对多的关系。需要使用checkbox展示.解决:本来可以使用struct解决但那是不太熟练所以使用js里面操作jsp
2.猜数字游戏：判断数字正确。想了很久。做出来了，后来发现用集合的思想实现的思路比较方便。
3.一些兼容性问题等
65.常使用的库有哪些？常用的前端开发工具？开发过什么应用或组件？
Jquery、boostrap。Sublime、使用原生js写过一些小demo放在github上
67.页面重构怎么操作？
写交互，画交互原稿，写静态网页。
68.列举IE 与其他浏览器不一样的特性？
事件操作、css一些默认样式、兼容性、调试工具
69.99%的网站都需要被重构是那本书上写的？（重构之美？）
70.什么叫优雅降级和渐进增强？
优雅降级：向后兼容。如果正确的使用了javascript脚本，就可以让访问者在他们的浏览器不支持javascript的情况下仍能继续顺利的浏览你的网站，也就是说，虽然某些功能不能无法使用，但基本的操作仍能顺利完成。
渐进增强：用一些额外的信息去包裹原始的数据
71.WEB应用从服务器主动推送Data到客户端有那些方式？
xmlHttpRequest、websocket、webRTC
72.对Node的优点和缺点提出了自己的看法？
*（优点）因为Node是基于事件驱动和无阻塞的，所以非常适合处理并发请求，
因此构建在Node上的代理服务器相比其他技术实现（如Ruby）的服务器表现要好得多。
此外，与Node代理服务器交互的客户端代码是由javascript语言编写的，
因此客户端和服务器端都用同一种语言编写，这是非常美妙的事情。
*（缺点）Node是一个相对新的开源项目，所以不太稳定，它总是一直在变，
而且缺少足够多的第三方库支持。看起来，就像是Ruby/Rails当年的样子。
73.你有哪些性能优化的方法？(减少延迟)（看雅虎14条性能优化原则）。
（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） 图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。
（8） 避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢。
74.http状态码有哪些？分别代表是什么意思？
100-199 用于指定客户端应相应的某些动作。 101协议转换
200-299 用于表示请求成功。200请求成功、204无内容、206部分内容
300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息。 301永久重定向。302暂时重定向。304使用缓存
400-499 用于指出客户端的错误。400 1、语义有误，当前请求无法被服务器理解。401 当前请求需要用户验证 403 服务器已经理解请求，但是拒绝执行它。
500-599 用于支持服务器错误。 503 – 服务不可用
75.一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？（流程说的越详细越好）
查找浏览器缓存->DNS解析、查找该域名对应的IP地址->套接字发送数据->TCP连接->（SSL/TLS连接）->HTTP协议会话->客户端发送报头(请求报头)->(重定向（301）->发出第二个GET请求)-> 服务器回馈报头(响应报头)->并行下载文->html->DOM ->css->CSSOM->js->渲染树->绘制->加载
浏览器这边做的工作大致分为以下几步：
加载：根据请求的URL进行域名解析，向服务器发起请求，接收文件（HTML、JS、CSS、图象等）。
解析：对加载到的资源（HTML、JS、CSS等）进行语法解析，建议相应的内部数据结构（比如HTML的DOM树，JS的（对象）属性表，CSS的样式规则等等）
除了前端以外还了解什么其它技术么？你最最厉害的技能是什么？
SSH、php、正则、http
你常用的开发工具是什么，为什么？
Sublime 好用，人性化。增快开发速度
Chrome 方便调试
78.对前端界面工程师这个职位是怎么样理解的？它的前景会怎么样？
前端是最贴近用户的程序员，比后端、数据库、产品经理、运营、安全都近。
1、实现界面交互
2、提升用户体验
3、有了Node.js，前端可以实现服务端的一些事情
前端的能力就是能让产品从 90分进化到 100 分，甚至更好，参与项目，快速高质量完成实现效果图，精确到1px； 与团队成员，UI设计，产品经理的沟通； 做好的页面结构，页面重构和用户体验；处理hack，兼容、写出优美的代码格式；针对服务器的优化、拥抱最新前端技术。
79.加班的看法？
加班就像借钱，原则应当是------救急不救穷
80.平时如何管理你的项目？
1.根据能力和时间明确分工；2.组员讨论确定功能、样式风格、编码环境和模式，约定好各人各模块写好注释，方便维护；4.分工玩讨论统一编码习惯，如前端人员确定好全局样式（globe.css）；5.确定数据关系写好数据库；3.由前端人员沟通先快速开发出原型并整合后期加以优化；4.后台人员写好后台并随时与各个分工人员沟通及时修改错误。5.整合整个项目并进行测试。
编写习惯必须一致（例如都是采用继承式的写法，单样式都写成一行）；标注样式编写人，各模块都及时标注（标注关键样式调用的地方）；页面进行标注（例如 页面 模块 开始和结束）；CSS跟HTML 分文件夹并行存放，命名都得统一（例如style.css）；JS 分文件夹存放 命民以该JS 功能为准英文翻译；图片采用整合的 images.png png8 格式文件使用 尽量整合在一起使用方便将来的管理。
81.如何设计突发大规模并发架构？
82.说说最近最流行的一些东西吧？常去哪些网站？
Node.js、Mongodb、npm、MVVM、MEAN、three.js
83.移动端（Android IOS）怎么做好用户体验?
清晰的视觉纵线、信息的分组、极致的减法、
利用选择代替输入、标签及文字的排布方式、
依靠明文确认密码、合理的键盘利用、
84.你在现在的团队处于什么样的角色，起到了什么明显的作用？
85.你认为怎样才是全端工程师（Full Stack developer）？
86.介绍一个你最得意的作品吧？
87.你的优点是什么？缺点是什么？
88.如何管理前端团队? 分工明确，多沟通，确定好统一编码习惯
89.最近在学什么？能谈谈你未来3，5年给自己的规划吗？
90.想问公司的问题？
问公司问题：
目前关注哪些最新的Web前端技术（未来的发展方向）？
前端团队如何工作的（实现一个产品的流程）？
公司的薪资结构是什么样子的？
如何发生reflow
添加或删除可见的DOM元素
元素位置改变
元素尺寸改变（因为边距，填充，边框宽度，宽度，高度等属性改变）
内容改变，例如，文本改变或图片被另一个不同尺寸的所替代
最初的页面渲染
浏览器窗口改变尺寸
DOM值的获取
92cookies和session的区别：
具体来说cookie机制采用的是在客户端保持状态的方案，而session机制采用的是在服务器端保持状态的方案。
同时我们也看到，由于采用服务器端保持状态的方案在客户端也需要保存一个标识，所以session机制可能需要借助于cookie机制
来达到保存标识的目的，但实际上它还有其他选择。
cookie机制。正统的cookie分发是通过扩展HTTP协议来实现的，服务器通过在HTTP的响应头中加上一行特殊的指示以提示浏览器按照指示生成相应的cookie。
然而纯粹的客户端脚本如JavaScript或者VBScript也可以生成cookie。而cookie的使用是由浏览器按照一定的原则在后台自动发送给服务器的。浏览器检查所有存储的cookie，如果某个cookie所声明的作用范围大于等于将要请求的资源所在的位置，则把该cookie附在请求资源的HTTP请求头上发送给服务器。cookie的内容主要包括：名字，值，过期时间，路径和域。路径与域一起构成cookie的作用范围。若不设置过期时间，则表示这个cookie的生命期为浏览器会话期间，关闭浏览器窗口，cookie就消失。这种生命期为浏览器会话期的cookie被称为会话cookie。会话cookie一般不存储在硬盘上而是保存在内存里，当然这种行为并不是规范规定的。若设置了过期时间，浏览器就会把cookie保存到硬盘上，关闭后再次打开浏览器，这些cookie仍然有效直到超过设定的过期时间。存储在硬盘上的cookie可以在不同的浏览器进程间共享，比如两个IE窗口。而对于保存在内存里的cookie，不同的浏览器有不同的处理方式
session机制。session机制是一种服务器端的机制，服务器使用一种类似于散列表的结构（也可能就是使用散列表）来保存信息。
当程序需要为某个客户端的请求创建一个session时，服务器首先检查这个客户端的请求里是否已包含了一个session标识（称为session id），如果已包含则说明以前已经为此客户端创建过session，服务器就按照session id把这个session检索出来使用（检索不到，会新建一个），如果客户端请求不包含session id，则为此客户端创建一个session并且生成一个与此session相关联的session id，session id的值应该是一个既不会重复，又不容易被找到规律以仿造的字符串，这个session id将被在本次响应中返回给客户端保存。保存这个session id的方式可以采用cookie，这样在交互过程中浏览器可以自动的按照规则把这个标识发送给服务器。一般这个cookie的名字都是类似于SEEESIONID。但cookie可以被人为的禁止，则必须有其他机制以便在cookie被禁止时仍然能够把session id传递回服务器。
1、cookie数据存放在客户的浏览器上，session数据放在服务器上。
2、cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗
考虑到安全应当使用session。
3、session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能
考虑到减轻服务器性能方面，应当使用COOKIE。
4、单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。
5、所以个人建议：
将登陆信息等重要信息，存放为SESSION
其他信息如果需要保留，可以放在COOKIE中
浙公网安备 33010602011771号