1、浏览器页面由哪三层构成，分别是什么，作用是什么？
构成：结构层、表示层、行为层
分别是：html、css、JavaScript
作用：html实现页面结构，css完成页面的表现与风格，JavaScript实现客户端的功能与业务，展示一些动态效果
2、说说你对HTML5的认识，是什么？为什么？优点？缺点？新增特性？移除元素？
是什么： HTML5指的是包含HTML、css、JavaScript在内的一套技术组合。2014年10月由W3C完成标准定制，它希望能够减少网页浏览器对于需要插件依赖。
为什么：HTML4陈旧已经不能满足日益发展的互联网需要，特别是移动互联网，为了增强浏览器功能，flash被广泛应用，但其安全与稳定性堪忧，并且不适合在耗电、触摸的移动端使用。HTML5增加了浏览器的原生功能，减少了web应用对插件的依赖，让用户体验更好，同时让开发更加方便。
优点：1）、网络标准统一，本身由W3C推荐
2）、多设备、跨平台
3）、即时更新
4）、增加了部分语义化标签，有助于开发者定义更重要的内容
5）、可以给站点带来更多的多媒体音频和视频元素，提高了可用性的同时改进了用户体验
6）、可以很好地替代Flash和SliverLight
7）、涉及到网站抓取和索引的时候，对于SEO非要友好
8）、被大量应用于移动应用程序和游戏
缺点：1）、存在安全隐患：像webstorage、websocket这样的功能很容易被黑客利用，来盗取用门户信息。
2）、完善性有待提升：许多特性各种浏览器的支持程度不一样
3）、技术门槛更高：HTML5简化开发者工作的同时，也有许多新的属性和API需要开发者进行学习，部分甚至涉及后台和浏览器原理的知识。
4）、性能：某些平台上的引擎问题导致HTML5性能低下
5）、浏览器兼容性差：IE9以下浏览器几乎全军覆没
新增特性：
1）、绘图canvas
2）、用于媒介回放的video和audio元素
3）、离线存储：
localstorage：长期存储数据，浏览器关闭数据不丢失
sessionStorage:数据再浏览器关闭后自动删除
4）、语义化更好的元素：article、footer、header、nav、section
5）、表单控件：calendar、date、time、email、utl、search
移除元素：basefont、big、center、font、s、strike、tt、u、frame、frameset、noframes
3、HTML5和HTML的区别：
1）、在文档类型声明上
HTML声明：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
HTML5声明：<!doctype html>
上面的两种声明,HTML5声明简洁方便人们的记忆，HTML声明太长了并且很难记住这段代码。
2）、在结构语义上
HTML:没有体现结构语义化的标签，通常都是这样来命名的<div id="header"></div>，这样表示网站的头部。
HTML5:在语义上却有很大的优势，提供了一些新的HTML5标签比如: article、footer、header、nav、section，这些通俗易懂。
4、HTML5字符集？
<meta charset = "UTF-8">
5、请你描述一下HTML5离线存储localstroage、sessionstroage与cookies的区别及其优缺点？
cookies ：指某些网站为了辨别用户身份、进行回话跟踪而储存在用户本地终端上的数据（通常经过加密）。Cookie是由HTTP服务器设置的，保存在浏览器中，但HTTP协议是一种无状态协议，在数据交换完毕后，服务器端和客户端的链接就会关闭，每次交换数据都需要建立新的链接。无形中会浪费带宽，另外cookie还需要指定作用域，不可以跨域调用。
cookies优点：极高的扩展性和可用性
1）、通过良好的编程，控制保存在cookie中的session对象的大小
2）、通过加密和安全传输技术减少cookie被**的可能性
3）、只在cookie中存放不敏感数据，即使被盗也不会有重大损失
4）、控制cookie的生命期，使之永远有效，偷盗者可能拿到一个过期的cookie
cookies缺点：
1）、cookie数量和长度有限，每个域名最多有20条cookie，每个cookie长度不能超过4kb，否则会被拦截
2）、安全性问题：如果cookie被人拦截，便可以获取到所有的session信息，及时加密也于事无补，因为拦截者并不需要知道cookie的意义，他只要原样转发cookie就可以达到目的
3）、有些状态不可能保存在客户端，比如：为了防止表单重复提交，需要在服务器端定义一个计数器，那么这个计数器如果保存在客户端毫无意义
sessionStorage和localStorage是HTML5 Web StorageAPI提供的，可以方便的在web请求之间保存数据，有了本地数据，就可以避免数据在浏览器和服务器间不必要的来回传递。
sessionStorage引入了一个浏览器窗口的概念，是在同源的同窗口中始终存在的数据，也就是说只要这个浏览器窗口没有关闭，即使刷新页面或进入同源的另一页面，数据仍然存在，关闭窗口，数据销毁。
localStorage用于持久化的本地存储，数据永远不会过期，关闭浏览器也不丢失
localstroage、sessionstroage与cookies的区别：
1）、webstorage拥有setitem、getitem、removeitem、clear等方法，不像cookie需要开发者自己封装setcookie、getcookie
2）、cookie的作用是与服务器进行交互，作为http规范的一部分而存在，而webstorage仅仅为了在本地存储数据而生
3）、cookie每个域名存储量较小，所有域名的存储量有限制，大概4k，存储数量有个数限制（各浏览器不同），会随请求发送到服务端
4）、localstroage永久存储，单个域名存储量比较大，推荐5MB，总体数量无限制
5）、sessionStroage只在session内有效，存储量更大，推荐无限制
userData：ie提供的一种可持久化数据，每个数据最多128k，每个域名下最多1M，这个持久化数据放在缓存中，如果缓存没有清理，则一直存在。通过简单的代码封装，可以统一到所有的浏览器都支持webstroage
6、什么是HTML语义化？为什么要语义化？
html语义化：根据内容的结构化，选择合适的语义化标签，便于开发者阅读写出更优雅的代码的同时让浏览器的爬虫和机器能很好的解析。
为什么要语义化：
1）、为了在没有css的情况下，页面也能呈现出很好地内容结构、代码结构
2）、为了用户体验更好
3）、有利于SEO：为了和搜索引擎建立良好沟通，有助于爬虫抓取更多有效信息，爬虫依赖标签来确定上下文和各个关键字的权重
4）、为了方便其他设备如屏幕阅读器、盲人阅读器、移动设置解析
5）、为了便于团队开发和维护，语义化根据可读性，是下一步网页的重要动向，减少差异化
7、link与import的区别
<link rel="stylesheet“ rev="stylesheet" href="css文件" type=”text/css“ media="all" />
@import url('css文件')；
1）、link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS
2）、link引入css时，在页面载入时同时加载；@import需要页面网页完全载入以后加载
3）、limk是XTHML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持
4）、link支持使用JavaScript控制DOM去改变样式；而@import不支持
8、HTML全局属性有哪些
accesskey：设置快捷键
class：为元素设置类标
contenteditable：指定元素内容是否可编辑
contextmenu：自定义鼠标右键弹出菜单内容
data-:为元素增加自定义属性
id、style、title、cppy、move、link、hidden
9、对象？面向对象？封装？继承？类？原型prototype ？
对象：比如电视机就是一个对象，他是很具体的一个实例
面向对象：比如我想看电视，我可以不清楚电视计的具体工作原理，但我知道如何使用电视机表面的的频道、音量、以及其他功能按键，我就可以使用电视这个对象了。
封装：隐藏一些具体的属性和方法，不需要知道其中的具体原理，只要会用实例对象就可以
继承：父类已经具有一些属性和方法，子类可以直接获取，并在已有的基础之上增添新的属性或功能，目的是为了代码重用
多态：不同类的对象对同一消息作出不同的响应就叫做多态。就像上课铃响了，上体育课的学生跑到操场上站好，上语文课的学生在教室里坐好一样。
类：类就像一个模具，按照这个模具生产出来的实实在在的东西就是实例对象
原型：原型prototype类似于css里面的class，给原型设置了属性和方法，则所有调用这个对象原型的元素都具有了这些属性和方法，给对象加属性和方法，就类似于css的行间样式加属性和方法
目前流行的面向对象编写方式：
在构造函数里面写对象的属性
在原型中写对象的方法
10、图解原型
//构造函数
function person(uName){
this.username = uName;
}
//原型
person.prototype.sayName = function(){
return this.username ;
}
var person1 = new person("caroline");
var person2 = new person("Bob");
1）、每个函数都有一个原型属性(protopyte)，它是一个指针，指向构造函数的原型对象
(person.protopyte)
2)、默认情况下，所有的构造函数的原型对象都会自动获得一个constructor属性，该属性包含一个指向prototype属性所在的函数
3）、所有实例都包含一个隐式原型_proto_,也是一个指针，指向实例的构造函数的原型对象
4）、当一个对象访问属性或方法的时候遵循就近原则，如果实例有该方法或属性，则直接用实例中的方法或属性，如果实例没有，则沿着实例的_proto_指针指向的原型对象继续向上查找，如果找不到就是undefined
11、详解继承
1）、把父类的实例对象赋给子类的原型对象，可以实现继承，缺点：不能传递参数
Son.prototype = new Father();
2) 、在子类构造函数中，调用父类的call方法，借用父类的构造函数，用于复制父类的属性，缺点：
不能复制父类的方法
function Son(uName){
Father.call(this,uName);
}
3)、综上所述，使用原型和构造函数组合完成继承，通过原型继承父类的方法，通过构造函数继承父类的属性
function Father(uName){
this.skills = ['php','js'];
this.username = uName;
}
Father.prototype.showName = function(){
return this.username;
}
function Son(uName){
Father.call(this,uName);
}
Son.prototype = new Father();
结果：
var oT1 = new Teacher( 'ghostwu' );
oT1.skills.push( 'linux' );
var oT2 = new Teacher( 'ghostwu' );
console.log( oT2.skills ); //php,js
console.log( oT2.showUserName() ); //ghostwu
12、闭包 ：能够读取其他函数内部变量的函数
function fun(){
var num = 66;
function fun1 (){
return num;
}
return fun1 ;
}
函数外部无法访问函数内部的局部变量，但函数内部的函数可以访问本函数内的局部变量，故通过闭包实现函数外部访问函数内部局部变量。但容易造成内存泄漏，应当谨慎使用。
13、你有哪些性能优化的方法？
1）、减少http请求次数：
1】、压缩css、js源码，减少数据请求时间
2】、图片控制合适的大小，
3】、数据缓存，
2）、前端用变量保存ajax请求结果，每次操作本地变量，减少请求次数
3）、用innerHtml代替Dom操作，减少DOM操作次数
4）、当需要设置的样式很多时使用className而不是直接操作style
5）、避免使用css动态属性
6）、图片预加载，把样式表放在顶部，脚本放在底部，加上时间戳
7）、少用全局变量，缓存DOM节点查找的结果，减少IO读取操作
8）、避免在页面的主题布局中使用table，table要等其中的的内容完全下载之后才会显示出来，显示比div+css布局慢
14、常见浏览器兼容性与解决方案？
1）、不同浏览器标签默认的外补丁和内部丁不同
解决方案：css*{margin:0;padding:0}
2）、img是行内标签，可以拍成一行，但几个img放在一起的时候，有些浏览器会有默认的间距
解决方案：使用float属性为img布局
3）、透明度
解决方案：ie ：filter：alpha（opacity = 0；）
火狐：opacity：0；
15、解释一下css的盒模型？
盒模型就类比于日常生活中使用的盒子，主要由内容content、内边距padding、边框border、外边距margin构成。其中
标准的盒模型：width：只包含content，
IE盒模型：width：包含content+padding+border
IE转标准：
1）、直接在文档头部加DOCTYPE声明
2）、CSS3中的box-sizing属性，设置为：content-box
标准转IE：
CSS3中的box-sizing属性，设置为：border-box
16、如何居中div
一、水平居中：
flex：父元素设置：display:flex; justify-content：center 但是IE不支持，FF、chrome支持
非浮动元素：
1）、块级元素：子元素设置margin：0 auto （上右下左）
2）、行级元素：父级元素设置text-aline：center
浮动元素：
1】、宽度固定（父类不浮动，若父类浮动需要设置父类宽度100%）：
Left： 属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
%：设置以包含元素的百分比计的左边位置。可使用负值。
position：relative；
left：50%；
margin-left：-250px；其中250是浮动元素宽度的一半（行、块均适用）
2】、宽度不固定：
浮动元素的left为%时，是父元素父元素左边缘距整个页面左边缘50%，即父元素左边缘在页面中轴线上；子元素再超出父元素50%，设置left:-50% 或者 right：50%
父元素：position：relative；left：50%，float：left；
子元素：position：relative；left：-50%
绝对定位的元素：
1）、定宽（子定宽）
父元素：position：relative；
子元素：
{
position：absolute；
left: 50%
margin-left : -1/2width;(自己的宽度)
}
2）、不定宽
父元素：position：relative；
子元素：position：absolute；
left：50%；
transfrom：translateX（-50%）；相对于元素本身宽度移动
二、垂直居中：
父元素：display:flex; align-items：center；但是IE不支持，FF、chrome支持
非浮动元素：
行级元素：子元素line-height与父元素height设置一样
行、块、图片通用：
父元素：display：table-cell；vertical-align: middle;
浮动定高元素：
父元素：position：relative；
子元素：position：absolute；
line-height:（与子元素height相等）；
top：50%；
margin-top: -1/2height；
绝对定位：
父元素：position：relative；
子元素：position：absolute；
top:50%;
transfrom：translateY（-50%）；
17、作用域黄金法则?
1）、 js没有块级作用域，只有函数级作用域，函数外面的变量函数里面可以找到，但函数里面的变量函数外面找不到。
2）、变量的查找是就近原则，去寻找var定义的变量，当就近没有找到的时候就去查找外层
3）、当参数与局部变量重名时，优先级等同
4）、js解析由两个步骤完成，第一步预解析，找var function 参数三类东西，第二步逐行解析代码，遇到表达式需要修改预解析仓库中的值，遇到函数相当于新建一个作用域，逐行解析每解析一步都需要查找仓库，若子级作用域仓库找不到对应的值，则去父级作用域查找
5）、函数从里到外、从参数开始读，函数内部没有var，会在父级作用域找，遇重名只留一个，函数与变量重名，留函数，同名函数留后面
18、Z-index用法
z-index只能在position属性为relative、absolute、fixed的元素上有效，父元素如果要和子元素作比较，需要把子元素的z-index值设为负数，
19、数组常用函数总结
不改变原数组：
concat()：连接两个或多个数组，返回被连接数组的一个副本
join(): 把数组中所有元素放入一个字符串，返回字符串
slice(start,end): 从已有的数组返回选定的元素，返回一个新数组包含从 start 到 end （不包括该元素）的 arrayObject 中的元素
toString():把数组转为字符串，返回数组的字符串形式
改变原数组：
pop():删除数组最后一个元素，如果数组为空，则不改变数组，返回undefined，不为空，则返回被删除的元素
push():向数组末位添加一个或多个元素，返回新数组的长度
reverse():颠倒数组中元素的顺序，返回该数组
shift():把数组的第一个元素删除，若数组为空，不进行任何操作，返回undefined，返回第一个元素的值
sort():对数组进行排序，返回该数组
splice(index,howmany,item1,.....,itemX): 从数组中添加或删除项目，返回被删除的元素
index ：必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
howmany 必需。要删除的项目数量。如果设置为 0，则不会删除项目。
item1, ..., itemX 可选。向数组添加的新项目。
unshift():向数组的开头添加一个或多个元素，返回新数组的长度
ES5新增：
indexOf()：接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。其中， 从数组的开头（位置 0）开始向后查找。
lastIndexOf：接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。其中， 从数组的末尾开始向前查找。
forEach()：对数组进行遍历循环，对数组中的每一项运行给定函数，这个方法没有返回值。参数都是function类型，默认有传参，参数分别为：遍历的数组内容、第i项对应的数组索引、数组本身
eg:
var arr = [1, 2, 3, 4, 5];
arr.forEach(function(x, index, a){
console.log(x + '|' + index + '|' + (a === arr));
});
// 输出为：
// 1|0|true
// 2|1|true
// 3|2|true
// 4|3|true
// 5|4|true
map()：指映射，对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组
eg：实现数组中每个数求平方
var arr = [1, 2, 3, 4, 5];
var arr2 = arr.map(function(item){
return item*item;
});
console.log(arr2); //[1, 4, 9, 16, 25]
filter（）:过滤功能，数组中的每一项运行给定函数，返回满足过滤条件组成的数组
eg：
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var arr2 = arr.filter(function(x, index) {
return index % 3 === 0 || x >= 8;
});
console.log(arr2); //[1, 4, 7, 8, 9, 10]
every（）:判断数组中每一项是否都满足条件，只有所有项都满足条件，才会返回true
eg：
var arr = [1, 2, 3, 4, 5];
var arr2 = arr.every(function(x) {
return x < 10;
});
console.log(arr2); //true
var arr3 = arr.every(function(x) {
return x < 3;
});
console.log(arr3); // false
some（）:判断数组中是否存在满足条件的项，只要有一项满足条件，就返回true
eg：
var arr = [1, 2, 3, 4, 5];
var arr2 = arr.some(function(x) {
return x < 3;
});
console.log(arr2); //true
var arr3 = arr.some(function(x) {
return x < 1;
});
console.log(arr3); // false
reduce（）、redeceRight（）:迭代数组所有项，然后构建一个最终返回的值，接收两个参数（每项调用的函数，（可选）初始值），
reduce()方法从数组的第一项开始，逐个遍历到最后。
而 reduceRight()则从数组的最后一项开始，向前遍历到第一项。
传给 reduce()和 reduceRight()的函数接收 4 个参数：前一个值、当前值、项的索引和数组对象。这个函数返回的任何值都会作为第一个参数自动传给下一项。第一次迭代发生在数组的第二项上，因此第一个参数是数组的第一项，第二个参数就是数组的第二项。
eg：
var values = [1,2,3,4,5];
var sum = values.reduceRight(function(prev, cur, index, array){
return prev + cur;
},10);
console.log(sum); //25
20、js replace 正则表达式
replace 本身是JavaScript字符串对象的一个方法，它允许接收两个参数：
replace([RegExp|String],[String|Function])
第1个参数可以是一个普通的字符串或是一个正则表达式
第2个参数可以是一个普通的字符串或是一个回调函数
如果第1个参数是RegExp, JS会先提取RegExp匹配出的结果，然后用第2个参数逐一替换匹配出的结果
如果第2个参数是回调函数，每匹配到一个结果就回调一次，每次回调都会传递以下参数：
1】：result: 本次匹配到的结果
2】：$1,...$9: 正则表达式中有几个()，就会传递几个参数，$1~$9分别代表本次匹配中每个()提取的结果，最多9个
3】：offset:记录本次匹配的开始位置
4】：source:接受匹配的原始字符串
21、为Array对象增加一个去除重复项的方法
Array.prototype.uniq = function(){
var result = [];
for(var i =0;i<this.length;i++)
{
if(result.indexOf(this[i])==-1)
{
result.push(this[i]);
}
}
return result;
}
22、邮箱的正则匹配
var reg = /^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/;
*：代表0-任意次
规则：@之前必须有内容且只能是字母（大小写）、数字、下划线(_)、减号（-）、点（.）
@和最后一个点（.）之间必须有内容且只能是字母（大小写）、数字、点（.）、减号（-），且两个点不能挨着
最后一个点（.）之后必须有内容且内容只能是字母（大小写）、数字且长度为大于等于2个字节，小于等于6个字节
23、call（）、apply（）、bind（）用于改变函数体内部this的指向
Function.apply(obj,args):方法能接收两个参数
obj：这个对象将代替Function里的this对象
args：这个是数组或者类数组，apply方法把这个集合中的元素作为参数传递给被调用的函数
Function.call(obj,arg1，arg2，arg3，...):
call方法的第一个参数与apply方法一致，只不过第二个参数是一个参数列表。
在非严格模式下，当我们第一个参数传递为null或undefined时，函数体内的this会指向默认的宿主对象，浏览器中则默认为window
用法
"劫持"别人的方法
此时foo中的logName方法将被bar引用 ，this指向了bar
|
1 2 3 4 5 6 7 8 9 10 |
Var foo = { name:"mingming", logName:function(){ console.log(this.name); } } Var bar={ name:"xiaowang" }; foo.logName.call(bar);//xiaowang |
实现继承
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
Function Animal(name){ this.name = name; this.showName = function(){ console.log(this.name); } } Function Cat(name){ Animal.call(this, name); } Var cat = new Cat("Black Cat"); cat.showName(); //Black Cat |
在实际开发中，经常会遇到this指向被不经意改变的场景。
有一个局部的fun方法，fun被作为普通函数调用时，fun内部的this指向了window，但我们往往是想让它指向该#test节点，见如下代码：
|
1 2 3 4 5 6 7 8 |
window.id="window"; document.querySelector('#test').onclick = function(){ console.log(this.id);//test var fun = function(){ console.log(this.id); } fun();//window } |
使用call,apply我们就可以轻松的解决这种问题了
|
1 2 3 4 5 6 7 8 |
window.id="window"; document.querySelector('#test').onclick = function(){ console.log(this.id);//test var fun = function(){ console.log(this.id); } fun.call(this);//test } |
当然你也可以这样做，不过在ECMAScript 5的strict模式下，这种情况下的this已经被规定为不会指向全局对象，而是undefined：
|
1 2 3 4 5 6 7 8 9 |
window.id="window"; document.querySelector('#test').onclick = function(){ var that = this; console.log(this.id);//test var fun = function(){ console.log(that.id); } fun();//test } |
|
1 2 3 4 5 |
Function func(){ "use strict" alert ( this); // 输出：undefined } func(); |
bind是返回对应函数，便于稍后调用；apply、call则是立即调用 。
bind()方法会创建一个新函数，称为绑定函数，当调用这个绑定函数时，绑定函数会以创建它时传入 bind()方法的第一个参数作为 this，传入 bind() 方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数。
bind()最简单的用法是创建一个函数，使这个函数不论怎么调用都有同样的this值。常见的错误就像将方法从对象中拿出来，然后调用，并且希望this指向原来的对象。如果不做特殊处理，一般会丢失原来的对象。使用bind()方法能够很漂亮的解决这个问题：
eg：
this.num = 9;
var mymodule = {
num: 81,
getNum: function() { return this.num; }
};
module.getNum(); // 81
var getNum = module.getNum;
getNum(); // 9, 因为在这个例子中，"this"指向全局对象
// 创建一个'this'绑定到module的函数
var boundGetNum = getNum.bind(module);
apply 、 call 、bind 三者都是用来改变函数的this对象的指向的；
apply 、 call 、bind 三者第一个参数都是this要指向的对象，也就是想指定的上下文；
apply 、 call 、bind 三者都可以利用后续参数传参；
bind是返回对应函数，便于稍后调用；apply 、call 则是立即调用 。
24、arguments
js中每个函数都有一个Arguments对象实例arguments，它引用函数的实参，可以以数组下标[]的形式引用arguments的元素，arguments.length为函数实参个数，arguments.callee引用函数自身。
Array.slice.call(arguments, 1)返回的是arguments数组从1号位开始的参数片段。
25、你做的网页在那些浏览器上测试过，这些浏览器的内核是什么？
1）、IE：trident内核
2）、FireFox：gecko内核
3）、Safari：webbit内核
4）、Opera/Chrome ：Blink内核
浏览器内核主要分为两部分，渲染引擎和js引擎。渲染引擎主要负责解析网页的内容（HTML、XML、图像等），加入CSS，以及计算网页的显示方式，然后输出至显示器或打印机。Js引擎主要用于解析和执行JavaScript来实现动态网页效果。浏览器内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。
26、行内元素有哪些？块级元素有哪些？空元素有哪些？各有什么特点
块级元素：独占一行，其宽度会自动填满其父元素，可以设置width、height、margin、padding属性，可用text-aline：center居中。
常用的块级标签：div、p、h1~h6、ul、dl、ol、dl、dt、dd
行级元素：不独占一行，其宽度不会自动填满其父元素，不能设置width、height、只能设置水平方向的padding/margin-left/right。
常用的行级标签：span、a、img、input、b、strong
空元素：br、hr、link、meta
27、超链接target属性的取值和作用
Target属性指定所链接的页面在浏览器窗口中的打开方式，主要参数有：
1）、_blank:在新浏览器窗口中打开链接文件
2）、_parent:在父框架中打开被链接文档
3）、_self:默认值，在相同框架或窗口中打开链接文档
4）、_top:在当前的整个浏览器窗口中打开所链接的文档，因为会删除所有框架
28、iframe有哪些优缺点？
Iframe是HTML标签，作用是文档中的文档，iframe元素会创建包含另外一个文档的内联框架。
优点：
1）、解决加载缓慢的第三方内容（如图标和广告）等的加载问题
2）、Security sandbox
3）、并行加载脚本
缺点：
1）、会阻塞主页面的onload事件
2）、不利于SEO，因为搜索引擎的检索程序无法解读这种页面
3）、iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载
最好通过JavaScript动态给iframe添加src属性值，这样可以绕开以上两个问题
29、title与和h3的区别？b和strong的区别？i和em的区别？
Title属性没有明确意义只表示是个标题，h1则表示层次明确的标题，对页面信息的抓取有很大的影响；
B表示强调内容，而strong是表明重点内容，有语气加强的含义，使用屏幕阅读设备时会重读；
I与em都表现为斜体，但em表示强调的文本
30、简述一下src与href的区别？
<script src= ‘js.js’></script>
Src指向外部资源的位置，指定的内容将会嵌入到当前标签所在的位置，当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到该资源加载、编译、执行完成，所以js脚本应放在底部而不是顶部。
<link href = ‘common.css’rel=’stylesheet’>
Link指向网络资源所在位置，建立与当前元素之间的链接，浏览器识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理，所以建议使用link加载css而不是使用@import
31、img的title和alt有什么区别？
Alt用于图片无法加载时显示，而title为该属性提供信息，通常是当鼠标滑动到元素上的时候显示。
31、表单提交中Get和post的区别？
1）、get是从服务器获取数据，post是想服务器发送数据
2）、get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。Post是通过http post机制，将表单内各个字段与其内容放置在HTML HTADER内一起传送到ACTION属性所指的URL地址，用户看不到这个过程
3）、get：服务器端通过Request.QueryString获取变量的值；post:服务器端通过Request.Form获取提交的数据；
4）、get传送的数据量较小，大小不能超过2Kb，post传送的数据量较大。
5）、get安全性低，post安全性相对较高
32、CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？CSS3新增伪类有哪些？
CSS选择符：
Id选择器：#myid
类选择器：.myclassname
标签选择器：div、h1、p
相邻选择器：h1+p
子选择器：ul<li
后代选择器：li a
通配符选择器：*
属性选择器：a[rel=”external”]
伪类选择器：a:hover,li:nth-child
可继承的样式：font-size 、font-family、color、ul、li、dl、dt、dd
不可继承的样式：border、padding、margin、width、height
优先级：
！important>id>class>tag
！important比内联优先级搞
同样权重下样式定义最近者有先
CSS3新增伪类：
P:first-of-type :选择属于其父元素的首个<p>元素的每个<p>元素
P:last-of-type：选择属于其父元素的最后<p>元素的每个<p>元素
P:only-of-type:选择属于其父元素的唯一子元素的每个<p>元素
P:only-child:选择属于其父元素的唯一子元素的每个<p>元素
P:nth-child（2）：选择属于其父元素的第二个子元素的每个<p>元素
：enabled：控制表单控件的启用状态
：disabled：控制表单控件的禁用状态
：checked：单选框或复选框被选中
33、什么是浮动溢出？说说浮动元素引起的问题？列举几种清除浮动的方法？
浮动溢出：
在非IE浏览器下，当容器的高度为auto，且容器的内容中有浮动的元素时，容器的宽度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响布局的现象。
浮动元素引起的问题：
1）、父元素无法被撑开，影响与父元素同级的元素
2）、与浮动元素同级的非浮动元素会跟随其后
3）、若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构
解决办法：
1）、浮动元素结尾处加空的div标签clear：both，让父级能自动获取到高度
<div style="clear:both;border:0;padding:0;margin:0;"></div>
2）、定义：overflow：hidden/auto;
3）、父级div定义伪类：after和zoom 推荐使用！！！！！
.father :after{
Content:“”;
Height:0;
Line-height:0;
Display:block;
Visibility:hidden;
Clear:both;
}
.father{
Zoom:1;//兼容IE
}
34、block、inline和inline-block细节对比
display :block:
1）、block元素会独占一行，多个block元素会各自新起一行，默认情况下，block元素高度自动填满其父元素高度
2）、block元素可以设置width、height，即使设置了宽度，仍然独占一行
3）、block元素可以设置margin和padding属性
display :inline:
1）、inline元素不会独占一行，多个相邻的行内元素会排列在同一行，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化
2）、inline元素设置width、height无效
3）、inline元素设置水平方向的margin/padding:left/right有效，垂直方向无效
display :inline-block:
1）、将对象呈现为inline对象，但对象的内容作为block呈现。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度、高度特性，有具有inline同行的效果
35、什么是优雅降级和渐进增强？
优雅降级：
一开始就构建完整的功能，然后针对低版本浏览器进行兼容
渐进增强：
针对低版本的浏览器构建页面，保证最基本的功能，然后针对高级浏览器进行效果、交互等改进和增强，以达到更好的用户体验。
36、什么是标准模式？什么是怪异模式？怎么判别？有什么区别？
标准模式：
浏览器按照W3C标准解析执行代码
怪异模型：
按照浏览器自己的方式解析执行代码
判别：
DTD声明定义标准文档类型，会使浏览器使用标准模式加载网页并显示
忽略DTD声明，会使浏览器进入怪异模式
区别：
1）、盒模型
标准的盒模型：width：只包含content，
怪异模式：IE盒模型：width：包含content+padding+border
2）、行内元素高度、宽度设置
标准：给行内元素设置width、heigth无效
怪异：给行内元素设置width、heigth有效
3）、设置百分比的高度
标准：元素的高度由其包含的内容来决定，如果父元素没有设置百分比的高度，子元素设置一个百分比的高度是无效的；
4）、margin：0 auto设置水平居中
标准：有效
怪异：无效
37、页面中定为position的理解？
1）、static:是HTML元素的默认值，即没有定位，元素出现在正常的流中，这种定位不受top、bottom、 left、right的影响
2）、fixed：指元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会滚动，且fixed定位使元素的位置与文档流无关，因此不占据空间，且他会和其他元素发生重叠
3）、relative:相对定位元素是相对它自己的正常位置的定位。且相对移动之后，不会对下面的其他元素造成影响。
注意：top：20px；是指子元素的margin外侧和包裹元素的border内侧之间的距离是20px。
4）、absolute 绝对定位的元素相对于最近的已定位父元素(relative/absolute/fixed)，如果元素没有已定位的父元素，那么它的位置相对于<html>来定位
fixed、absolutive--- 脱离文档流，父元素无法被撑开
脱离文档流的解决方法：
1>、在js中设置父元素高度等于子元素的高度
2>、给父元素强行设置高度
38、CSS3有哪些新特性？
1）、实现圆角 border-radius：8px；
2）、阴影 box-shadow：10px；
3）、对文字加特效text-shadow
4）、线性渐变 gradient
5）、旋转 transform
6）、旋转、缩放、定位、倾斜
transform:rotate(9deg)
scale(0.85,0.90)
translate(0px,-30px)
skew(-9deg,0deg)
39、HTML与XHTML的区别？
XHTML元素必须被正确的嵌套
XHTML元素必须被关闭
XHTML标签名必须用小写字母
XHTML文档必须拥有根元素
40、线程与进程的区别？
进程是具有一定独立功能的程序，它是系统进行资源分配和调度的最小单位。
线程是进程的一个实体，是CPU调度和分配的基本单位
1）、一个程序至少有一个进程，一个进程至少有一个线程
2）、线程的划分尺度小于进程，使得多线程程序的并发性高
3）、进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率
4）、线程在执行过程当中与进程有区别，每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。线程不能够独立执行，必须依存在应用程序当中，由应用程序提供多个线程执行控制
41、null和undefined的区别？
null表示“无”的对象，转换为数值时为0，常用来表示函数企图返回一个不存在的对象
1）、作为函数的参数，表示该函数的参数不是对象
2）、作为对象原型链的终点
undefined表示“无初始值”，转换为数值时是NaN,即：此处应该有一个值，但是还没有定义。
1）、变量被声明了，但没有赋值，就等于undefined
2）、调用函数时，应该提供的参数没有提供，该参数等于undefined
3）、对象没有赋值的属性，该属性的值为undefined
4）、函数没有返回值时，默认返回undefined
42、new操作符具体干了什么？
Var obj = new Base();
1）、创建一个空对象
Var obj = {};
2）、把这个空对象的_proto_成员指向Base对象的prototype成员对象
obj._proto_ = Base.prototype;
3）、把Base对象的this指针指向obj
Base.call(obj);
43、js延迟加载的方式有哪些？
1）、defer
<scriptsrc="file.js" defer></script>
浏览器会并行下载 file.js和其它有 defer 属性的script，而不会阻塞页面后续处理。
注：所有的defer脚本保证是按顺序依次执行的。
2）、async
<scriptsrc="file.js" async></script>
async属性是HTML5新增的。作用和defer类似，但是它将在下载后尽快执行，不能保证脚本会按顺序执行，它们将在onload 事件之前完成。
3）、动态创建DOM方式（创建script，插入到DOM中，加载完成后callBack）
44、为什么会产生跨域问题？如何解决跨域问题？
跨域：指a页面想要访问b页面的资源，但如果a、b两个页面的协议、域名、端口有任何一个不同，或者a页面为ip地址，而b页面为域名地址，所进行的访问行动都是跨域的，而浏览器为了安全问题，一般都会限制跨域访问。
1）、jsonp（原理：动态加入script标签）
Jsonp：它的基本思想是，网页通过添加一个<script>元素，向服务器请求JSON数据，这种做法不受同源政策限制；服务器收到请求后，将数据放在一个指定名字的回调函数里传回来。
2）、document.domain+iframe
document.domain:给两个页面设置相同的域名，仅能设置自身或更高级的父域
3）、window.name
4）、服务器上设置代理页面
45、document.write和innerHTML的区别？
document.write只能重绘整个页面
innerHTML可以重绘页面的一部分
46、哪些操作会造成内存泄漏？
内存泄漏：指任何对象在您不再拥有或需要它之后，它仍然存在
垃圾回收器会定期扫描对象，并计算引用了每个对象的其他对象的数量，如果一个对象的引用数量为0，或对该对象的唯一引用是循环的，那么该对象的内存即可回收
1）、setTimeout的第一个参数使用字符串而不是函数，会引发内存泄漏
2）、闭包
3）、控制台日志
4）、循环（在两个对象彼此引用且彼此保留，就会产生一个循环）
47、node的优缺点？
优点：
1）、Node基于事件驱动和无阻塞，适合处理并发请求，构建node上的服务器效果相比其他技术更佳
2）、node代理服务器交互的客户端代码是用JavaScript编写的，客户端与服务端都使用同一种语言编写
缺点：
1）、node是一个相对新的开源项目，不太稳定
2）、缺少足够多的第三方支持
48、前端的发展前景
1）、前端是最贴近用户的程序员，前端的能力就是能让产品从90分进化到100分
2）、前端可以与团队成员、ui、产品经理及时沟通参与项目快速高质量实现效果图
3）、做好的页面结构、页面重构和用户体验
4）、处理兼容、写出优美的代码格式
5）、前端技术更新很快，可以不断学习新的前沿技术
49、一个页面从输入URL到页面加载显示完成，这个过程发生了什么（一次完整的http事务是怎样的）？
1）、当发送一个URL请求时，浏览器会开启一个线程来处理这个请求，同时在远程DNS服务器上启动一个DNS查询，使浏览器获取请求对应的IP地址
2）、浏览器与远程web服务器通过tcp三次握手协商来建立一个TCP/IP连接，该握手包括一个同步报文，一个同步应答报文，一个应答报文。该握手由客户端尝试建立通信，而后服务器应答并接受客户端的请求，最后由客户端发出该请求已经被接受的报文。
3）、一但TCP/IP连接建立，浏览器会通过该连接向远程服务器发送HTTP的GET请求，远程服务器找到资源并使用http响应返回该资源。
4）、web服务器提供资源服务，客户端开始下载资源。
5）、请求返回以后，就进入前端模块，浏览器对页面进行渲染呈现给用户
浏览器会解析HTML生成DOM树，其次会根据CSS生成CSS规则树，而JavaScript又可以根据DOM API操作DOM
50、ajax的理解？
ajax定义：是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术
ajax步骤：
第一步：创建xmlHttpRequest对象，xmlHttpRequest对象用于和服务器交换数据
第二步：使用xmlHttpRequest的send()和open()方法发送资源请求到服务器。
open(method,url,async)：
open方法有三个参数，第一个method包括get和post，（post一般用于发送大量数据给到服务器，或者更新文件或数据库，或者发送用户的加密信息时使用。）第二个是url：主要是文件或者资源的路径，第三个是async：为true代表异步，为false代表同步。
send方法：则用open方法中的请求方法发送请求到服务器。
第三步：使用xmlHttpRequest对象的responseText或者responseXML属性来获取服务器的响应数据，responseText属性获取服务器响应的字符串，responseXML属性获取服务器响应的XML数据
第四步：当发送请求到服务器，我们想要服务器响应并执行一些功能，就需要使用onreadystatechange函数，每次xmlHttpRequest的readystate状态发生改变都会触发onreadystatechange函数。
readystate属性是xmlHttpRequest对象的一个状态：
0：未初始化，
1：服务器连接成功，
2：请求被服务器接收，
3：处理请求，
4：请求完成并且响应准备。
status属性：200表示响应成功，404：表示页面不存在
在onreadystatechange事件中，当readystate==4，并且status==200时，服务器响应准备
ajax：
ajax({
url: "./TestXHR.aspx", //请求地址
type: "POST", //请求方式
data: { name: "super", age: 20 }, //请求参数
dataType: "json",
success: function (response, xml) {
// 此处放成功后执行的代码
},
error: function (status) {
// 此处放失败后执行的代码
}
});
原生js实现ajax：
function ajax(options) {
options = options || {};
options.type = (options.type || "GET").toUpperCase();
options.dataType = options.dataType || "json";
var params = formatParams(options.data);
var xhr;
//创建 - 第一步
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else if(window.ActiveObject) { //IE6及以下
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
//连接 和 发送 - 第二步
if (options.type == "GET") {
xhr.open("GET", options.url + "?" + params, true);
xhr.send(null);
} else if (options.type == "POST") {
xhr.open("POST", options.url, true);
//设置表单提交时的内容类型
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(params);
}
//接收 - 第三步
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
var status = xhr.status;
if (status >= 200 && status < 300 || status == 304) {
options.success && options.success(xhr.responseText, xhr.responseXML);
} else {
options.error && options.error(status);
}
}
}
}
//格式化参数
function formatParams(data) {
var arr = [];
for (var name in data) {
arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name]));
}
arr.push(("v=" + Math.random()).replace("."));
return arr.join("&");
}
51、解释一下JavaScript的同源策略？为什么要有同源策略？
同源策略：协议、域名、端口相同，同源策略是一种安全协议，指一段脚本只能读取来自同一来源的窗口和文档的属性。
为什么：比如一个黑客程序，他利用iframe把真正的银行登录页面嵌到他的页面上，当你使用真实的用户名，密码登录时，他的页面就 可以通过JavaScript读取到你的表单中input中内容，就 可以盗取你的用户名和密码
52、哪些地方会出现CSS阻塞？哪些地方会出现JS阻塞？
Js阻塞：
所有浏览器在下载js的时候，会阻止其他一切活动，直到js下载、解析、执行完毕后才开始继续并行下载其他资源并呈现内容。
嵌入js会阻塞所有内容的呈现，而外部js只会阻塞其后内容的显示，两种方式都会阻塞其后资源的下载。
CSS阻塞：
CSS本来时可以并行下载的，但当CSS后面跟着嵌入的js的时候，该CSS就会出现阻塞后面资源下载的情况，而把嵌入js放到CSS前面，就不会出现阻塞了。
根本原因：
因为浏览器会维持html中css和js的顺序，样式表必须在嵌入的js执行前先加载、解析完。而嵌入的js会阻塞后面的资源加载，所以就会出上面CSS阻塞下载的情况
嵌入的js应该放在什么位置？
1）、放在底部，虽然放在底部照样会阻塞所有呈现，但不会阻塞资源下载
2）、如果嵌入js放在head中，则把嵌入js放在css头部
3）、使用defer
4）、不要在嵌入的js中调用运行时间较长的函数，如果一定要用，可以用setTimeout来调用
JavaScript无阻塞加载具体方式？
1）、将脚本放在底部。
<link>还是放在head中，用以保证js加载前，能加载出正常显示的页面。
<script>标签放在</body>前
2）、阻塞脚本：
由于每个<script>标签下载时会阻塞页面解析过程，所以限制页面的<script>总数可以改善性能。
3）、非阻塞脚本
等页面加载完成后，再加载js代码，也就是在window.onload事件发出后开始下载代码
4）、defer属性：支持IE4和fierfox3.5更高版本浏览器
5）、动态脚本元素
DOM允许使用js动态创建HTML的几乎全部文档内容，且无论在何处启动下载，文件下载和运行都不会阻塞其他页面处理过程，即使在head中
53、eval是做什么的？
1）、把对应的字符串解析成js代码并运行
2）、尽量避免使用eval，不安全，且非常消耗性能（一次解析成js语句，一次执行）
54、js的深拷贝与浅拷贝？
浅拷贝：
只是拷贝基本类型的数据，如果原对象的属性等于数组或另一个对象，实际上，子对象获得的是一个内存地址，因此存在原对象被篡改的可能。浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。
深拷贝：
深拷贝则是实现真正意义上的数组和对象的拷贝，可以通过递归调用浅拷贝来实现
function clone(obj){
var buf ;
if(obj instanceOf Array){
buf = [];
var i = obj.length;
While(i--){
buf[i] = clone(obj[i])
}
return buf;
}
else if(obj instanceOf Object){
buf = {};
for(var k in obj){
buf[k] = clone(obj[k]);
}
return buf;
}else {
return obj;
}
}
55、事件？事件冒泡？事件捕获？IE与火狐的事件机制有什么区别？如何阻止冒泡？
事件：就是网页中的某个操作
事件冒泡：事件开始时由最具体的元素（即：文档嵌套层次最深的节点），逐级向外传播
<div>—><body>—><html>—>document的顺序进行传播
事件捕获：由最上一级的节点先接收事件，然后向下逐级传播到具体的节点
document—><html>—><body>—><div>的顺序进行传播
区别：IE仅支持事件冒泡，FF：支持事件冒泡和事件捕获
阻止：
1）、return false
2）、IE：ev.cancelBubble = true
3）、ff：ev.stopPropagation()
56、对网站重构的理解？
网站重构：
即：在不改变UI的情况下，对网站进行优化，在扩展的同时保持一致的UI
一般实现方法：
1）、表格table布局改为div+css
2）、兼容现代浏览器
3）、优化移动平台
4）、针对SEO进行优化
5）、严格按规范编写代码
6）、设计可扩展的API
7）、增强用户体验
8）、优化网页运行速度
9）、压缩js、css、image等前端资源
10）、程序的性能优化，如：数据读写
11）、利用CDN加速资源加载
12）、优化DOM
13）、HTTP服务器的文件缓存
57、常用http状态码？
100 continue 服务器发送此信息，表示确认
200 ok 正常返回信息
201 created 表示请求成功，且服务器创建了新的资源
202 Accepted 表示服务器已接受请求，但尚未处理
301 请求的网页已经永久移动到新位置
302 Fond 临时重定向
304 not modified 表示自从上次请求后，请求的网页未修改过
400 bad request 服务器无法理解请求的格式
401 unauthorized 请求未授权
403 forbidden 禁止访问
404 not found 找不到资源
500 服务器端错误
58、js数组去重
var arr = [1,23,1,1,1,3,23,5,6,7,9,9,8,5];
//方法一，循环遍历，第i项与后面所有的项对比，有重复则删除
function removeDuplicatedItem(arr) {
for(var i = 0; i < arr.length-1; i++){
for(var j = i+1; j < arr.length; j++){
if(arr[i]==arr[j]){
arr.splice(j,1);
j--;
}
}
}
return arr;
}
方法二；借助indexOf方法判断此元素在该数组中首次出现的位置下标与循环的下标是否相等
function removeDuplicatedItem(arr){
for(var i=0;i<arr.length;i++){
if(arr.indexOf(arr[i]） != i){
arr.splice(i,1);
i--;
}
}
return arr;
}
方法三：借用新数组
function removeDuplicateItem(arr){
var arrNew = [];
for(var i =0;i<arr.lenth;i++){
if(arr.indexOf(arr[i] == i)){
arrNew.push(arr[i]);
}
}
return arrNew;
}
方法四：set
Let set = new Set(arr);
Var arrNew = […set];
方法五、
/*
* 给传入数组排序，排序后相同值相邻，
* 然后遍历时,新数组只加入不与前一值重复的值。
* 会打乱原来数组的顺序
* */
function uniq(array){
array.sort();
var temp=[array[0]];
for(var i = 1; i < array.length; i++){
if( array[i] !== temp[temp.length-1]){
temp.push(array[i]);
}
}
return temp;
}
var aa = [1,2,"2",4,9,"a","a",2,3,5,6,5];
console.log(uniq(aa));
59、对this的理解？
this是js的一个关键字，随着函数使用场合不同，this的值会发生变化，但是this总有一个原则，就是this值的是调用函数的那个对象，this的指向在函数创建的时候是决定不了的，在调用的时候才能决定，谁调用的就指向谁。
This绑定是js中最常出现错误的因素：
Eg：
let PageHander = {
id = '123456',
init:function(){
document.addEventListener('click',function(event){
this.doSomething(event.type);//报错：this.doSomething is not a function
},false);
},
doSomething:function(type){
console.log(type+" "+this.id);
}
};
PageHander.init();
对象PageHander的设计初衷是用来处理页面上的交互，实际上因为this绑定的是事件目标对象的引用，这个代码中实际上是document，而没有绑定PageHander，并且document中并没有this.doSomething方法，所以无法正常执行。
解决方法1：使用bind函数修改this.doSomething
init:function(){
document.addEventListener('click',(function(event){
this.doSomething(event.type);
}).bind(this),false);
}
解决方法2 ：使用ES6箭头函数
init:function(){
document.addEventListener('click',
event => this.doSomething(event.type),false);
},
1）、如果一个函数中有this，但是它没有被上一级的对象所调用，那么this就指向window
2）、如果一个函数中有this，这个函数有被上一级的对象所调用，那么this指向的就是上一级的对象
3）、如果一个函数中有this，这个函数中包含多个对象，尽管这个函数是被最外层的函数所调用，this指向的也只是它上一级的对象
4）、如果返回值是一个对象，那么this指向的就是那个返回的对象，如果返回值不是一个对象那么this还是指向函数的实例。
60、JavaScript中，有一个函数，执行对象查找时，永远不会去查找原型？
hasOwnProperty()
61、模块化怎么做？
使用立即执行函数，不暴露私有成员
var module = (function(){
var count = 0;
var m1 = function(){};
var m2 = function(){};
return {
m1 :m1,
m2:m2
};
})();
62、jquery与jquery UI有什么区别？
Jquery是一个js库，主要提供的功能是选择器，属性修改和事件绑定。
Jquery UI则是在jquery的基础上，设计的插件。提供了一些常用界面元素，如对话框、拖动行为、改变大小等
63、针对jquery的优化方法？
1）、基于class的选择器的性能相对于id选择器开销很大，因为需要遍历所有的DOM元素
2）、频繁操作的DOM，先缓存，使用jquery链式调用更高
Eg：var str = $(‘a’).attr(‘href’);
3）、for循环中数组长度先缓存
64、ES6中let 、const
Let ：
Let是更完美的var，let声明的变量拥有块级作用域
Const
定义常量值，不可以重新赋值，但如果值是一个对象，可以改变对象的属性值
65、如何判断一个变量是否为数组？
1）、arr instanceOf Array
2）、arr.constructor == Array
3）、Array.prototype.isPrototypeOf(a)
4）、Object.getPrototypeOf(a) == =Array.prototype
5）、Object.prototype.toString.apply(a) === ‘[object Array]’
6）、Array.isArray(a)
66、依次完整的http事务是怎样的一个过程？
1）、域名解析
2）、发起tcp的三次握手
3）、建立tcp连接后发起http请求
4）、服务器端响应http请求，浏览器得到htnl代码
5）、浏览器解析html代码，并请求http代码中的资源
6）、浏览器对页面进行渲染呈现给用户
67、列举IE与其他浏览器不一样的特性？
1）、IE支持currentStyle FF：使用getComputstyle
2）、IE使用innerHTML FF：textContent
3）、滤镜：IE：filter：alpha（opacity= num）；
FF：-moz-opacity：num
4）、事件：IE：attachEvent
FF：addEventListener
5）、鼠标位置：IE：event.clientX
FF: event.pageX
6）、IE：event.srcElement
FF: event.target
7）、消除list圆点：IE：margin：0
FF：margin：0；padding：0；display：none
8）、IE7以下不支持圆角
68、数组和链表的区别？
数组：随机访问性强，查找速度快；缺点：插入和删除效率低，可能浪费内存，内存空间要求高，必须有足够的连续内存空间，数组大小固定，不能动态拓展。
链表：插入删除速度快，内存利用率高，不会浪费内存，大小没有固定，拓展很灵活；缺点：不能随机查找，必须从第一个开始遍历，查找效率低。
69、自适应布局
1）、左边定宽，右边自适应（右边定宽，左边自适应同理）
方法一：左边设置左浮动，右边设置宽度100%
方法二、父元素设置display：flex；右边元素设置flex：1；
方法三：设置绝对定位：
2）、经典三栏布局（两边定宽，中间自适应）
方法一：左边左浮动，右边右浮动，中间栏根据左右的宽度设置margin-left\margin-right (注意：中间div要放在最下面！！！！！！)
方法二：绝对定位
绝对定位法原理是将左右两边使用absolute定位，因为绝对定位使其脱离文档流，后面的center会自然流动到他们上面，然后使用margin属性，留出左右元素的宽度，既可以使中间元素自适应屏幕宽度。
方法三：flex：父级元素设置：display:flex;中间元素设置：flex：1；
(注意：中间div要放在中间位置！！！！！！)
70、冒泡、选择、插入、快排、二分查找
1】、冒泡：比较两个相邻的元素，将值大的元素切换至右端，每次选出最大值靠右，直到选出所有数。
2】、选择：首次从R[0]到R[N-1]中选出最小值，与R[0]交换，第二次从R[1]到R[N-1]中选出最小值，与R[1]交换……..第i次从R[i-1]到R[N-1]中选出最小值与R[i-1]交换，总共通过N-1次，得到一个按从小到大排列的有序数列。
3】、插入：初始时假设第一个记录自成一个有序序列，其余记录为无序序列，接着从第二个记录开始，按照记录的大小一次将当前处理的记录插入到其之前的有序序列中，直到最后一个记录插入到有序序列中为止。类似于斗地主捡牌的过程。
4】、快速排序：
a)、选择一个基准元素，将列表分隔为两个子序列
b)、对列表重新排序，将所有小于基准值的元素放在基准值前面，将所有大于基准值的元素放在基准值后面。
c)、分别比较较小元素的子序列和较大元素的子序列，重复步骤1和2
5】、二分查找（针对有序数据，效率高）
a)、把数组的第一个位置设置为下边界，把数组的最后一个位置设置为上边界
b)、若下边界小于或者等于上边界，则：
【1】、设置中点为（上边界+下边界）/2
【2】、如果中点元素小于查询的值，则将下边界设置为中点所在下标加1
【3】、如果中点元素大于查询的值，则将上边界设置为中点所在下标减1
【4】、否则中点元素即为要查询的值，可以返回