该篇文章用于本人查漏补缺,会有大量知识点,不定期更新,有人愿意看就随便看看。
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 中。因此在 Vue Component 任意地方都能够通过 this. store中。因此在VueComponent任意地方都能够通过this.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-2allsobaiduweb~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.左右两栏宽度固定中间自适应