promise

Promise最大的好处是在异步执行的流程中，把执行代码和处理结果的代码清晰地分离了：

webpack

vue等单页面应用及其优缺点

优点：Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件，核心是一个响应的数据绑定系统。MVVM、数据驱动、组件化、轻量、简洁、高效、快速、模块友好。缺点：不支持低版本的浏览器，最低只支持到IE9；不利于SEO的优化（如果要支持SEO，建议通过服务端来进行渲染组件）；第一次加载首页耗时相对长一些；不可以使用浏览器的导航按钮需要自行实现前进、后退。

Vue.js的优势

Vue.js在可读性、可维护性和趣味性之间做到了很好的平衡。Vue.js处在React和Angular 1之间，而且如果你有仔细看Vue的指南，就会发现Vue.js从其它框架借鉴了很多设计理念。 Vue.js从React那里借鉴了组件化、prop、单向数据流、性能、虚拟渲染，并意识到状态管理的重要性。 Vue.js从Angular那里借鉴了模板，并赋予了更好的语法，以及双向数据绑定（在单个组件里）。从我们团队使用Vue.js的情况来看，Vue.js使用起来很简单。它不强制使用某种编译器，所以你完全可以在遗留代码里使用Vue，并对之前乱糟糟的jQuery代码进行改造。

vue响应式原理

把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。在属性被访问和修改时通知变化。

每个组件实例都有相应的 watcher 实例对象，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新。

受现代 JavaScript 的限制 (而且 Object.observe 也已经被废弃)，Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。

vue 3.0 将带来一个基于 Proxy 的 observer 实现，它可以提供覆盖全范围的响应式能力，消除了当前 Vue 2 系列中基于 Object.defineProperty 所存在的一些局限，这些局限包括：

对属性的添加、删除动作的监测；对数组基于下标的修改、对于 .length 修改的监测；对 Map、Set、WeakMap 和 WeakSet 的支持；

另外，新的 observer还提供了如下的一些特性：

公开的用于创建 observable 的 API：这为小型到中型的应用提供了一种轻量级的、极其简单的跨组件状态管理解决方案。默认为惰性监测（Lazy Observation）。在 2.x版本中，任何响应式数据，不管它的大小如何都会在启动的时候监测功能。如果数据量很大的话，在应用启动的时候就可能造成严重的性能消耗。而在3.x 版本中，只有应用的初始可见部分所用到的数据会被监测，更不用说这种监测方案本身其实也是更加快的。更精准的变动通知：举个例子：在 2.x 系列中，通过 Vue.set 强制添加一个新的属性，将导致所有依赖于这个对象的 watch 函数都会被执行一次；而在 3.x 中，只有依赖于这个具体属性的 watch 函数会被通知到。

JavaScript 原型，原型链 ? 有什么特点？

原型对象也是普通的对象，是对象一个自带隐式的 proto 属性，原型也有可能有自己的原型，如果一个原型对象的原型不为 null 的话，我们就称之为原型链
原型链是由一些用来继承和共享属性的对象组成的（有限的）对象链

Ajax实现步骤和原理

获取ajax异步对象

ajax.open(method,url); method是提交方式有 get和post两种 url是提交路径

ajax.send()

ajax.onreadystatechange 包括五中状态码： 0—ajax异步对象创建完毕，但是还未发送 1—ajax已经调用了open()方法，但是还未调用send()方法 2—已经调用send(),但是还未到达服务器端 3—表示请求已经到达服务端，正在服务端的处理，但是还未响应返回 4—ajax已经完全接收了服务器的响应信息，但是状态码未必是正确的状态码有： 200：正确 404/500：错误 ps：a.每个浏览器的0，1,2,3这四种状态显示的不一样，但是4这个状态码每个浏览器都有，所以我们只需要使用4即可 b. 0.1.2.3.4是ajax中的响应码，200/404/500是web中的状态码

ajax.readyState == 4

ajax.status == 200;

获取值 ajax.requestText或者ajax.requestXML

跨域方法以及怎么样实现的与原理

一、使用JSONP跨域域名,端口,协议原理：因为通过script标签引入的js是不受同源策略的限制的。所以我们可以通过script标签引入一个js或者是一个其他后缀形式（如php，jsp等）的文件，此文件返回一个js函数的调用，如返回JSONP_getUsers(["paco","john","lili"])，也就是说此文件返回的结果调用了JSONP_getUsers函数，并且把["paco","john","lili"]传进去，这个["paco","john","lili"]是一个用户列表。那么如果此时我们的页面中有一个JSONP_getUsers函数，那么JSONP_getUsers就被调用到，并且传入了用户列表。此时就实现了在本域获取其他域数据的功能，也就是跨域。

为什么script标签引入的文件不受同源策略的限制？因为script标签引入的文件内容是不能够被客户端的js获取到的，不会影响到被引用文件的安全，所以没必要使script标签引入的文件遵循浏览器的同源策略。而通过ajax加载的文件内容是能够被客户端js获取到的，所以ajax必须遵循同源策略，否则被引入文件的内容会泄漏或者存在其他风险。

JSONP的缺点则是：它只支持GET请求而不支持POST等其它类型的HTTP请求 JSONP易于实现，但是也会存在一些安全隐患，如果第三方的脚本随意地执行，那么它就可以篡改页面内容，截获敏感数据。

二、动态创建script标签这种方法其实是JSONP跨域的简化版，JSONP只是在此基础上加入了回调函数。

三、window.name

四、服务器代理五、document.domain 通过修改document的domain属性，我们可以在域和子域或者不同的子域之间通信。同域策略认为域和子域隶属于不同的域，比如baidu.com和 youxi.baidu.com是不同的域，这时，我们无法在baidu.com下的页面中调用youxi.baidu.com中定义的JavaScript方法。但是当我们把它们document的domain属性都修改为baidu.com，浏览器就会认为它们处于同一个域下，那么我们就可以互相获取对方数据或者操作对方DOM了。

为什么浏览器会产生同源策略

之所以有同源策略我认为其中一个重要原因就是对cookie的保护 cookie 中存着sessionID 。黑客一旦获取了sessionID 并且在有效期内就可以登录

axios有什么特点

基于 Promise 的 HTTP 请求客户端，可同时在浏览器和 node.js 中使用。

1、在浏览器中发送 XMLHttpRequests 请求；

2、在 node.js 中发送 http请求；

3、支持 Promise API；

4、拦截请求和响应；

5、转换请求和响应数据；

6、自动转换 JSON 数据；

7、客户端支持保护安全免受 XSRF 攻击；

Cookie的利弊以及与web storage的区别

cookie的优点：具有极高的扩展性和可用性

通过良好的编程，控制保存在cookie中的session对象的大小。

通过加密和安全传输技术，减少cookie被破解的可能性。

只有在cookie中存放不敏感的数据，即使被盗取也不会有很大的损失。

控制cookie的生命期，使之不会永远有效。这样的话偷盗者很可能拿到的就是一个过期的cookie。

cookie的缺点：

cookie的长度和数量的限制。每个domain最多只能有20条cookie，每个cookie长度不能超过4KB。否则会被截掉。

安全性问题。如果cookie被人拦掉了，那个人就可以获取到所有session信息。加密的话也不起什么作用。

有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务端保存一个计数器。若吧计数器保存在客户端，则起不到什么作用。

sessionstorage用于本地存储一个会话(session)中的数据，这个数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。

因此sessionstorage不是一种持久化的本地存储，仅仅是会话级别的存储。

而localstorage用于持久化的本地存储，除非主动删除数据，否则数据是永远也不过期的。

web storage的概念和cookie相似，区别是它是为了更大的容量存储设计的。

cookie大小受限，并且每次都请求一个新的页面的时候后cookie都会被发送过去，另外cookie还需要指定作用域，不可以跨域调用。

cookie的作用是与服务器进行交互，作为HTTP规范的一部分存在，而web storage仅仅是为了在本地存储数据而生。

localstorage和sessionstrage都具有相同的操作方法，例如setItem,getItem和removeItem等。

箭头函数，箭头函数的特点

箭头函数是匿名函数。 1不能作为构造函数，不能使用new。

2不能使用argumetns,取而代之用rest参数...解决let C = (...c) => { console.log(c); }

3不绑定this，会捕获其定义时所在的this指向作为自己的this。由于在vue中自动绑定 this 上下文到实例中，因此不能使用箭头函数来定义一个周期方法。箭头函数的this永远指向上下文的this，call、apply、bind也无法改变

4箭头函数没有原型对象

对于MVVM的理解

MVVM 是 Model-View-ViewModel 的缩写。

Model代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。

View 代表UI 组件，它负责将数据模型转化成UI 展现出来。

ViewModel 监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步View 和 Model的对象，连接Model和View。

在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的，因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。

ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

Vue的生命周期

beforeCreate（创建前）在数据观测和初始化事件还未开始

created（创建后）完成数据观测，属性和方法的运算，初始化事件， el属性还没有显示出来beforeMount（载入前）在挂载开始之前被调用，相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。

mounted（载入后）在el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。

beforeUpdate（更新前）在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。

updated（更新后）在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。

beforeDestroy（销毁前）在实例销毁之前调用。实例仍然完全可用。 destroyed（销毁后）在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

什么是vue生命周期？

Vue 实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。

Vue实现数据双向绑定的原理：Object.defineProperty（）

Vue组件间的参数传递

1.父组件与子组件传值父组件传给子组件：子组件通过props方法接受数据; 子组件传给父组件：$emit方法传递参数 2.非父子组件间的数据传递，兄弟组件传值 eventBus，就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件。项目比较小时，用这个比较合适。

Vue的路由实现：hash模式和 history模式

hash模式：在浏览器中符号“#”，#以及#后面的字符称之为hash，用window.location.hash读取；特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面

history模式：history采用HTML5的新特性；且提供了两个新方法：pushState（），replaceState（）可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更。

vue路由的钩子函数

首页可以控制导航跳转，beforeEach，afterEach等，一般用于页面title的修改。一些需要登录才能调整页面的重定向功能。

beforeEach主要有3个参数to，from，next：

to：route即将进入的目标路由对象，

from：route当前导航正要离开的路由

next：function一定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。可以控制网页的跳转。

vuex是什么？怎么使用？哪种功能场景使用它？

只用来读取的状态集中放在store中；

改变状态的方式是提交mutations，这是个同步的事物；

异步逻辑应该封装在action中。

在main.js引入store，注入。新建了一个目录store，….. export 。

场景有：单页应用中，组件之间的状态、音乐播放、登录状态、加入购物车

对keep-alive 的了解？

keep-alive是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。在vue 2.1.0 版本之后，keep-alive新加入了两个属性: include(包含的组件缓存) 与 exclude(排除的组件不缓存，优先级大于include) 。

$route和$ router的区别

$route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。而$ router是“路由实例”对象包括了路由的跳转方法，钩子函数等。

vue常用的修饰符？

.prevent: 提交事件不再重载页面；.stop: 阻止单击事件冒泡；.self: 当事件发生在该元素本身而不是子元素的时候会触发；.capture: 事件侦听，事件发生的时候会调用

什么是vue的计算属性？

在模板中放入太多的逻辑会让模板过重且难以维护，在需要对数据进行复杂处理，且可能多次使用的情况下，尽量采取计算属性的方式。

好处：①使得数据处理结构清晰；

②依赖于数据，数据更新，处理结果自动更新；

③计算属性内部this指向vm实例；

④在template调用时，直接写计算属性名即可；

⑤常用的是getter方法，获取数据，也可以使用set方法改变数据；

⑥相较于methods，不管依赖的数据变不变，methods都会重新计算，但是依赖数据不变的时候computed从缓存中获取，不会重新计算。

前端性能优化

一、代码部署：

1、代码的压缩与合并

2、图片、js、css等静态资源使用和主站不同域名地址存储，从而使得在传输资源时不会带上不必要的cookie信息。

3、使用内容分发网络 CDN

4、为文件设置Last-Modified、Expires和Etag

5、使用GZIP压缩传送

6、权衡DNS查找次数(使用不同域名会增加DNS查找)

7、避免不必要的重定向(加"/")

二、编码

html： 1、使用结构清晰，简单，语义化标签

2、避免空的src和href

3、不要在HTML中缩放图片

css： 1、精简css选择器

2、把CSS放到顶部

3、避免@import方式引入样式

4、css中使用base64图片数据取代图片文件，减少请求数，在线转base64网站：tool.css-js.com/base64.html

5、使用css动画来取代javascript动画

6、使用字体图标

7、使用css sprite(雪碧图)

8、使用svg图形

9、避免使用CSS表达式

body{ background-color: expression( (new Date()).getSeconds()%2 ? "#B8D4FF" : "#F08A00" );
}

10、避免使用css滤镜

javascript： 1、减少引用库的个数

2、使用requirejs或seajs异步加载js

3、JS放到页面底部引入

4、避免全局查找

5、使用原生方法

6、用switch语句代替复杂的if else语句

7、减少语句数，比如说多个变量声明可以写成一句

8、使用字面量表达式来初始化数组或者对象

9、使用innerHTML取代复杂的元素注入

10、使用事件代理(事件委托)

11、避免多次访问dom选择集

12、高频触发事件设置使用函数节流

13、使用Web Storage缓存数据 ##事件的传播分为两个阶段: 捕获阶段、冒泡阶段 ->捕获在前，冒泡在后

捕获阶段:从外向内执行

冒泡阶段:从内向外执行

检测数据类型

typeof测具体的是什么类型的数据不能细分object下的正则

数组检测某一个实例是否属于这个类->instanceof

in:检测某一个属性是否属于这个对象(attr in object)

hasOwnProperty:用来检测某一个属性是否为这个对象的"私有属性",

Object.prototype.toString.call([]);[object Array]

事件委托的原理:

利用了事件默认会进行冒泡传播的机制,我们给最外层的元素绑定一个方法,当里面元素的相关行为触发的时候,最外面的绑定的方法也会执行,我们可以通过事件对象中的事件源判断当前点击的是哪一个元素,从而进行不一样的处理

对于一个容器中我们多个元素都要绑定相关的行为,做不同的处理,我们测试后的结果发现：使用事件委托的方式处理，比一个个的单独绑定事件，在执行和处理的速度上提升了一倍

HTTP与HTTPS的区别

超文本传输协议HTTP协议被用于在Web浏览器和网站服务器之间传递信息，HTTP协议以明文方式发送内容，不提供任何方式的数据加密，如果攻击者截取了Web浏览器和网站服务器之间的传输报文，就可以直接读懂其中的信息，因此，HTTP协议不适合传输一些敏感信息，比如：信用卡号、密码等支付信息。

为了解决HTTP协议的这一缺陷，需要使用另一种协议：安全套接字层超文本传输协议HTTPS，为了数据传输的安全，HTTPS在HTTP的基础上加入了SSL协议，SSL依靠证书来验证服务器的身份，并为浏览器和服务器之间的通信加密。

路由全局钩子

router.beforeEach((to, from, next) => {
      /* 路由发生变化修改页面title */
      if (to.meta.title) {
          document.title = to.meta.title
      }
      console.log(to)
      console.log(from)
      next()
  })
路由 组建
beforeRouteLeave(to, from, next) {
  // ....
  next()
},
beforeRouteEnter(to, from, next) {
  // ....
  next()
},
beforeRouteUpdate(to, from, next) {
  // ....
  next()
}
## 弹性盒子模型 上下左右剧中
.flex-container {
          display: -webkit-flex;
          display: flex;
          justify-content:space-around; /*左右剧中*/
          align-items:center; /*上下剧中*/
          flex-wrap: wrap-reverse;/*换行*/
          width: auto;
          height: 250px;
      }

局部刷新

将需要刷新的数据写在activated中

LESS和Sass之间的主要区别是他们的实现方式不同

LESS是基于JavaScript运行,所以LESS是在客户端处理。

Sass是基于Ruby的，是在服务器端处理的。

简单描述下微信小程序的相关文件类型。

小程序：pages ——index：index.js(页面逻辑) /index.wxml (页面结构)/index.wxss (页面样式表) / index.json (页面配置)

App.js 小程序逻辑

App.json 小程序公共设置

App.wxss 小程序公共样式表

3、有哪些参数传值的方法？

一、给HTML元素添加data-*属性来传递我们需要的值，然后通过e.currentTarget.dataset或onload的options参数获取。但data-名称不能有大写字母和不可以存放对象

二、设置id 的方法标识来传值通过e.currentTarget.id获取设置的id的值,然后通过设置全局对象的方式来传递数值

三、在navigator（那f给特）中添加参数传值

4.全局变量

6、简述微信小程序原理？

JavaScript：首先JavaScript的代码是运行在微信App中的，并不是运行在浏览器中 WXML：WXML微信自己基于XML语法开发的

WXSS 不支持所有的css

微信的架构，是数据驱动的架构模式，它的UI和数据是分离的，所有的页面更新，都需要通过对数据的更改来实现。

小程序分为两个部分webview和appService。其中webview主要用来展现UI，appService有来处理业务逻辑、数据及接口调用。它们在两个进程中运行，通过系统层JSBridge（js不锐之）实现通信，实现UI的渲染、事件的处理

小程序的双向绑定和vue哪里不一样？

小程序直接this.data的属性是不可以同步到视图的，必须调用：

小程序的wxss和css有哪些不一样的地方？

1、wxss的图片引入需使用外链地址；二、没有Body；样式可直接使用import导入

webview中的页面怎么跳回小程序中？

wx.miniProgram.navigateTo（）

小程序关联微信公众号如何确定用户的唯一性？

使用wx.getUserInfo方法withCredentials为 true 时可获取encryptedData(因快死谈)，里面有 union_id（有你嗯）。后端需要进行对称解密

4、如何实现下拉刷新？

用view代替scroll-view,设置onPullDownRefresh函数实现

使用webview直接加载要注意哪些事项？

一、必须要在小程序后台使用管理员添加业务域名；二、h5页面跳转至小程序的脚本必须是1.3.1以上；三、微信分享只可以都是小程序的主名称了，如果要自定义分享的内容，需小程序版本在1.7.1以上；四、h5的支付不可以是微信公众号的appid，必须是小程序的appid，而且用户的openid也必须是用户和小程序的。

小程序调用后台接口遇到哪些问题？

1、数据的大小有限制，超过范围会直接导致整个小程序崩溃，除非重启小程序；

2、小程序不可以直接渲染文章内容页这类型的html文本内容，若需显示要借住插件，但插件渲染会导致页面加载变慢，所以最好在后台对文章内容的html进行过滤，后台直接处理批量替换p标签div标签为view标签，然后其它的标签让插件来做，减轻前端的时间

webview的页面怎么跳转到小程序导航的页面？

若需加载新数据，则在success属性中加入以下代码即可：
success: function (e) {
       var page = getCurrentPages().pop();
       if (page == undefined || page == null) return;
       page.onLoad();
}
webview的页面，则通过
 wx.miniProgram.switchTab({   miniProgram（米妮破干木）
    url: '/pages/index/index'
 })

简述下wx.navigateTo(), wx.redirectTo(), wx.switchTab(),

wx.navigateBack(), wx.reLaunch()的区别？

wx.navigateTo()保留当前页面，跳转到指定页面

wx.redirectTo()关闭当前页面，跳转到指定页面

wx.switchTab()切换到tabar页面，并且关闭所有tabbar页面

wx.navigateBack()返回之前到页面

wx.reLaunch()（锐浪齿）关闭所有缓存页面

跳转按钮获取fromid

<form report-submit="true" bindsubmit="goOpenGroup">

页面的

组件，属性report-submit为true时，可以声明为需发模板消息，此时点击按钮提交表单可以获取formId，用于发送模板消息。或者当用户完成支付行为，可以获取prepay_id用于发送模板消息

面试笔记