px，em和rem的区别
px是相对长度单位，相对于显示器屏幕分辨率而言
em相对于父元素的字体大小的单位，em的值不是固定的，会继承父元素的字体大小
1em=16px 10px=0.625em，所以在css中的body声明font-size：62.5%
rem相对于根元素字体大小的单位，就是指屏幕宽度的百分之几，适配各种移动端用
如何用css实现一个三角形
使用border和transparent（透明色）
.box{
width: 0;
height: 0;
border-right: 20px solid transparent;
border-bottom: 20px solid blue;
border-left: 20px solid transparent;
border-top: 20px solid transparent;
}
判断一个对象是否为空
vue父子组件声明周期执行顺序
父beforeCreate -》父created -》父beforeMount -》子beforeCreate -》子created -》子beforemount -》子mounted -》父mounted
在父组件执行beforemount阶段后，进入到子组件的beforecreate、created、beforemount阶段，这些阶段和父组件类似，beforemount阶段后，执行的是mounted阶段，该阶段子组件已经挂载到父组件上，并且父组件随之挂载到页面中，在beforemount之后mounted之前，数据已经被加载到视图上了，即$el元素被挂载到页面时触发了视图的更新
父组件的mounted阶段，此时el已经渲染完成并挂载到实例上
组件之间的通信
1.父组件向子组件传递数据通过props
2.子组件通过$emit触发父组件的事件
3. $refs, $root, $parent, $children
root获取根组件
parent获取父组件
children获取子组件（所有的子组件，不保证顺序）
refs组件获取组件实例，元素获取元素
4.vuex（兄弟通信）
数组的几种常见方法
UNshift（）添加到数组的开头
shift（）删除第一个元素，并返回该元素的值
push（）添加到数组的后面
pop（）删除最后一个元素，并返回该元素的值
splice（）
concat（）合并
join（）将数组变成字符串
reverse（）数组顺序颠倒
sort（）排序
filter（）过滤
es6的set和map的区别
使用element ui封装组件的方法
1.在表格、表单等多次调用的组件封装在components中，然后在main.js中全局引入，将组件挂载到vue.compont
然后在要用的页面直接写组件，然后接口返回的数据的属性名写在一个js文件里然后用import导出这个数据，在data中写上这个属性名，然后在接口中直接赋值，在组件中用双向数据绑定到组件中
2.如果是只有这个页面中的调用的组件，可以直接写在这个文件下，直接用父子组件传参的方式调用数据就可以
浏览器css和js兼容性问题
1.初始化css样式，因为浏览器兼容问题，有些浏览器的标签默认值不同，不初始化css，会导致浏览器的页面之前的显示差异
2.图片默认有间距，解决是vertical-align：middle
3.浏览器兼容问题：使用@media+rem
4.一些浏览器（ie）不兼容es6特性,使用安装babel-cli来将es6转换成es5
css3新特性
弹性盒模型display：flex
圆角border-radius
渐变background：linear-gradient（red，green，blue）
阴影box-shadow
文字溢出text-overflow：ellipsis
浏览器事件执行顺序
捕获-》冒泡
当输入url后，按下回车键发生了哪些动作
1.先解析url地址是否合法的
2.检查是否存在缓存（浏览器缓存-系统缓存-路由缓存）
3.发送http请求前需要进行域名解析（dns解析），获取对应的ip地址
4.发送TCP连接，经过三次握手
5.握手成功，浏览器向服务器发送http请求，发送请求数据包
6.服务器收到请求后，将数据返回浏览器
7.浏览器接收到返回的响应
8.浏览器解析响应，如果响应可以，则存入缓存
9.浏览器发送请求获取嵌入在html中的资源（html、css、js、图片）
10.浏览器发送异步请求
11.页面渲染----全部结束
promise的缺点
1.promise一旦新建就会立即执行，无法中途取消
2.当处于pending状态时，无法得知当前进展到哪一个阶段
3.如果不设置回调函数，promise内部的错误就无法反映到外部
promise两个参数
分别是resolve和reject，他们是两个函数，由js提供，resolve表示成功状态通过.then调用，reject表示失败通过.catch调用
function Print (ready) {
return new Promise ((resolve,reject)=>{
if(ready){
resolve("Hello World!");
}else{
reject("Good bye!");
}
});
}
function print1 () {
console.log("World");
}
function print2 () {
console.log("!");
}
function catch_error () {
console.log('error');
}
Print(false)
.then(message=>{console.log(message);})
.then(print1)
.then(print2)
.catch(catch_error)
promise.all（）和promise.race()的区别
all是等所有的异步操作执行完后才执行then回调，并把结果放到数组中传给then
race只要有一个异步操作执行完就立刻执行then回调
function cutUp(){
console.log('挑作业本'); // 1
var p = new Promise(function(resolve, reject){ //做一些异步操作
setTimeout(function(){
console.log('挑好购买作业本'); // 3
resolve('新的作业本');
}, 1000);
});
return p;
}
function boil(){
console.log('挑笔芯'); // 2
var p = new Promise(function(resolve, reject){ //做一些异步操作
setTimeout(function(){
console.log('挑好购买笔芯'); // 4
resolve('新的笔芯');
}, 1000);
});
return p;
}
Promise.all([cutUp(),boil()]).then(function(results){
console.log("写作业的工具都买好了"); // 5
console.log(results); // 6 ['新的作业本','新的笔芯']
});
Promise.race([cutUp(), boil()]).then(function(results){
console.log("哈哈，我先买好啦");
console.log(results);
});
// 挑作业本
//挑笔芯
//调好购买作业本
//哈哈，我先买好啦
//新的作业本
//挑好购买笔芯
如何在promise链中断.then方法
1.throw err 抛出错误
2.使用reject方法
promise和async、await的错误处理或处理失败有什么区别
1.promise自己catch异常，可以在构造体里捕获，async返回的是promise，通过catch捕获
2.async让try、catch可以同时处理同步和异步错误，在promise中，try、catch不能处理json.parse的错误，因为在promise中需要使用.catch
3.await后接的promise.reject都必须被捕获，否则中断执行
promise、async有什么区别
async、await是写异步代码的新方式，使用方式看起来像同步，进一步优化了代码，是基于promise实现的，不能用于普通的回调函数
promise是为了解决异步嵌套而产生，让代码更易于理解区别
async/await缺点
1.无法处理promise返回的reject对象，要借助try…catch
2.因为await会阻塞代码，导致性能问题
js执行机制（微任务和宏任务）
js是单线程的，但分同步和异步，微任务和宏任务都是异步任务，属于同一个队列
宏任务：script，setTimeout，setInterval，setImmediate
微任务：promise，process.nextTick
执行机制：先宏——微任务——宏任务——不断循环
先执行同步，按顺序一步一步执行
先执行script标签里——》在执行promise函数里——》在执行script——》执行process.nextTick——》then里——》setTimeout
console.log('1');
setTimeout(function() {
console.log('2');
process.nextTick(function() {
console.log('3');
})
new Promise(function(resolve) {
console.log('4');
resolve();
}).then(function() {
console.log('5')
})
})
process.nextTick(function() {
console.log('6');
})
new Promise(function(resolve) {
console.log('7');
resolve();
}).then(function() {
console.log('8')
})
console.log('13');
// 1、7、13、6、8、2、4、3、5
为什么vue中template下只能有一个div（要求组件模板只有一个根元素）
1.new Vue（{el:’#app’}）
实例化vue时，填写一个el选项，来指定spa（单页面应用）入口，同时在body里新增一个id为app的div
2.单页面组件中，template下的元素div
vue在动态创建dom时，会将template中的子元素作为入口进行创建，根据入口遍历以该子元素作为根节点的整个节点树，然后创建虚拟dom。如果有多个子元素，那么vue无法获取确切的入口，就得刻意的去指定某个元素作为根节点，会增大程序的复杂性，增加无用的代码
单页面应用和多页面应用的优缺点
单页面应用：是指只有一个主页面的应用，浏览器一开始就要加载所有必须的html，js。css，所有的页面内容都包含在这个主页面内，但是写的时候会分开写，交互时由程序动态载入，单页面跳转，仅刷新布局资源
多页面：一个应用有多个页面，页面跳转时整页刷新
单页面的优点：用户体验块，好，内容的改变不需要重新加载整个页面，基于这一点spa对服务器压力较小，前后端分离，页面效果比较炫酷
单页面缺点：不利于SEO，导航不可用，如果一定要用需要自行实现前进后退，初次加载时耗时多，页面复杂度提高
vue的路由模式
hash模式：就是地址栏url的#符号，vue-router默认模式，在router目录下的index.js通过mode:"history”来改变
history模式：window.history可以打印里面的方法（前进forward()，后退back()，跳转go()）和记录长度，就是利用h5新增的history.pushState()和history.replaceState()方法
hash模式的原理和缺点
原理：浏览器监听了一个onhashchange方法来改变页面的跳转
缺点：只能改变#后面的擦书来实现路由的跳转
history模式
缺点：不怕前进后退跳转，就怕刷新（如果后端没有去处理的话），因为刷新是实实在在的去请求服务器
vue-router和location.href跳转有什么区别
使用location.href来跳转，简单方便，但是刷新了页面
使用history.pushState来跳转，静态跳转，无刷新页面
引进router，使用router.push来跳转，使用diff算法，实现按需加载，减少dom的消耗
router和history.pushState来跳转没什么区别，vue-router就是使用history.pushState，尤其是history模式
vue-router是什么？有哪些组件
vue用来写路由的一个插件。router-view，router-link
active-class是那个组件的属性
vue-router模块下的router-link组件，children数组来定义子路由
怎么定义vue-router的动态路由？怎么获取传过来的值
在router目录下的index.js文件中，对path属性加/:id，使用router对象的params.id
浏览器如何渲染页面
1.解析html文档，遇到html标签时，构建dom树
2.在构建dom的过程中，如果遇到外联的样式声明或脚本声明，则暂停文档解析，创建新的网路连接，开始下载样式文件和脚本文件
3.样式文件下载完成后，构建css规则树，脚本文件下载完成后，解析并立即执行
4.构建dom的同时，结合css规则树完成页面渲染
5.如果dom树先于css规则树构建完成，则在css规则树构建完成后，页面会发生一次重绘，将新构建的css规则应用于渲染树
性能优化
1.减少请求数量
使用精灵图、base64和使用字体图标代替图片，减少重定向，使用缓存，避免使用空的src和href
2.减少资源大小
html、css、js和图片压缩
3.资源合并（减少http请求数量）
4.优化资源加载
css放在head中，js放在body底部，先外链后本页，异步script标签，defer和async异步加载
5.减少重绘回流
6.浏览器储存（cookie，localStorage和sessionStorage）
7.webpack优化
缓存有哪几种方式
1.localStorage 永久保存，除非主动删除数据
2.sessionStorage 刷新页面数据依旧存在，但关闭页面，数据就会被清空
3.cookie保存在服务端，关闭浏览器，数据依然存在，直到过期时间结束才消失，大小不超过4kb，每次http请求都会携带cookie
4.localStorage和sessionStorage没有大小限制，也不会主动将数据发给服务器，仅在本地保存，是h5新增的
重绘与回流区别
重绘：不会影响页面布局的操作，比如更改颜色
回流：布局的改变会导致需要重新构建
重绘不一定回流，回流并将重绘
display:none和visibility:hidden的区别
display:none该元素在dom元素中消失，不占用页面空间，会导致回流与重绘
visibility:hidden该元素的存在的空间还在，只是不可见，会影响页面的布局，具有继承性，会导致重绘
居中为什么要用transform而不用margin：top/left
transform是合成属性，不会导致回流与重绘，但占用内存会大些
top/left是布局属性，会导致回流与重绘
webpack打包流程
npm init 初始化一个项目
npm install webpack webpack-cli 安装webpack相关开发依赖
webpack懒加载
路由懒加载
懒加载的原理
图片的加载依赖于src路径，将图片路径放在一个暂存器中，当图片加载时显示，然后赋值给src，这样实现按需加载，也就是懒加载，通常使用h5的data-属性作为暂存器
webview
webview是一个基于webkit引擎，可以解析dom元素，展示html页面的空间，主要用于手机系统上加载html文件
需要配置业务域名，并且打开的连接必须是https开头的，否则会报错
v-for中加key与不加key的区别
不加key比加key的情况下，dom多操作了2次
当不加key的情况下，每次vnode不同，都会触发dom操作，多次dom操作会影响性能的问题
异步组件实现按需加载
在router目录下的index，js文件内使用component用箭头函数然后import引入加载页面的路径component：（）=>import(’@page/home/home’)
如何解决跨越问题
1.jsonp跨域，前端使用ajax的jsonp（在ajax请求中添加type，dataType，jsonp，jsonpCallback）
将get请求伪装成一个script文件加载，可以绕过跨域问题
优点：对浏览器支持较好
缺点：需要后台做修改，只能用get方法；发出去的不是xhr请求
2.nginx反向代理
www.baidu.com/index.html需要调用www.sina.com/server.php，可以写一个接口 www.baidu.com/server.php，由这个接口在后端去调用www.sina.com/server.php并拿到返回值，然后再返回给index.html
3.使用cors（添加请求头header）
优点：主流浏览器都支持，支持所有类型的http请求
缺点：不支持ie10以下的浏览器
header(‘Access-Control-Allow-Origin:*’);//允许所有来源访问，但 * 有个问题，就是不支持cookie的跨域
js的同源策源
同源：是指协议，端口和域名相同
同源策略：是一种安全协议，指一段脚本只能读取来自同一来源的窗口和文档属性
jsonp的工作原理，以及为什么不是真正的ajax
jsonp是一种非正式传统的传输协议，允许用户传递一个callback给服务器，然后服务器返回数据时会把这个callback参数作为函数名包裹着json数据，这样客户端就可以随意定制自己的函数自动返回数据了
他们的性质不同，ajax是通过xmlhttprequire获取非本页内容
jsonp是动态添加script标签调用服务器提供的js脚本
jsonp只支持get请求，ajax支持get和post
小程序
小程序的生命周期
onlaunch 初始化完成时（全局只触发一次）
onLoad 页面加载时触发，一个页面只会调用一次，获取打开当前页面路径的中参数
onShow 页面显示，切入前后台时触发
onReady 页面初次渲染完成时触发，一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互
onHide 前台进入后台隐藏，如navigation To或底部tab切换到其他页面，小程序切入后台等
onUnload 监听页面卸载
onPullDownRefresh 监听用户下拉动作
onReachBottom 页面上拉触底事件的处理函数
小程序页面间如何传递数据的方法
1.使用全局变量实现数据传递。在app.js定义全局变量globalData，将需要存储的信息放在里面
2.使用wx.navigateTo和wx.redirectTo时，将部分数据放在url里，并在新页面onload时候初始化
3.使用本地缓存storage相关
如何封装微信小程序的数据请求
1.将所有的接口放在统一的js文件中并导出
2.在app.js中创建封装请求数据的方法
3.在子页面中调用封装的方法请求数据
路由跳转的区别
wx.navigateTo（）保留当前页面，跳转到应用内的某个页面，但是不能跳到tabbar页面
wx.redirectTo（）关闭当前页面，跳转到应用内的某个页面，但是不允许跳转到tabbar页面
wx.switchTab（）跳转到tabBar页面，并关闭其他所有非tabBar页面
wx.navigateBack（）关闭当前页面，返回上一页面或多级页面。可通过getCurrentPages（）获取当前页面的页面栈，决定需要返回几层
wx.reLaunch（）关闭所有页面，打开到应用内的某个页面
小程序关联微信公众号如何确定用户的唯一性
使用wx.getUserInfo方法withCredentials为true可获取encrytedData，李阿敏有union_id。后端需要进行对称解密
小程序的双向绑定和vue哪里不一样
小程序直接this.data属性是不可以同步到视图的，必须调用this.setdata
bindtap和catchtap的区别
相同点：都是点击事件函数，点击时触发
不同点：bindtap不会阻止冒泡事件，catchtap是阻止冒泡
微信小程序与vue区别
1.生命周期不一样，小程序的比较简单
2.数据绑定不同，小程序数据绑定需要使用{{}}，vue直接用：就可以显示与隐藏，vue中，v-if和v-show显示与隐藏，小程序中，wx-if和hidden控制元素的显示与隐藏
3.事件处理不同，小程序中用bindtap或catchtap绑定事件，vue使用v-on:event或@event
4.数据双向绑定也不一样，vue中只需要在表单加上v-model，在绑定data中对应的一个值，表单数据发生变化data也会变化，小程序必须获取表单元素，改变的值，然后再把值赋给一个data中声明的变量
原生开发小程序，wepy，mpvue的对比
1.个人认为，如说是新项目，且没有旧的h5项目迁移，则考虑用小程序原生开发，好处是相比于第三方框架，坑小
2.而如果有老的h5项目是vue开发或者也有h5项目也需要小程序开发，则比较适合wepy或者mpvue来做迁移或开发，近期看wepy几乎不更新了，所以推荐美团的mpvue
如何实现登录数据的持久化
通过wx.setStorageSync来进行数据持久化
微信支付流程
临时凭证虎丘wxid，生成repayid
json返回给小程序，然后调用支付窗口
支付成功提示+post回调
如何自定义tabbar
在components组件中创建一个tabbar页面，取消原有的tabbar页面
小程序开发限制大小的解决方法
使用分包加载subPackages
目前小程序有什么功能点
设备管理手动和自动控制，订单列表，服务页面，新闻资讯，生产进度，下单，预约方面，留言
小程序和h5的区别
1.运行环境不同（小程序在微信运行，h5在浏览器运行）
2.开发成本不同（h5要兼容不同的浏览器）
3.获取系统权限不同（系统级权限可以和小程序无缝衔接）
4.应用在生产环境的运行流畅度（h5许不断对项目优化来提高用户体验）
|