该篇文章用于本人查漏补缺，会有大量知识点，不定期更新，有人愿意看就随便看看。

HTML

浏览器的运行机制：

构建DOM树（parse）：渲染引擎解析HTML文档，首先将标签转换成DOM树中的DOM node（包括js生成的标签）生成内容树（Content Tree/DOM Tree）；
构建渲染树（construct）：解析对应的CSS样式文件信息（包括js生成的样式和外部css文件），而这些文件信息以及HTML中可见的指令（如），构建渲染树（Rendering Tree/Frame Tree）；render tree中每个NODE都有自己的style，而且render tree不包含隐藏的节点(比如display:none的节点，还有head节点)，因为这些节点不会用于呈现
布局渲染树（reflow/layout）：从根节点递归调用，计算每一个元素的大小、位置等，给出每个节点所应该在屏幕上出现的精确坐标；
绘制渲染树（paint/repaint）：遍历渲染树，使用UI 层来绘制每个节点。

HTML5 drag api

dragstart：事件主体是被拖放元素，在开始拖放被拖放元素时触发。
darg：事件主体是被拖放元素，在正在拖放被拖放元素时触发。
dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发。
dragover：事件主体是目标元素，在被拖放在某元素内移动时触发。
dragleave：事件主体是目标元素，在被拖放元素移出目标元素是触发。
drop：事件主体是目标元素，在目标元素完全接受被拖放元素时触发。
dragend：事件主体是被拖放元素，在整个拖放操作结束时触发

CSS

为何img、input等内联元素可以设置宽、高

从元素本身的特点来讲，可以分为替换和不可替换元素。
可替换元素
替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。例如浏览器会根据 <img>标签的src属性的值来读取图片信息并显示。例如根据标签的type属性来决定是显示输入框，还是单选按钮等。
HTML中的<img>、<input>、<textarea>、<select>、<object>都是替换元素。这些元素往往没有实际的内容，即是一个空元素

CSS画正方体，三角形

画三角形

#triangle02{
width: 0;
height: 0;
border-top: 50px solid blue;
border-right: 50px solid red;
border-bottom: 50px solid green;
border-left: 50px solid yellow;
}

画正方体：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>立方体</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            position: relative;
            top: 65px;
            margin: 50px;
            transform-style:preserve-3d ;/*给子级设置3d效果*/
            transform: rotateX(33deg) rotateY(39deg) rotateZ(0deg) translate3d(0px,0px,0px);
        }
        .back1{
            width: 100px;
            height: 100px;
            position: absolute;
            background-color: chartreuse;
            opacity: 0.5;/*设置透明效果*/
            transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(0px,0px,100px);
        }
        .back2{
            width: 100px;
            height: 100px;
            position: absolute;
            background-color: #ff2d27;
            opacity: 0.5;
            transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(0px,0px,0px);
        }
        .back3{
            width: 100px;
            height: 100px;
            position: absolute;
            background-color: #e492ff;
            opacity: 0.5;
            transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg) translate3d(-50px,0px,50px);
        }
        .back4{
            width: 100px;
            height: 100px;
            position: absolute;
            background-color: #2f18a1;
            opacity: 0.5;
            transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg) translate3d(-50px,0px,-50px);
        }
        .back5{
            width: 100px;
            height: 100px;
            position: absolute;
            background-color: #12fffd;
            opacity: 0.5;
               transform: rotateX(90deg) rotateY(0deg) rotateZ(0deg) translate3d(0px,50px,-50px);
        }
        .back6{
            width: 100px;
            height: 100px;
            position: absolute;
            background-color: #421221;
            opacity: 0.5;
            transform: rotateX(90deg) rotateY(0deg) rotateZ(0deg) translate3d(0px,50px,50px);
        }
    </style>
</head>
<body>
<div class="box">
    <div class="back1"></div>
    <div class="back2"></div>
    <div class="back3"></div>
    <div class="back4"></div>
    <div class="back5"></div>
    <div class="back6"></div>
</div>
</body>
</html>

JS

this指向问题

（函数内部的this 是由函数调用的时候来确定其指向的。）
1.在普通函数中：this指向window对象
2.在对象的方法中，this指向调用该方法的对象
3.在构造函数的调用中，this指向new关键字创建的对象
4.在定时器中，this指向window对象
5.在事件的处理函数中，this指向触发该事件的对象

ES6

ES6装饰器的使用

核心问题讲解

装饰器就是相当于给人或者事多加一些东西就是现实中装饰类似的意思化妆打扮加衣服

装饰器（Decorator）是一种与类（class）相关的语法，用来注释或修改类和类方法与属性。许多面向对象的语言都有这项功能。一般和类class相关普通函数不要使用

进入代码就会执行完成

装饰器是一种函数，写成@ + 函数名。它可以放在类和类方法的定义前面。

装饰类Foo
@frozen 
class Foo {
	
  //装饰method方法
  @configurable(false)
  method() {}
  
 //装饰yy方法
  @throttle(500)
  yy() {}
  
}

问题扩展

修饰类基本形式

@decorator
class A {
    
    }
// 等同于

class A {
    
    }
A = decorator(A);
// decorator 是一个 函数 相当于调用它 给A 类 可以加上一些其他代码

举例：

@testable
class MyTestableClass {
    
    
  // ...
}

function testable(target) {
    
    
  target.isTestable = true;
}

MyTestableClass.isTestable // true
//为它加上了静态属性isTestable。testable函数的参数target是MyTestableClass类本身。

修饰的复杂形式多套一个函数返回一个函数

//testable是一个Factory
function testable(isTestable) {
    
    
  return function(target) {
    
    
    target.isTestable = isTestable;
  }
}

@testable(true)
class MyTestableClass {
    
    }
MyTestableClass.isTestable // true

@testable(false)
class MyClass {
    
    }
MyClass.isTestable // false

修饰类方法

修饰器
第一个参数是类的原型对象，是Person.prototype，修饰器的本意是要“修饰”类的实例，但是这个时候实例还没生成，	所以只能去修饰原型（这不同于类的修饰，那种情况时target参数指的是类本身）；
第二个参数是所要修饰的属性名，
第三个参数是该属性的描述对象。

function readonly(target, name, descriptor){
  // descriptor对象原来的值如下
  // {
   configurable:false,//能否使用delete、能否需改属性特性、或能否修改访问器属性、，
   									false为不可重新定义，默认值为true
    enumerable:false,//对象属性是否可通过for-in循环，flase为不可循环，默认值为true
    writable:false,//对象属性是否可修改,flase为不可修改，默认值为true
    value:'xiaoming' //对象属性的默认值
  // };
  descriptor.writable = false;
  return descriptor;
}

class Person {
  @readonly
  abc() { console.log('我是person的abc函数') }
}

多个装饰器一起

同一处的多个装饰器是按照洋葱模型，由外到内进入，再由内到外执行

function dec(id){
    console.log('进入', id);
    return (target, property, descriptor) => {
        console.log('执行', id)
    };
}
 
class Example {
    @dec(1)
    @dec(2)
    xxx(){
      console.log('xxx')
    }
}
// 进入 1
// 进入 2
// 执行 2
// 执行 1

VUE

v-bind 和 v-model 的区别

1.v-bind 用来绑定数据和属性以及表达式，缩写为’：’
2.v-model 使用在表单中，实现双向数据绑定的，在表单元素外使用不起作用

什么是 mvvm？

MVVM 是 Model-View-ViewModel 的缩写。mvvm 是一种设计思想。Model 层代表数据模型，也可以在 Model 中定义数据修改和操作的业务逻辑；View 代表 UI 组件，它负责将数据模型转化成 UI 展现出来，ViewModel 是一个同步 View 和 Model 的对象。

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

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

mvvm 和 mvc 区别？

mvc 和 mvvm 其实区别并不大。都是一种设计思想。主要就是 mvc 中 Controller 演变成 mvvm 中的 viewModel。mvvm 主要解决了 mvc 中大量的 DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。和当 Model 频繁发生变化，开发者需要主动更新到 View 。

vue 的优点是什么？

低耦合。视图（View）可以独立于 Model 变化和修改，一个 ViewModel 可以绑定到不同的"View"上，当 View 变化的时候 Model 可以不变，当 Model 变化的时候 View 也可以不变。
可重用性。你可以把一些视图逻辑放在一个 ViewModel 里面，让很多 view 重用这段视图逻辑。
独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计，使用 Expression Blend 可以很容易设计界面并生成 xml 代码。
可测试。界面素来是比较难于测试的，而现在测试可以针对 ViewModel 来写。

请详细说下你对 vue 生命周期的理解？

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

创建前/后：在 beforeCreate 阶段，vue 实例的挂载元素 el 还没有。
载入前/后：在 beforeMount 阶段，vue 实例的$el 和 data 都初始化了，但还是挂载之前为虚拟的 dom 节点，data.message 还未替换。在 mounted 阶段，vue 实例挂载完成，data.message 成功渲染。
更新前/后：当 data 变化时，会触发 beforeUpdate 和 updated 方法。
销毁前/后：在执行 destroy 方法后，对 data 的改变不会再触发周期函数，说明此时 vue 实例已经解除了事件监听以及和 dom 的绑定，但是 dom 结构依然存在

组件之间的传值？

父组件与子组件传值

//父组件通过标签上面定义传值
<template>
  <main :obj="data"></main>
</template>
<script>
  //引入子组件
  import Main form "./main"

  exprot default{
     
     
      name:"parent",
      data(){
     
     
          return {
     
     
              data:"我要向子组件传递数据"
          }
      },
      //初始化组件
      components:{
     
     
          Main
      }
  }
</script>

//子组件通过props方法接受数据
<template>
  <div>{
   
   {data}}</div>
</template>
<script>
  exprot default{
     
     
      name:"son",
      //接受父组件传值
      props:["data"]
  }
</script>

子组件向父组件传递数据

//子组件通过$emit方法传递参数
<template>
  <div v-on:click="events"></div>
</template>
<script>
  //引入子组件
  import Main form "./main"

  exprot default{
     
     
      methods:{
     
     
          events:function(){
     
     

          }
      }
  }
</script>

//

<template>
  <div>{
   
   {data}}</div>
</template>
<script>
  exprot default{
     
     
      name:"son",
      //接受父组件传值
      props:["data"]
  }
</script>

active-class 是哪个组件的属性？

vue-router 模块的 router-link 组件。

嵌套路由怎么定义？

在实际项目中我们会碰到多层嵌套的组件组合而成，但是我们如何实现嵌套路由呢？因此我们需要在 VueRouter 的参数中使用 children 配置，这样就可以很好的实现路由嵌套。
index.html，只有一个路由出口

<div id="app">
  <!-- router-view 路由出口, 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>

main.js，路由的重定向，就会在页面一加载的时候，就会将 home 组件显示出来，因为重定向指向了 home 组件，redirect 的指向与 path 的必须一致。children 里面是子路由，当然子路由里面还可以继续嵌套子路由。

import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);

//引入两个组件

import home from "./home.vue";
import game from "./game.vue";
//定义路由
const routes = [
  {
    
     path: "/", redirect: "/home" }, //重定向,指向了home组件
  {
    
    
    path: "/home",
    component: home,
    children: [{
    
     path: "/home/game", component: game }],
  },
];
//创建路由实例
const router = new VueRouter({
    
     routes });

new Vue({
    
    
  el: "#app",
  data: {
    
    },
  methods: {
    
    },
  router,
});

home.vue，点击显示就会将子路由显示在出来，子路由的出口必须在父路由里面，否则子路由无法显示。

路由之间跳转？

声明式（标签跳转） <router-link :to="index">
编程式（ js 跳转） router.push('index')

懒加载（按需加载路由）（常考）

webpack 中提供了 require.ensure()来实现按需加载。以前引入路由是通过 import 这样的方式引入，改为 const 定义的方式进行引入。

不进行页面按需加载引入方式：

import home from "../../common/home.vue";

进行页面按需加载的引入方式：

const home = (r) =>
  require.ensure([], () => r(require("../../common/home.vue")));

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

vue 框架中状态管理。在 main.js 引入 store，注入。新建了一个目录 store，…… export 。场景有：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车

// 新建 store.js
import vue from 'vue'
import vuex form 'vuex'
vue.use(vuex)
export default new vuex.store({
    
    
	//...code
})

//main.js
import store from './store'
...

vue-router 有哪几种导航钩子?

三种

全局导航钩子
- router.beforeEach(to, from, next),
- router.beforeResolve(to, from, next),
- router.afterEach(to, from ,next)
组件内钩子
- beforeRouteEnter,
- beforeRouteUpdate,
- beforeRouteLeave
单独路由独享组件
- beforeEnter

自定义指令(v-check, v-focus) 的方法有哪些? 它有哪些钩子函数? 还有哪些钩子函数参数

全局定义指令：在 vue 对象的 directive 方法里面有两个参数, 一个是指令名称, 另一个是函数。
组件内定义指令：directives
钩子函数: bind(绑定事件出发)、inserted(节点插入时候触发)、update(组件内相关更新)
钩子函数参数： el、binding

说出至少 4 种 vue 当中的指令和它的用法

v-if(判断是否隐藏)、v-for(把数据遍历出来)、v-bind(绑定属性)、v-model(实现双向绑定)

vue 的双向绑定的原理是什么(常考)

vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty()来劫持各个属性的 setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

具体步骤：
第一步：需要 observe 的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter 和 getter 这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化

第二步：compile 解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图

第三步：Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁，主要做的事情是:

在自身实例化时往属性订阅器(dep)里面添加自己
自身必须有一个 update()方法
待属性变动 dep.notice()通知时，能调用自身的 update() 方法，并触发 Compile 中绑定的回调，则功成身退。

第四步：MVVM 作为数据绑定的入口，整合 Observer、Compile 和 Watcher 三者，通过 Observer 来监听自己的 model 数据变化，通过 Compile 来解析编译模板指令，最终利用 Watcher 搭起 Observer 和 Compile 之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据 model 变更的双向绑定效果。

vuex 相关

vuex 有哪几种属性

有 5 种，分别是 state、getter、mutation、action、module

vuex 的 store 特性是什么

vuex 就是一个仓库，仓库里放了很多对象。其中 state 就是数据源存放地，对应于一般 vue 对象里面的 data
state 里面存放的数据是响应式的，vue 组件从 store 读取数据，若是 store 中的数据发生改变，依赖这相数据的组件也会发生更新
它通过 mapState 把全局的 state 和 getters 映射到当前组件的 computed 计算属性

vuex 的 getter 特性是什么

getter 可以对 state 进行计算操作，它就是 store 的计算属性
虽然在组件内也可以做计算属性，但是 getters 可以在多给件之间复用
如果一个状态只在一个组件内使用，是可以不用 getters

vuex 的 mutation 特性是什么

action 类似于 muation, 不同在于：action 提交的是 mutation,而不是直接变更状态
action 可以包含任意异步操作

vue 中 ajax 请求代码应该写在组件的 methods 中还是 vuex 的 action 中

如果请求来的数据不是要被其他组件公用，仅仅在请求的组件内使用，就不需要放入 vuex 的 state 里

如果被其他地方复用，请将请求放入 action 里，方便复用，并包装成 promise 返回

不用 vuex 会带来什么问题

可维护性会下降，你要修改数据，你得维护 3 个地方
可读性下降，因为一个组件里的数据，你根本就看不出来是从哪里来的
增加耦合，大量的上传派发，会让耦合性大大的增加，本来 Vue 用 Component 就是为了减少耦合，现在这么用，和组件化的初衷相背

vuex 原理

vuex 仅仅是作为 vue 的一个插件而存在，不像 Redux,MobX 等库可以应用于所有框架，vuex 只能使用在 vue 上，很大的程度是因为其高度依赖于 vue 的 computed 依赖检测系统以及其插件系统，

vuex 整体思想诞生于 flux,可其的实现方式完完全全的使用了 vue 自身的响应式设计，依赖监听、依赖收集都属于 vue 对对象 Property set get 方法的代理劫持。最后一句话结束 vuex 工作原理，vuex 中的 store 本质就是没有 template 的隐藏着的 vue 组件；

使用 Vuex 只需执行 Vue.use(Vuex)，并在 Vue 的配置中传入一个 store 对象的示例，store 是如何实现注入的？

Vue.use(Vuex) 方法执行的是 install 方法，它实现了 Vue 实例对象的 init 方法封装和注入，使传入的 store 对象被设置到 Vue 上下文环境的 $s t o r e 中。因此在 V u e C o m p o n e n t 任意地方都能够通过 t h i s .$ store 访问到该 store。

state 内部支持模块配置和模块嵌套，如何实现的？

在 store 构造方法中有 makeLocalContext 方法，所有 module 都会有一个 local context，根据配置时的 path 进行匹配。所以执行如 dispatch(‘submitOrder’, payload)这类 action 时，默认的拿到都是 module 的 local state，如果要访问最外层或者是其他 module 的 state，只能从 rootState 按照 path 路径逐步进行访问。

在执行 dispatch 触发 action(commit 同理)的时候，只需传入(type, payload)，action 执行函数中第一个参数 store 从哪里获取的？

store 初始化时，所有配置的 action 和 mutation 以及 getters 均被封装过。在执行如 dispatch(‘submitOrder’, payload)的时候，actions 中 type 为 submitOrder 的所有处理方法都是被封装后的，其第一个参数为当前的 store 对象，所以能够获取到 { dispatch, commit, state, rootState } 等数据。

Vuex 如何区分 state 是外部直接修改，还是通过 mutation 方法修改的？

Vuex 中修改 state 的唯一渠道就是执行 commit(‘xx’, payload) 方法，其底层通过执行 this._withCommit(fn) 设置_committing 标志变量为 true，然后才能修改 state，修改完毕还需要还原_committing 变量。外部修改虽然能够直接修改 state，但是并没有修改_committing 标志位，所以只要 watch 一下 state，state change 时判断是否_committing 值为 true，即可判断修改的合法性。

调试时的"时空穿梭"功能是如何实现的？

devtoolPlugin 中提供了此功能。因为 dev 模式下所有的 state change 都会被记录下来，‘时空穿梭’ 功能其实就是将当前的 state 替换为记录中某个时刻的 state 状态，利用 store.replaceState(targetState) 方法将执行 this._vm.state = state 实现。

axios

axios 是什么？怎么使用？描述使用它实现登录功能的流程

axios 是请求后台资源的模块。 npm i axios -S

如果发送的是跨域请求，需在配置文件中 config/index.js 进行配置

hash模式和history模式

vue-router（前端路由）有两种模式，hash模式和history模式，这里来谈谈两者的区别。

hash模式

这里的 hash 就是指 url 尾巴后的 # 号以及后面的字符。这里的 # 和 css 里的 # 是一个意思。hash 也称作锚点，本身是用来做页面定位的，她可以使对应 id 的元素显示在可视区域内。

由于 hash 值变化不会导致浏览器向服务器发出请求，而且 hash 改变会触发 hashchange 事件*（hashchange只能改变 # 后面的url片段**）*；更关键的一点是，因为hash发生变化的url都会被浏览器记录下来，从而你会发现浏览器的前进后退都可以用了，所以人们在 html5 的 history 出现前，基本都是使用 hash 来实现前端路由的。

hash模式背后的原理是onhashchange事件,可以在window对象上监听这个事件:

window.location.hash = 'qq' // 设置 url 的 hash，会在当前url后加上 '#qq'
var hash = window.location.hash // '#qq'  

window.addEventListener('hashchange', function(){ 
  // 监听hash变化，点击浏览器的前进后退会触发
})

hash模式又叫前端路由，这成为了单页应用标配；

history模式

hash 能兼容到IE8， history 只能兼容到 IE10；
首先，hash 本来是拿来做页面定位的，如果拿来做路由的话，原来的锚点功能就不能用了。其次，hash 的传参是基于 url 的，如果要传递复杂的数据，会有体积的限制，而 history 模式不仅可以在url里放参数，还可以将数据存放在一个特定的对象中。
*如果不想要很丑的 hash，我们可以用路由的 history 模式；
history api可以分为两大部分：切换和修改
1、切换历史状态包括back、forward、go
这三个方法，对应浏览器的前进，后退，跳转操作；（跳转操作：在前进后退上长按鼠标，会出来所有当前窗口的历史记录，从而可以跳转）

history.go(-2);//后退两次
history.go(2);//前进两次
history.back(); //后退
hsitory.forward(); //前进

2、修改历史状态包括了 pushState, replaceState两个方法

 `这两个方法接收三个参数:`stateObj`, `title`, `url
 相关API：
window.history.pushState(state, title, url) 
// state：需要保存的数据，这个数据在触发popstate事件时，可以在event.state里获取
// title：标题，基本没用，一般传 null
// url：设定新的历史记录的 url。新的 url 与当前 url 的 origin 必须是一樣的，否则会抛出错误。url可以是绝对路径，也可以是相对路径。
//如 当前url是 https://www.baidu.com/a/,执行history.pushState(null, null, './qq/')，则变成 https://www.baidu.com/a/qq/，
//执行history.pushState(null, null, '/qq/')，则变成 https://www.baidu.com/qq/
window.history.replaceState(state, title, url)
// 与 pushState 基本相同，但她是修改当前历史记录，而 pushState 是创建新的历史记录
window.addEventListener("popstate", function() {
    // 监听浏览器前进后退事件，pushState 与 replaceState 方法不会触发             
   
});

通过pushstate把页面的状态保存在state对象中，当页面的url再变回这个url时，可以通过event.state取到这个state对象，从而可以对页面状态进行还原，这里的页面状态就是页面字体颜色，其实滚动条的位置，阅读进度，组件的开关的这些页面状态都可以存储到state的里面。

history 模式改变 url 的方式会导致浏览器向服务器发送请求，这不是我们想看到的，我们需要在服务器端做处理：如果匹配不到任何静态资源，则应该始终返回同一个 html 页面。

history模式的问题

通过history api，我们丢掉了丑陋的#；但是，它也有个问题：不怕前进，不怕后退，*就怕刷新，f5*（如果后端没有准备的话，会分分钟刷出一个404来**）,因为刷新是实实在在地去请求服务器的,不玩虚的

这里是引用
https://blog.csdn.net/ygh5123687/article/details/89473578?biz_id=102&utm_term=hash%20history%E6%A8%A1%E5%BC%8F&utm_medium=distribute.pc_search_result.none-task-blog-2_allsobaiduweb~default-0-89473578&spm=1018.2118.3001.4187

小程序

移动端

混合APP

uniapp

webappp

网络知识

简单讲解一下http2的多路复用

在 HTTP/1 中，每次请求都会建立一次HTTP连接，也就是我们常说的3次握手4次挥手，这个过程在一次请求过程中占用了相当长的时间，即使开启了 Keep-Alive ，解决了多次连接的问题，但是依然有两个效率上的问题：

第一个：串行的文件传输。当请求a文件时，b文件只能等待，等待a连接到服务器、服务器处理文件、服务器返回文件，这三个步骤。我们假设这三步用时都是1秒，那么a文件用时为3秒，b文件传输完成用时为6秒，依此类推。（注：此项计算有一个前提条件，就是浏览器和服务器是单通道传输）
第二个：连接数过多。我们假设Apache设置了最大并发数为300，因为浏览器限制，浏览器发起的最大请求数为6，也就是服务器能承载的最高并发为50，当第51个人访问时，就需要等待前面某个请求处理完成。

HTTP/2的多路复用就是为了解决上述的两个性能问题。在 HTTP/2 中，有两个非常重要的概念，分别是帧（frame）和流（stream）。帧代表着最小的数据单位，每个帧会标识出该帧属于哪个流，流也就是多个帧组成的数据流。多路复用，就是在一个 TCP 连接中可以存在多条流。换句话说，也就是可以发送多个请求，对端可以通过帧中的标识知道属于哪个请求。通过这个技术，可以避免 HTTP 旧版本中的队头阻塞问题，极大的提高传输性能。

面试

8.31

1.tcp udp 区别
2.跨域
3.事件代理
4.基本数据类型引用数据类型区别
5.instanssof原理
6.水平居中
7.数组去重
8.ajax原理
9.多种方式获取key值
10.左右两栏宽度固定中间自适应

前端查漏补缺 全知识点合集（更新中9.3）