索引：
HTML & CSS
对web标准的理解 浏览器内核差异 兼容性 hack css基本布局 盒子模型 选择器优先级使用 HTML5 CSS3 移动端适配
Javascript
数据类型 面向对象(继封多) 继承 闭包 插件 作用域 跨域 原型链 模块化 自定义事件 内存泄露 事件机制 异步装载回调 模板引擎 NodeJs Json Ajax
其他
HTTP 安全 正则 优化 重构 响应式 移动端 团队协作 可维护 SEO VED 架构
职业生涯
HTML&CSS
1、外部引用CSS中 link与@import的区别
这两天刚写完XHTML加载CSS的几种方式，其中外部引用CSS分为两种方式link和@import。
本质上，这两种方式都是为了加载CSS文件，但还是存在着细微的差别。
差别1：老祖宗的差别
link属于XHTML标签，而@import完全是CSS提供的一种方式。
link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。
差别2：加载顺序的差别
当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显。
差别3：兼容性的差别
由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
差别4：使用DOM控制样式时的差别
当使用JavaScript控制DOM去改变样式的时候，只能使用link标签，因为@import不是DOM可以控制的。
差别5：@import可以在CSS中再次引入其他样式表
比如可以创建一个主样式表，在主样式表中再引入其他的样式表，
大致就这几种差别了（如果还有什么差别，大家告诉我，我再补充上去），其它的都一样，从上面的分析来看，还是使用link标签比较好。
2、前端页面有哪三层构成，分别是什么？作用是什么？
结构层，表示层，行为层
结构层：由 HTML 或 XHTML之类的标记语言负责创建。标签，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P标签表达了这样一种语义：“这是一个文本段。
表示层：由 CSS 负责创建。 CSS对“如何显示有关内容”的问题做出了回答。
行为层：负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM主宰的领域。
3、CSS的基础语句构成
选择器{属性1:值1;属性2:值2;……}
有6种合法的选择器类别，即：HTML标记、具有上下文关系的HTML标记、用户定义的类、用户定义的ID、虚类、虚元素。
4、如何居中一个浮动元素
500px; height:300px; float:left; margin-left:50%; position:relative; left:-250px; background-color:#CCC;
代码解读 ：首先设置块元素的宽度和高度，这里宽度是必须的，高度可以不设 关键在于：margin-left:50%; position:relative; left:-250px;
设置margin-left:50%;后浮动元素左边正好位于文档中间，设置块相对定位position:relative;然后左移宽度的二分之一，即可实现元素居中。在这个实例中宽度500，left设置为-250px.
设置容器的浮动方式为相对定位，然后确定容器的宽高，比如宽500 高 300 的层，然后设置层的外边距。
div{Width:500px;height:300px;Margin: -150px 0 0 -250px;position:relative;left:50%;top:50%;}
5、有没有关注HTML5和CSS3?如有请简单说一些您对它们的了解情况！
HTML5标签的改变：<header>, <footer>, <dialog>,<article>, <aside>, <figure>, <section>,<canvas>
IE9以上开始支持
CSS3实现圆角，阴影，对文字加特效，增加了更多的CSS选择器。
6、如果让你来制作一个访问量很高的大型网站，你会如何来管理所有CSS文件、JS与图片？
涉及到人手、分工、同步；
css文件：全局样式、编码、编写习惯（例如都是采用继承式的写法，单样式都写成一行）、标注：标注样式编写人，各模块都及时标注（标注关键样式调用的地方）；
CSS跟HTML 分文件夹并行存放，命名都得统一（例如style.css）
JS 分文件夹存放 命民以该JS 功能为准英文翻译；
图片采用整合的 images.png png8 格式文件使用 尽量整合在一起使用方便将来的管理
Javascript
**1、面向对象编程:b怎么继承a —— 对象冒充、原型方式
对象冒充**
function Rect(width, height){
this.width = width;
this.height = height;
this.area = function(){return this.width*this.height;};
}
function myRect(width, height, name){
Rect.call(this,width,height);
this.name = name;
this.show = function(){
alert(this.name+” with area:”+this.area());
}
}
关于Call方法，官方解释：调用一个对象的一个方法，以另一个对象替换当前对象。
call (thisOb,arg1, arg2…) 这也是一种对象冒充的继承，其实在call方法调用的时候发生的事情也是上下文环境变量this的替换
原型方式：
function Person(){
this.name = “Mike”;
this.sayGoodbye = function(){alert(“GoodBye!”);};
}
Person.prototype.sayHello = function(){alert(”Hello!”);};
function Student(){}
Student.prototype = new Person();
缺点：继承时父类的构造函数时不能带参数，因为对子类prototype域的修改是在声明子类对象之后才能进行，用子类构造函数的参数去初始化父类属性是无法实现的，如下
function Person(name){
this.name = name;
}
function Student(name,id){
this.id = id;
}
Student.prototype = new Person(this.name);
综上，两种方案的利弊，综合使用是比较常用的（组合继承）
function Person(name){
this.name = name;
}
Person.prototype.sayHello = function(){alert(this.name+“say Hello!”);};
function Student(name,id){
Person.call(this,name);
this.id = id;
}
Student.prototype = new Person();
Student.prototype.show = function(){
alert(“Name is:”+ this.name+” and Id is:”+this.id);
}
总结就是利用对象冒充机制的call方法把父类的属性给抓取下来，而成员方法尽量写进被所有对象实例共享的prototype域中，以防止方法副本重复创建。然后子类继承父类prototype域来抓取下来所有的方法。如想彻底理清这些调用链的关系，推荐大家多关注Js中prototype的constructor和对象的constructor属性
2、ajax是什么? ajax的交互模型? 同步和异步的区别? 如何解决跨域问题?
Ajax（异步的javascript and XML）是多种技术组合起来的一种浏览器和服务器交互技术，基本思想是允许一个互联网浏览器向一个远程页面/服务做异步的http调用，并且用收到的数据来更新一个当前web页面而不必刷新整个页面。
a、设置document.domain + iframe
b、通过script标签加载
jsonp 是写 script 标签，只能满足 get 请求。跨域 post 的话，IE8 及以上和其他主流浏览器可以用 window.postMessage 来实现，也就是传说中的 HTML5 方法了，可以看下标准，代码很简单。IE6、7 就用老式的方法，隐藏的 form，target 指向一个隐藏的 iframe，然后调 form 的 submit，服务端返回的结果会刷到 iframe 里。
不过这两种方法一般都需要服务端做一定的配合，要是不能操作接口所在的服务器（比如调第三方的接口），那就只能在自己的服务端上做代理了。
那目前实现POST的方法是
1、建立一个iframe，iframe内的JS创建一个form表单，并可以将接收到的参数放入表单中POST提交。
2、将iframe页面插入到页面中。
3、针对现代浏览器，将数据通过postMessage()方法传入iframe中。针对不支持此方法的浏览器，通过URL HASH的方法将参数传入iframe中。
（由于URL有长度限制，所以不能传播大数据）
除此方法外，可以使用window.name的方案，但此方案我没有实现过，具体可以百度一下张克军写的事例。
3、图片格式的选择
gif : 优点——支持动画，支持图形渐进，支持全透明，支持无损压缩
缺点——只有256种颜色
适用——小图标以及背景颜色较少的图片
jpg: 优点——较png，gif 显示颜色多很多的格式，有损压缩
缺点——不灵活，不支持图形渐进、背景透明、相对较大，不支持动画，不适合打印
适用——照片
png : 优点——体积小，支持alpha，适合介于两者之间，无损压缩，小图标png比gif大一些，品质差不多，图片png比jpg小一些，但还是有颜色损失。
缺点——只有256种颜色
适用——小图标以及背景颜色较少的图片
4、-webkit-font-smoothing（none | subpixel-antialiased | antialiased）, （页面背景为锯齿状的时候，会影响字体的清晰度）这个属性可以使页面上的字体抗锯齿，使用后字体会更清晰舒服。设置为antialiased效果平滑清晰
5、vertical-align
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。
baseline 默认。元素放置在父元素的基线上。
sub 垂直对齐文本的下标。
super 垂直对齐文本的上标
top 把元素的顶端与行中最高元素的顶端对齐
text-top 把元素的顶端与父元素字体的顶端对齐
middle 把此元素放置在父元素的中部。
bottom 把元素的顶端与行中最低的元素的顶端对齐。
text-bottom 把元素的底端与父元素字体的底端对齐。
length
% 使用 “line-height” 属性的百分比值来排列此元素。允许使用负值。
inherit 规定应该从父元素继承 vertical-align 属性的值。
令图标或者需要vertical-align的文本与行内其他元素登高，使用padding 对齐元素填充，从而达到垂直居中的效果。
IE6、7 图片不能垂直居中于父元素，解决方法，img —— vertical-align:middle后，在img标签后，加一个空标签，并使他们拥有布局, zoom:1 或 display : inline-block
6、操作节点
创建节点：document.createElement(‘div’) document.createTextNode(‘hello’)
添加、插入：sNode.appendChild(newNode)
sNode.insertBefore(newNode,oneNode) 在sNode中将newNode 插入到oneNode之前
复制：sNode.cloneNode(true/false) 必需。如果这个布尔参数设置为 true，被克隆的节点会复制原始节点的所有子节点。
替换：sNode.replaceNode(newNode,oldNode)
删除：sNode.removeChild(node)
查找：getElementById() getElementByTagName() getElementByClassName()
7、split , splice , slice 区别
split 与 jion 相反 split即把字符串分离开，以数组方式存储。
splice 用于插入、删除或替换数组的元素。splice会直接对数组进行修改 arrayObject.splice(index,howmany,element1,…..,elementX)
slice 用于选取字符串 arrayObject.slice(start,end)
8、请实现JS中，indexOf的功能，判断一个字符串a中是否包含另一个字符串b，如果包含，返回字符串b的位置，如果不包含返回-1
function funIndexOf(a,b){
var al = a.length, bl = b.length
var len = al - bl
if(len < 0){return -1}
var i = 0
for (; i <= len; i++) {
/* 或者用substr */
// var nowStr = a.slice(i,i+bl)
var nowStr = a.substr(i,i+bl)
if(nowStr == b) return i
else if(i==len) return -1
};
}
9、编写一个differ函数，用来比较2个字符串的差异，如果字符在第一个字符串中存在，在第二个字符串中不存在则输出减号和相应的字符，如果字符在第二个字符串中存在而在第一个中不存在，则输出加号与相应的字符，如果存在相同的字符串则字符串中的内容不需要输出，字符串的比较结果用逗号分开，每个差异的字符都要找出来。
function funDiff(strA,strB){
var i = 0
,res = []
,key = {}
for (; i < strA.length; i++) {
/* A,B中都有 */
var nowStr = strA[i]
if(strB.indexOf(nowStr) != -1){
var reg = new RegExp(nowStr,'g’) //全局替换，防止重复字符带来的影响
strB = strB.replace(reg,'')
strA = strA.replace(reg,'')
i-- //减去后指针往前一位
}else{
res.push('-'+nowStr)
}
};
var lenB = strB.length
if(lenB){
for (i = 0; i < lenB; i++) {
if(!key[ strB[i] ]){
key[ strB[i] ] = 1
res.push('+'+strB[i])
}
};
}
return res==false ? '都存在相同的字符' : res.join()
}
console.log(funDiff('abce000','a0001bdfdfcddd00'))
10、如何让ID为”tableTest”的table每3行换一次颜色，即1，2，3用红色，4，5，6用绿色，7，8，9用黄色，10，11，12用红色
function trBgc(){
var oTable = document.getElementById('tableTest')
var oTd = oTable.getElementsByTagName('td')
var aColor = ['red','green','yellow']
var mark = 0
for (var i = 0; i < oTd.length; i++) {
if(i && i%3 == 0){
mark = (++mark) >= 3 ? mark%3 : mark
}
oTd[i].style.backgroundColor = aColor[mark]
};
}
css初始化代码
.clear {clear: both;display: block;overflow: hidden;visibility: hidden; 0;height: 0;} .clearfix:after {clear: both;content: ‘.’;display: block;visibility: hidden;height: 0;}
.clearfix {display: inline-block;}
*html .clearfix {height: 1%;}
.clearfix {display: block;}
.clearfix{*zoom:1;}.clearfix:after{content:’20′;display:block;height:0;clear:both;}
.clearfix:after{content:”.”;display:block;height:0;clear:both;visibility:hidden;}
.clearfix{display:inline-block;}/* Hides from IE-mac */
*html .clearfix{height:1%;}
.clearfix{display:block;}/* End hide from IE-mac */
这个clearfix的CSS使用了after这个伪对象，它将在应用clearfix的元素的结尾添加content中的内容。 在这里添加了一个句号”.”，并且把它的display设置成block；高度设为0；clear设为both；visibility设为隐藏。这样就达到了撑开容器的目的。要让IE也完美显示，则必须在clearfix这个CSS定义的后面加上一些专门为IE设定的HACK。
PC浏览器的兼容问题
你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?经常遇到的浏览器的兼容性有哪些？怎么会出现？解决方法是什么？
IE内核浏览器：360，傲游，搜狗，世界之窗，腾讯TT
非IE内核浏览器：firefox opera safari chrome
1.就是ie6双倍边距的问题，在使用了float的情况下，不管是向左还是向右都会出现双倍，最简单的解决方法就是用display:inline;加到css里面去。
2.文字本身的大小不兼容。同样是font-size:14px的宋体文字，在不同浏览器下占的空间是不一样的，ie下实际占高16px，下留白3px，ff下实际占高17px，上留白1px，下留白3px，opera下就更不一样了。解决方案：给文字设定 line-height 。确保所有文字都有默认的 line-height 值。这点很重要，在高度上我们不能容忍1px 的差异。
- ff下容器高度限定，即容器定义了height之后，容器边框的外形就确定了，不会被内容撑大，而ie下是会被内容撑大，高度限定失效。所以不要轻易给容器定义height。
- 还讨论内容撑破容器问题，横向上的。如果float 容器未定义宽度，ff下内容会尽可能撑开容器宽度，ie下则会优先考虑内容折行。故，内容可能撑破的浮动容器需要定义width。
- 浮动的清除，ff下不清除浮动是不行的。
- mirrormargin bug，当外层元素内有float元素时，外层元素如定义margin-top:14px，将自动生成margin-bottom:14px。padding也会出现类似问题，都是ie6下的特产，该类bug 出现的情况较为复杂，远不只这一种出现条件，还没系统整理。解决方案：外层元素设定border 或 设定float。
- 吞吃现象，限于篇幅，我就不展开了。还是ie6，上下两个div，上面的div设置背景，却发现下面没有设置背景的div 也有了背景，这就是吞吃现象。对应上面的背景吞吃现象，还有滚动下边框缺失的现象。解决方案：使用zoom:1。这个zoom好象是专门为解决ie6 bug而生的。
- 注释也能产生bug~~~“多出来的一只猪。”这是前人总结这个bug使用的文案，ie6的这个bug 下，大家会在页面看到猪字出现两遍，重复的内容量因注释的多少而变。解决方案：用“<!–[if !IE]> picRotate start <![endif]–>”方法写注释。
- 里加 float
，这是一个典型的，棘手的兼容问题，希望引起大家正视 ，给li 不同的属性会有不同的解释效果，ff下的解释稍可理解，ie6下的解释会让你摸不着头脑，由于问题的复杂性，将另起一文专门讨论该问题。在《ul使用心得》一文里有相关成果，却没给出问题解决的过程。
- img下的留白。解决方案：给img设定 display:block。
- 失去line-height。
div style=”line-height:20px”><img />文字</div>，很遗憾，在ie6下单行文字 line-height 效果消失了。。。，原因是<img />这个inline-block元素和inline元素写在一起了。解决方案：让img 和文字都 float起来。 - 链接的hover状态。a:hover img{300px} 我们想让鼠标hover时，链接里包含的图片宽度变化，可惜在ie6下无效，ie7、ff下有效。
- 非链接的hover状态。div:hover{} 这样的样式ie6是不认的，在ie7、ff下才有效果。
- ie下overflow:hidden对其下的绝对层position:absolute或者相对层position:relative无效。解决方案：给overflow:hidden加position:relative或者position:absolute。另，ie6支持overflow-x或者overflow-y的特性，ie7、ff不支持。
- ie6下严重的bug，float元素如没定义宽度，内部如有div定义了height或zoom:1，这个div就会占满一整行，即使你给了宽度。float元素如果作为布局用或复杂的容器，都要给个宽度的。
- ie6下的bug，绝对定位的div下包含相对定位的div，如果给内层相对定位的div高度height具体值，内层相对层将具有100%的width值，外层绝对层将被撑大。解决方案给内层相对层float属性。
- ie6下的bug，内有的情况下，position:relative层下的float层内文字无法选中。
- 终于来了个ff的缺点。100%这个东西在ie里用很方便，会向上逐层搜索width值，忽视浮动层的影响，ff下搜索至浮动层结束，如此，只能给中间的所有浮动层加100%才行，累啊。opera这点倒学乖了跟了ie。i