1、vue数据双向绑定原理

vue.js 是采用数据劫持结合发布者-订阅者的模式的方法，通过Object.defineProperty()来劫持各个属性的Getter、setter，在数据变动时发送消息给订阅者。它实现的整个流程是先为每个vue属性用Object.defineProperty()实现数据劫持，为每个属性分配一个订阅者集合的管理数组dep；然后在编译的时候在该属性的数组dep中添加订阅者，v-model就会添加一个订阅者，接着用input举例，为input添加监听事件，修改值就会为这个属性赋值，触发这个属性的set方法，在set方法内通知订阅者数组dep，订阅者数组循环调用各个订阅者的update方法更新视图。然后就实现了数据的双向绑定。

2、图片懒加载原理

先将img标签的src链接设为同一张图片（比如空白图片），然后给img标签设置自定义属性（比如 data-src）,然后将真正的图片地址存储在data-src中，当JS监听到该图片元素进入可视窗口时，将自定义属性中的地址存储到src属性中。达到懒加载的效果。
这样做能防止页面一次性向服务器发送大量请求，导致服务器响应慢，页面卡顿崩溃等。

2.1判断元素是否在可视区域内

  • [ 当元素距离顶部的高度大于等于DOM文档滚动的高度并且元素距离顶部的高度小于DOM滚动高度+可视高度，那么这个元素就进入了可视区域 ]

元素距离顶部高度（elOffsetTop） >= dom滚动高度（docScrollTop）
并且元素距离顶部高度（elOffsetTop） < （dom滚动高度 + 视窗高度）

3、虚拟 Dom 和 Diff算法原理

虚拟 DOM就是一个JavaScript的一个对象。对复杂的文档DOM结构，提供一种方便的工具，进行最小化的DOM操作。

其实就是用js来模拟DOM中的节点，就是传说中的虚拟DOM。

diff的过程就是调用名为patch的函数，比较新旧节点，一边比较一边给真实的DOM打补丁

4、vue2与vue3的区别

首先第一点就是vue2和vue3双向数据绑定原理发生了改变

vue2 的双向数据绑定是利用ES5 的一个 API Object.definePropert()对数据进行劫持 结合 发布订阅模式的方式来实现的。
vue3 中使用了 es6 的 ProxyAPI对数据代理。

第二就是vue2默认进行懒观察（lazy observation）。

在 2.x 版本里，不管数据多大，都会在一开始就为其创建观察者。当数据很大时，这可能会在页面载入时造成明显的性能压力。3.x 版本，只会对「被用于渲染初始可见部分的数据」创建观察者，而且 3.x的观察者更高效。

三就是重写了虚拟 DOM

随着虚拟 DOM 重写，减少 运行时（runtime）开销。重写将包括更有效的代码来创建虚拟节点

四是他们的项目目录结构

vue-cli2.0与3.0在目录结构方面，有明显的不同

vue-cli3.0移除了配置文件目录，config 和 build 文件夹 同时移除了 static静态文件夹，新增了 public文件夹，打开层级目录还会发现， index.html移动到 public 中

五就是vue3性能的提升

更小巧，更快速；支持摇树优化；支持 分段 （Fragments） 和跨组件渲染；支持自定义渲染器

5、vue 组件通信

我最常用的有三种，

第一种是父传子：主要通过 props 来实现的

父传子是通过import引入子组件，在components中注册 在父 组件标签上用v-bind绑定要传递的数据，子组件通过props接收 并明确传递属性的数据类型

第二种：子传父：主要通过$emit 来实现

子传父通过提交一个$emit方法，这个方法接收两个参数，第一个是要派发的事件，第二个参数是要传递的参数，然后在组件标签上自定义事件接收这个提交的方法，然后在methods中定义

第三种：兄弟传值

兄弟传值有两种方法：

首先创建一个空的vue实例BUS

第一种方法通过BUS.$emit(‘事件名’)传到空的vue实例中

第二种方法通过BUS.$on(‘事件名’,(参数)=>{挂载从子1传来的数据})来接收

第四种：vuex

6、 vuex

6.1 vuex的流程

Vuex怎么请求异步数据

1.首先在state中创建变量
2.然后在action中调用封装好的axios请求，异步接收数据，commit提交给mutations
Mutations中改变state中的状态，将从action中获取到的值赋值给state

页面通过mapAction异步提交事件到action。action通过commit把对应参数同步提交到mutation，mutation会修改state中对应的值。最后通过getter把对应值跑出去，在页面的计算属性中，通过mapGetter来动态获取state中的值

6.2 vuex有五种状态和属性

第一种是State

State就是存放数据的地方，类似一个仓库 , 特性就是当mutation修改了state的数据的时候，他会动态的去修改所有的调用这个变量的所有组件里面的值( 若是store中的数据发生改变，依赖这个数据的组件也会发生更新 )

第二种是Getters

getters用来获取数据，mapgetter经常在计算属性中被使用

第三种就是mutations

他是 唯一更改store 中状态的方法，且必须是同步函数。

第四种是action

他 用于提交 mutation，而不是直接变更状态，可以包含任意异步操作。

最后一种是moduled

他是store的子模块，为了开发大型项目，方便状态管理而使用的。

他可以将单一的 Store 拆分为多个 store 并同时保存在单一的状态树中。
vuex的优势

优点：解决了非父子组件的通信，减少了ajax请求次数，有些可以直接从state中获取

缺点：刷新浏览器，vuex中的state会重新变为初始状态，解决办法是vuex-along，得配合计算属性和sessionstorage来实现

7、vue中 key 的作用

需要使⽤key来给每个节点做⼀个唯⼀标识，Diff算法就可以正确的识别此节 点。 作⽤主要是为了⾼效的更新虚拟DOM。

8、vue 中的组件中的 data 为什么是 data函数

因为一个组件是可以共享的，但他们的data是私有的，所以每个组件都要return一个新的data对象，返回一个唯一的对象。
Data是一个函数时，每个组件实例都有自己的作用域，每个实例相互独立，不会相互影响

9、vue中nextTick作用

nextTick 是在下次DOM更新循环结束之后执行延迟回调，

在修改数据之后使用nextTick，就可以在回调中获取更新后的 DOM.

10、vue组件封装

我用vue开发的所有项目，都是采用组件化的思想开发的。一般我在搭建项目的时候，会创建一个views目录和一个commen目录和一个feature目录，views目录中放页面级的组件，commen中放公共组件（如：head（公共头组件），foot（公共底部组件）等），feature目录内放功能组件（如：swiper(轮播功能组件)，tabbar(切换功能组件)、list(上拉加载更多功能组件)）

首先，组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块，解决了我们传统项目开发：效率低、难维护、复用性低等问题。

使用Vue.extend方法创建一个组件，然后使用Vue.component方法注册组件。但是我们一般用脚手架开发项目，每个 .vue单文件就是一个组件。在另一组件import导入，并在components中注册，子组件需要数据，可以在props中接受定义。而子组件修改好数据后，想把数据传递给父组件。可以采用emit方法。

什么是vue生命周期？

Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。

vue生命周期钩子函数都有哪些？分别是什么意思？

总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。

创建前/后： 在beforeCreated阶段，vue实例的挂载元素el还没有。在created阶段,vue实例的数据对象data有了,el还没有.

载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。

更新前/后：当data变化时，会触发beforeUpdate和updated方法。

销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在

vue生命周期的作用是什么？

生命周期中有多个事件钩子，让我们在控制整个 vue 实例的过程时更容易形成好的逻辑

第一次页面加载会触发哪几个钩子？

页面第一次加载会触发 beforeCreate、created、beforeMount、mounted
DOM渲染在mounted周期中就已经完成

11、闭包

闭包是用来解决全局变量私有化的，也可以说成局部变量全局化。
闭包是一种保护私有变量的机制，在函数执行时形成私有的作用域，保护里面的私有变量不受外界干扰。

就是当一个函数的返回值是另外一个函数,而返回的那个函数如果调用了其父函数的内部变量,且返回的那个函数在外部被执行,就产生了闭包 。

他的特点就是

函数嵌套函数

内部函数可以直接访问外部函数的内部变量或参数

变量或参数不会被垃圾回收机制回收（ GC 项目使用的闭包越多占用的内存越大，要滞空）

闭包的优点是

变量常驻内存 避免全局变量的污染 他有私有成员存在

闭包的缺点就是

常驻内存 增加内存的使用量 使用不当会造成内存泄漏

他可以通过闭包制作计数器 封装私有属性方法 还可以作为一个回调函数 还可以用作函数节流防抖

12、介绍一下盒模型

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。 他分为两种类型 IE盒子模型和标准W3C盒子模型，两种盒模型的主要区别就是标准盒模型的宽高是值内容的宽高，而IE盒模型的宽高是值内容的宽高+填充+边框；在css中通过box-sizing设置盒模型； box-sizing:content-box就是用来设置标准盒模型； box-sizing:border-box 则用来设置IE盒模型

13、原型和原型链

js的所有对象中都包含了一个[proto]内部属性，这个属性所对应的就是自身的原型。JavaScript的函数对象，除了原型[proto]之外，还有prototype属性，当函数对象作为构造函数创建实例时，该prototype属性值将被作为实例对象的原型[proto]；原型链 就是当一个对象调用自身不存在的属性或方法时，就会去自己 [proto] 关联的前辈 prototype 对象上去找，如果没找到，就会去该 prototype 原型 [proto] 关联的前辈 prototype 去找。依次类推，直到找到属性方法或 undefined 为止。从而形成了所谓的“原型链”。

14、 promise

Promise对象是CommonJS工作组提出的一种规范，目的是为异步编程提供统一接口。每一个异步任务返回一个Promise对象，该对象有一个then方法，允许指定回调函数。

一个promise可能有三种状态：等待（pending）、已完成（resolved，又称fulfilled）、已拒绝（rejected）。

promise必须实现then方法（可以说，then就是promise的核心），而且then必须返回一个promise，同一个promise的then可以调用多次，并且回调的执行顺序跟它们被定义时的顺序一致。

then方法接受两个参数，第一个参数是成功时的回调，在promise由“等待”态转换到“完成”态时调用，另一个是失败时的回调，在promise由“等待”态转换到“拒绝”态时调用。同时，then可以接受另一个promise传入，也接受类then的对象或方法

(总的来说，Promise是一个让开发者更合理、更规范地用于处理异步操作的对象。它有三种状态：初始化（pending），操作成功（fulfilled），操作异常（rejected）。使用实例方法：then()和catch()用于绑定处理程序，还有all()和race()方法。)

15、async/await

async/await其实是Promise的语法糖，它能实现的效果都能用then链来实现，它是为优化then链而开发出来的。从字面上来看，async是“异步”的简写，await译为等待，所以我们很好理解async声明function是异步的，await等待某个操作完成。当然语法上强制规定await只能出现在asnyc函数中

array中some()与forEach()的区别

forEach()用来遍历数组，没有返回值。
而some()大多使用场景是找到符合条件的元素，迭代效率高，返回值是布尔。

为什么要使用CSS预处理器？

CSS有具体以下几个缺点：

  1. 语法不够强大，比如无法嵌套书写，导致模块化开发中需要书写很多重复的选择器；

  2. 没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护。

这就导致了我们在工作中无端增加了许多工作量。而使用CSS预处理器，提供 CSS 缺失的样式层复用机制、减少冗余代码，提高样式代码的可维护性。大大提高了我们的开发效率。
但是，CSS预处理器也不是万金油，CSS的好处在于简便、随时随地被使用和调试。预编译CSS步骤的加入，让我们开发工作流中多了一个环节，调试也变得更麻烦了。更大的问题在于，预编译很容易造成后代选择器的滥用。
所以我们在实际项目中衡量预编译方案时，还是得想想，比起带来的额外维护开销，CSS预处理器有没有解决更大的麻烦。

Sass和Less的比较

相同之处：

  1. 混入(Mixins)——class中的class；

  2. 参数混入——可以传递参数的class，就像函数一样；

  3. 嵌套规则——Class中嵌套class，从而减少重复的代码；

  4. 运算——CSS中用上数学；

  5. 颜色功能——可以编辑颜色；

  6. 名字空间(namespace)——分组样式，从而可以被调用；

  7. 作用域——局部修改样式；

  8. JavaScript 赋值——在CSS中使用JavaScript表达式赋值。

不同之处：

  1. Less环境较Sass简单

sass的安装需要安装Ruby环境，Less基于JavaScript，是需要引入Less.js来处理代码输出css到浏览器，也可以在开发环节使用Less，然后编译成css文件，直接放在项目中，有less.app、SimpleLess、CodeKit.app这样的工具，也有在线编辑地址。

  1. Less使用较Sass简单

LESS并没有裁剪CSS原有的特性，而是在现有CSS语法的基础上，为CSS加入程序式语言的特性。只要你了解CSS基础就可以很容易上手。

  1. 从功能出发，Sass较Less略强大一些

①sass有变量和作用域。

     -$variable，likephp；-#｛$variable｝likeruby；

-变量有全局和局部之分，并且有优先级。

②sass有函数的概念；
-@function和@return以及函数参数（还有不定参）可以让你像js开发那样封装你想要的逻辑。
-@mixin类似function但缺少像function的编程逻辑，更多的是提高css代码段的复用性和模块化，这个用的人也是最多的。
-ruby提供了非常丰富的内置原生api。

③进程控制：
-条件：@if@else；
-循环遍历：@for@each@while
-继承：@extend
-引用：@import

④数据结构：
- l i s t 类 型 = 数 组 ; − list类型=数组; - list类型=数组;−map类型=object；
其余的也有string、number、function等类型

  1. Less与Sass处理机制不一样

前者是通过客户端处理的，后者是通过服务端处理，相比较之下前者解析会比后者慢一点

  1. 关于变量在Less和Sass中的唯一区别就是Less用@，Sass用$。

css中单位px和em,rem的区别

1、概念

px：绝对单位，页面按精确像素展示。

em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。

rem：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持。

Px，绝对长度单位，像素px是相对于显示器屏幕分辨率来说的

em 相对长度单位，相对于当前对象内文本的字体尺寸

     em的值并不是固定的em会继承父级元素的字体大小（参考物是父元素的font-size）em中所有的字体都是相对于父元素的大小决定的

rem 相对于html根元素的font-size

1em=1rem=16px 在body中加入font-size：62.5% 这样直接就是原来的px数值除以10加上em就可以

2、特点

px特点：

  1. IE无法调整那些使用px作为单位的字体大小；

  2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；

  3. Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。

em特点 ：

  1. em的值并不是固定的；

  2. em会继承父级元素的字体大小。

rem特点：

rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。

app是如何打包的?

  • 将写好的vue项目通过npm run build 命令进行打包,但是打包之前我们需要将路由配置hash, 将vu e.config.js里面的publicPath配置为./
  • 打开hbuilderx,创建5+app项目
  • 保留manifest.json文件和unpackaged.json文件
  • 将vue打包后的dist目录的内容放到5+app目录里面
  • 在manifest.json文件里面可以配置打包的一些配置
  • 点击发行->选择云打包->最后生成打包后的链接或者.apk这样的一个文件

vue项目优化

1. 使用keep-alive缓存不活动的组件

keep-alive是一个抽象组件：它自身不会渲染一个DOM元素，也不会出现在父组件链中；使用keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

2. 使用路由懒加载

Vue 是单页面应用，可能会有很多的路由引入 ，这样使用 webpcak 打包后的文件很大，当进入首页时，加载的资源过多，页面会出现白屏的情况，不利于用户体验。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应的组件，这样就更加高效了。这样会大大提高首屏显示的速度，但是可能其他的页面的速度就会降下来。

3. 图片懒加载

对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载， 等到滚动到可视区域后再去加载。这样对于页面加载性能上会有很大的提升，也提高了用户体验。

4. 使用节流防抖函数(性能优化)

函数防抖(debounce)

在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

函数节流(throttle)

规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。

总结：

函数防抖和函数节流都是防止某一时间频繁触发，但是这两兄弟之间的原理却不一样。
函数防抖是某一段时间内只执行一次，而函数节流是间隔时间执行。

16、 Flex布局

Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

  • 任何一个容器都可以指定为 Flex 布局。
  • 行内元素也可以使用 Flex 布局。
  • Webkit 内核的浏览器，必须加上-webkit前缀。

注意：设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

布局的传统解决方案，基于盒状模型，依赖display属性+ position属性 +float属性。

简单的分为容器属性和元素属性

容器的属性：

flex-direction属性决定主轴的方向（即项目的排列方向）。

flex-wrap：决定换行规则

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

align-items属性定义项目在交叉轴上如何对齐。

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

项目的属性（元素的属性）：

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

BFC（块级格式化上下文，用于清楚浮动，防止margin重叠等）

块级格式化上## 标题下文，是一个独立的渲染区域，并且有一定的布局规则。
BFC区域不会与float box重叠
BFC是页面上的一个独立容器，子元素不会影响到外面

什么是CSS Hack?

一般来说是针对不同的浏览器写不同的CSS,就是 CSS Hack。
CSS Hack常见的有三种形式：
属性Hack、选择符Hack、条件注释Hack， Hack主要针对IE浏览器

delete和Vue.delete删除数组的区别

delete只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。
Vue.delete直接删除了数组 改变了数组的键值。

src与href的区别

href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。

src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

常用的页面布局（两栏布局、三栏（圣杯、双飞翼）布局）

  1. 两栏布局,左边定宽，右边自适应
  2. 三列布局又分为两种，两列定宽一列自适应，以及两侧定宽中间自适应
  3. 圣杯布局是指布局从上到下分为header、container、footer，然后container部分定为三栏布局。这种布局方式同样分为header、container、footer。圣杯布局的缺陷在于 center 是在 container 的padding中的，因此宽度小的时候会出现混乱。
  4. 双飞翼布局给center 部分包裹了一个 main 通过设置margin主动地把页面撑开。

如何让一个元素在父元素中上下左右居中？

方法一：父相自绝后，子分部向左向上移动本身宽度和高度的一半（也可以用 transform:translate(-50%,-50%)）最常用方法

方法二：父元素设置成弹性盒，子元素横向居中，纵向居中

方法三：父向子绝，子元素所有定位为0，margin设置auto自适应。

html5、ES6 和css3 的新特性

h5新特性
绘画 canvas 元素
新增语义化标签 表单元素新增多个类型
新增游戏引擎
一些小游戏开发比如大转盘 数钱游戏 妈妈再打我一次

ES6新特性

  1. const 与 let 变量

let与const声明的变量解决了这种问题，因为他们是块级作用域， 在代码块(用{}表示)中使用let或const声明变量， 该变量会陷入暂时性死区直到该变量的声明被处理。

关于使用let与const规则:
使用let声明的变量：可以重新赋值,但是不能在同一作用域内重新声明
使用const声明的变量：必须赋值初始化,但是不能在同一作用域类重新声明也无法重新赋值.

  1. 模板字符串

可以使用反引号（``），键盘数字1左面的那个键。来定义一个字符串模板，在其中可以使用${}来存放一个变量或者表达式。

  1. 字符串新增的一些方法

{let str = 'imshusheng.com';// 查看字符串中是否包含某些字符console.log(str.includes('.'));console.log(str.includes('shu'));//查看字符串是否以某个字符串开头console.log(str.startsWith('i'));console.log(str.startsWith('im'));//查看字符串是否以某个字符串结尾console.log(str.endsWith('com'));console.log(str.endsWith('m'));//字符串重复3遍console.log(str.repeat(3))//如果字符串的长度不满20位，则在其后面补字符sconsole.log(str.padEnd(20, 's'));//如果字符串的长度不满20位，则在其前面补字符sconsole.log(str.padStart(20, 's'));
}
  1. setter和getter

getter 是一种获得属性值的方法，setter是一种设置属性值的方法。
一定注意，他们针对的是类的属性，并不是方法。

  1. 箭头函数
    箭头函数是ES6中新增的一个十分重要的内容，它的组成结构是这样的：

函数名 = 参数 => 返回值的表达式

  1. …

css3新特性

新增三种选择器
属性选择器 input[type=“text”]
伪类选择器 hover
伪元素选择器:before
新增透明色 rgba
文字阴影 边框阴影 边框圆角 媒体查询等 还有3d模式

新增了语义化标签和炫酷的样式

利用css3可以实现炫酷的3D效果

比较重要的是：

可以使用重力感应

以获取地理位置 、

高级绘图标签Canvas

可以很好的用于App开发

盒模型

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。 他分为两种类型 IE盒子模型和标准W3C盒子模型，两种盒模型的主要区别就是标准盒模型的宽高是值内容的宽高，而IE盒模型的宽高是值内容的宽高+填充+边框；在css中通过box-sizing设置盒模型； box-sizing:content-box就是用来设置标准盒模型； box-sizing:border-box 则用来设置IE盒模型

前端如何优化网站性能？

减少 HTTP 请求数量

在浏览器与服务器进行通信时，主要是通过 HTTP 进行通信。浏览器与服务器需要经过三次握手，每次握手需要花费大量时间。而且不同浏览器对资源文件并发请求数量有限（不同浏览器允许并发数），一旦 HTTP 请求数量达到一定数量，资源请求就存在等待状态，这是很致命的，因此减少 HTTP 的请求数量可以很大程度上对网站性能进行优化。

CSS Sprites：国内俗称 CSS 精灵，这是将多张图片合并成一张图片达到减少 HTTP 请求的一种解决方案，可以通过 CSS background 属性来访问图片内容。这种方案同时还可以减少图片总字节数。
合并 CSS 和 JS 文件：现在前端有很多工程化打包工具，如：grunt、gulp、webpack等。为了减少 HTTP 请求数量，可以通过这些工具再发布前将多个 CSS 或者 多个 JS 合并成一个文件。
采用 lazyLoad：俗称懒加载，可以控制网页上的内容在一开始无需加载，不需要发请求，等到用户操作真正需要的时候立即加载出内容。这样就控制了网页资源一次性请求数量。
控制资源文件加载优先级

浏览器在加载 HTML 内容时，是将 HTML 内容从上至下依次解析，解析到 link 或者 script 标签就会加载 href 或者 src 对应链接内容，为了第一时间展示页面给用户，就需要将 CSS 提前加载，不要受 JS 加载影响。

一般情况下都是 CSS 在头部，JS 在底部。

利用浏览器缓存

浏览器缓存是将网络资源存储在本地，等待下次请求该资源时，如果资源已经存在就不需要到服务器重新请求该资源，直接在本地读取该资源。

减少重排（Reflow）

基本原理：重排是 DOM 的变化影响到了元素的几何属性（宽和高），浏览器会重新计算元素的几何属性，会使渲染树中受到影响的部分失效，浏览器会验证 DOM 树上的所有其它结点的 visibility 属性，这也是 Reflow 低效的原因。如果 Reflow 的过于频繁，CPU 使用率就会急剧上升。

减少 Reflow，如果需要在 DOM 操作时添加样式，尽量使用 增加 class 属性，而不是通过 style 操作样式。

减少 DOM 操作

图标使用 IconFont 替换

v-if 和 v-show 有什么区别？

v-show 仅仅控制元素的显示方式，将 display 属性在 block 和 none 来回切换；而v-if会控制这个 DOM 节点的存在与否。当我们需要经常切换某个元素的显示/隐藏时，使用v-show会更加节省性能上的开销；当只需要一次显示或隐藏时，使用v-if更加合理。

cookies，sessionStorage 和 localStorage 的区别？

cookie在浏览器和服务器间来回传递。 sessionStorage和localStorage不会
sessionStorage和localStorage的存储空间更大;
sessionStorage和localStorage有更多丰富易用的接口;
sessionStorage和localStorage各自独立的存储空间;
localStorage 长期存储数据，浏览器关闭后数据不丢失;
sessionStorage 数据在浏览器关闭后自动删除。

什么是跨域？跨域请求资源的方法有哪些？

1、什么是跨域？

由于浏览器同源策略，凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。存在跨域的情况：

网络协议不同，如http协议访问https协议。

端口不同，如80端口访问8080端口。

域名不同，如qianduanblog.com访问baidu.com。

子域名不同，如abc.qianduanblog.com访问def.qianduanblog.com。

域名和域名对应ip,如www.a.com访问20.205.28.90.

2、跨域请求资源的方法：
(1)、porxy代理

定义和用法：proxy代理用于将请求发送给后台服务器，通过服务器来发送请求，然后将请求的结果传递给前端。

实现方法：通过nginx代理；

注意点：1、如果你代理的是https协议的请求，那么你的proxy首先需要信任该证书（尤其是自定义证书）或者忽略证书检查，否则你的请求无法成功。

(2)、CORS 【Cross-Origin Resource Sharing】

定义和用法：是现代浏览器支持跨域资源请求的一种最常用的方式。

使用方法：一般需要后端人员在处理请求数据的时候，添加允许跨域的相关操作。

(3)、jsonp

定义和用法：通过动态插入一个script标签。浏览器对script的资源引用没有同源限制，同时资源加载到页面后会立即执行（没有阻塞的情况下）。

特点：通过情况下，通过动态创建script来读取他域的动态资源，获取的数据一般为json格式。

缺点：

1、这种方式无法发送post请求（这里）

2、另外要确定jsonp的请求是否失败并不容易，大多数框架的实现都是结合超时时间来判定。

行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

行内元素：a、b、span、img、input、strong、select、label、em、button、textarea
块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote
空元素：即系没有内容的HTML元素，例如：br、meta、hr、link、input、img

简述同步和异步的区别

同步是阻塞模式，异步是非阻塞模式。
同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去；
异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率

请说出三种减低页面加载时间的方法

压缩css、js文件
合并js、css文件，减少http请求
外部js、css文件放在最底下
减少dom操作，尽可能用变量替代不必要的dom操作

元素的position属性

（1）定义：规定元素的定位类型。

（2）正常文档流：指的是没有用CSS样式去控制的HTML文档结构，代码的顺序就是网页展示的顺序。

（3）脱离文档流：指的是元素所显示的位置和文档代码不一致。

（4）static：默认值。没有定位，元素出现在正常的文档流中。

relative：生成相对定位的元素，相对于其在正常文档流中的位置进行定位（不脱离文档流）。

absolute：生成绝对定位的元素，相对于static定位以外的最近父级元素进行定位，即相对于其直接父级元素（脱离文档流）。absolute较少直接单独使用在正常的文档流中，主要运行于进行了相对定位的元素框架层里面，相对该层的左上点进行偏移。

fixed：生成固定定位元素，相对于浏览器窗口进行定位。

inherit：从父元素继承position属性的值。

（5）z-index属性：使用了relative、absolute、fixed三种定位后，都会使正常的文档流发生一定程度的改变，造成元素出现重叠的情形。为了能让重叠的元素有序的显示出来，需要在定位的相关元素加上z-index属性。其值是一个整数值，默认为0，数值越大表示拥有的优先级越高，该属性只对使用了定位的元素有效。

定位的属性值有何区别

Position有四个属性值：relative absolute fixed static

Relative相对定位 不脱离文档流，相对于自身定位

Absolute 绝对定位，脱离文档流 相对于父级定位

Fixed 固定定位，脱离文档流，相对于浏览器窗口定位

Static 默认值，元素出现在正常的流中

（1）定义：规定元素应该生成的框的类型

（2）常用属性值：

inline：默认值。元素会被显示为内联元素。

none：元素不会被显示。

block：元素将显示为块级元素。

inline-block：行内块元素，即元素像行内元素一样显示，内容像块元素一样显示。

list-item：元素像块元素一样显示，并添加样式列表标记。

table：元素会作为块级表格来显示。

table-caption：元素会作为一个表格标题显示。

inherit：从父元素继承display属性。

（3）display属性值inline和block的区别：

block元素会独占一行，默认情况下，block元素宽度自动填满父级元素的宽度；

block元素可以设置width、height属性，即使设置了宽度，仍然是独占一行；

block元素可以设置margin和padding属性；

inline元素不会独占一行，多个相邻的行内元素会排列在同一行里面，其宽度随元素的内容而变化；

inline元素设置width、height无效；

inline元素的margin和padding属性在水平方向上能产生边距效果，垂直方向不会产生边距效果。

（4）display:inline-block元素显示间隙

A、inline-block水平呈现的元素之间，HTML元素标签换行显示或标签之间有空格的情况下会有间距

B、消除办法：移除标签之间的空格；

使用margin-left或margin-right取负值；对父元素设置font-size为0，然后对元素的font-size初始化；对父元素设置letter-spacing（字符间距）为负值，然后设置元素的letter-spacing为0；对父元素设置word-spacing（单词间距）为负值，然后设置元素的word-spacing为0。

清除浮动的方法

（1）父级div定义height

（2）结尾处加空div标签，样式clear:both

（3）父级div定义伪类:after和zoom

（4）父级div定义overflow:hidden（同时还要定义width或zoom:1，不能定义height）

（5）父级div定义overflow:auto（同时还要定义width或zoom:1，不能定义height）

（6）父级也浮动，需要定义width（不推荐）

（7）父级div定义display：table（不推荐）

（8）结尾处加br标签，样式clear:both（父元素div定义zoom:1，不推荐）

Gitee基本命令

查看所有分支： git branch -a
查看当前分支Git状态: git status
切换git分支： git checkout 要切换的分支名称
从远程分支获取代码，并创建本地分支： git checkout -b 要创建的本地分支名称 orign/远程分支名称

实战使用环节

提交代码的步骤：
第一步、 git status //查看是否存在未提交的代码和状态
第二步、 git add . //添加所有文件到待提交的缓存区
第三步、 git commit -m “提交代码的功能文案说明” //提交代码并添加提交的注释
第四步、 git branch -a //查看是否是当前开发分支。
第五步、 git pull //从远程分支获取最新代码， 保证和其他人的代码同步
第六步、 git push //将本地代码推送的远程分支。

注意： 以后每天在下班前要提交提交代码到Gitlab， 保证大家的项目进度。

Javascript中的定时器有哪些？他们的区别及用法是什么？

setTimeout 只执行一次
setInterval 会一直重复执行

js有几种数据类型，其中基本数据类型有哪些

五种基本类型: Undefined、Null、Boolean、Number和String。

1中复杂的数据类型————Object，Object本质上是由一组无序的名值对组成的。

Object、Array和Function则属于引用类型

常见的HTTP状态码

2开头 （请求成功）表示成功处理了请求的状态代码。

200 （成功） 服务器已成功处理了请求。 通常，这表示服务器提供了请求的网页。
201 （已创建） 请求成功并且服务器创建了新的资源。
202 （已接受） 服务器已接受请求，但尚未处理。
203 （非授权信息） 服务器已成功处理了请求，但返回的信息可能来自另一来源。
204 （无内容） 服务器成功处理了请求，但没有返回任何内容。
205 （重置内容） 服务器成功处理了请求，但没有返回任何内容。
206 （部分内容） 服务器成功处理了部分 GET 请求。

3开头 （请求被重定向）表示要完成请求，需要进一步操作。 通常，这些状态代码用来重定向。

300 （多种选择） 针对请求，服务器可执行多种操作。 服务器可根据请求者 (user agent) 选择一项操作，或提供操作列表供请求者选择。
301 （永久移动） 请求的网页已永久移动到新位置。 服务器返回此响应（对 GET 或 HEAD 请求的响应）时，会自动将请求者转到新位置。
302 （临时移动） 服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。
303 （查看其他位置） 请求者应当对不同的位置使用单独的 GET 请求来检索响应时，服务器返回此代码。
304 （未修改） 自从上次请求后，请求的网页未修改过。 服务器返回此响应时，不会返回网页内容。
305 （使用代理） 请求者只能使用代理访问请求的网页。 如果服务器返回此响应，还表示请求者应使用代理。
307 （临时重定向） 服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。

4开头 （请求错误）这些状态代码表示请求可能出错，妨碍了服务器的处理。

400 （错误请求） 服务器不理解请求的语法。
401 （未授权） 请求要求身份验证。 对于需要登录的网页，服务器可能返回此响应。
403 （禁止） 服务器拒绝请求。
404 （未找到） 服务器找不到请求的网页。
405 （方法禁用） 禁用请求中指定的方法。
406 （不接受） 无法使用请求的内容特性响应请求的网页。
407 （需要代理授权） 此状态代码与 401（未授权）类似，但指定请求者应当授权使用代理。
408 （请求超时） 服务器等候请求时发生超时。
409 （冲突） 服务器在完成请求时发生冲突。 服务器必须在响应中包含有关冲突的信息。
410 （已删除） 如果请求的资源已永久删除，服务器就会返回此响应。
411 （需要有效长度） 服务器不接受不含有效内容长度标头字段的请求。
412 （未满足前提条件） 服务器未满足请求者在请求中设置的其中一个前提条件。
413 （请求实体过大） 服务器无法处理请求，因为请求实体过大，超出服务器的处理能力。
414 （请求的 URI 过长） 请求的 URI（通常为网址）过长，服务器无法处理。
415 （不支持的媒体类型） 请求的格式不受请求页面的支持。
416 （请求范围不符合要求） 如果页面无法提供请求的范围，则服务器会返回此状态代码。
417 （未满足期望值） 服务器未满足"期望"请求标头字段的要求。

5开头（服务器错误）这些状态代码表示服务器在尝试处理请求时发生内部错误。 这些错误可能是服务器本身的错误，而不是请求出错。

500 （服务器内部错误） 服务器遇到错误，无法完成请求。
501 （尚未实施） 服务器不具备完成请求的功能。 例如，服务器无法识别请求方法时可能会返回此代码。
502 （错误网关） 服务器作为网关或代理，从上游服务器收到无效响应。
503 （服务不可用） 服务器目前无法使用（由于超载或停机维护）。 通常，这只是暂时状态。
504 （网关超时） 服务器作为网关或代理，但是没有及时从上游服务器收到请求。
505 （HTTP 版本不受支持） 服务器不支持请求中所用的 HTTP 协议版本。

vue常用指令

1、v-model

多用于表单元素实现双向数据绑定

2、v-for

循环数组或json

3、v-show

显示/隐藏dom元素，通过display=block/none来控制元素显示/隐藏

4、v-if

判断显示/隐藏 dom元素

5、v-else-if

必须和v-if连用

6、v-else

必须和v-if连用 不能单独使用 否则报错 模板编译错误

7、v-bind

绑定属性

v-bind:class 三种绑定方法
1、对象型 ‘{red:isred}’
2、三元型 ‘isred?“red”:“blue”’
3、数组型 ‘[{red:“isred”},{blue:“isblue”}]’

8、v-on:click

给标签绑定函数，可以缩写为@，例如绑定一个点击函数 函数必须写在methods里面

9、v-text

解析文本

10、v-html

解析html标签

11、v-once

进入页面时 只渲染一次 不在进行渲染

12、v-cloak

能够解决插值表达式闪烁问题，需要在style中设置样式[v-clock]{display:none}

vue-router 两种模式

默认是hash模式，路由上方的路径是用#表示，http://localhost:8080/#/news

可以将hash模式改为history模式，路由上方的路径就没有了

路由传参两种形式

  1. 定义动态路由：

    • 在 router 目录下的 index.js 文件中，对 path 属性加上 /:id。

  2. 获取动态路由传过来的值:

    • 使用 router 对象的 params.id 获取
//全局获取动态路由传递过来的值
$route.params.id
//局部或者是在方法内获取
this.$route.params.id

vue 路由hash原理

URL的hash 是以#开头，是基于location.hash来实现的。Location.hash的值就是URL中#后面的内容。当hash改变时，页面不会因此刷新，浏览器也不会请求服务器。

vue 路由history原理

主要是HTML5的History API 为浏览器的全局history对象增加的扩展方法。

axios拦截

一般我会在项目的src目录中，新建一个network文件夹,作为我们的网络请求模块，然后在里面新建一个http.js和一个api.js文件和一个reques.js。http.js文件用来封装我们的axios，api.js用来统一管理我们的接口url, request.js对外暴露我们放在的api方法。

api封装

新建了一个api文件夹，里面有一个index.js，以及多个根据模块划分的接口js文件。index.js是一个api的出口，其他js则用来管理各个模块的接口

diff算法

diff的过程就是调用名为patch的函数，比较新旧节点，一边比较一边给真实的DOM打补丁

vue打包流程

  • 将写好的vue项目 通过命令npm run build执行打包，最终在根目录下会生成dist文件夹，该文件就是我们打包后的文件。 但是打包之前我们需要将路由配置hash, 将vue.config.js里面的publicPath配置为./
  • 然后将打包文件放到服务器上 ，放出连接地址就ok了。

微信小程序 生命周期

App.js

  1. onLaunch ： 监听小程序初始化
  2. onShow ： 小程序启动切换到前台运行
  3. onHide ： 小程序切换到后台运行
  4. onError ： 错误监听函数

页面的生命周期

  1. onLoad: 页面加载
  2. onShow: 页面显示
  3. onReady: 页面初次渲染完成
  4. onHide: 页面隐藏
  5. onUnload: 页面卸载

微信小程序有哪些小程序内置组件

  1. swiper：轮播组件
  2. scroll-view:局部滚动组件，也可以做上拉加载，下拉刷新
  3. navigator ：跳转路由
  4. button
  5. input
  6. video或audio

小程序跳转页面几种方式

  1. navigateTo （有返回键，不可以跳转到tabBar页面 //保留当前页面，跳转到应用内的某个页面）

  2. switchTab （没有返回键，只能跳转到tabBar页面，不可以携带参数）

  3. reLaunch(跳转任意页面， 没有返回， 有 首页 按钮)

  4. redirectTo ( 只可以跳转tabBar 页面， 没有返回，但有首页按钮)

  5. navigateBack (应用在目标页面， delta值为1 ，表示跳转上一页，2表示跳两级)

区别：
wx.navigator是开启一个新页面，那个页面是隐藏了,原页面是onHide,所以是可以返回的，但是返回之后，跳转的页面就unload了
wx.redirecTo是当前页面替换成新的页面，所以返回不去onunload(页面被卸载)
tabBar无论跳哪个页面都是onHide

tabbar如何配置

tabBar:属于全局属性，因此就在全局配置文件app.json中配置

使用tabBar对象中的list对象数组属性来控制，list数组中的每个元素

text：可以用来描述选项卡文案

iconPath：未选中时默认的icon图片路径

selectedIconPat： 选中后更换的icon图片路径

color：默认的tab字体颜色

selectedColor：选中后的字体颜色

pagePath：页面路径

tabBar背景颜色：backgroundColor

uniapp生命周期

页面的生命周期

  1. onLoad: 页面加载
  2. onShow: 页面显示
  3. onReady: 页面初次渲染完成
  4. onHide: 页面隐藏
  5. onUnload: 页面卸载

应用生命周期

  1. onLaunch ： 当uni-app初始化完成时触发（全局只触发一次）
  2. onShow ： 当uni-app启动，或从后台进入前台显示
  3. onHide ： 当uni-app从前台进入后台

uniapp路由跳转几种形式

1. uni.navigateTo(object)：

保留当前页面，跳转到新页面，使用uni.navigateBack()可以返回到原页面。

2. uni.redirectTo：

在当前页面打开，关闭当前页面，跳转到应用内的某个页面。不可以使用uni.navigateBack()可以返回到原页面。

3. uni.reLaunch(object):

关闭所有页面，打开到应用内的某个页面。不可以使用uni.navigateBack()可以返回到原页面。

4. uni.switchTab：

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。

uniapp如何发布成小程序， 如何发布成android，ios应用程序。

5. uni.navigateBack(object)

返回上一个页面

小程序授权登录流程。

（授权，微信登录获取code，微信登录，获取 iv , encryptedData 传到服务器后台，如果没有注册，需要注册。）

  1. 调用wx.login()
  2. 从微信端获取用户信息
  3. 检测登录状态
  4. 检查是否授权过

用户通过 button组件来设置的button样式getuserinfo和规定好的点击事件，点击 button弹出授权窗，
如果同意授权则可以从 bindgetuserinfo回调中获取到用户信息最后来设置界面，只能通过点击 button设置的opensetting的样式来跳转到设置界面

小程序支付如何实现？

我们做要简单，其实我更认为是小程序只有1M，更多的东西给后台吧

1.小程序注册，要以公司的以身份去注册一个小程序，才有微信支付权限；

2.绑定商户号。

3.在小程序填写合法域

4.调用wx.login()获取appid

5.调用

wx.requestPayment(
{'timeStamp': '',//时间戳从1970年1月1日00:00:00至今的秒数,即当前的时间
'nonceStr': '',//随机字符串，长度为32个字符以下。
'package': '',//统一下单接口返回的 prepay_id 参数值，提交格式如：prepay_id=*
'signType': 'MD5',//签名类型，默认为MD5，支持HMAC-SHA256和MD5。注意此处需与统一下单的签名类型一致
'paySign': '',//签名,具体签名方案参见微信公众号支付帮助文档;
'success':function(res){},//成功回调
'fail':function(res){},//失败
'complete':function(res){}//接口调用结束的回调函数（调用成功、失败都会执行）
})

简单说一下微信支付环节？

  1. 临时凭证 获取 wxid
  2. 生成repayid
  3. json，返回给小程序，小程序调支付窗口。
  4. 支持成功提示 + POST回调。

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

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

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

答案：

一、wxss的图片引入需使用外链地址；

二、没有Body,样式可直接使用import导入；

怎么解决小程序的异步请求问题？

答案：

在回调函数中调用下一个组件的函数

app.js

  success: function (info) {that.apirtnCallback(info)}

index.js

onLoad: function() {app.apirtnCallback = res => {console.log(res)}
}

小程序与webview之间是怎么跳转的？

小程序跳转到webview

需要用到web-view标签然后通过web-view标签里的src属性跳转到webview页面
小程序跳转webview必须要在小程序后台使用管理用户添加业务域名

webview跳转到小程序

首先需要引入微信小程序库，然后使用wx. miniprogram.navigateTo()来跳转到小程序的页

首先要引入最新版的jweixin-1.3.2.js，然后

wx.miniProgram.navigateTo({url: '/pages/login/login' + '$params'
})

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

答案：

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

什么是分包加载？如何使用分包加载？

什么是分包加载：

在小程序开发的过程中，小程序的体积会随着版本变的越来越大，我们可以将小程序分成多个包从服务器下载，优化首次启动加载时间以及后续按需加载的实现

如何使用分包加载：

1、在app.json中配置项目分包结构（结构如上图）
2、配置subpackages后，将按subpackages配置的路径进行打包，没有配置的都会分到主包。所以一定要配置好路径，避免主包超过限制报错
3、tabBar必须放在主包
4、分包之间不能引用，只能require app.js和自身的js
5、配置完分包之后检查主包配置的路径有没有包含分包的，有的话要去掉

在你开发小程序的过程中遇到过什么坑？ 你是怎么解决的？

  1. wx.navigateTo无法打开页面
    一个应用同时只能打开5个页面，请避免多层级的交互方式，或使用wx.redirectTo
  2. tabBar设置不显示
    tabBar的数量少于2项或超过5项都不会显示；
    tabBar写法错误导致不显示；
    tabBar没有写pagePath字段（程序启动后显示的第一个页面）
  3. 本地资源无法通过wxss获取
    background-image：可以使用网络图片，或者base64，或者使用标签

数组方法有哪些请简述

push() 从后面添加元素，返回值为添加完后的数组的长度

arr.pop() 从后面删除元素，只能是一个，返回值是删除的元素

arr.shift() 从前面删除元素，只能删除一个 返回值是删除的元素

arr.unshift() 从前面添加元素, 返回值是添加完后的数组的长度

arr.splice(i,n) 删除从i(索引值)开始之后的那个元素。返回值是删除的元素

arr.concat() 连接两个数组 返回值为连接后的新数组

str.split() 将字符串转化为数组

arr.sort() 将数组进行排序,返回值是排好的数组，默认是按照最左边的数字进行排序，不是按照数字大小排序的

arr.reverse() 将数组反转,返回值是反转后的数组

arr.slice(start,end) 切去索引值start到索引值end的数组，不包含end索引的值，返回值是切出来的数组

arr.forEach(callback) 遍历数组,无return 即使有return，也不会返回任何值，并且会影响原来的数组

arr.map(callback) 映射数组(遍历数组),有return 返回一个新数组 。

arr.filter(callback) 过滤数组，返回一个满足要求的数组
Promise的理解

一、什么是Promise？我们用Promise来解决什么问题？

我们都知道，Promise是承诺的意思，承诺它过一段时间会给你一个结果。
Promise 是一种解决异步编程的方案，相比回调函数和事件更合理和更强大。
从语法上讲，promise是一个对象，从它可以获取异步操作的消息；

二、promise有三种状态：

pending 初始状态也叫等待状态，fulfiled成功状态，rejected失败状态；状态一旦改变，就不会再变。创造promise实例后，它会立即执行。

三、Promise的两个特点

1、Promise对象的状态不受外界影响
2、Promise的状态一旦改变，就不会再变，任何时候都可以得到这个结果，状态不可以逆，

四、Promise的三个缺点

1）无法取消Promise,一旦新建它就会立即执行，无法中途取消
2）如果不设置回调函数，Promise内部抛出的错误，不会反映到外部
3）当处于pending（等待）状态时，无法得知目前进展到哪一个阶段，是刚刚开始还是即将完成

promise是用来解决两个问题的：

1.回调地狱，代码难以维护， 常常第一个的函数的输出是第二个函数的输入这种现象
2.promise可以支持多并发的请求，获取并发请求中的数据
这个promise可以解决异步的问题，本身不能说promise是异步的

请简述async的用法

Async就是generation和promise的语法糖，async就是将generator的*换成async，将yiled换成await

函数前必须加一个async，异步操作方法前加一个await关键字，意思就是等一下，执行完了再继续走，注意：await只能在async函数中运行，否则会报错

Promise如果返回的是一个错误的结果，如果没有做异常处理，就会报错，所以用try…catch捕获一下异常就可以了

箭头函数与普通函数的区别

箭头函数是匿名函数，不能作为构造函数，不能使用new
箭头函数不能绑定arguments，要用rest参数解决
箭头函数没有原型属性
箭头函数的this永远指向其上下文的this，
箭头函数不能绑定this，会捕获其所在的上下文的this值，作为自己的this值

call、apply、bind改变this的指向的区别

点击了解详情

call和apply的区别？

共同点：都可以用来代替另一个对象调用一个方法，将一个函数的对象上下文从初始的上下文改变为由thisObj指定的新对象。另一种说法，都能够改变方法的执行上下文（执行环境），将一个对象的方法交给另一个对象来执行，并且是立即执行。
不同点：apply();//最多只能有两个参数--新this对象和一个数组argArray，如果给该方法传递多个参数，则把参数都写进这个数组里边，当然，即使只有一个参数，也要写进数组里边。call();//可以接收多个参数，第一个参数apply()一样，后面则是一串参数列表。实际上，apply和call的功能是一样的，只是传入的参数列表的形式不同。

Js的函数节流和函数防抖的区别

函数节流是指一定时间内js方法只执行一次。

函数防抖是指频繁触发的情况下，只有足够的空闲时间，才执行代码一次

函数节流是 声明一个变量当标志位，记录当前代码是否在执行，如果正在执行，取消这次方法执行，直接return，如果空闲，正常触发方法执行

函数防抖是需要一个延时器来辅助实现，延迟执行需要执行的代码，如果方法多次触发，把上次记录的延迟执行代码用cleartimeout清除掉，重新开始，如果计时完毕，没有方法来访问触发，则执行代码

ajax请求时get和post的区别？

get：从服务器上获取数据，传送数据量小，安全性低，请求会被缓存，缓存是针对URL进行缓存的，get请求参数直接加在URL地址后面，一种参数组合就会产生一种URL的缓存，重复的请求结果是相同的；

post：向服务器发送数据；传送数据量大，请求不会被缓存，参数封装在二进制的数据体中，服务器也不会记录参数，相对安全，所以涉及用户隐私的数据都要用post传送；

Get和post不同

Get是从服务器上获取数据，post是向服务器传送数据

在客户端，get通过url提交数据，数据在url中可以看到，post方式，数据放在html header中提交

安全性问题

Get提交数据最多只能有1024字节，post没有限制

ajax请求时，如何解释json数据？

使用eval方法解析的时候，eval();不会去判断该字符串是否合法，而且json对象里的js方法也会被执行，这是非常危险的；
推荐使用JSON.parse(); JSON.parse();把字符串转化成json。

vue跨域的解决方式

1.后台更改header

2.使用jq提供jsonp

3.用http-proxy-middleware（配置代理服务器的中间件）

v-for与v-if优先级

首先不要把v-if与v-for用在同一个元素上，原因：v-for比v-if优先，如果每一次都需要遍历整个数组，将会影响速度，尤其是当之需要渲染很小一部分的时候。

v-for 比 v-if 具有更高的优先级

请谈谈小程序的双向绑定和vue的异同？

Vue双向绑定是通过数据拦截和观察者模式，通过this.value获取值，小程序是通过触发表单元素绑定的方法，在方法中用this.setData（{key:value}）来取值

web前端面试题必备相关推荐

  1. 中级前端面试题必备知识点（2.5w+月薪）进阶

    中级前端面试题必备知识点(2.5w+月薪)进阶 前端已经不再是5年前刚开始火爆时候的那种html+css+js+jquery的趋势了,现在需要你完全了解前端开发的同时,还要具备将上线.持续化.闭环.自 ...

  2. JavaScript中的load事件的作用_史上最全的web前端面试题汇总及答案JavaScript之二（二）...

    作者:樱桃小丸子儿 链接:https://www.jianshu.com/p/abadcc84e2a4 JavaScript JS的基本数据类型 number,string,boolean,objec ...

  3. 应届生web前端面试题_2020最新Web前端经典面试题试题及答案（持续更新）

    Web前端面试题 Web前端面试题:说说你对webpack的看法 解析:webpack是一个模块打包工具,可以使用webpack管理你的模块依赖,并编译输出模块们所需要的静态文件.能很好的管理.打包w ...

  4. java 前端页面传过来的值怎么防止篡改_答对这40道经典web前端面试题，想不拿到offer都难！...

    想成功就业web前端工程师,想要能高薪就业,那么除了好的web前端技能以外,还得有好的面试技巧,如果提前就了解更多企业的面试要求及面试题目,那么可以让我们的面试成功的几率大大的提高. 今天小编就整理了 ...

  5. Web前端面试题集锦

    Web前端面试题集锦 前端开发面试知识点大纲: 注意 转载须保留原文链接(http://www.cnblogs.com/wzhiq896/p/5927180.html )作者:wangwen896 H ...

  6. javascript array添加图片_史上最全的web前端面试题汇总及答案JavaScript之二（二）...

    作者:樱桃小丸子儿 链接:https://www.jianshu.com/p/abadcc84e2a4 JavaScript JS的基本数据类型 number,string,boolean,objec ...

  7. 金三银四，磨砺锋芒；剑指大厂，扬帆起航（2020年最全大厂WEB前端面试题精选）上

    引言 元旦匆匆而过,2020年的春节又接踵而来,大家除了忙的提着裤子加班.年底冲冲冲外,还有着对于明年的迷茫和期待!2019年有多少苦涩心酸,2020年就有更多幸福美好,加油,奥利给!怀着一颗积极向上 ...

  8. WEB前端面试题整理

    WEB前端面试题 文章目录 WEB前端面试题 一.html部分 1.Doctype有什么作用?标准模式与兼容模式有什么区别 2.标准模式与兼容模式(怪异模式)各有什么区别? div1和div2之间的距 ...

  9. 吐血熬夜整理!2020最全web前端面试题!!!你想要的我这都有！！！

    吐血总结了下web前端面试题,分享给大家,以后还会持续更新,有些题目有多种答案,本文只给出其中一种,哪里有问题的欢迎指出. Html&CSS 1.谈谈你对web标准的理解 web标准的理解 2 ...

最新文章

  1. 2019腾讯后台开发暑期实习面经汇总
  2. 转：测试部工作不受重视怎么办？
  3. 案例实作图解.Net Entity Framework 教程
  4. （基础篇）数组的详解与使用
  5. kibana java script_Elasticsearch：创建 Runtime field 并在 Kibana 中使用它 - 7.11 发布 - TGCode...
  6. 废旧纸箱做机器人图片_制作纸箱板画（适合1112岁孩子们）
  7. 高级JAVA - 手写简单的重试组件学习Spring Retry
  8. Python网络爬虫使用代理proxy
  9. nginx重启命令方法(linux,centos,ubuntu)总结
  10. iterm2 配置安装rz sz
  11. 微信聊天内容制作生成器微信小程序源码_支持多种制作生成
  12. Python抽象基类、鸭子类型介绍
  13. 未来的计算机博士就业前景_恐怖博士：电视的未来
  14. 图片理解引擎算法实现简介
  15. 运用自回归滑动平均模型、灰色预测模型、BP神经网络三种模型分别预测全球平均气温，并进行预测精度对比（附代码、数据）
  16. 反恐精英服务器维修,China.com 反恐精英专区
  17. SAP-FICO CO凭证的相关知识点
  18. postman怎么传对象list_使用Postman传对象中包含map、list参数
  19. 新版Edge 浏览器的禁用扩展提示
  20. C语言 16进制字符串转16进制数组 函数示例

热门文章

  1. 为什么Vue中的v-if 和v-for不建议一起用？
  2. Go 1.19.3 select原理简析
  3. 谈谈PHP中的trait
  4. 名词解释第八讲：公钥
  5. Python获取阿里云产品云监控数据指标
  6. 图形验证码的生成和破解
  7. ACCESS表达式中的叹号“!”和点号“.”的区别
  8. 利用 Python处理句子中的脏话 —— 2022/2/12
  9. 时间序列分解法(Time-series Decomposition)
  10. scrapy的安装与使用