Web
#####1.简述对web标准以及w3c的理解与认识。
W3C(world wide web consortium)，万维网联盟， Web标准由万维网联盟(W3C)制定，W3C 创建和维护Web标准。
最重要W3C标准有：HTML、CSS、XML、XSL、DOM
对于浏览器开发商和web程序开发人员在开发新的应用程序时遵守指定的标准更有利于web更好地发展。
开发人员按照Web标准制作网页，这样对于开发者来说就更加简单了，因为他们可以很容易了解彼的编码使用Web标准，将确保所有浏览器正确显示您的网站而无需费时重写。
遵守标准的Web页面可以使得搜索引擎更容易访问并收入网页，也可以更容易转换为其他格式，并更易于访问程序代码。
#####2.Xhtml和html的区别
XHTML 是更严格更纯净的 HTML 代码。
XHTML 指可扩展超文本标签语言（EXtensible HyperText Markup Language）。
XHTML 的目标是取代 HTML。
XHTML 与 HTML 4.01 几乎是相同的。
XHTML 是更严格更纯净的 HTML 版本。
XHTML 是作为一种 XML 应用被重新定义的 HTML。
XHTML 是一个 W3C 标准。
XHTML 与 HTML 4.01 标准没有太多的不同。
最主要的不同：
XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素。
实际上现在写得标准基本是符合Xhtml标准的。
#####3.行内元素有哪些？块级元素有哪些？Css的盒模型？
Block-Level:<h1><p><ul><table><div>
Inline Elements:<b><th><td><a><img><span><input>
CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。
#####4.Css的引入方式有哪些？Link 和 @import的区别是
一般来说只有3种：
1.链接方式
最常用的，引入样式表，在样式表中编写样式，引入方式如下：
<link href="css/style.css" rel="stylesheet" type="text/css">
2.嵌入方式
在Html头部用<style></style>包起来，在这里面编写样式：
<style type="text/css">
*{
padding: 0;margin: 0
}
</style>
3.内联方式
在标签里面直接编写行内样式。<div style="color: #333"><div>
4.导入方式
<style>@import url(style.css);</style>
两者都是外部引用CSS的方式，但是存在一定的区别：
区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
区别4：ink支持使用Javascript控制DOM去改变样式；而@import不支持。
#####6.前端页面结构由哪三层构成，分别是什么，作用是什么？
分成：结构层、表示层、行为层。
结构层（structural layer）
由 HTML 或 XHTML之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P标签表达了这样一种语义：“这是一个文本段。”
表示层（presentation layer）
由 CSS 负责创建。 CSS对“如何显示有关内容”的问题做出了回答。
行为层（behaviorlayer）
负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM主宰的领域。
#####7.Css的基本语句构成是？
#####8.知道哪些主流浏览器，他们的内核分别是什么？
按照浏览器市场份额排名：
Chrome浏览器（Webkit内核）、IE浏览器、fireFox浏览器（Gecko/Firefox内核）、Microsoft edge（Trident/IE内核）、Safari（Webkit内核）、Opera（Presto内核）
国内使用较多的有：搜狗（搜狗是双核，Chromium+Trident内核、QQ（Trident/IE内核）、2345（Trident/IE内核）、猎豹（Trident/IE内核）、360（Trident/IE内核）、百度（WebKit ）、UC（WebKit ）
#####9.简述title与alt的区别
alt是html标签的属性，而title既是html标签，又是html属性。title标签这个不用多说，网页的标题就是写在<title></title>这对标签之内的。
title作为属性时，用来为元素提供额外说明信息。例如，给超链接标签a添加了title属性，把鼠标移动到该链接上面是，就会显示title的内容，以达到补充说明或者提示的效果。
而alt属性则是用来指定替换文字，只能用在img、area和input元素中（包括applet元素），用于网页中图片无法正常显示时给用户提供文字说明使其了解图像信息。
#####10.如何对网站的文件和资源进行优化？解决方案包括？
文件合并、文件压缩、使用CDN（内容分发网络）来托管资源、缓存的使用（并且多个域名来提供缓存、GZIP 压缩你的 JS 和 CSS 文件
#####11.清除浮动的几种方式？各自的优缺点？
1.父级div定义height
原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题
优点：简单，代码少，容易掌握
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题
建议：不推荐使用，只建议高度固定的布局时使用
2.结尾处加空div标签clear:both
原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度
优点：简单，代码少，浏览器支持好，不容易出现怪问题
缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不爽
建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法
3.父级div定义伪类:after和zoom
原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题
优点：浏览器支持好，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）
缺点：代码多，不少初学者不理解原理，要两句代码结合使用，才能让主流浏览器都支持
建议：推荐使用，建议定义公共类，以减少CSS代码
4.父级div定义overflow:hidden
原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度
优点：简单，代码少，浏览器支持好
缺点：不能和position配合使用，因为超出的尺寸的会被隐藏
建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用
5.父级div定义overflow:auto
原理：必须定义width或zoom:1，同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度
优点：简单，代码少，浏览器支持好
缺点：内部宽高超过父级div时，会出现滚动条。
建议：不推荐使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。
6.父级div也一起浮动
原理：所有代码一起浮动，就变成了一个整体
优点：没有优点
缺点：会产生新的浮动问题。
建议：不推荐使用，只作了解。
7.父级div定义display:table
原理：将div属性变成表格
优点：没有优点
缺点：会产生新的未知问题
建议：不推荐使用，只作了解
8.结尾处加br标签clear:both
原理：父级div定义zoom:1来解决IE浮动问题，结尾处加br标签clear:both
建议：不推荐使用，只作了解
http://www.5icool.org/a/201211/a1661.html
Javascript
#####1.javascript的typeof返回有哪些数据类型？
Undefined,object,number,string,boolean,function
#####2.列举3种强制转换和两种隐式类型转换
隠式转换
“+”运算符
var a = 11;
alert(typeof a); //-->number
a = a + '';
alert(typeof a); //-->string
“-”运算符
var a = 11, b = '5';
var c = a - b;
alert(typeof c); //--> number
If语句
var obj = {name:'jack'}
if(obj){
//do more
}
这里会把obj隐式的转换成Boolean类型
While语句
var obj = {name:'jack'}
while(obj){
//do more
}
for in时的类型转换
强调其为String类型，数组的索引其实也是字符串类型
var ary = [1,3,5,7];
for(var a in ary){
alert(a + ": " + typeof a);
}
全部都是string
alert时存在的隐式类型转换
String.prototype.fn = function(){return this};
var a = 'hello';
alert(typeof a.fn()); //-->object
alert(a.fn()); //-->hello
给String原型上添加了个fn方法，该方法返回this，我们知道this可以理解成当前类的实例对象，既然是对象那么typeof a.fn()自然返回是object了。
关键是最后的alert(a.fn())，a.fn()返回的明明是对象，但却隐式的转换成了字符串“hello”显示。
http://www.jb51.net/article/44155.htm
#####3.Split() join()的区别
split() 方法用于把一个字符串分割成字符串数组。
"2:3:4:5".split(":") //将返回["2", "3", "4", "5"]
join() 方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。
javascript 代码
var arr = new Array(3) arr[0] = "George" arr[1] = "John" arr[2] = "Thomas" document.write(arr.join("."))//输出George.John.Thomas #####4.数组方法pop() push() unshift() shift()
pop() 删除并返回数组的最后一个元素
Push()向数组的末尾添加一个或多个元素，并返回新的长度
Unshift()向数组的开个头添加一个或更多元素，并返回新的长度。
Shift()删除并返回数组的第一个元素
#####5.事件绑定和普通事件 有什么区别？
普通事件只支持单个事件，而事件绑定可以添加多个事件;
#####6.Ie和dom事件流的区别
（1）冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。
IE 5.5: div -> body -> document
IE 6.0: div -> body -> html -> document
Mozilla 1.0: div -> body -> html -> document -> window
（2）捕获型事件(event capturing)：事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)。
（3）DOM事件流：同时支持两种事件模型：捕获型事件和冒泡型事件，但是，捕获型事件先发生。两种事件流会触及DOM中的所有对象，从document对象开始，也在document对象结束。
DOM事件模型最独特的性质是，文本节点也触发事件(在IE中不会)。
#####8.Ajax请求的时候get和post方式的区别
1、GET请求，请求的数据会附加在URL之后，以?分割URL和传输数据，多个参数用&连接。URL的编码格式采用的是ASCII编码，而不是uniclde，即是说所有的非ASCII字符都要编码之后再传输。
POST请求：POST请求会把请求的数据放置在HTTP请求包的包体中。上面的item=bandsaw就是实际的传输数据。
因此，GET请求的数据会暴露在地址栏中，而POST请求则不会。
2、传输数据的大小（get 2KB)
在HTTP规范中，没有对URL的长度和传输的数据大小进行限制。但是在实际开发过程中，对于GET，特定的浏览器和服务器对URL的长度有限制。因此，在使用GET请求时，传输数据会受到URL长度的限制。
对于POST，由于不是URL传值，理论上是不会受限制的，但是实际上各个服务器会规定对POST提交数据大小进行限制，Apache、IIS都有各自的配置。
3、安全性
POST的安全性比GET的高。这里的安全是指真正的安全，而不同于上面GET提到的安全方法中的安全，上面提到的安全仅仅是不修改服务器的数据。比如，在进行登录操作，通过GET请求，用户名和密码都会暴露再URL上，因为登录页面有可能被浏览器缓存以及其他人查看浏览器的历史记录的原因，此时的用户名和密码就很容易被他人拿到了。除此之外，GET请求提交的数据还可能会造成Cross-site request frogery攻击
4、HTTP中的GET，POST，SOAP协议都是在HTTP上运行的
Call和apply的区别
更简单地说，apply和call功能一样，只是传入的参数列表形式不同：如 func.call(func1,var1,var2,var3)对应的apply写法为：func.apply(func1,[var1,var2,var3])
https://my.oschina.net/warmcafe/blog/74973
#####9.Ajax请求时如何解析json数据
1.JSON提供了json.js包，下载http://www.json.org/json.js 后，将其引入然后就可以简单的使用object.toJSONString()转换成JSON数据。
2.可以使用eval来转换JSON字符到Object
3.使用parseJSON()方法(JQ)
JSON.parse()之可以解析json格式的数据，并且会对要解析的字符串进行格式检查，如果格式不正确则不进行解析，而eval()则可以解析任何字符串，eval是不安全的。
比如下面的字符串：
var str = 'alert(1000.toString())';
eval(str);
JSON.parse(str);
用eval可以解析，并且会弹出对话框，而用JSON.parse()则解析不了。 其实alert并没有什么坏处，可怕的是如果用恶意用户在json字符串中注入了向页面插入木马链接的脚本，用eval也是可以操作的，而用JSON.parse()则不必担心这个问题。
使用 JSON 解析器将 JSON 转换为 JavaScript 对象是更安全的做法。JSON 解析器只能识别 JSON 文本，而不会编译脚本。
在浏览器中，这提供了原生的 JSON 支持，而且 JSON 解析器的速度更快。
#####10.闭包是什么？有什么特性？为什么使用闭包
闭包是指有权访问另一个函数作用域中的变量的函数，创建闭包的常见方法是在一个函数内部创建另一个函数。闭包会携带包含它的函数的作用域，因此会比其他函数占用更多的内存，过渡使用闭包可能会导致内存占用过多。
一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。
#####11.如何阻止时间冒泡和默认事件？
javascript 代码
//功能:停止事件冒泡 function stopBubble(e) { // 如果提供了事件对象，则这是一个非IE浏览器 if ( e && e.stopPropagation ) { // 因此它支持W3C的stopPropagation()方法 e.stopPropagation(); } else { // 否则，我们需要使用IE的方式来取消事件冒泡 window.event.cancelBubble = true; }
}
//功能：阻止事件默认行为 function stopDefault( e ) { // 阻止默认浏览器动作(W3C) if ( e && e.preventDefault ) { e.preventDefault(); } else { // IE中阻止函数器默认动作的方式 window.event.returnValue = false; }
return false; }
#####12.DOM删除插入替换到某个节点的方法
javascript 代码
//创建DOM节点 var oDiv = document.createElement('div'); //插入DOM节点 document.body.appendChild(oDiv); document.body.insertBefore(oP,oDiv) //删除DOM节点 document.body.removeChild(oP); //查找DOM节点 document.getElementById() document.getElementsByTagName() //替换DOM节点 document.body.replaceChild(oSpan,oBox) #####13.解释jsonp的原理，以及为什么不是真正的ajax
JSON是一种数据交换格式，而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议。JSON是地下党们用来书写和交换情报的“暗号”，而JSONP则是把用暗号书写的情报传递给自己同志时使用的接头方式
http://blog.csdn.net/superhosts/article/details/9057301
Ajax直接请求普通文件存在跨域无权限访问的问题，Web页面上调用js文件时则不受是否跨域的影响（不仅如此，我们还发现凡是拥有"src"这个属性的标签都拥有跨域的能力，比如<script>、<img>、<iframe>），当前阶段如果想通过纯web端（ActiveX控件、服务端代理、属于未来的HTML5之Websocket等方式不算）跨域访问数据就只有一种可能，那就是在远程服务器上设法把数据装进js格式的文件里，供客户端调用和进一步处理。一种叫做JSON的纯字符数据格式可以简洁的描述复杂数据，更妙的是JSON还被js原生支持。web客户端通过与调用脚本一模一样的方式，来调用跨域服务器上动态生成的js格式文件（一般以JSON为后缀），显而易见，服务器之所以要动态生成JSON文件，目的就在于把客户端需要的数据装入进去。为了便于客户端使用数据，逐渐形成了一种非正式传输协议，人们把它称作JSONP，该协议的一个要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。
1、ajax和jsonp这两种技术在调用方式上“看起来”很像，目的也一样，都是请求一个url，然后把服务器返回的数据进行处理，因此jquery和ext等框架都把jsonp作为ajax的一种形式进行了封装；
2、但ajax和jsonp其实本质上是不同的东西。ajax的核心是通过XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本。
3、所以说，其实ajax与jsonp的区别不在于是否跨域，ajax通过服务端代理一样可以实现跨域，jsonp本身也不排斥同域的数据的获取。
4、还有就是，jsonp是一种方式或者说非强制性协议，如同ajax一样，它也不一定非要用json格式来传递数据，如果你愿意，字符串都行，只不过这样不利于用jsonp提供公开服务。
总而言之，jsonp不是ajax的一个特例，哪怕jquery等巨头把jsonp封装进了ajax，也不能改变着一点！
#####14.Document load 和 document ready的区别
document.ready和onload的区别——JavaScript文档加载完成事件
页面加载完成有两种事件，一是ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件），二是onload，指示页面包含图片等文件在内的所有元素都加载完成。
#####15.‘==’和’===’的不同
双等号会造成类型转换（隐性类型转换），推荐一律使用三等号
= 赋值运算符
== 等于
=== 严格等于
例：
var a = 3;
var b = "3";
a==b 返回 true
a===b 返回 false
因为a,b的类型不一样
https://www.zhihu.com/question/31442029
#####16.Javascript的同源策略
浏览器的同源策略，限制了来自不同源的"document"或脚本，对当前"document"读取或设置某些属性。 （白帽子讲web安全[1]） 从一个域上加载的脚本不允许访问另外一个域的文档属性。
http://www.jb51.net/article/75484.htm
#####17.编写一个数组去重的方法
http://www.php230.com/1411947001.html
去重：
javascript 代码
Array.prototype.removeDup3 = function(){ var result = []; var obj = {}; for(var i = 0; i < this.length; i++){ if(!obj[this[i]]){ result.push(this[i]); obj[this[i]] = 1; }
}
return result; }
var arr = [1,2,2,5,2,"测试","test","测试","test"]; console.log(arr.removeDup3()); 升序排序：
javascript 代码
var quickSort = function(arr) { if (arr.length <= 1) { return arr; } var pivotIndex = Math.floor(arr.length / 2); var pivot = arr.splice(pivotIndex, 1)[0]; var left = []; var right = []; for (var i = 0; i < arr.length; i++){ if (arr[i] < pivot) { left.push(arr[i]); } else { right.push(arr[i]); }
}
return quickSort(left).concat([pivot], quickSort(right)); };
var arr1 = [1,4,65,21,2,222,111]; console.log(quickSort(arr1)); http://blog.csdn.net/u013558749/article/details/51004576
排序后插入数据：
javascript 代码
var insert=function (arr,item){ var mark; for (var i = 0; i < arr.length; i++){ if(item>=arr[i]&&item<=arr[i+1]){ mark=i; break; }
}
arr.splice(mark+1, 0,item); return arr; }
var arr1 = [1,4,9,65]; console.log(insert(arr1,9)); 题目：
请给Array本地对象增加一个原型方法，它用于删除数组条目中重复的条目(可能有多个)，返回值是一个包含被删除的重复条目的新数组。
//本题的思路是，用每个元素与其他的元素比较，相同则把那个元素存入数组
javascript 代码
Array.prototype.distinct = function(){ var ret = []; for(var i=1; i<this.length;i++){ for(var j=i+1;j<this.length;j++){ if(this[j]==this[i]){ ret.push(this.splice(j,1)[0]); //这步骤是最重要的this.splice(j,1)删除重复的元素，splice返回的是被删除的数组，加[0]就是 //这个被删除的元素，ret.push(这个元素)，把这个重复的元素加入到数组ret中 }
}
}
}
题目：
document.write([1,2,3,1,2,2,2,3,5,6].distinct())请填充代码，使mySort()能使传入的参数按照从小到大的顺序显示出来。
javascript 代码
function mySort() { var tags = new Array();//使用数组作为参数存储容器 请补充你的代码 return tags;//返回已经排序的数组 }
var result = mySort(50,11,16,32,24,99,57,100);/传入参数个数不确定 console.info(result);//显示结果 function mySort() { var tags = new Array(); for(var i = 0;i < arguments.length;i++) { tags.push(arguments[i]); }
tags.sort(function(compare1,compare2) { return compare1- compare2; });
return tags; }
var result = mySort(50,11,16,32,24,99,57,100); console.info(result); 稳定排序有：插入排序、冒泡排序、归并排序 不稳定排序：希尔排序、快速排序、选择排序、堆排序
各种整理
#####1、cssHack如何书写
四种写法：
1.Css选择器Hack：在Css选择器前加上一些只有某些特定浏览器才能识别的前缀Hack(html 前缀只对IE6生效，+html +前缀只对IE6/7 )
优点：全面，各种Hack都有，清理代码易认
缺点：选择器名称不易记，代码量大，重写选择器，带来大量的重复属性。
2.Css属性Hack:如： 属性前缀区别
-moz-transform:
-wekit-transform:
-o-transform:
-ms-transform:
transform:
优点：易记，代码少：
缺点：不全面，只有少数属性有。
3.条件注释法
用浏览器条件注释法，对浏览器兼容问题比较多时用，两种
一种是不同版本的浏览器载入不同的css样式
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="ie8.cdd">
<![endif]-->
另一种是对html或body挂载不同的Css
<!--[if lt IE 7 ]><html class="ie6" lang="zh-cn"><![endif]-->
<!--[if IE 7 ]><html class="ie7" lang="zh-cn"><![endif]-->
然后在样式里各种选择器加浏览器前缀
.ie9 .test{color:yellow;}/IE9浏览器/
.ie8 .test{color:red;}/IE8浏览器/
优点：安全；向后兼容；易维护
缺点：用不好会增加http请求；代码多；
4.Js浏览器探测，用js判断浏览器版本，给需要hack的部分添加对应的class
If（$.browser.msie && $.browser.version = 6浏览器版本为ie6）{
$(‘div’).addClass(‘ie6’);
}
优点：全面；易维护，可读性高；
缺点：占资源；代码量大；
总结：本人使用最多的是选择器属性hack,但有代码洁癖的我觉得条件注释法
中的给body和html根据版本挂载对应的class;
#####2、常用的Block-Level Elements和Inline Elements有哪些？Inline Elements如何操作后可以设置宽高
Block-Level:<h1><p><ul><table><div>
Inline Elements:<b><th><td><a><img><span>
给Inline Elements加上display：block；就会边成块状元素，
同理给Block-level Elements加上display：inline就会变成行内元素；
Css2.1加上了display:inline-block;行内块元素，该元素生成一个块状盒，该块状随着周围内容流动，如同它是一个单独的行内盒子（可以设置宽高）
#####3、常见的网页图像格式有ico、jpg、png、gif说说他们各自应用场景；
Ioc:windows图标图标文件，前端用到的是favicon.ico,收藏夹的图标文件，网站的ico
Jpg:非透明图片，有损压缩，将图片放大后有明显的马赛克，但压缩率高，不需要透明度的图片，可使用。
Png:压缩率没有jpg/jpeg高，但清晰
Gif:动图，支持动画效果，支持透明度
#####4、如何触发页面reflow、repaint
Repaint（重绘），元素的外观被改变，且在没有改变布局的情况下发生的，如改变：outline,visibility,background-color,等不影响到dom结构测渲染
Reflow(渲染)，于repaint区别他会影响到dom的结构渲染，同时也会触发repaint,他会改变本身与所有父辈元素，这种开销是非常昂贵的，导致性能下降是必然的，页面元素越多越明显。
何时触发
1.Dom元素的添加、修改（内容）、删除（reflow+repaint）
2.仅修改Dom元素的字体颜色（repaint,不需要调整布局）
3.应用新的样式或者修改任何影响元素外观元素的属性
4.Resize浏览器窗口、滚动页面
#####4、如何触发页面reflow、repaint
Repaint（重绘），元素的外观被改变，且在没有改变布局的情况下发生的，如改变：outline,visibility,background-color,等不影响到dom结构测渲染
Reflow(渲染)，于repaint区别他会影响到dom的结构渲染，同时也会触发repaint,他会改变本身与所有父辈元素，这种开销是非常昂贵的，导致性能下降是必然的，页面元素越多越明显。
何时触发
1.Dom元素的添加、修改（内容）、删除（reflow+repaint）
2.仅修改Dom元素的字体颜色（repaint,不需要调整布局）
3.应用新的样式或者修改任何影响元素外观元素的属性
4.Resize浏览器窗口、滚动页面
5.读取某些属性（offsetLeft、offsetTop、offsetHeight、offsetWidthop/left/width/height、
clientTop/left/width/height、getComputedStyle()、currntStyle）
如何避免
- 先将元素从document中删除，完成修改后再把元素放回原来的位置
- 将元素的display设置为”none”，完成修改后再把display修改为原来的值
- 如果需要创建多个DOM节点，可以使用DocumentFragment创建完后一次性的加入document
var fragment = document.createDocumentFragment();
fragment.appendChild(document.createTextNode('keenboy test 111'));
fragment.appendChild(document.createElement('br'));
fragment.appendChild(document.createTextNode('keenboy test 222'));
document.body.appendChild(fragment); - 集中修改样式
4.1尽可能少的修改元素style上的属性
4.2尽量通过修改className来修改样式
4.3通过cssText属性来设置样式值
element.style.width=”80px”; //reflow
element.style.height=”90px”; //reflow
element.style.border=”solid 1px red”; //reflow
以上就产生多次reflow，调用的越多产生就越多
element.style.cssText=”width:80px;height:80px;border:solid 1px red;”; //reflow
4.4缓存Layout属性值
var left=elem.offsetLeft; 多次使用left也就产生一次reflow
4.5设置元素的position为absolute或fixed
元素脱离标准流，也从DOM树结构中脱离出来，在需要reflow时只需要reflow自身与下级元素
4.6尽量不要用table布局
table元素一旦触发reflow就会导致table里所有的其它元素 reflow。在适合用table的场合，可以设置table-layout为auto或fixed，这样可以让table一行一行的渲染，这种做法也是为了限制reflow的影响范围
4.7避免使用expression,他会每次调用都会重新计算一遍(包括加载页面)
#####5、用3个div实现小图显示效果，左边div宽高都为50px,右边div宽100px，高110px,写出html+css
html 代码
<html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link rel="stylesheet" href=""> <style> div{ background-color:#ccc; position: relative; }
.box1,.box2{ width: 50px; height: 50px; float: left; }
.box2{ clear: both; margin-top:10px; }
.box3{ width: 100px; height: 110px; margin-left:60px; }
.box4,.box5{ width: 50px; height: 50px; position: absolute; #####6、js中的数据类型有哪些数据类型
5种简单的数据类型：undefined、null、boolean、number、string
1种复杂数据类型：object
#####7、写出DOM中创建、插入、删除节点的方法，可以使用jquery方法实现
创建：var node=document.createElement(“p”);
插入：var TextNode=document.createTextNode(“这是一个文本节点”);
node.appendChild(TextNode);
删除：var parentNode=document.getElementById(“parent”);
var childNode=document.getElementById(“child”);
parent.removeChild(childNode);
Jq:
创建：var $node=$(“<li>创建新的节点</li>”);
插入：$(“#parent”).append($node);//before/after/insertBefore/insertAfter
删除：$(“#child”).remove();
#####8、请编写一个JavaScript函数 parseQueryString，它的用途是把URL参数解析为一个对象
javascript 代码
//正则表达式 var parseQueryString = function (url) { var reg = /([^\?\=\&]+)\=([^\?\=\&]*)/g; var obj = {}; while (reg.exec (url)) { obj[RegExp.$1] = RegExp.$2; }
return obj; }
//字符分割 function parseQueryString(url) { var str = url.split("?")[1], items = str.split("&"); var result = {}; var arr; for (var i = 0; i < items.length; i++) { arr = items[i].split("="); result[arr[0]] = arr[1]; }
return result; }
var url = "http://wiatcmdax.cn/index.php?key0=0&key1=1&key2=2"; var obj = parseQueryString (url); 优缺点：正则表达式的代码更简洁，但是需要记住复杂的正则表达式，字符分割虽然代码稍微长一些，但更易于理解易于记住。如果是首次分析趋向于字符分割，如果是后面优化，我趋向于使代码简洁干练，然后重复利用。
#####9、IE与FF的事件模型有哪些区别，并实现一个bindEvent方法
IE的做法:
在IE 中,每个元素和window对象都有2个方法:attachEvent()和detachEvent(); attachEvent用来给一个事件附加事件处理函数. 而detachEvent用来将事件处理函数分离.每个方法都有2个参数:要分配的事件处理函数的名字(例如:onclick)和一个函数引用.
例如:
javascript 代码
var fnClick=function(){alert("ss")} var fnClick1=function(){alert("sss")} var obj=document.getElementById("id") obj.attachEvent("onclick",fnClick); obj.attachEvent("onclick",fnClick1); obj.detachEvent("onclick",fnClick); 事件的执行顺序是按照添加的顺序执行的.
DOM方法
dom中对应的方法是addEventListener()和removeEventListener ,这两个方法有3个参数,事件名称,要分配的函数和处理函数是用于冒泡阶段还是捕获阶段.如果事件处理函数是用在捕获阶段,第三个参数为true,冒泡阶段为false.用法和IE中的用法一样,不再多说了,就举一个例子吧:
javascript 代码
var fnClick=function(){alert("ss")} var fnClick1=function(){alert("sss")} var obj=document.getElementById("id") obj.addEventListener("click",fnClick,false); obj.addEventListener("click",fnClick1,false); obj.removeEventListener("click",fnClick,false); 注意这里的是事件名称"click",不是要分配的事件处理函数的名字"onclick",自己体会一下吧.
添加事件
DOM事件模型 – addEventListener
addEventListener(eventType, handler, useCapture)
eventType不带有on字符串；
handler参数是一个事件句柄，这个函数或方法带有一个事件对象参数；
useCapture参数决定了事件句柄触发在哪种事件传播阶段，如果useCapture为true则为捕获阶段，反之则为冒泡阶段。
IE事件模型 – attachEvent
attachEvent(eventType, handler)
eventType 带 on字符串；
handler参数是一个事件句柄，这个函数或方法带有一个事件对象参数；
事件过程
l DOM事件模型包含捕获阶段和冒泡阶段，IE事件模型只包含冒泡阶段；
2 DOM事件模型可使用e.stopPropagation()来阻止事件流。
自写bindEvent
javascript 代码
// ---------- 事件绑定与删除绑定 ---------- // function bindEvent(element, eventName, func) { var events = element['the'+eventName]; //用于保存某个事件序列 if(!events) { //如果不存在一个序列，则创建它，并加入HTML标记当中的onEvent = function(){}形式的绑定 events = element['the'+eventName] = []; if (element['on'+eventName]) { events.push(element['on'+eventName]); } }
//检测是否为重复绑定 for(var i=0; i<events.length; i++) { if(events[i] === func) { flag = true; break; } }
// 非重复绑定，则加入该函数事件 if(i >= events.length) { events.push(func); }
// 重新定义这个事件的执行方式 element['on'+eventName] = function(event) { event = event || (function() { //修复IE的事件对象 var e = window.event; e.preventDefault = function() { e.returnValue = false; } e.stopPropagation = function() { e.cancelBubble = true; } //根据需要继续修复 return e; })();
//顺序执行这些函数 for(var i=0; i<events.length; i++) { events[i].call(element, event); } }
}
// 删除事件绑定 #####10、请编写一个javaScript函数isArray,用于判断一个obj是否为数组对象。
var isArray = function(obj) {
return Object.prototype.toString.call(obj) === '[object Array]';
}
http://www.jb51.net/article/21109.htm
#####11、小贤是一条可爱的小狗(Dog)，它的叫声很好听(wow)，每次看到主人的时候就会乖乖叫一声(yelp)。从这段描述可以得到以下对象：
javascript 代码
function Dog() { this.wow = function() { alert(’Wow’); }
this.yelp = function() { this.wow(); }
}
小芒和小贤一样，原来也是一条可爱的小狗，可是突然有一天疯了(MadDog)，一看到人就会每隔半秒叫一声(wow)地不停叫唤(yelp)。请根据描述，按示例的形式用代码来实。（继承，原型，setInterval）
答案：
javascript 代码
function MadDog() { this.yelp = function() { var self = this; setInterval(function() { self.wow(); }, 500); }
}
MadDog.prototype = new Dog();
//for test var dog = new Dog(); dog.yelp(); var madDog = new MadDog(); madDog.yelp(); #####12、http状态码，200/304/404/500分别代表什么
200 (OK/正常) (SC_OK)的意思是一切正常。一般用于相应GET和POST请求。这个状态码对servlet是缺省的；如果没有调用setStatus方法的话，就会得到200。
304 (Not Modified/为修正)304 (SC_NOT_MODIFIED)是指缓冲的版本已经被更新并且客户端应刷新文档。
当客户端有一个缓存的文档，通过提供一个 If-Modified-Since 头信息可指出客户端只希望文档在指定日期之后有所修改时才会重载此文档，用这种方式可以进行有条件的请求。304 (SC_NOT_MODIFIED)是指缓冲的版本已经被更新并且客户端应刷新文档。另外，服务器将返回请求的文档及状态码 200。servlet一般情况下不会直接设置这个状态码。它们会实现getLastModified方法并根据修正日期让默认服务方法处理有条件的请求。这个方法的例程已在2.8部分(An Example Using Servlet Initialization and Page Modification Dates/一个使用servlet初始化和页面修正日期的例子)给出。
404 (Not Found/未找到)404 (SC_NOT_FOUND)状态每个网络程序员可能都遇到过，他告诉客户端它是表示“没有所访问页面”的标准方式。这个状态码是常用的响应并且在HttpServletResponse类中有专门的方法实现它：sendError("message")。相对于setStatus使用sendError得好处是：服务器会自动生成一个错误页来显示错误信息。但是，Internet Explorer 5浏览器却默认忽略你发挥的错误页面并显示其自定义的错误提示页面，虽然微软这么做违反了 HTTP 规范。要关闭此功能，在工具菜单里，选择Internet选项，进入高级标签页，并确认“显示友好的 HTTP 错误信息”选项（在我的浏览器中是倒数第8各选项）没有被选。但是很少有用户知道此选项，因此这个特性被IE5隐藏了起来使用户无法看到你所返回给用户的信息。而其他主流浏览器及IE4都完全的显示服务器生成的错误提示页面。可以参考图6-3及6-4中的例子。 所给的地址无法找到任何资源。
500 (Internal Server Error/内部服务器错误)
500 (SC_INTERNAL_SERVER_ERROR) 是常用的“服务器错误”状态。该状态经常由CGI程序引起也可能（但愿不会如此！）由无法正常运行的或返回头信息格式不正确的servlet引起。
http://www.cnblogs.com/lxinxuan/archive/2009/10/22/1588053.html
#####13、javascript异步编程的认识、异步编程的优势和难点，异步编程的主要解决方案
avascript语言的执行环境是“单线程”，就是一次只能完成一件任务，如果有多个任务，就必须排队，前面一个任务完成，再执行湖面一个任务，以此类推。
这种模式的好处是实现起来比较简单，执行环境相对单纯，坏处是只要有一个任务号是很长，后面的任 务都必须排队等着，会拖延整个程序的执行，常见的浏览器无响应，往往就是因为某一段jvascript代码长时间运行，导致整个页面卡在这个地方。
"同步模式"就是上一段的模式，后一个任务等待前一个任务结束，然后再执行，程序的执行顺序与任务的排列顺序是一致的、同步的；"异步模式"则完全不同，每一个任务有一个或多个回调函数（callback），前一个任务结束后，不是执行后一个任务，而是执行回调函数，后一个任务则是不等前一个任务结束就执行，所以程序的执行顺序与任务的排列顺序是不一致的、异步的。
异步"异步模式"非常重要。在浏览器端，耗时很长的操作都应该异步执行，避免浏览器失去响应，最好的例子就是Ajax操作。在服务器端，"异步模式"甚至是唯一的模式，因为执行环境是单线程的，如果允许同步执行所有http请求，服务器性能会急剧下降，很快就会失去响应。
异步编程的4种方法
f1();
f2();
1.回调函数
javascript 代码
function f1(callback){ setTimeout(function () { // f1的任务代码 callback(); }, 1000); }
f1(f2)； 采用这种方式，我们把同步操作变成了异步操作，f1不会堵塞程序运行，相当于先执行程序的主要逻辑，将耗时的操作推迟执行。
回调函数的优点是简单、容易理解和部署，缺点是不利于代码的阅读和维护，程序的流程会很混乱，而且每个任务只能指定一个回调函数。
2.事件监听
另一种思路是采用事件驱动模式。任务的执行不取决于代码的顺序，而取决于某个事件是否发生。
javascript 代码
f1.on('done'，f2); function f1(){ setTimeout(function () { // f1的任务代码 f1.trigger('done'); }, 1000); }
f1.trigger('done')表示，执行完成后，立即触发done事件，从而开始执行f2。
这种方法的优点是比较容易理解，可以绑定多个事件，每个事件可以指定多个回调函数。缺点是整个程序都要变成事件驱动型，运行流程会变得很不清晰。
3.发布/订阅
上一节的"事件"，完全可以理解成"信号"。
我们假定，存在一个"信号中心"，某个任务执行完成，就向信号中心"发布"（publish）一个信号，其他任务可以向信号中心"订阅"（subscribe）这个信号，从而知道什么时候自己可以开始执行。这就叫做"发布/订阅模式"（publish-subscribe pattern），又称"观察者模式"（observer pattern）。
这个模式有多种实现，下面采用的是Ben Alman的Tiny Pub/Sub，这是jQuery的一个插件。
首先，f2向"信号中心"jQuery订阅"done"信号。
jQuery.subscribe("done", f2);
然后，f1进行如下改写：
javascript 代码
function f1(){ setTimeout(function () { // f1的任务代码 jQuery.publish("done"); }, 1000); }
jQuery.publish("done")的意思是，f1执行完成后，向"信号中心"jQuery发布"done"信号，从而引发f2的执行。
此外，f2完成执行后，也可以取消订阅（unsubscribe）。
jQuery.unsubscribe("done", f2);
这种方法的性质与"事件监听"类似，但是明显优于后者。因为我们可以通过查看"消息中心"，了解存在多少信号、每个信号有多少订阅者，从而监控程序的运行。
4.Promises对象
Promises对象是CommonJS工作组提出的一种规范，目的是为异步编程提供统一接口。
简单说，它的思想是，每一个异步任务返回一个Promise对象，该对象有一个then方法，允许指定回调函数。比如，f1的回调函数f2，可以写成：
f1().then(f2);
f1要进行如下改写（这里使用的是jQuery的实现）：
javascript 代码
function f1(){ var dfd = $.Deferred(); setTimeout(function () { // f1的任务代码 dfd.resolve(); }, 500); return dfd.promise; }
样写的优点在于，回调函数变成了链式写法，程序的流程可以看得很清楚，而且有一整套的配套方法，可以实现许多强大的功能。
比如，指定多个回调函数：
f1().then(f2).then(f3);
再比如，指定发生错误时的回调函数：
f1().then(f2).fail(f3);
而且，它还有一个前面三种方法都没有的好处：如果一个任务已经完成，再添加回调函数，该回调函数会立即执行。所以，你不用担心是否错过了某个事件或信号。这种方法的缺点就是编写和理解，都相对比较难。
http://kb.cnblogs.com/page/167474/
#####14、提高网站的前端性能，你会关注那些方面？
一、页面级优化
1.减少 HTTP请求数
(1). 从设计实现层面简化页面
(2). 合理设置 HTTP缓存
(3). 资源合并与压缩
(4). CSS Sprites
(5). Inline Images
(6). Lazy Load Images
2.将外部脚本置底（将脚本内容在页面信息内容加载后再加载）
3.异步执行 inline脚本(其实原理和上面是一样，保证脚本在页面内容后面加载。)
4.Lazy Load Javascript（只有在需要加载的时候加载，在一般情况下并不加载信息内容。）
5.将 CSS放在 HEAD中
6.异步请求 Callback（就是将一些行为样式提取出来，慢慢的加载信息的内容）
7.减少不必要的 HTTP跳转
8.避免重复的资源请求
二、代码级优化
1.Javascript
2.CSS选择符
但实际上浏览器对选择符的解析是从右往左进行的
3.HTML
4.Image压缩
https://www.zhihu.com/question/21658448
#####1、doctype的作用是什么？
告诉浏览器使用什么样的html或xhtml规范来解析html文档
对浏览器的渲染模式产生影响，不同的渲染模式会影响到浏览器对于css代码甚至javascript脚本的解析，所以IE系列浏览器中，doctype所决定的html页面的渲染模式至关重要。
两张渲染模式：
backCompat:怪异模式
CSS1Compat:严格模式
HTML5只需要写 <!DOCTYPE HTML>，HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为。
浏览器按W3C标准解析执行代码；怪异模式则是使用浏览器自己的方式解析执行代码，因为不同浏览器解析执行的方式不一样，所以我们称之为怪异模式。
#####2、css中的Class和id的区别
class(类)在同一个html网页页面可以无数次的调用相同的class类
ID是表示着标签的身份，同样ID在页面里也只能出现一次，并且是唯一性。
CSS样式定义的时候 以“#”来开头命名id名称。
为了给js预留id，所以在写css样式时我一般很少直接使用id,除非是确认一个大的整体模块。
#####3、浮动和它的工作原理
浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。
浮动元素引起的问题：
父元素的高度无法被撑开，影响与父元素同级的元素
与浮动元素同级的非浮动元素（内联元素）会跟随其后
若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构
#####4、position的值和left和top的定位依据
Absolute 生成绝对定位的元素，相对于static定位以外的第一个父元素。
Fixed生成绝对定位的元素，相对于浏览器窗口进行定位。
Ralative 生成相对定位，相随与正常位置进行定位
Static默认值，没有定位。忽略toplrft
Inherit从夫元素继承position属性
#####5、解释事件代理
“事件代理”即是把原本需要绑定的事件委托给父元素，让父元素担当事件监听的职务。
DOM操作是十分消耗性能的。所以重复的事件绑定简直是性能杀手。而事件代理的核心思想，就是通过尽量少的绑定，去监听尽量多的事件。
http://www.daxueit.com/article/3704.html
6.javaScript的this是如何工作的？
This对象是在运行时基于函数的执行环境绑定的，在全局函数中，this等于window,而当函数被用作某个对象的方法调用时，this等于那个对象。
https://www.zhihu.com/question/19624483
方法调用模式
当函数被保存为对象的一个属性时，成该函数为该对象的方法。函数中this的值为该对象。
javascript 代码
var foo = { name: 'fooname', getName: function (){ return this.name }
}
foo.getName(); // this => foo 函数调用模式
当函数并不是对象的属性。函数中this的值为全局对象
note：某个方法中的内部函数中的this的值也是全局对象，而非外部函数的this
javascript 代码
function foo(){ this.name = 'fooname'; }
foo(); // this => window 构造器调用模式
即使用new调用的函数，则其中this将会被绑定到那个新构造的对象。
javascript 代码
function Foo(){ this.name = 'fooname'; }
var foo = new Foo(); // this => foo 使用apply或call调用模式
该模式调用时，函数中this被绑定到apply或call方法调用时接受的第一个参数。
javascript 代码
function getName(name){ this.name = name; }
var foo = {}; getName.call(foo, name); // this =>foo #####7、原型继承的原理
借助原型可以基于已有的对象创建新对象，同时还不必因此创建自定义类型。
创建一个原型，必须有一个对象可以作为另一个对象的基础，
[code=javascript,javascript 代码false]Var person={
name:”Nicholas”,
friends:[“shelby”,”count”,”van”]
}
Var anotherPerson=object(person);//Object.create(person);
anotherPerson.name=”greg”;
anotherPerson.friend.push(“Rod”);
Var yetAnotherPerson==object(person);//Object.create(person);
yetAnotherPerson.name=”linda”;
yetAnotherPerson.friend.push(“silly”);
Console.log(person.friends);//“shelby,count,van,Rod,silly[/code]
#####8.什么是“use strict”?使用它的好处。
"严格模式"（strict mode）。顾名思义，这种模式使得Javascript在更严格的条件下运行。
为什么用严格模式
- 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;
- 消除代码运行的一些不安全之处，保证代码运行的安全；
- 提高编译器效率，增加运行速度；
- 为未来新版本的Javascript做好铺垫。
"严格模式"体现了Javascript更合理、更安全、更严谨的发展方向，包括IE 10在内的主流浏览器，都已经支持它，许多大项目已经开始全面拥抱它。另一方面，同样的代码，在"严格模式"中，可能会有不一样的运行结果；一些在"正常模式"下可以运行的语句，在"严格模式"下将不能运行。掌握这些内容，有助于更细致深入地理解Javascript，让你变成一个更好的程序员。
题目：
Fibonacci数列的数学表达式就是：
F(n) = F(n-1) + F(n-2)
F(1) = 1
F(2) = 1
javascript 代码
functiongetNthFibonacci(count) { var ans=[1,1]; var buf=2 for(var i=buf;i<=count;i++){ ans[i]=ans[i-2]+ans[i-1]; }
return ans[count]; }
请给Array本地对象增加一个原型方法，它用于删除数组条目中重复的条目(可能有多个)，返回值是一个包含被删除的重复条目的新数组。
javascript 代码
Array.prototype.distinct = function() {//原型函数。 var ret = []; for (var i = 0; i < this.length; i++) { for (var j = i+1; j < this.length;) { if (this[i] === this[j]) { ret.push(this.splice(j, 1)[0]); //splice中的j是删除的位置，1是删除的数目，第三个参数是要加入的对象，返回的是一个数组，所以取第一个数组的值push进ret里； } else { j++; }
}
}
return ret; }
