1. var的变量提升的底层原理是什么?
JS引擎的工作方式是:
1) 先解析代码，获取所有被声明的变量；
2)然后在运行。也就是说分为预处理和执行两个阶段。
变量提升：所有变量的声明语句都会被提升到代码头部。
但是变量提升只对var命令声明的变量有效，如果一个变量不是用var命令声明的，就不会发生变量提升。
js里的function也可看做变量，也存在变量提升情况。
2. JS如何计算浏览器的渲染时间?
小编: 浏览器的渲染过程主要包括以下几步：
1) 解析HTML生成DOM树。
2) 解析CSS生成CSSOM规则树。
3) 将DOM树与CSSOM规则树合并在一起生成渲染树。
4) 遍历渲染树开始布局，计算每个节点的位置大小信息。
5) 将渲染树每个节点绘制到屏幕。
优化考虑:
CSS 优先：引入顺序上，CSS 资源先于 JavaScript 资源。
JS置后：通常把JS代码放到页面底部，且JavaScript 应尽量少影响 DOM 的构建。
3. JS的回收机制?
小编: 垃圾回收机制是为了以防内存泄漏，(内存泄漏: 当已经不需要某块内存时这块内存还存在着), 垃圾回收机制就是间歇的不定期的寻找到不再使用的变量，并释放掉它们所指向的内存。
JS有两种变量: 全局变量和在函数中产生的局部变量。局部变量的生命周期在函数执行过后就结束了，此时便可将它引用的内存释放（即垃圾回收），但全局变量生命周期会持续到浏览器关闭页面。
JS执行环境中的垃圾回收器有两种方式：标记清除（mark and sweep）、引用计数(reference counting)。
标记清除: 垃圾收集器给内存中的所有变量都加上标记，然后去掉环境中的变量以及被环境中的变量引用的变量的标记。
在此之后再被加上的标记的变量即为需要回收的变量，因为环境中的变量已经无法访问到这些变量。
引用计数(reference counting): 这种方式常常会引起内存泄漏，低版本的IE使用这种方式。
机制就是跟踪一个值的引用次数，当声明一个变量并将一个引用类型赋值给该变量时该值引用次数加1，
当这个变量指向其他一个时该值的引用次数便减一。
当该值引用次数为0时就会被回收。
4. 垂直水平居中的方式?
小编:
方式一: 定位
父元素设置为：position: relative;
子元素设置为：position: absolute;
距上50%，据左50%，然后减去元素自身宽度的距离就可以实现
100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin: -50px 0 0 -50px;
方式二: flex布局
display: flex; //flex布局
justify-content: center; //使子项目水平居中
align-items: center; //使子项目垂直居中
方式三: table-cell (不推荐)
display: table-cell;
vertical-align: middle;//使子元素垂直居中
text-align: center;//使子元素水平居中
5. 实现一个三栏布局，中间版块自适应方法有哪些?
小编: 浮动和定位
浮动方式:
<div class="content">
<div class="left">left</div>
<div class="right">right</div>
<div class="center">center</div>
</div>
.left{
float: left;
100px;
height: 200px;
}
.right{
float: right;
padding: 0;
100px;
height: 200px;
}
.center{
margin: 0 100px 0 200px;
}
方式二: 将父容器的position设置为relative，两个边栏的position设置成absolute。
6. 如何判断一个对象是否为数组?
小编:
1) isPrototypeOf()方法，判定Array是不是在obj的原型链中，如果是，则返回true,否则false;
2) obj instanceof Array;
3) Object.prototype.toString.call(obj)；
4) Array.isArray(obj); // 不推荐
7. 行内元素和块级元素有哪些? img属于什么元素?
块元素(block element)
* address - 地址
* blockquote - 块引用
* center - 举中对齐块
* dir - 目录列表
* div - 常用块级容易，也是css layout的主要标签
* dl - 定义列表
* fieldset - form控制组
* form - 交互表单
* h1 - 大标题
* h2 - 副标题
* h3 - 3级标题
* h4 - 4级标题
* h5 - 5级标题
* h6 - 6级标题
* hr - 水平分隔线
* isindex - input prompt
* menu - 菜单列表
* noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容
* noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）
* ol - 排序表单
* p - 段落
* pre - 格式化文本
* table - 表格
* ul - 非排序列表
内联元素(inline element)
* a - 锚点
* abbr - 缩写
* acronym - 首字
* b - 粗体(不推荐)
* bdo - bidi override
* big - 大字体
* br - 换行
* cite - 引用
* code - 计算机代码(在引用源码的时候需要)
* dfn - 定义字段
* em - 强调
* font - 字体设定(不推荐)
* i - 斜体
* img - 图片
* input - 输入框
* kbd - 定义键盘文本
* label - 表格标签
* q - 短引用
* s - 中划线(不推荐)
* samp - 定义范例计算机代码
* select - 项目选择
* small - 小字体文本
* span - 常用内联容器，定义文本内区块
* strike - 中划线
* strong - 粗体强调
* sub - 下标
* sup - 上标
* textarea - 多行文本输入框
* tt - 电传文本
* u - 下划线
* var - 定义变量
可变元素
可变元素为根据上下文语境决定该元素为块元素或者内联元素。
* applet - java applet
* button - 按钮
* del - 删除文本
* iframe - inline frame
* ins - 插入的文本
* map - 图片区块(map)
* object - object对象
* script - 客户端脚本
8. margin坍塌?
小编: 当两个盒子在垂直方向上设置margin值时，会出现塌陷现象。
解决方案:
1.给父盒子添加border
2.给父盒子添加padding-top
3.给父盒子添加overflow:hidden
4.父盒子:position:fixed
5.父盒子:display:table
6.给子元素的前面添加一个兄弟元素
属性为:content:"";
overflow:hidden;
9. 说说BFC原理?
小编: BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
因为BFC内部的元素和外部的元素绝对不会互相影响，因此， 当BFC外部存在浮动时，它不会影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。
同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。
避免margin重叠也是这样的一个道理。
10. 写一下节点增删改?
（1）document.createElement(标签名); // 注意：动态创建元素不会直接显示在页面当中，前面必须是document，不能是其他
（2）父级.appendChild(要追加的元素) ; // 在指定父级子节点最后一个后面追加子元素
（3）父级.insertBefore(新的元素，指定的已有子元素); // 在父级的指定子元素前面插入一个新元素(注意：先判断如果第二个参数的节点是否存在)
（4）元素.cloneNode(true) 或者元素.cloneNode(false) // 深克隆（负值标签、标签属性、标签里面内容） 浅克隆（负值标签、标签属性不复制标签里面内容）
（5）父级.removeChild(已有子元素);
（6）父级.replaceChild(新的元素节点，原有元素节点);
11. 如何获取元素的父节点和兄弟节点，写一下?
获取父节点:
1. parentNode获取父节点
获取的是当前元素的直接父元素。
var p = document.getElementById("test").parentNode;
2. parentElement获取父节点
parentElement和parentNode一样，只是parentElement是ie的标准。
var p1 = document.getElementById("test").parentElement;
3. offsetParent获取所有父节点
var p2 = document.getElementById("test").offsetParent;获取兄弟节点:
1. 通过获取父亲节点再获取子节点来获取兄弟节点
var brother1 = document.getElementById("test").parentNode.children[1];
2. 获取上一个兄弟节点
在获取前一个兄弟节点的时候可以使用previousSibling和previousElementSibling。
他们的区别是previousSibling会匹配字符，包括换行和空格，而不是节点。previousElementSibling则直接匹配节点。
var brother2 = document.getElementById("test").previousElementSibling;
var brother3 = document.getElementById("test").previousSibling;
3. 获取下一个兄弟节点
var brother4 = document.getElementById("test").nextElementSibling;
var brother5 = document.getElementById("test").nextSibling;
12. 给你一个乱序数组，你怎么排序?
小编: sort, 冒泡, 选择, 二分法....
13.伪类与伪元素的区别？
1) 定义区别
伪类
伪类用于选择DOM树之外的信息，或是不能用简单选择器进行表示的信息。
前者包含那些匹配指定状态的元素，比如:visited，:active；后者包含那些满足一定逻辑条件的DOM树中的元素，比如:first-child，:first-of-type，：target。
伪元素
伪元素为DOM树没有定义的虚拟元素。不同于其他选择器，它不以元素为最小选择单元，它选择的是元素指定内容。
比如::before表示选择元素内容的之前内容，也就是""；::selection表示选择元素被选中的内容。2） 语法区别
在CSS3中，伪类与伪元素在语法上也有所区别，伪元素修改为以::开头。
但因为历史原因，浏览器对以:开头的伪元素也继续支持，但建议规范书写为::开头。3） 伪类/伪元素一览表
<伪类如下>
:active 选择正在被激活的元素 1
:hover 选择被鼠标悬浮着元素 1
:link 选择未被访问的元素 1
:visited 选择已被访问的元素 1
:first-child 选择满足是其父元素的第一个子元素的元素 2
:lang 选择带有指定 lang 属性的元素 2
:focus 选择拥有键盘输入焦点的元素 2
:enable 选择每个已启动的元素 3
:disable 选择每个已禁止的元素 3
:checked 选择每个被选中的元素 3
:target 选择当前的锚点元素 3
<伪元素如下>
::first-letter 选择指定元素的第一个单词 1
::first-line 选择指定元素的第一行 1
::after 在指定元素的内容后面插入内容 2
::before 在指定元素的内容前面插入内容 2
::selection 选择指定元素中被用户选中的内容 3
14. css样式优先级，各自的权重
优先级别：
通用选择器（*） < 元素(类型)选择器 < 类选择器 < 属性选择器 < 伪类 < ID 选择器 < 内联样式
权重：
第一等：代表内联样式，如: style=””，权值为1000。
第二等：代表ID选择器，如：#content，权值为100。
第三等：代表伪类和属性选择器，如.content，权值为10。
第四等：代表类型选择器和伪元素选择器，如div p，权值为1。
15.常见的DOM操作有哪些？
主要操作包括：
查找节点，新建节点，添加节点，删除节点，修改节点；
开发中，我们用到最多的是element类型，
用于表现HTML元素，提供了对元素标签名、子节点及特性的访问。
1）DOM常用操作举例:
// 查找节点
document.getElementById('id属性值'); // 返回拥有指定id的第一个对象的引用
document.getElementsByClassName('class属性值'); // 返回拥有指定class的对象集合2）新建节点:
// 创建新的元素节点
document.createElement('元素名');
// 创建新的属性节点
document.createAttribute('属性名');
// 创建新的文本节点
document.createTextNode('文本内容');
// 创建新的注释节点
document.createComment('注释节点');3）添加节点:
var element = document.getElementsByTagName('p')[0];
element.innerHTML='新增文本内容'; //插入文本内容4）删除节点:
parentNode.removeChild( existingChild ); //删除已有的子节点，返回值为删除节点
element.removeAttribute('属性名'); // 删除具有指定属性名称的属性，无返回值
element.removeAttributeNode( attrNode ); // 删除指定属性，返回值为删除的属性5）修改节点:
// 添加属性节点，修改属性值
element.setAttribute( attributeName, attributeValue );6）属性节点:
// 增添id属性，并修改class属性值
var element = document.getElementsByTagName('p')[0];
// 添加属性节点
var attr = document.createAttribute('id');
attr.value = 'idValue';
element.setAttributeNode(attr);
// 修改属性值
var attr = document.createAttribute('class');
attr.value = 'classNewValue';
element.setAttributeNode(attr);7）DOM事件:
允许 JavaScript 对 HTML 事件作出反应,主要包括：
onclick 事件——当用户点击时
onload 事件——用户进入
onunload 事件——用户离开
onmouseover事件——鼠标移入
onmouseout事件——鼠标移出
onmousedown事件——鼠标按下
onmouseup 事件——鼠标抬起
16.判断数据类型有哪些方法？
1）typeof
typeof 是一个操作符，其右侧跟一个一元表达式，并返回这个表达式的数据类型。
返回的结果用该类型的字符串(全小写字母)形式表示，
包括以下 7 种：number、boolean、symbol、string、object、undefined、function 等。2) instanceof
instanceof 是用来判断 A 是否为 B 的实例，
表达式为：A instanceof B，如果 A 是 B 的实例，则返回 true,否则返回 false。
在这里需要特别注意的是：instanceof 检测的是原型3) constructor
当一个函数 F被定义时，JS引擎会为F添加 prototype 原型，
然后再在 prototype上添加一个 constructor 属性，并让其指向 F 的引用。4)toString
toString() 是 Object 的原型方法，调用该方法，默认返回当前对象的 [[Class]]点击并拖拽以移动 。这是一个内部属性，其格式为 [object Xxx] ，其中 Xxx 就是对象的类型。对于 Object 对象，直接调用 toString() 就能返回 [object Object] 。而对于其他对象，则需要通过 call / apply 来调用才能返回正确的类型信息。
17.介绍一下 JS 的基本数据类型？
Undefined、Null、Boolean、Number、String
18.介绍一下 JS 有哪些内置对象？
Object 是 JavaScript 中所有对象的父对象;
数据封装类对象：Object、Array、Boolean、Number、String
其他对象：Function、Argument、Math、Date、RegExp、Error
19.push()-pop()-shift()-unshift()分别是什么功能？
// push 方法
// 将新元素添加到一个数组中，并返回数组的新长度值。
var a=[1,2,3,4];
a.push(5);
// pop 方法
// 移除数组中的最后一个元素并返回该元素。
var a=[1,2,3,4];
a.pop();
// shift 方法
// 移除数组中的第一个元素并返回该元素。
var a=[1,2];
a.shift();
// unshift 方法
// 将指定的元素插入数组开始位置并返回该数组。
var a=[1,2];
a.unshift(0);
20.null 和 undefined 有何区别？
1) null 表示一个对象被定义了，值为“空值”；
undefined 表示不存在这个值。
typeof undefined //"undefined"
2) undefined :是一个表示"无"的原始值或者说表示"缺少值"，就是此处应该有一个值，但是还没有定义。
当尝试读取时会返回 undefined； 例如变量被声明了，但没有赋值时，就等于undefined。
typeof null //"object" null : 是一个对象(空对象, 没有任何属性和方法)；
3) 注意： 在验证null时，一定要使用 === ，因为 == 无法分别 null 和 undefined
21.new操作符具体干了什么？
1) 创建一个空对象，并且 this 变量引用该对象。
2) 属性和方法被加入到 this 引用的对象中。
3) 新创建的对象由 this 所引用。
22.你对 JSON 了解吗？
1) JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。
2) 它是基于JavaScript的一个子集。数据格式简单，易于读写，占用带宽小。
如：{"age":"12", "name":"back"}
23. javascript的typeof返回哪些数据类型?
答案：
undefined
string
boolean
number
symbol(ES6)
Object
Function
24. 列举3种强制类型转换和2种隐式类型转换?
答案：强制（parseInt,parseFloat,number）
隐式（== === ! ）
25. split() join() 的区别?
答案：前者是将字符串切割成数组的形式，后者是将数组转换成字符串
26. 数组方法pop() push() unshift() shift()?
答案：push()尾部添加 pop()尾部删除
unshift()头部添加 shift()头部删除
27. IE和标准下有哪些兼容性的写法?
答案：
var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
Var target = ev.srcElement||ev.target
28. ajax请求的时候get 和post方式的区别?
答案：
一个在url后面 ，一个放在虚拟载体里面
get有大小限制(只能提交少量参数)
安全问题
应用不同 ，请求数据和提交数据
29. 事件委托是什么?
答案: 利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！
30.闭包是什么，有什么特性，对页面有什么影响?
闭包的特性：
①.封闭性：外界无法访问闭包内部的数据，如果在闭包内声明变量，外界是无法访问的，除非闭包主动向外界提供访问接口；
②.持久性：一般的函数，调用完毕之后，系统自动注销函数，而对于闭包来说，在外部函数被调用之后，闭包结构依然保存在
系统中，闭包中的数据依然存在，从而实现对数据的持久使用。
优点：
① 减少全局变量。
② 减少传递函数的参数量
③ 封装；
缺点：
使用闭包会占有内存资源，过多的使用闭包会导致内存溢出等.
31.如何阻止事件冒泡?
答案：ie:阻止冒泡ev.cancelBubble = true;非IE ev.stopPropagation();
32.如何阻止默认事件?
答案：(1)return false；(2) ev.preventDefault();