client，page和screen的区别？
clientX，clientY是触摸点相对于viewport视口x,y距离
pageX，pageY是触摸点相对于document左侧边缘的距离，与clientX不同的点是，当有滚动条时page包括滚动条距离。client不包括。
screenX，screenY触摸点相对于屏幕的左边缘距离
touch事件必须要求有宽高，如果宽高为0，则touch事件不起作用。
浏览器的内核分别是什么？
谷歌浏览器： Chrome 内核：webkit 私有前缀： -webkit-
火狐浏览器： Firefox 内核：Gecko(敢扣) 私有前缀： -moz-
Opera浏览器： 内核：opera(阿破软) 私有前缀： -o-
Ie浏览器： 内核：trident(吹等特) 私有前缀： -ms-
苹果浏览器： 内核：webkit 私有前缀: -webkit-
如何获取浏览器信息？
navigator.appName; // 返回浏览器的名称。
navigator.appCodeName;//返回浏览器的代码名
navigator.appVersion;//返回浏览器的平台和版本信息
navigator.userAgent;//返回由客户机发送服务器的user-agent头部的值
渐进增强和优雅降级之间的不同？
渐进增强：以最低的要求实现最基础功能为本，向上兼容。
缺点：相对优雅降级来说，开发周期长，初期投入资金大。
优点：提供了较好的平台稳定性，维护起来资金小，长期来说降低开发成本。
优雅降级：以高要求高版本为基准，向下兼容。
短时间内开发出一个只适用于一个浏览器的完整功能版，然后就可以拿给PM给客户看，可以拿去测试，市场试水，对于尚未确定功能的产品，优雅降级是一种很好的节约开发成本的方法。
如何理解DOM？
①DOM是一个操作HTML的API接口
②DOM是一个HTML结构模型
③DOM指HTML模型中的对象
标准盒模型和怪异盒模型？
标准盒模型：在标准模式下，一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)
box-sizing:content-box
怪异盒模型：一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）
box-sizing:border-box
区别：
总体会有布局、样式解析和脚本执行三个方面的区别。
盒模型：在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在Quirks 模式下，IE的宽度和高度还包含了padding和border。
设置行内元素的高宽：在标准盒模型模式下，给<span>等行内元素设置wdith和height都不会生效，而在怪异模式下，则会生效。
设置百分比的高度：在标准盒模型模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置百分比的高度，子元素设置一个百分比的高度是无效的
用margin:0 auto设置水平居中：使用margin:0 auto在标准盒模型模式下可以使元素水平居中，但在怪异模式下却会失效。
移动端a标签默认点击有背景如何去除？
在公共样式里设置a标签里设置上
a{
-webkit-tap-highlight-color:transparent
}
strong和em的区别？
strong表示加粗，em表示斜体。
strong强调意味更浓。
em局部强调，strong全部强调
css中设置透明度有几种方式有什么不同？
rgba() rgba不会继承 父元素设置透明度子元素不会继承
opacity 会继承 父元素设置了子元素会继承
color:transparent 纯透明，只是一个值，不会继承
hsla() 跟rgba一样
每个HTML文件的开头很重要的Doctype的作用是什么？
是document type(文档类型)的简写，在web设计中用来声明文档类型。
Doctype的作用是为了浏览器能了解预期的文档类型，告诉浏览器要通过哪一种规范来解析文档，会影响代码验证，并决定了浏览器最终如何显示你的web文档。
H5的form如何关闭自动完成功能？
将不想要自动完成的form或input设置为autocomplete=off
em和i标签有什么区别？
em和i标签都是斜体
em具有语义化，有强调作用。
伪类和伪元素的区别？
伪类：弥补了css选择器的不足，用来更方便地获取信息。：first-child
伪元素：本质上创建了一个虚拟容器元素，我们可以在其中添加内容或者样式。::before ::after
css中link和@import区别？
（1）link是在HTML文件中引入css文件
@import是在css文件中引入外部css文件兼容区别。
（2）link没有兼容问题 @import IE5以上才能使用
（3）link引用CSS时，在页面载入时同时加载；@import需要等页面完全载入后才加载。
（4）link支持使用javascript控制DOM去改变样式；而@import不支持。
（5）@import可以在CSS文件中再次引入其他样式表。
src和href的区别？
src的内容是页面中不可少的一部分，是引入。
href是超文本引用，用来建立当前元素和文档之间的链接。
CSS动画和JQ动画的区别？
css动画是animation,属于补间动画
animation：动画名称，动画持续时间单位是秒，匀速，几秒之后加载，动画次数，是否反向;
jq动画是animate();属于帧动画
比较灵活， 单位是毫秒
css中animation和transition的区别？
1、animation多两个参数 循环和动画方式
2、transition 不能自行触发，通过事件进行触发。animation可以自行运行
3、transition可控性相对较弱，只能够指定起始和结束的状态，而animation可以定义多个关键帧
4、动画在运行结束之后，需要回到初始状态
过渡是从一个状态到另一个状态就结束了，
动画可以不同状态，不同关键帧，可以一直循环播放
过渡鼠标移出时停止，
动画一直执行不受影响
过渡只是把物体运动过程放慢/快
动画可以定义物体不同事件不同路径各种效果
5、transition的作用，可以用一句话来概括“平滑改变CSS值”
动画保持最后一帧
animation-fill-mode: forwards;
document.write和innerHTML的区别？
document.write是直接将内容写入页面流，会导致页面重绘。
innerHTML将内容写入某个DOM节点，不会导致页面重绘。
清楚浮动的方式？
（1）clear:both、加空标签
（2）伪元素清除浮动、（一般after设置高度为0）
（3）overflow：hidden
阻止浏览器的默认行为？
w3c的方法是e.preventDefault()，IE则是使用e.returnValue = false;
阻止冒泡事件的方法？
w3c的方法是e.stopPropagation()，IE则是使用e.cancelBubble = true
JS里三种弹窗的样式？
alert、confirm(带确定取消)、prompt（可输入信息对话框）
js规定了几种语言类型？
基本数据类型：(栈区 传值 先进后出)
undefined、Null、Boolean、String、Number、Symbol
symbol保证每个属性的名字都是独一无二的，从根本上防止了命名冲突。
symbol函数前不能使用new，symbol生成的是一个原始类型的值，不是对象
引用数据类型（堆区 传址 先进先出）
function、Object
typeof null 是object
typeof undefined 是 undefined
js的宿主对象，内置对象本地对象分别是什么？
宿主就是寄生。内置对象就是不用创建，本地对象是程序员自己创建的
本地对象(引用类型)：Object、Function、Array、String、Boolean、Number、Date、RegExp等（能new）
内置对象：
内置对象为gload Math 等不可以实例化的（不能new）
宿主对象(浏览器对象)：
window，document等
哪些操作会造成内存泄露？
闭包函数、
死循环、
定时器、
全局变量的大量声明、
大量拼接字符串、
构造函数的不规范调用
创建元素的三种方式？
① document.write()
② innerHTML
③ document.createElement()
函数的节流和防抖？
函数节流是指一定时间内js方法只跑一次。比如人的眨眼睛，就是一定时间内眨一次。这是函数节流最形象的解释。
对于节流，一般有两种方式可以实现，分别是时间戳版和定时器版。
函数防抖是指频繁触发的情况下，只有足够的空闲时间，才执行代码一次。比如生活中的坐公交，就是一定时间内，如果有人陆续刷卡上车，司机就不会开车。只有别人没刷卡了，司机才开车。
面向过程与面向对象的优缺点
面向过程：面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候一个一个依次调用就可以了；
面向对象：面向对象是把构成问题事务分解成各个对象，建立对象的目的不是为了完成一个步骤，而是为了描叙某个事物在整个解决问题的步骤中的行为。
面向过程
优点：性能比面向对象高，因为类调用时需要实例化，开销比较大，比较消耗资源，比如单片机、嵌入式开发、Linux/Unix等一般采用面向过程开发，性能是最重要的因素。
缺点：没有面向对象易维护、易复用、易扩展
面向对象
优点：易维护、易复用、易扩展，由于面向对象有封装、继承、多态性的特性，可以设计出低耦合的系统，使系统更加灵活、更加易于维护
缺点：性能比面向过程低
将伪数组转成数组的方式？（用arguments获取一组元素返回的是伪数组）
1. 声明一个空数组，通过遍历伪数组把它们重新添加到新的数组中。
2. array.prototype.slice.call(伪数组) 使用数组的slice()方法 它返回的是数组，使用call或者apply指向伪数组
3. 使用原型继承 伪数组.__proto__ = Array.prototype
4. ES6的数组新方法 Array.from(伪数组)
JQ操作类名的方法？
①addClass()方法是用来给指定元素增加类名
②removeClass() 方法是用来给指定元素移除类名
③toggleClass()方法是用来添加或移除类名(有就移除，没有就添加)
JQ的优化方法？
1. 设置入口函数
2. 尽量缩短链式编程的链
3. 用ID选择器选择
4. 使用事件委托
5. 子查询 find方法
JQ改变透明度的方式？
hide()——隐藏
show()——显示
fadeIn()用于淡入已隐藏的元素
fadeOut()方法用于淡出可见元素
fadeToggle()该方法可以在fadeInt()与fadeOut()方法之间进行切换
$each()和$map()的区别？
$.each()方法可用于遍历任何对象(包括数组)，结构为：$.each(array/object,function(index/key,value){ code })。index指遍历对象成员的索引，value指成员的内容。如果需要退出循环可使回调函数返回 false，其它返回值将被忽略。
$.map()方法可以在遍历数组或对象成员的同时，经过回调函数的调用，然后转换到另一个新的数组中（这也是和$.each()的最大区别）。
结构：$.map(array/object,function(value,index/key){ code })，index指遍历对象成员的索引，value指成员的内容。如果需要退出循环可使回调函数返回 false，其它返回值将被忽略。
什么是作用域？（es5分为全局作用域和函数作用域）
简单说就是作用的范围，指的是函数在哪些范围内可以用，而在其他部分就不可以使用，如果需要使用就需要重新定义。
在ES5当中，没有块级作用域的概念，只有全局作用域和函数作用域。声明变量可以用var关键字，也可以直接声明，只不过直接声明的变量是全局变量，而用var关键字声明的变量在全局作用域下就是全局变量，在函数体内就是局部变量。并且var关键字声明的变量在其所在的作用域下存在变量提升。
变量提升只提升变量名，函数提升会提升函数名及其函数体。
变量提示优先级大于函数提升优先级。也就是说不管变量声明在前还是函数声明在前，都是先进行变量提升，再进行函数提升。
什么是js变量提升？
在ES6之前，JavaScript没有块级作用域(一对花括号{}即为一个块级作用域)，只有全局作用域和函数作用域。变量提升即将变量声明提升到它所在作用域的最开始的部分。
什么是预解析？
浏览器在开始工作的时候会先解读JS代码的关键字：比如：var function 参数等，并把解析到的内容存入一个类似仓库的地方，这个过程一般称为JS预解析。
并且，在这个阶段所有的变量，在正式运行代码之前，都会提前赋值为未定义。
函数预编译四部曲：
1.创建AO对象
2.查找形参和变量声明，将变量和形参作为AO对象的属性名，值为undefined
3.实参值赋给形参。
4.查找函数声明，值赋予函数体
函数声明和函数表达式的区别？
// 函数声明
// function fn() {}
// fn();
//1 函数声明必须有函数名
//2 函数可以在任意地方调用fn();
// 函数表达式
// 1 前后两个函数的名字可以相同也可以不相同
// 2 function 后面的这个名字是可以省略的
// 3 function 后面的这个名字只能再函数内部使用
// 4 函数调用只有在函数表达式声明后调用。
// var fn = function fn () {};
JavaScript中childNodes和children的区别
childNodes返回的是节点的子节点集合，包括元素节点、文本节点还有属性节点，所以上面代码中，两个undefined其实是元素节点后面跟的回车符，默认为一个文本节点。
children返回的只是节点的元素节点集合，所以返回的只有span元素。
addEventListener和attachEvent的区别
IE8及以前版本不支持addEventListener()
IE5及以后版本均支持attachEvent()
除IE外对addEventListener()均支持
区别如下：
1.因为IE事件类型不支持事件捕获，所以attachEvent()只要求两个参数，即addEventListener()的前两个参数：事件类型和处理程序。
2.给attachEvent()传事件类型时要加on，addEventListener()则不加
3.attachEvent()允许相同的事件处理程序函数注册多次，响应事件时函数被调用多次；addEventListener()相同的事件处理程序注册多次值生效一次，响应事件时值调用一次。
this指向
构造函数中this指向实例化出来的对象 调用方式：new XX()
普通函数中this指向window对象 调用方式：函数名()
方法函数中this指向方法函数的调用者 调用方式：对象名.方法函数名()
闭包函数中this指向window对象 调用方式：函数名()
call和apply this指向自定义
事件函数this指向事件源
改变this指向的三个方法：
call,apply,bind是函数的三个方法
函数.call(this指向，实参)，
函数.apply（this指向,[实参]）
call和apply是立即执行函数
bind是延迟执行函数 会返回一个新的函数，一般会用一个新的变量来接收这个原函数改变完this指向的原函数
函数.bind(this,实参)
构造函数里面隐式执行过程步骤
(1) 隐式创建空对象var obj ={};
(2) 隐式将this指针指向空对象
(3) 给空对象赋值obj.name = name;
(4) 隐式返回当前对象return obj;
箭头函数和普通函数的区别？
① 箭头函数作为匿名函数,是不能作为构造函数的,不能使用new
② 箭头函数不绑定arguments
③ 箭头函数没有this
④ 箭头函数没有原型属性
⑤ 箭头函数不能换行
箭头函数的this永远指向其上下文的 this，任何方法都改变不了其指向，如call(), bind(), apply()
普通函数的this指向调用它的那个对象
es6里的map与原生对象的区别？
object和Map存储的都是键值对组合。但是：
object的键的类型是 字符串；
map的键的类型是 可以是任意类型；
另外注意，object获取键值使用Object.keys（返回数组）；
Map获取键值使用 map变量.keys() (返回迭代器)。
阻止a标签跳转的方式：
（1）<a href="#" onclick="return false" ></a>
（2）<a href="javascript :""></a>
（4）preventDefault 阻止默认行为
事件委托
给父元素绑定事件，用来监听子元素的冒泡事件，并找到是哪个子元素的事件。
事件委托的好处：
事件委托技术可以避免对每个子元素添加事件监听器，减少操作DOM节点的次数，从而减少浏览器的重绘和重排，提高代码的性能。
使用事件委托，只有父元素与DOM存在交互，其他的操作都是在JS虚拟内存中完成的，这样就大大提高了性能。
新增加的子元素也能有这个事件。
什么时候用事件委托：
当子元素有很多，需要对子元素的时间进行监听的时候
事件委托三部曲：
第一步：给父元素绑定事件
给元素ul添加绑定事件，通过addEventListener为点击事件click添加绑定
第二步：监听子元素的冒泡事件
这里默认是冒泡，点击子元素li会向上冒泡
第三步：找到是哪个子元素的事件
通过匿名回调函数的参数e用来接收事件对象，通过target获取触发事件的目标
深浅拷贝是什么？深拷贝有哪些方法？
浅拷贝：当一个对象拷贝另一个对象的数据的时候，只要一个对象的数据发生改变另一个对象的数据 也会发生改变（浅拷贝拷贝的是引用地址）
方式：...是浅拷贝
深拷贝：当一个对象拷贝另一个对象的数据的时候，其中一个对象的数据发生变化不会影响另一个对象的数据（深拷贝拷贝的是对象的数据不是地址）
方式：
递归、
json.var result = JSON.parse(JSON.stringify(people))
数组深拷贝的方法？
①slice
②concat
③for循环
对象深拷贝的方法？
JSON.parse(JSON.stringify)
遍历对象的方法？
① for in
②Object.keys()
③Object.getOwnPropertyNames()
遍历数组的方法？
① forEach
②map
③for循环遍历
通过boolean()函数，得到结果为false值的情况：
false、0、undefined、null、""、NaN
jq对象和原生DOM对象有什么区别？如何相互转换？
DOM对象是我们用传统的方法获得的对象，jq对象是用jq类库选择器获得的对象。
js获取到的dom元素是一个对象，jq对象就是一个数组对象（选择出来的元素的数组集合）
原生DOM对象转jQuery对象：
var box = document.getElementById('box');
var $box = $(box);
jQuery对象转原生DOM对象：
var $box = $('#box');
var box1 = $box[0];
var box2 = $box.get(0);
delete和splice和Vue.delete删除数组的区别（注：数组）
delete只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。
splice直接删除了数组 改变了数组的键值。
Vue.delete直接删除了数组 改变了数组的键值。
如何判断一个数组是array？
isArray
怎么判断一个对象是不是空对象？
①将json对象转为json字符串。再判断该字符串是否为"{}"
var data = {};
var b = (JSON.stringify(data) == "{}");
alert(b);//true
②利用for in 循环，遍历对象，
③jq的isEmptyObject()方法
④Object.getOwnpropertyNames 获取对象的属性名，存到一个数组中，返回数组对象，判断他的它的数组长度是否为0
⑤var arr = Object.keys(data) 类似方法④ es6的新方法
事件轮询
js的三大主线程之一
GUI主线程 -----视图层（结构和样式渲染到页面上）
JS主线程 -------js逻辑（）
事件监听主线程------事件监听
所有的事件传给事件监听，一遍一遍进行查看，然后传给JS
js中异步事件循环的微任务和宏任务 先执行同步，再执行异步，再异步里先执行微任务再执行宏任务。
微任务：Promise，process.nextTick
宏任务：包括整体代码script，setTimeout，setInterval
异步先放到任务对列里，同步执行完执行任务对列里的异步代码。
数组去重的方法？https://blog.csdn.net/huangpb123/article/details/78313842
①利用es6的set（兼容性不好）
②双层for循环 然后用splice去重（可以去重数字和字符串混合的数组）
③利用index Of去重（不能排序）
split()和join()的区别
Join([“分隔符”])方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。
Split(a,b)方法：用于把一个字符串分割成字符串数组，a是必须的，决定从a这里开始分割，b不是必须的，可选。该参数可指定返回的数组的最大长度。如果设置了参数，返回的子串不会多余于这个参数指定的数组。如果没有设置该参数，整个字符串都会被分割，不考虑它的长度。注意返回的数组不包括a本身
减少页面加载时间的三种方法？
减少http请求
少用本地图片
优化图片
优化CSS
标明高度和宽度（如果没有的话，需要一遍下载图片一边计算大小）
域名的发散（域名多一点，每个页面请求少一些）
减少DOM操作
懒加载
js继承的方法
原型链继承
构造函数继承
混合继承（构造函数+原型链继承）
替换原型继承
extend继承
call和apply继承
JSON与XML区别是什么？ 有什么共同点？
XML它是用于RPC远程调用数据交换格式,因为XML文件格式复杂，比较占宽带，传输慢不易于维护，服务器端与客户端解析xml花费较多的资源和时间.
JSON它是用于RPC远程调用数据交换格式,因为JSON文件格式压缩，占宽带小，传输快，易于维护。
ajax的原理？
Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发送异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。
ajax的生命周期（readyState通信状态码）
0 当前请求未初始化，当前请求数据包已设置好但未初始
1 建立和后台的链接 open
2 请求已经发送了，调用了send的方法
3 后台正在处理请求
4 后台已经响应 前端可以接收数据。
原生ajax写法：
1. 实例化http对象
2.建立和后台的连接 xhr.open("请求方式","url地址")
3.设置请求头(post有get没有)
4.发送请求xhr.send()(post以键值对方式传参，get传null或者不传)
5.给http对象绑定onreadystatechange事件
6.监听生命周期状态和响应状态码
7.获取响应数据
get和post的区别？
get产生一个TCP数据包，POST产生两个数据包。
1. get请求速度比post快
2. get安全性较低，post安全性较高。(比较贴近http底层操作，会暴露与服务器的交互过程)
jq的ajax请求、axios请求都比这个安全性高
3. get传递数据2000b-8000b,post没有数据量的限制。
4. get请求可以被缓存，post不能
5. get请求保留在浏览器历史记录中，post不会
6. get请求可以被收藏为书签，post不会
7. 对于ajax请求资源数出现乱码，get请求参数需要用encodeURLComponent函数来进行处理，post不会出现乱码。
ajax有哪些优缺点？
优点：
① 页面无刷新更新数据。减少用户等待时间，带来非常好的用户体验。
② 异步与服务器通信。不必打断用户操作，减少了不必要的数据传输和降低网络数据流量。
③前端和后端负载平衡。AJAX可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，AJAX的原则是“按需取数据”，可以最大程度的减少冗余请求和响应对服务器造成的负担，提升站点性能。
④基于标准被广泛支持。不需要下载插件或者小程序
⑤ 界面与应用分离。数据与呈现分离，有利于分工合作，有利于非技术人员对页面的修改造成web应用程序错误，提高效率。
缺点：
① ajax干掉了back和history功能，对浏览器机制的破坏（不支持浏览器返回按钮）
② ajax的 安全问题，容易受到黑客攻击。
③ 对搜索引擎支持较弱。如果使用不当会加大网络数据流量，从而降低整个系统性能。
④ 破坏程序的异常处理机制。
⑤ 违背了url和资源定位的初衷。
⑥ ajax不能很好地支持移动设备。
⑦ 数据类型需要手动转换
⑧ 客户端过肥，太多客户端代码造成开发上的成本。编写复杂、容易出错 ；冗余代码比较多（层层包含js文件是AJAX的通病，再加上以往的很多服务端代码现在放到了客户端）；破坏了Web的原有标准。
JSONP的原理是什么？
就是利用script标签 没有跨域限制的“漏洞”来达到与第三方通讯的目的。
JSONP为什么不是真正的ajax？
ajax的核心是 ： 通过XmlHttpRequest获取非本页内容，
jsonp的核心 ： 动态添加<script>标签来调用服务器提供的js脚本。
localStorage和sessionStorage的区别？
特性
- 设置、读取方便
- 容量较大，sessionStorage约5M、localStorage约20M
- 只能存储字符串，可以将对象JSON.stringify() 编码后存储
+ window.sessionStorage
- 生命周期为关闭浏览器窗口
- 在同一个窗口(页面)下数据可以共享
+ window.localStorage
- 永久生效，除非手动删除（服务器方式访问然后清除缓存）
- 可以多窗口（页面）共享
+ 方法
- setItem(key, value) 设置存储内容
- getItem(key) 读取存储内容
- removeItem(key) 删除键值为key的存储内容
- clear() 清空所有存储内容
cookie、localStorage、sessionStorage的区别及应用场景？
localStorage、sessionStorage是h5针对h4的cookie本地存储改善。
cookie应用场景：
① 判断用户是否登录过
② 保存上次登录的信息
③保存上次查看的页面
④浏览计数
一个网页的渲染形成过程？
（1）先DNS解析，
（2）发起TCP三次握手，
（三次握手详解：
客户端（发送连接请求）-->服务器端
服务器端（建立连接并发送确认报文）-->客户端
客户端（发送确认收到确认报文）-->服务器端）
（3）建立TCP连接后，浏览器向服务器发送http请求，
（4）负载均衡
（当一台服务器无法支持大量用户访问时，将用户分摊到两个或多个服务器上的方法叫负载均衡）
（5）服务器响应HTTP请求，将请求的资源发给浏览器
（6）浏览器释放TCP连接（四次挥手）
（7）浏览器渲染
防止表达式闪烁加？
v-cloak
给模板内的元素添加v-cloak属性后，元素在vue没有加载完的时候就有这个属性，当vue加载完成后这个属性就消失了，所以我们可以给这个属性设置css样式为隐藏
Vue框架的优缺点？
vue的特性：①轻量级框架②双向数据绑定③指令④插件化
缺点：不支持IE8。原因：因为使用了很多es5的新特性
vue中阻止默认行为？
Vue中使用 .prevent 阻止默认行为
Vue单页面应用
单页面应用是指一个系统只加载一次资源，然后下面的操作交互，数据交互，是通过offer、ajax来进行，页面没有刷新
优点：
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件，核心是一个响应的数据绑定系统。MVVM、数据驱动、组件化、轻量、简洁、高效、快速、模块友好。
1.分离前后端关注点，前端界面显示，后端负责数据存储和计算。不会把前后端的逻辑混杂在一起；
2.减轻服务器压力，服务器只用出数据就可以；
3.同一套后端程序代码，不用修改就可以用于Web界面、手机、平板等多种客户端；
4.用户体验好、快，内容的改变不需要重新加载整个页面，web应用更具响应性和更令人着迷；
5.SPA和RESTful架构一起使用，后端不再负责模板渲染、输出页面工作，web前端和各种移动终端地位对等，后端API通用化；
缺点：
1.初次加载耗时相对增多；
2.导航不可用，如果一定要导航需要自行实现前进、后退，需要程序来实现管理；
3.不支持低版本浏览器。
4. 不利于SEO的优化，建议通过服务端来进行渲染组件，现在可以通过Prerender等技术解决一部分。
vue自定义指令生命周期原理?
bind绑定 insert 绑定节点 update更新
componentUpdate 更新完成
unbind 解绑
Vue中监听路由变化的函数？
①通过watch
②通过 vue-router 的钩子函数 beforeRouteEnter beforeRouteUpdate beforeRouteLeave
vue响应式原理
由于 Vue 会在初始化实例时对属性执行 getter/setter 转化，所以属性必须在 data 对象上存在才能让 Vue 将它转换为响应式的。
vuex借鉴了flux和redux的思想，但是flux和redux是独立且完整的架构，vuex是耦合与vue框架的，所以使用成本要比flux、redux低
解释Vue双向绑定原理，及参数
原理：因为vue是mvvm的框架，所以当数据变化的时候，视图会立即更新，视图层产生操作后会自动通知vm来更改model，所以我们可以实现双向数据绑定，而其中的原理就是实例会将设置的data逐个遍历利用Object.defineProperty给数据生成getter和setter，当数据变化地方时候setter会监听到并且通知对应的watcher工具进行逻辑运算会更新视图
使用Object.definedProperty使用getter和setter进行数据劫持
参数：getter setter
$route和$router的区别？
router为VueRouter的实例，相当于一个全局的路由器对象，里面含有很多属性和子对象 切换路由
只读 $route $route相当于当前正在跳转的路由对象 是一个局部对象 每一个router都有一个route
vue组件引用步骤？
① 创建要引用的组件
② import引入到要用的页面
③ 注册组件components
④ 在上边调用写个标签名
vue中ref和$ref的使用方法？
ref的作用：被用来给元素或子组件注册引用信息，引用信息将会注册在父组件的$refs对象上。如果在普通的DOM元素上使用，那么指向的就是普通的DOM元素。
ref 有两种用法
1.ref 加在普通的元素上，用this.ref.name 获取到的是dom元素
2.ref 加在子组件上，用this.ref.name 获取到的是组件实例，可以使用组件的所有方法。
3.如何利用v-for 和ref 获取一组数组或者dom 节点
vue中keep-alive的作用？
keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。
include - 字符串或正则表达，只有匹配的组件会被缓存
exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存
vue路由传参的三种方式？
1. 需要在path中添加:/id来对应$router.push中path携带的参数。在子组件中可以使用来获取传递的参数值
$route.params.id
2. 通过路由
属性中的name来确定匹配的路由，通过params来传参，（对应路由配置不能用id来传递参数了，已经使用params来携带参数了）
$route.params.id
3.父组件中使用path来匹配路由，然后通过query来传递参数，这种情况下query传递的参数会显示在url后面？id=?
对应子组件获取参数：$route.query.id
Vue路由的钩子函数 https://blog.csdn.net/qxb5215/article/details/80346820
全局钩子：
beforeEach
to:router即将进入的路由对象
from:当前导航即将离开的路由
next:Function,进行管道中的一个钩子，如果执行完了，则导航的状态就是 confirmed （确认的）；否则为false，终止导航。
afterEach
这类钩子主要作用于全局,一般用来判断权限,以及以及页面丢失时候需要执行的操作
单个路由里面的钩子：
beforeEnter
beforeLeave
组件路由：
beforeRouteEnter
beforeRouteUpdate
beforeRouteLeave
vue路由模式history原理？
##### 历史管理
>提供window.history，对象我们可以管理历史记录，
>可用于单页面应用，Single Page Application，可以无刷新改变网页内容。
- pushState(data, title, url) 追加一条历史记录
+ data用于存储自定义数据，通常设为null
+ title网页标题，基本上没有被支持，一般设为空
+ url 以当前域为基础增加一条历史记录，不可跨域设置
- replaceState(data, title, url) 与pushState()基本相同，
不同之处在于replaceState()，只是替换当前url，不会增加/减少历史记录。
- onpopstate事件，当前进或后退时则触发
Vue-router 中hash模式和history模式的区别
hash模式url里面永远带着#号，我们在开发当中默认使用这个模式。那么什么时候要用history模式呢？如果用户考虑url的规范那么就需要使用history模式，因为history模式没有#号，是个正常的url适合推广宣传。当然其功能也有区别，比如我们在开发app的时候有分享页面，那么这个分享出去的页面就是用vue或是react做的，咱们把这个页面分享到第三方的app里，有的app里面url是不允许带有#号的，所以要将#号去除那么就要使用history模式，但是使用history模式还有一个问题就是，在访问二级页面的时候，做刷新操作，会出现404错误，那么就需要和后端人配合让他配置一下apache或是nginx的url重定向，重定向到你的首页路由上就ok啦。
vue组件之间通信的方式？
a. 在父组件使用v-bind绑定数据，在子组件用props接收数据
b. $emit发送 $on接收
c. eventBus这种通信方式,针对的是非父子组件之间的通信
VueX包括哪五大核心？
state => 基本数据
getters => 从基本数据派生的数据
mutations => 提交更改数据的方法，同步！
actions => 像一个装饰器，包裹mutations，使之可以异步。
modules => 模块化Vuex
state
Vuex 使用单一状态树,即每个应用将仅仅包含一个store 实例，但单一状态树和模块化并不冲突。存放的数据状态，不可以直接修改里面的数据。
mutations
mutations定义的方法动态修改Vuex 的 store 中的状态或数据。
getters
类似vue的计算属性，主要用来过滤一些数据。
action
actions可以理解为通过将mutations里面处里数据的方法变成可异步的处理数据的方法，简单的说就是异步操作数据。view 层通过 store.dispath 来分发 action。
modules
项目特别复杂的时候，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。
vue路由懒加载的方式？
①路由自带的箭头函数
②import
程序中捕获异常的方法？
在下面的例子中，我们故意在 try 块的代码中写了一个错字。
该实例本应该提醒"欢迎光临！"，但弹出的是拼写错误信息。
catch 块会捕捉到 try 块中的错误，并执行代码来处理它：
try { adddlert("欢迎光临！");}catch(err) { document.getElementById("demo").innerHTML = err.message;}
“==”为什么可以不判断类型？转换规则是什么？
因为提前进行了类型转换。
规则:
null和undefined类型比较始终相等
1.如果两个操作数有且仅有一个是数字，就把另一个也转数字
2.如果操作数有且仅有一个数布尔，就把布尔转为数字
3.如果操作数中有且仅有一个是object，就将object转为值类型（toString）
0=="您好明天"
true =={}
{}=={name:123} false
怎么看一个数组是不是空数组？
判断length
微信小程序怎么阻止事件冒泡？
将bindtap改为catchtap
小程序生命周期函数？
onLaunch监听小程序初始化（全局只触发一次）
onShow监听小程序显示
onHide监听小程序隐藏
onError错误监听函数
onPageNotFound 页面不存在监听函数
小程序页面生命周期函数？
Page({
data:{
},
onLoad:function(options){
// 生命周期函数--监听页面加载（一个页面只会调用一次）
console.log("onLoad");
},
onReady:function(){
// 生命周期函数--监听页面初次渲染完成（一个页面只会执行一次）
console.log("onReady");
},
onShow:function(){
// 生命周期函数--监听页面显示
console.log("onShow");
},
onHide:function(){
// 生命周期函数--监听页面隐藏
console.log("onHide");
},
onUnload:function(){
// 生命周期函数--监听页面卸载
console.log("onUnload");
},
onPullDownRefresh: function() {
// 页面相关事件处理函数--监听用户下拉动作
console.log("onPullDownRefresh");
},
onReachBottom: function() {
// 页面上拉触底事件的处理函数
console.log("onReachBottom");
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
小程序注意事项：
1、App()必须在app.js中注册，且只能注册一个；
2、不要在App()内的函数中调用getApp(),使用this就可以拿到app实例；
3、不要在onLauch的时候调用getCurrentPage(),此时page还没有生成；
4、通过getApp()获取实例之后，不要私自调用生命周期函数；
getCurrentPages() 函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
一个页面的执行顺序是onLoad---->onShow---->onReady
for循环嵌套定时器
for(var i= 0;i<5;i++){
setTimeout(function(){
console.log(i)//5 5 5 5 5
},1000)
}
//打印一个5之后多久打印第二个5
刚开始所有都等1000毫秒，之后差拿不定几毫秒几乎为0
//想打印出来0 1 2 3 4
//方法一：就把var改成let 通过作用域改变解决问题
//方法二：自执行函数
for(var i= 0;i<5;i++){
(function(n){
var i =n;
setTimeout(function(){
console.log(i)
},1000)
})(i)
}
这是js执行机制问题，先执行同步问题，setTimeout是异步的，所以要先加再输出
js执行机制：
先同步 后异步
异步代码会被扔到任务队列里面，同步代码执行完后，再按照顺序执行异步代码
iframe标签是干什么的？
有href属性没有src属性
不可以实现jsonp跨域
img可以实现jsonp跨域
引入外部文件
js事件流模型有哪些？
冒泡，
捕获，
DOM事件流（捕获+冒泡）
Vue跳转方式说两种？
router-link、$router
小程序跳转方式？
a. wx.navigateTo({}) ，保留当前页面，跳转到应用内的某个页面，使用 wx.navigateBack 可以返回;
b. 使用组件 <navigator> 示例： <navigator url='../test/test'>点击跳转</navigator>
c. wx.redirectTo() , 关闭当前页面，跳转到非tabBar的某个页面，
d. wx.switchTab ，跳转到tabBar的某个页面，
Vue中axios异步接收参数的方式？
async 后边加函数
await后边加接口
不知道宽高的情况下水平垂直居中
已知宽高：
父元素：有宽高，绝对定位
子元素：有宽高，相对定位，top:0;bottom:0;left:0;right:0;margin:auto;
如果子元素是行内块元素例如img子元素可以没有宽高。
未知宽高：
方法二：flex 布局
给父元素加：display:flex;
justify-content:center;
align-items: center;
方法三：css3属性
父元素position:relative;
子元素：position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
px和em和rem的区别？
px是固定大小
em的值并不是固定的；
em会继承父级元素的字体大小。
使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。
display:none 和visibility:hidden的区别？
display：none；直接就没了
visibility:hidden 只是隐藏，占用文档流，并没有消失
overflow：hidden为什么可以清楚浮动？
触发了BFC块级格式化上下文，
和我们的页面平行的一个空间，overflow:hidden触发了BFC，一旦触发会将元素丢入BFC里面去，BFC中所有元素都是标准文档流，不会脱离标准的文档流。
css hack在不同浏览器的兼容
#test {
width:300px;
height:300px;
background-color:blue; /*firefox*/
background-color:red\9; /*all ie*/
background-color:yellow\0; /*ie8*/
+background-color:pink; /*ie7*/
_background-color:orange; /*ie6*/ }
:root #test { background-color:purple\9; } /*ie9*/
@media all and (min-width:0px){ #test {background-color:black\0;} } /*opera*/
@media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} } /*chrome and safari*/
严格模式与混杂模式的区别？
Doctype的作用是为了浏览器能了解预期的文档类型，告诉浏览器要通过哪一种规范来解析文档，会影响代码验证，并决定了浏览器最终如何显示你的web文档。
严格模式：页面排版及JS解析是以该浏览器支持的最高标准来执行。
混杂模式：不严格按照标准执行，兼容旧的浏览器，向后兼容。
HTML和xhtml二者的区别？
1. XHTML没有单标签
2. XHTML所有的标签和属性的名字都必须使用小写
3.所有的XHTML标记都必须合理嵌套
4. xhtml所有的属性必须用引号""括起来 “name” = "CC"
5. XHTML把所有的< 和 & 特殊符号用编码表示
< 、 >、
6. 给所有属性赋一个值
7. 不要在注释内容中使用“--”
8. 图片必须有文字说明
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
important 比 内联优先级高
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，单选框或复选框被选中。
列出display的值，说明他们的作用。position的值， relative和absolute定位原点是？
1. block 象块类型元素一样显示。
none 缺省值。向行内元素类型一样显示。
inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。
list-item 象块类型元素一样显示，并添加样式列表标记。
flex 弹性盒子用
2. position的值
*absolute
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
*fixed （老IE不支持）
生成绝对定位的元素，相对于浏览器窗口进行定位。
* relative
生成相对定位的元素，相对于其正常位置进行定位。
* static 默认值。没有定位，元素出现在正常的流中
*（忽略 top, bottom, left, right z-index 声明）。
* inherit 规定从父元素继承 position 属性的值。
relative和absolute定位原点是左上角
什么是外边距重叠？重叠的结果是什么？
外边距重叠只发生在上下，左右是没有这个效果的。
margin-collapse外边距合并，计算规则：
两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
两个外边距一正一负时，折叠结果是两者的相加的和。
解决外边距重叠的方法？
外层元素padding代替
内层元素透明边框 border:1px solid transparent;
内层元素绝对定位 postion:absolute:
外层元素 overflow:hidden;
内层元素 加float:left;或display:inline-block;
内层元素padding:1px;
defer 和 async的区别？
标签中如果不加defer 或 async,就同步执行。
加async <script async src ="wgd.js"> 外部js文件会和当前代码同时加载并执行
加defer <script defer src ="wgd.js"> 外部js文件的加载就会和当前代码同时加载，但是要当当前页面代码执行完，才能执行外部js.
promise 和async的区别？
promise比较简单，也是最常用的，主要就是将原来的用回调函数的异步编程方法转成用relsove和reject触发事件， 用then和catch捕获成功或者失败的状态执行相应代码的异步编程的方法
async/await是写异步代码的新方式，以前的方法有回调函数和Promise。
async/await是基于Promise实现的，它不能用于普通的回调函数。
async/await与Promise一样，是非阻塞的。
async/await使得异步代码看起来像同步代码，这正是它的魔力所在。
async和await代码更简洁，代码没有回调
function*fn(){}
用来解决异步的
1、函数生成器特点是函数名前面有一个‘*’
2、通过调用函数生成一个控制器
3、调用next()方法开始执行函数
4、遇到yield函数将暂停
5、再次调用next()继续执行函数
什么是事件冒泡？
子元素和父元素如果拥有同类事件，子元素事件触发，父元素事件也会触发
eval是做什么的，有什么缺点？
在运行时对脚本进行解释执行（不依赖于平台）
缺点：
不安全
规避js多人开发重名的方法？
面向对象（在构造函数里创建变量名）
Git（解决版本冲突问题）
定义一个变量类名大纲
let(只能声明一次，一旦重复就出现报错)
JQ的对象和原生DOM对象的区别？
JQ是可链式编程和隐式迭代，DOM不可以
JQ隐式迭代是个伪数组，DOM是个对象
对BFC规范的理解
BFC是块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。
BFC 是一个独立的布局环境,可以理解为一个容器,在这个容器中按照一定规则进行物品摆放,并且不会影响其它环境中的物品。
如果一个元素符合触发 BFC 的条件，则 BFC 中的元素布局不受外部影响。
浮动元素会创建 BFC，则浮动元素内部子元素主要受该浮动元素影响，所以两个浮动元素之间是互不影响的。
transition和margin的百分比根据什么计算？
transition 过渡 目标元素自身属性
margin相对父元素
cookie和session的区别和联系
cookie存储量小4kb，session存储量5-20M
cookie请求响应携带，session不可以携带
cookie放在客户端，session放在服务器
cookie的生命周期为浏览器会话窗口，关闭浏览器窗口，cookie消失。
session比cookie更安全。
jq.extend 和jq.fn().extend有什么区别？
$(function(){})
extend方法挂载在jQuery和jQuery.fn两个不同对象上方法，但在jQuery内部代码实现的是相同的，只是功能却不太一样；
jQuery.extend(): 把两个或者更多的对象合并到第一个当中;
jQuery.fn.extend():把对象挂载到jQuery的prototype属性，来扩展一个新的jQuery实例方法
数组去重的方法？
es6里新方法实现的数组去重
set是一种新的数据结构
因为set去重返回的是一个对象，想要数组就用Array.from把类数组对象、可迭代对象转化为数组（IE不支持）
数组去重方法（对象不能重复的属性原理）
var arr = [1,1,2,2,66,8,9]
var obj = {}
var arr1 = []
for (var i=0;i<arr.length;i++) {
if(!obj[arr[i]]){
obj[arr[i]] = true
arr1.push(arr[i])
}
}
48. Vue中路由懒加载方式？
在路由配置中随用随引入
require
50. 标签函数 标签函数调用用模板字符串那个``进行调用
function a(){} a`实参`==a(实参)
52. 路由传参的方式：
query Params url+${键名}
this.$route.params.id
this.$route.query.id(query传递的参数会显示在URL后面?id=?)
54. es6新增的内容
箭头函数、set 、let、const、解构赋值、扩展运算符、promise、async/await、class
类(继承)、reduce、Map、filter、map
55. for of 循环的三个属性
var arr = [1,2,3];
for(let i of arr.values()){
console.log(i)//1,2,3 默认打印数组项
}
//arr.values() 默认打印数组项
//arr.entries() 第0项，内容为1；以此类推
//arr.keys() 打印下标
一般是这样使用的：
var arr = [1,2,3];
for(let [i,j] of arr.entries()){
console.log(i,j)// 0 1
//1 2
//2 3
}
56. css3的函数四个
animation()
rotate
skew
url()
列举三种强制转换和两种隐式转换
强制parseInt()、 parsefloat() 、Number() String()
隐士类型转换 == 、+""、 *1
跨域的九种方式
jsonp、
cors、
proxy代理跨域、
postmessage配合iframe、
window.name配合iframe
location.hash配合iframe
document.domain
websocket
nginx
overflow的兄弟元素
(1) overflow-x
(2) overflow-y
get为什么比post高效，他们的请求过程是什么？
post在真正接受数据之前会先将请求头发送给服务器进行确认，然后才真正发送数据
get会将数据缓存起来，而post不会
post不能进行管道化传输
post请求的过程：
1.浏览器请求tcp连接（第一次握手）
2.服务器答应进行tcp连接（第二次握手）
3.浏览器确认，并发送post请求头（第三次握手，这个报文比较小，所以http会在此时进行第一次数据发送）
4.服务器返回100 continue响应
5.浏览器开始发送数据
6.服务器返回200 ok响应
get请求的过程
1.浏览器请求tcp连接（第一次握手）
2.服务器答应进行tcp连接（第二次握手）
3.浏览器确认，并发送get请求头和数据（第三次握手，这个报文比较小，所以http会在此时进行第一次数据发送）
4.服务器返回200 ok响应
axios和fetch的区别及优缺点？https://blog.csdn.net/twodogya/article/details/80223508
jQuery ajax 的优缺点：
本身是针对MVC的编程,不符合现在前端MVVM的浪潮
基于原生的XHR开发，XHR本身的架构不清晰，已经有了fetch的替代方案
JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理（采取个性化打包的方案又不能享受CDN服务）
axios的优缺点：
从 node.js 创建 http 请求
支持 Promise API
客户端支持防止CSRF
提供了一些并发请求的接口（重要，方便了很多的操作）
fetch的优缺点：
符合关注分离，没有将输入、输出和用事件来跟踪的状态混杂在一个对象里
更好更方便的写法
更加底层，提供的API丰富（request, response）
脱离了XHR，是ES规范里新的实现方式
1）fetchtch只对网络请求报错，对400，500都当做成功的请求，需要封装去处理
2）fetch默认不会带cookie，需要添加配置项
3）fetch不支持abort，不支持超时控制，使用setTimeout及Promise.reject的实现的超时控制并不能阻止请求过程继续在后台运行，造成了量的浪费
4）fetch没有办法原生监测请求的进度，而XHR可以
为什么要用axios?
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：
从浏览器中创建 XMLHttpRequest
从 node.js 发出 http 请求
基于promise封装的， 支持 Promise API
拦截请求和响应
转换请求和响应
数据
取消请求0
自动转换JSON数据
客户端支持防止CSRF/XSRF
DOM元素中property(属性)和attribute(特性)的区别？
property可读属性，attribute可读可设置
reduce和正则将"aaa_bbb_ccc"转成驼峰命名法aaaBbbCcc
<script>
//reduce方法
var str = "aaa_bbb_ccc";
//字符串转数组
var arr = str.split("_");
console.log(arr);//["aaa","bbb"]
//tmp表示第一项值 item表示tmp的下一项
var str1 = arr.reduce(function(prev,next){
var a = next[0].toUpperCase();
next = a + next.slice(1);
return prev + next;
})
console.log(str1)//aaaBbb
//正则方法
var reg = /_(\w)/g;
//function中的a代表 正则匹配到的内容
//function中的b代表(\w)中的字母
var b = str.replace(reg,function(a,b){
return b.toUpperCase()
})
console.log(b)
</script>
vue自定义指令的方法、钩子函数、参数（名称，{五个自定义钩子函数}）
vue自定义指令的方法：bind,inserted,update,componentUpdated,unbind
vdeio视频相关方法
播放：video.play()
暂停：video.pause()
全屏：video.webkitFullScreen()
当前播放时间：video.currentTime()
视频时长：video.duration()
构造函数不加new的后果：
造成this指向混乱，指向window
原型链的属性查找原则
每一个对象都有原型(__proto__)，原型又有原型，这样形成的链式结构就是原型链，起点是当前对象，终点是Object.prototype
js中哪些行为会造成内存泄露？
(1) 闭包
（2）没有清除的定时器或者回调
（3）没有清除的DOM元素引用
（4）滥用全局变量
怎样避免内存泄露？
1）减少不必要的全局变量，或者生命周期较长的对象，及时对无用的数据进行垃圾回收；
2）注意程序逻辑，避免“死循环”之类的 ；
3）避免创建过多的对象 原则：不用了的东西要及时归还。
数组的方法:
concat(): 连接两个或者更多的数组，返回结果。
join():数组转字符串的方法，把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
pop(): 删除并返回数组的最后一个元素
push(): 向数组的末尾添加一个或者更多元素，并返回新的长度。
shift(): 删除并返回数组的第一个元素。
unshift(): 向数组的开头添加一个或更多元素，并返回新的长度
reverse(): 颠倒数组中元素的顺序
slice(): (截头不截尾) 从某个已有的数组截取相对应的元素
弹性盒子：
display:flex 弹性布局
display:inline-flex 内联块级弹性布局
控制主轴方向flex-direction:row/column/row-reberse/column-reverse
换行flex-wrap
默认不换行nowrap
同时实现flex-direction和flex-wrap是flex-flow:column wrap;
jusitify-content 控制主轴项目排列方式
flex-start靠左/靠上
flex-end 靠右/靠下
center 居中
space-around 上下/左右空隙均等，中间平分
space-between 两端对齐，并平均分布
align-items:设置项目在弹性盒子中侧轴上的排列方式
flex-start
flex-end
center
控制轴线排列方式：align:center
flex-start靠左/靠上
flex-end 靠右/靠下
center 居中
space-around 上下/左右空隙均等，中间平分
space-between 两端对齐，并平均分布
align-items:设置项目在弹性盒子中侧轴上的排列方式
flex-start
flex-end
center
align-items
flex-start靠左/靠上
flex-end 靠右/靠下
center 居中
baseline与flex-start效果一致
stretch拉伸至父级高度
order 设置或检索弹性盒子模型对象的子元素出现的顺序，数值越大越靠后。
用弹性盒子不生效的属性有哪些？
float：浮动，清除浮动
vertical-align
/* 交替播放 */
animation-direction: alternate;
/* 动画时间函数 */
animation-timing-function: linear;
<!--
css3基础 圆角，盒子阴影 渐变，过渡 2d,3d
-圆角：border-top-left-radius:两个角一起写需要上下在前，左右在后
-线向渐变：background:inear-gradient(to right,red,orange,50%);to指方向，默认是从上到下，50%指一半一半
-径向渐变：background:radial-gradient(red,orange)
-盒子阴影：box-shadow:apx bpx cpx dpx orange;
a控制水平位置，正值偏右，负值靠左，0两边均等
b控制垂直位置，正值靠下，负值靠上，0上下均等
c模糊程度，值越大越模糊
d阴影范围，越大范围越大
最后一个是色值
-过渡
transition:all 1s;
transition-delay:2s;延迟过渡
-2d,3d转换
-2d转换 只有x,y两个轴
-transform:translate 平移
transform:translateX(400px)
transform:translateY(400px)
transform:translate(400px 400px)
-rotate 旋转
transform:rotateX(180deg)
transform:rotateY(180deg)
transform:rotate(180deg)
-scale 缩放
transform:scaleX(2)
transform:scaleY(2)
transform:scale(2,1.5)
-skew 倾斜
transform:skewX(50deg)
transform:skewY(50deg)
transform:skew(50deg)
上边四个想同时用的话就写在一个transform里,用空格隔开。
-maxtrix 矩阵
-->
Quirks模式是什么？它和Standards模式有什么区别？
Quirks是怪异模式，Standards是标准模式。
Quirks Mode是一种浏览器操作模式。一个相对新的浏览器故意模拟许多在旧浏览器中存在的bug。Quirks Mode的目标是使旧页面显示出他们的作者想要的那样。Quirks Mode是由文档类型探查法触发。也就是大家熟知的文档类型切换。这意味着浏览器检查一个HTML文档的开始，看它是否包含一个HTML规范所要求的文档类型声明。
Standards模式，标准模式中，浏览器尝试给符合标准的文档在规范上的正确处理达到在指定浏览器中的程度。
区别：
总体会有布局、样式解析和脚本执行三个方面的区别。
盒模型：在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在Quirks 模式下，IE的宽度和高度还包含了padding和border。
设置行内元素的高宽：在Standards模式下，给<span>等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效。
设置百分比的高度：在standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置百分比的高度，子元素设置一个百分比的高度是无效的
用margin:0 auto设置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下却会失效。
Div+css较table布局有什么优点？
代码少，页面文件少，下载快。
布局灵活，网页有小的改动不影响搜索引擎收录
影响搜索排名
img的alt与title有何异同？ strong与em的异同？
Alt和title都是提示文字，alt是图片加载失败时的提示文字，title是鼠标放在图片上时的提示文字。
Strong和em都是强调的意思，strong是强烈的强调，显示时时粗黑体，em是倾斜体。
为什么利用多个域名来存储网站资源会更有效？
CDN缓存更方便
突破浏览器并发限制
节约cookie带宽
节约主域名的连接数，优化页面响应速度
防止不必要的安全问题
网页标准和标准制定机构重要性的理解
都是为了能让web发展的更健康，首先约束浏览器开发者遵循统一的标准，其次约束网站开发者，这样降低开发难度，开发成本，SEO也会更好做，也不会因为滥用代码导致各种bug、安全问题，最终提高网站易用性。
微格式是什么？谈谈理解，在前端构建中应该考虑微格式吗？
微格式，microformats，它是一种利用HTML的class属性来对网页添加附加信息的方法，是一种开放的数据格式。
微格式在实际生活中的意义和作用？
微格式按照某种已有的被广泛应用的标准，通过对内容块的语义标记，可以让外部应用程序、聚合程序和搜索引擎能够做以下事情：
1、在捉取Web内容时，能够更为准确地识别内容块的语义；
2、对内容进行操作，包括提供访问、校对，还可以将其转化成其他的相关格式，提供给外部程序和Web服务使用。
我们从上面的描述知道，微格式实际就是为现有的(X)HTML元素添加元数据和其他属性，增强语义。
在css/js代码上线之后开发人员经常会优化性能，从用户刷新网页开始，一次js请求一般会有哪些地方存在缓存？
Dns缓存、cdn缓存、浏览器缓存、服务器缓存
电商网站图片多且大，加载慢，有哪些优化方法来给用户更好的体验？
(1) 图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。
(2) 如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。
(3) 如果图片为css图片，可以使用CSSsprite，SVGsprite，Iconfont、Base64等技术。
(4)如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。
(5)如果图片展示区域小于图片的真实大小，则因在服务器 端根据业务需要先行进行图片压缩，图片压缩后大小与展示一致。
如何理解html的语义化的？
语义化，顾名思义，就是写的HTML结构，是用相对应的有一定语义的英文字母（标签）表示的，标记的，因为HTML本身就是标记性语言。
为了在没有css的时候框架也能很好的呈现内容结构、代码结构。
在前端的角度考虑做好SEO（搜索引擎优化）需要考虑什么？
Meta标签优化（标题title，网站描述description,关键词keywords,编码语种language）；
放置关键词、付费的搜索引擎、网站链接交换。
哪些方式可以修改DOM的CSS样式？
（1）行内样式 （2）style标签 （3）使用link引入css文件（4）可以使用js动态修改
.CSS可以通过哪些属性定义，使得一个DOM元素不显示在浏览器可视范围内？
设置display为none，或者设置visibility属性为hidden
设置宽高为0，透明度为0，设置z-index位置在-1000
超链接访问过后hover样式就不出现的问题是什么？如何解决？
a:visited和a:hover 的状态放错顺序了
四种状态排序：link visited hover active
window.onload 和 window.ready的区别？
Document.onload 是在结构和样式加载完才执行js
window.onload：不仅仅要在结构和样式加载完，还要执行完所有的样式、图片这些资源文件，全部加载完才会触发window.onload事件 每次刷新都重新执行
Document.ready原生种没有这个方法，jquery中有 $().ready(function)
只执行一次
jq的入口函数可以重复编写，互不冲突
window.onload不能重复写 发生冲突
javascript的本地对象，内置对象和宿主对象
本地对象(引用类型)：Object、Function、Array、String、Boolean、Number、Date、RegExp等
内置对象：
JS中内置了17个对象，常用的是Array对象、Date对象、正则表达式对象、string对象、Global对象
宿主对象(浏览器对象)：
window，document等
内置对象：
Array对象中常用方法：
Concat（）：表示把几个数组合并成一个数组。
Join（）：返回字符串值，其中包含了连接到一起的数组的所有元素，元素由指定的分隔符分隔开来。
Pop（）：移除数组最后一个元素。
Shift（）：移除数组中第一个元素。
Slice（start，end）：返回数组中的一段。
Push（）：往数组中新添加一个元素，返回最新长度。
Sort（）：对数组进行排序。
Reverse（）：反转数组的排序。
toLocaleString();返回当前系统时间
Array对象属性常用的只有一个：
Length：表示取得当前数组长度
Global对象
是一个固有对象，目的是把所有的全局方法集中在一个对象中。
Global没有语法，直接调用其方法。
escape（）: 对 String 对象编码以便它们能在所有计算机上可读.
escape(charString)
必选项 charstring 参数是要编码的任意 String 对象或文字。
isNaN():判断一个值是否是NaN。
parseInt（）：返回由字符串得到的整数
正则表达式对象
本对象包含正则表达式模式以及表明如何应用模式的标志。
语法 1
re = /pattern/[flags]
语法 2
re = new RegExp("pattern",["flags"])
re为将要赋值正则表达式模式的变量名
pattern为正则表达式
flags为标记：有如下3中
1：g（全文查找）
2：i（忽略大小写）
3：m（多行查找）
当预先知道查找字符串时用语法 1。当查找字符串经常变动或不知道时用语法 2，比如由用户输入得到的字符串。
String对象
charAt():返回指定索引的位置的字符
concat（）：返回字符串值，表示两个或多个字符串的连接
match（）：使用正则表达式模式对字符串执行查找，并将包含查找结果最为结果返回
function MatchDemo(){
var r, re; // 声明变量。
var s = "The rain in Spain falls mainly in the plain";
re = /ain/i; // 创建正则表达式模式。
r = s.match(re); // 尝试匹配搜索字符串。
return(r); // 返回第一次出现 "ain" 的地方。
}
Replace（a，b）：字符b替换a
Search（stringObject）：指明是否存在相应的匹配。如果找到一个匹配，search 方法将返回一个整数值，指明这个匹配距离字符串开始的偏移位置。如果没有找到匹配，则返回 -1。
Slice（start，end）：返回字符段片段
Split（）：字符串拆分
Substr（start，length）：字符串截取
Substring（start，end）取得指定长度内的字符串
toUpperCase（）：返回一个字符串，该字符串中的所有字母都被转化为大写字母。
toLowerCase（）：返回一个字符串，该字符串中的所有字母都被转化为小写字母。
Math对象
ceil()：向上取整。
floor():向下取整。
round():四舍五入。
random():取随机数。
Date对象
get/setDate()：返回或设置日期。
get/setFullYear():返回或设置年份，用四位数表示。
get/setYear():返回或设置年份。
get/setMonth():返回或设置月份。0为一月
get/setHours():返回或设置小时，24小时制
get/setMinutes():返回或设置分钟数。
get/setSeconds():返回或设置秒钟数。
get/setTime():返回或设置时间（毫秒为单位）
bootstrap的十二栅格原理 @media
（1）.container/.container-fluid
(2) .row .col-xs/sm/md/lg-份数
JS的typeof返回哪些数据类型？
1.返回数据类型
undefined
string
boolean
number
symbol(ES6)
Object
Function
2.强制类型转换
Number(参数)把任何类型转换成数值类型
parseInt（参数1，参数2）将字符串转换成整数
parseFloat()将字符串转换成浮点数字
string(参数)：可以将任何类型转换成字符串
Boolean()可以将任何类型的值转换成布尔值
3.隐式类型转换
基本数据类型和引用数据类型的区别？
基本数据类型保存在栈中 传值 先进后出 typeof 检测基本数据类型的最佳工具
引用数据类型保存在堆中 传址 instanceof用于检测引用数据类型
4. 数组的方法
push()：将一个或多个元素添加到数组的末尾
Pop():从数组中删除最后一个元素
Unshift()：将一个或多个元素添加到数组的开头，并返回新数组的长度。
Shift()：从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度。
Concat(): 用于合并两个或多个数组。不改变现有数组，返回一个新的数组。
IndexOf(): 返回在数组中可以找到一个给定元素的一个索引，如果不存在返回-1。
Reverse(): 方法将数组中元素的位置颠倒。
Sort(): sort方法中的参数为一个回调函数，决定数组由大到小排序或者由小到大排序
Splice(): 通过删除现有的元素、或添加新元素来更改一个数组的内容。
数组的转换 mystr.split();将字符串转换成数组
事件绑定和普通事件有什么区别？
普通添加事件的方法不支持添加多个事件，最下面的事件会覆盖上面的，而事件绑定(addEventListener)方式添加事件可以添加多个。
IE和DOM事件流的区别？
事件流IE采用冒泡事件，DOM使用先捕获后冒泡事件
示例：
复制代码代码如下:
<body>
<div>
<button>点击这里</button>
</div>
</body>
冒泡型事件模型： button->div->body (IE事件流)
捕获型事件模型： body->div->button (Netscape事件流)
DOM事件模型： body->div->button->button->div->body (先捕获后冒泡)
2.事件侦听函数的区别
IE使用:
[Object].attachEvent("on事件类型", 事件处理程序); //绑定函数
[Object].detachEvent("on事件类型, 事件处理程序); //移除绑定
普通浏览器使用：
Object.addEventListener(‘事件类型’,’事件处理程序’,false)//绑定事件
Object.removeEventListener(“事件类型”,”事件处理程序”,false) //事件移除
False 冒泡型事件 true 捕获型事件
IE和标准下有哪些兼容性写法？
var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
var target = ev.srcElement || ev.target
call和apply的区别？
Apply：调用一个对象的方法，用另一个对象替换当前对象，例如：b.apply(a,arguments);即对象a调用b的方法。
call：调用一个对象的另一个方法，用另一个对象替换当前对象。例如:b.call(a,args1,args2);
即a调用b对象的方法。
共同之处：
都‘可以用来代替另一个对象调用一个方法，将一个函数的对象上下文从初始的上下文改变为由thisobject指定的新对象。
区别：
Apply：最多只能有两个参数
Call:它可以接受多个参数，第一个参数与apply一样，后面则是一串参数列表。
解决异步的几种方式？
(1) 回调函数
$.ajax({
"url": "",
success: function(data){
//函数返回成功需要进行的操作或数据更新
},
error: function(err){
//函数返回失败需要进行的操作或提示
}
})
(2) promise 是一个构造函数，用来传递异步操作消息，链式调用，避免层层嵌套的回调函数。 解决回调地狱的问题，
promise有三种状态：
等待中 pending；
已完成 fulfilled；
已拒绝 reject；
let test = new promise(resolve,reject){
if(success){
resolve();
}else{
reject();
}
}
test()
.then(res => {
//成功时返回函数
})
.catch(err => {
//失败时返回函数
})
（3） generator 在执行文件的时候起到暂停的作用。只有Generator能让一段程序执行到指定的位置先暂停，然后再启动，再暂停，再启动。
(4) async/await
和 try catch 搭配使
将字符串”<tr><td>{$id}</td><td>{$name}</td></tr>”中的{$id}替换成10，{$name}替换成Tony （使用正则表达式）
”<tr><td>{$id}</td><td>{$id}_{$name}</td> </tr>”.replace(/{\$id}/g, ’10′).replace(/{\$name}/g, ‘Tony’);
http协议和TCP协议的区别？
HTTP协议的特点：简单快速、灵活、无连接、无状态、支持B/C及C/S模式
TCP协议是传输层协议，主要解决数据如何在网络中传输。
HTTP协议是应用层协议，主要解决如何包装数据。HTTP是建立在TCP协议基础上的一种应用。
HTTP协议和HTTPS协议的区别？
https协议需 要到ca申请证书，一般免费证书很少，需要交费。
http是超文本传输协议，信息是明文传输，https 则是具有安全性的ssl加密传输协议。
http和https使用的是完全不同的连接方式用的端口也不一样,前者是80,后者是443。
http的连接很简单,是无状态的。
HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议 要比http协议安全。
原型方法和实例方法有什么区别？
原型中的方法可以被所有的实例共享， 实例化的时候不会在实例内存中再复制一份，
占有的内存消耗
