微信运营工具

概念：组件实例被创建之初，组件的属性生效之前（data、methods中的数据还没有初始化）

完成的事情：initLifecycle(vm)：确认组件的父子关系initEvents(vm)：将父组件的自定义事件传递给子组件initRender(vm)：挂载render函数转为vnode的方法beforeCreate：执行组件的beforeCreate钩子函数

通常用于插件开发中执行一些初始化任务

beforeCreate

概念：组件实例已经完全创建：data已绑定，methods已初始化，但是真实的dom还没有生成，所以$el还不可以用

在这里请求后台数据

created

概念：在挂载开始之前被调用，相关的 render 函数首次被调用

执行vm._render()生成VNode

beforeMount

将VNode传入vm._update方法并执行，将VNode转为真实DOM

在这里获取dom元素进行操作

mounted

beforeUpdate

子组件页面更新不会触发父组件的update生命周期

update

activited

deactivited

表示即将销毁，此时仍然可以使用子组件的实例、methods、watch

可用于处理定时器或清理需要从实例获得的数据、事件信息等比如用户在提交form表单时，在内容填写 到 提交表单过程中，有后退或其他操作时可以在这个钩子提示内容尚未提交或保存，是否退出之类的

beforeDestory

此时已经被销毁，无法再使用子组件的实例，methods、watch

可用于处理定时器

destoryed

生命周期

props和emit

$parent/$children与ref

父子组件通信

$attrs和$listeners

隔代组件通信

provide/inject

父子/隔代组件通信

$emit和$on

Vuex

所有组件通信（父子、隔代、兄弟）

组件通信

响应式原理

VNode的diff算法

vue是什么？（可从两个核心思想去回答：数据驱动和组件化）

单页面应用

钩子函数bindinsertedupdatecomponentUpdateunbind

应用场景：防抖懒加载一键copy功能

自定义指令

在组件切换过程中将状态保留在内存中，防止重复渲染DOM

增加生命周期：activated、deactivated

缓存后如何获取数据？beforeRouteEnteractived

keep-alive

我们可以理解为solt在组件模板中占好了位置，当使用该组件标签时候，组件标签里面的内容就会自动填坑（替换组件模板中slot位置），作为承载分发内容的出口

使用场景：让用户可以拓展组件，去更好地复用组件和对其做定制化处理

分类：默认插槽具名插槽作用域插槽

slot

data属性为什么是一个函数

emit/on代码实现

Vue是怎么监听数组的变化的？Vue.set()和this.$set()实现原理

$nextTick原理

vue-router路由模式（hash路由、History API）

computed和watch的区别和原理

一个专为 Vue.js 应用程序开发的状态管理插件，采用集中式存储管理应用的所有组件的状态，而更改状态的唯一方法是提交mutation5个核心属性：state、getters、mutations、actions、modules 。

什么时候需要使用？多个组件依赖于同一状态时。来自不同组件的行为需要变更同一状态。

vuex

vue3.0新特性

常见问题

Vue2

setup

ref

toRefs

组合式API

Vue3

框架

Cookie

sessionStorage

localStorage

HTTP缓存

数据持久化存储技术

JSONP

CORS(跨域资源共享)

服务器代理

postMessage

跨域

同步任务

setInterval()setTimeout()I/OUI rendering

宏任务（macro task）

new Promise()async/awaitnew MutaionObserver()

微任务（micro task）

执行步骤：

浏览器的事件循环机制

浏览器

setImmediate()

新增宏任务（macro task）

process.nextTick()

新增微任务（micro task）

node的事件循环机制

NodeJs

css-loader

style-loader

样式

file-loader

url-loader

图片

loader

plugin

webpack

与webpack对比

rollup

打包工具

cjs(commonjs)

es(es module)

umd

打包产物

工程化

减少HTTP请求次数

减少HTTP请求大小

静态资源分域存放来增加下载并行数

使用静态资源CDN来存储文件

减少Cookie的大小并进行Cookie隔离

推荐使用异步JavaScript资源

避免使用CSS import引用加载CSS

资源预加载

网络加载类

为HTML指定Cache-Control或Expires

合理设置Etag和Last-Modified

静态资源离线方案

缓存类

把CSS资源引用放到HTML文件顶部

JavaScript 资源引用放到HTML文件底部

减少DOM元素数量和深度

尽量避免使用<table>、<iframe>等慢 元素

避免各种形式的重排重绘

使用CSS3动画，开启CPU加速

合理使用Canvas和requestAnimationFrame

页面渲染类

图片压缩处理

使用较小的图片，合理使用base64内嵌图片

图片懒加载

使用iconfont代替图片图标

图片类

性能优化

媒体查询

百分比

em

rem

vw/vh

响应式布局

移动端（h5）

小程序

mpvue

uniapp

跨平台

移动端/小程序

web worker

WebSocket

离线应用（PWA）

新技术

二叉树

数组

选择排序

冒泡排序

归并排序

快速排序

插入排序

堆排序

排序

链表

数据结构与算法

单例模式

emit/on由统一调度中心调用，因此发布者和订阅者不需要知道对方的存在。

发布订阅模式（完全解耦）

dep(发布者)，wathcer(订阅者)由具体目标调度，比如当事件触发，Dep 就会去调用观察者的方法，所以观察者模式的订阅者与发布者之间是存在依赖的

观察者模式（松耦合）

设计模式

进程和线程

操作系统

git/svn

其他

H5新特性

HTML

标准盒子模型：width = content；可使用box-sizing: content-box；设置

IE盒子模型：width = content +padding +border；可使用box-sizing: border-box；设置

盒子模型

块格式化上下文BFC是一个独立的布局环境，其中的元素布局是不受外界的影响

定义

内部的Box会在垂直方向，一个接一个地放置；Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠；BFC的区域不会与float box重叠；BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此；计算BFC的高度时，浮动元素也参与计算。

布局规则

根元素，即HTML元素

float的值不为none（即inherit、left、right）

overflow的值不为visible（即hidden、auto、scroll）

display的值为inline-block、table-cell、flex

触发条件

解决同一个BFC中外边距重叠问题

清除浮动

可以阻止元素被浮动元素覆盖（可实现自适应两栏布局）

应用

BFC

IFC中的line box一般左右都贴紧整个IFC

设置text-align实现水平居中

使用vertical-align:middle实现垂直居中

IFC(行内格式化上下文)

display:grid

GFC(网格布局格式化上下文)

display:flex、inline-flex

FFC(自适应格式化上下文)

Formatting context它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用

absolute + 负margin

position: absolute; top: calc(50% - 高度一半); left: calc(50% - 宽度一半);

absolute+calc

absolute + margin auto

定宽高

absolute + transform

flex

不定宽高

水平垂直居中

在浮动元素后使用一个带clear属性的空元素

:after{ content:\"\"; clear:both; display:block; height:0; overflow:hidden; visibility:hidden; }

在父元素的:after伪元素中clear:both去实现

在父元素中添加overflow属性/inline-block属性（只要能构造成BFC就行）

给父元素添加高度（在浮动元素高度不固定的情况下不适用）

给父元素也添加浮动（治标不治本）

父元素设置BFC

父元素设置border

元素之间添加内联元素进行分隔

解决方法

正正取大值

正负值相加

负负最负值

合并的计算规则

margin边距合并

flex布局

!important>style属性内联>ID选择器>（类选择器=属性选择器=伪类）>标签选择器>通配选择器*

优先级

CSS选择器

如何实现一个三角形、扇形、梯形、箭头

flex:1;

float+overflow:hidden;

自适应两栏布局

自适应三栏布局

常见编程题

flex+absolute导致absolute失效的兼容性问题

问题总结

解析HTML文件，构建DOM树

样式计算

遍历DOM树中的所有可见节点，并把这些节点加到布局中；而不可见的节点会被布局树忽略掉，如head标签下面的全部内容，属性包含 dispaly:none的元素

创建布局树

布局计算（计算布局树节点的坐标位置）

布局阶段

3D变换、页面滚动，或者使用z-indexing做z轴排序渲染引擎需要为这些特定的节点生成专用的图层，并生成一棵对应的图层树（LayerTree）。为布局树分层，满足以下条件会创建新层：1、拥有z-index属性2、需要剪裁的地方（如：超出容器的元素，若有滚动条，滚动条也会呗单独拎出来作为一层）

分层，构建图层树

把一个图层的绘制拆分成很多小的绘制指令，然后再把这些指令按照顺序组成一个待绘制列表；绘制列表中的指令其实非常简单，就是让其执行一个简单的绘制操作，比如绘制粉色矩形或者黑色的线等。而绘制一个元素通常需要好几条绘制指令，因为每个元素的背景、前景、边框都需要单独的指令去绘制。所以在图层绘制阶段，输出的内容就是这些待绘制列表。

图层绘制

绘制列表只是用来记录绘制顺序和绘制指令的列表，而实际上绘制操作是由渲染引擎中的合成线程来完成的。当图层的绘制列表准备好之后，主线程会把该绘制列表提交（commit）给合成线程。合成线程会将图层划分为图块（tile），这些图块的大小通常是256x256或者512x512。然后合成线程会按照视口附近的图块来优先生成位图，实际生成位图的操作是由栅格化来执行的。所谓栅格化，是指将图块转换为位图。而图块是栅格化执行的最小单位。渲染进程维护了一个栅格化的线程池，所有的图块栅格化都是在线程池内执行的。通常，栅格化过程都会使用GPU来加速生成，使用GPU生成位图的过程叫快速栅格化，或者GPU栅格化，生成的位图被保存在GPU内存中。GPU操作是运行在GPU进程中，如果栅格化操作使用了GPU，那么最终生成位图的操作是在GPU中完成的，这就涉及到了跨进程操作。渲染进程把生成图块的指令发送给GPU，然后在GPU中执行生成图块的位图，并保存在GPU的内存中。

栅格化（raster）操作

一旦所有图块都被光栅化，合成线程就会生成一个绘制图块的命令——“DrawQuad”，然后将该命令提交给浏览器进程。浏览器进程里面有一个叫viz的组件，用来接收合成线程发过来的DrawQuad命令，然后根据DrawQuad命令，将其页面内容绘制到内存中，最后再将内存显示在屏幕上。到这里，经过这一系列的阶段，编写好的HTML、CSS、JavaScript等文件，经过浏览器就会显示出漂亮的页面了。

合成和显示

CSS

渲染流程

页面初始渲染添加/删除可见的DOM元素改变元素位置/尺寸/字体大小改变浏览器窗口大小激活CSS伪类设置style值查询某些属性或调用某些计算方法：offsetWidth、offsetHeight等，调用 getComputedStyle方法

尽可能在低层级的DOM节点上更改不要使用table布局

减少重排范围

样式集中改变读写分离将dom离线使用absolute/fixed脱离文档流优化动画：translate3d

减少重排次数

优化方法

重排/回流（更新了元素的几何属性，重新生成布局）

color、border-style、visibility、background等

重绘（更新了元素的绘制属性）

重排重绘

外框

Null、Undefined、Number、Boolean、String、Symbol、BigInt

基本(原始)数据类型(7种)

Object(普通对象Object、Array、Function、Date、RegExp、Math)

引用数据类型

数据类型

一般用来判断基本数据类型：除了Null(得到object)、Symbol(得到function)之外的其他5个，还可以判断函数：typeof 方法名(得到function)

typeof

一般用来判断自定义的类实例对象，原理是：以arr instanceof Array来说（arr.__proto__一直往上__proto__直到找到Array.prototype为止）

instanceof

最可靠的方法。例如：Object.prototype.toString.call(null)=>[object Null]

Object.prototype.toString.call()

判断数据类型的方法

例子：[]==0 //true[]==false //true''==false //true[]==[] //false不同空间地址[]==![] //true=>右边=!toBealean([])=>!true=>false=左边

1、如果两个值类型相同，进行 === 比较。 2、如果两个值类型不同，他们可能相等。根据下面规则进行类型转换再比较： 3、如果一个是null、一个是undefined，那么[相等]。 4、如果一个是字符串，一个是数值，把字符串转换成数值再进行比较。 5、如果任一值是 true，把它转换成 1 再比较；如果任一值是 false，把它转换成 0 再比较。 6、如果一个是对象，另一个是数值或字符串，把对象转换成基础类型的值再比较。对象转换成基础类型，利用它的toString或者valueOf方法。 js核心内置类，会尝试valueOf先于toString；例外的是Date，Date利用的是toString转换。7、任何其他组合，都[不相等]。 总结：对象类型（object、array、function）会转为原始类型(number、string、boolean)的值去比较，原始类型的值会转为数值类型(0、1)去比较

==运算规则

例子：0==='0'===new String('0') //falseundefined===null //false+0===-0 //true

1、如果类型不同，就[不相等] 2、如果两个都是数值，并且是同一个值，那么[相等]；例外的是，如果其中一个是NaN，那么[不相等]。（判断一个值是否是NaN，只能用isNaN()来判断） 3、如果两个都是字符串，每个位置的字符都一样，那么[相等]；否则[不相等]。 4、如果两个值都是true，或者都是false，那么[相等]。 5、如果两个值都引用同一个对象或函数，那么[相等]；否则[不相等]。 6、如果两个值都是null，或者都是undefined，那么[相等]。 

===运算规则

\"==\"表示只要值相等即可为真，而\"===\"则要求不仅值相等，而且也要求类型相同。

区别

对于明确数据类型的用===更为可靠，JavaScript是一门弱类型语言，表达式运算赋值等操作都会导致类型转换。而一些隐式转换会带来一些意想不到的后果。

注意事项

==和===

工厂模式

函数构造模式

原型模式

组合使用构造函数模式和原型模式(常用)

创建对象方法

原型链继承

构造函数继承

组合继承

寄生组合式继承（会手写代码）

Class继承（ES6）

对象继承方法

所有能够通过对象访问的、可枚举的属性，其中包括存在于实例中的也包括存在于原型上的属性。（只能获得对象的键名，不能直接获取键值）（可用来遍历object）

for-in

可取得对象上所有可枚举的实例属性

Object.keys()

可取得对象上所有可枚举和不可枚举的实例属性

Object.getOwnPropertyNames()

可遍历数组、Set、Map、类数组对象（arguments对象、Dom NodeList对象）、字符串和Generator对象（注意：不能遍历object对象）（可获取键值，如果需要获取键名那么可借助Object.keys()方法）

for-of

遍历属性方法

原型

原型链

原型和原型链

概念：JS属于解释型语言，所以它的执行分为两个部分：解释（词法分析、语法分析、作用域规则确定）和执行部分（创建执行上下文、执行函数代码、垃圾回收）所以作用域在函数定义的时候就已经确定了，而执行上下文是在函数执行的前一步才确定的。JavaScript引擎通过一种叫栈的数据结构来管理执行上下文。

通过var声明的变量

变量环境

块级作用域：通过let/const声明的变量

词法环境

根据词法作用域决定的

外部引用outer

this 是和执行上下文绑定的，也就是说每个执行上下文中都有一个 this

this

查询变量过程：先找寻词法环境，再找寻变量环境，如果没找到，再从外部引用去找

组成

全局执行上下文

函数执行上下文

Eval函数执行上下文

分类

概念：this对象是在运行时基于函数的执行环境绑定的（this 实际上是在函数被调用时发生的绑定，它指向什么完全取决于函数在哪里被调用，也就是函数的调用位置）

默认绑定（普通函数调用）

隐式绑定（对象函数调用）

显式绑定（call、apply、bind）

new绑定

绑定规则

new绑定>显式绑定>隐式绑定>默认绑定

绑定优先级

this指向

执行上下文

它决定代码区块中变量和其他资源的可见性，它的最大用处就是隔离变量，不同作用域下同名变量不会有冲突

概念

最外层函数 和在最外层函数外面定义的变量拥有全局作用域非严格模式下，所有末定义直接赋值的变量自动声明为拥有全局作用域所有 window 对象的属性拥有全局作用域

全局作用域

声明在函数内部的变量只在函数内部可以访问的到

函数作用域

块级作用域（ES6）

作用域

在当前作用域中查找变量，若当前作用域中没有定义该变量，那么就会向父级作用域（执行上下文中的outer）中继续查找，一层一层往上查找，直到找到全局作用域，这种关系叫做作用域链由词法作用域决定

作用域链

作用域和作用域链

事件流、事件模型

事件代理

在JS中，当变量存在于一个函数内部，那么该变量的作用域属于函数作用域，在该函数执行后作用域会被销毁，内存也随之被回收，这样我们在函数外部无法访问到函数内部变量。但由于闭包是建立在一个函数内部的子函数，其可访问父级作用域，所以即便父级函数执行完，它的作用域也不会被销毁（因为它的子函数正在访问它的作用域的变量）

封装对象的私有属性避免变量的全局污染缓存结果，让变量始终保持在内存中

作用

设计单例模式编写防抖函数事件回调封装变量

应用场景

闭包

动态语言：在运行过程中需要检查数据类型的语言

弱类型语言：支持隐式类型转换的语言（例如：let num = '3'; num.toFixed(2); 将字符串类型自动转换成数值类型 ）

JS语言类型

存储可执行代码

代码空间

变量存入执行上下文，执行上下文存入栈

栈空间

引用类型对象类型是存放在堆空间的，在栈空间中只是保留了对象的引用地址

堆空间

V8内存机制

当执行一个函数的时候，会创建该函数的执行上下文，并将该上下文推入栈顶中，当该函数执行完成，栈顶指针自动下移，下移之后会销毁该函数在栈中的执行上下文，并开始执行该函数外部的执行上下文

栈中的垃圾回收机制

使用Scavenge算法：1.把新生代空间对半划分为两个区域，一半是对象区域，一半是空闲区域；2.新加入的对象都会存放到对象区域，当对象区域快被写满时，就需要执行一次垃圾清理操作；3.首先要对对象区域中的垃圾做标记；标记完成之后，就进入垃圾清理阶段，副垃圾回收器会把这些存活的对象复制到空闲区域中，同时它还会把这些对象有序地排列起来，所以这个复制过程，也就相当于完成了内存整理操作，复制后空闲区域就没有内存碎片了；4.完成复制后，对象区域与空闲区域进行角色翻转，也就是原来的对象区域变成空闲区域，原来的空闲区域变成了对象区域。这样就完成了垃圾对象的回收操作，同时这种角色翻转的操作还能让新生代中的这两块区域无限重复使用下去。

副垃圾回收器（新生代垃圾回收器）新生代中存放的是生存时间短的对象

老生代的对象特点：1.对象占用空间大2.对象存活时间长使用标记-清除算法：1.首先是标记过程阶段。标记阶段就是从一组根元素开始，递归遍历这组根元素，在这个遍历过程中，能到达的元素称为活动对象，没有到达的元素就可以判断为垃圾数据；2.接下来就是垃圾的清除过程。它和副垃圾回收器的垃圾清除过程完全不同，你可以理解这个过程是清除掉红色标记数据（是步骤1中标记的垃圾数据）的过程；3.对一块内存多次执行标记 - 清除算法后，会产生大量不连续的内存碎片。而碎片过多会导致大对象无法分配到足够的连续内存，于是又产生了另外一种算法——标记 - 整理（Mark-Compact），这个标记过程仍然与标记 - 清除算法里的是一样的，但后续步骤不是直接对可回收对象进行清理，而是让所有存活的对象都向一端移动，然后直接清理掉端边界以外的内存。括展：由于 JavaScript 是运行在主线程之上的，一旦执行垃圾回收算法，都需要将正在执行的 JavaScript 脚本暂停下来，待垃圾回收完毕后再恢复脚本执行。我们把这种行为叫做全停顿（Stop-The-World）。为了降低老生代的垃圾回收而造成的卡顿，V8 将标记过程分为一个个的子标记过程，同时让垃圾回收标记和 JavaScript 应用逻辑交替进行，直到标记阶段完成，我们把这个算法称为增量标记（Incremental Marking）算法。使用增量标记算法，可以把一个完整的垃圾回收任务拆分为很多小的任务，这些小的任务执行时间比较短，可以穿插在其他的 JavaScript 任务中间执行，这样当执行上述动画效果时，就不会让用户因为垃圾回收任务而感受到页面的卡顿了。

主垃圾回收器（老生代垃圾回收器）老生代中存放的生存时间久的对象

共同流程：标记空间中活动对象和非活动对象。所谓活动对象就是还在使用的对象，非活动对象就是可以进行垃圾回收的对象。回收非活动对象所占据的内存。其实就是在所有的标记完成之后，统一清理内存中所有被标记为可回收的对象。做内存整理。一般来说，频繁回收对象后，内存中就会存在大量不连续空间，我们把这些不连续的内存空间称为内存碎片。当内存中出现了大量的内存碎片之后，如果需要分配较大连续内存的时候，就有可能出现内存不足的情况。所以最后一步需要整理这些内存碎片，但这步其实是可选的，因为有的垃圾回收器不会产生内存碎片（例如副垃圾回收器）

堆中的垃圾回收机制

垃圾回收机制

概念：程序的运行需要内存，当我们不再用到某个变量的内存的时候，该变量的内存没有及时释放，那么就叫做内存泄漏

function foo（arg）{       bar =“some text”; // bar将泄漏到全局.}

全局变量

被遗忘的定时器和回调函数

DOM引用

常见的内存泄漏

内存泄漏

内存

JavaScript

块级作用域

promise

async/await

map使用场景，例如姓名、年龄等个人信息展示时

set/map

箭头函数没有自己的this对象不可以当作构造函数，也就是说，不可以对箭头函数使用new命令，否则会抛出一个错误。不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。不可以使用yield命令，因此箭头函数不能用作 Generator 函数。

特点

与普通函数区别

箭头函数

class

generator

动态加载语句，代码发生在运行时模块成员导出使用module.exports 或者 exports；导入使用require('data');导出的是一个值拷贝，会对加载结果进行缓存，一旦内部再修改这个值，则不会同步到外部

CommonJS

不可以动态加载语句，是静态的，只能声明在该文件的最顶部，代码发生在编译时模块成员导出使用export default 或者 export；导入使用import;导出的是一个引用，内部修改可以同步到外部；JS 引擎对脚本静态分析的时候，遇到模块加载命令import，就会生成一个只读引用。等到脚本真正执行时，再根据这个只读引用，到被加载的那个模块里面去取值。

ES6

前端模块化

无状态、无连接

默认开启持久连接（长连接）不成熟的HTTP管道化（尝试解决HTTP队头阻塞问题）新增协议扩展转换（请求头：Upgrade）（WebSocket协议）完善缓存控制技术（新增相对过期时间Cache-Control头域）部分内容传输优化（允许内容部分传输，可传输二进制）提供虚拟主机的支持（每个域名最多同时维护6个TCP连接）、增加Host字段引入cookie安全机制

HTTP1.1

使用TCP多路复用，流式传输（新增二进制分帧层）可以设置请求的优先级支持服务器推送使用HPACK头部压缩传输采用完全二进制格式传输数据，并非HTTP1.x的默认文本格式

在HTTP和TCP中间新增一个二进制分帧层，具体流程如下：首先，浏览器准备好请求数据，包括了请求行、请求头等信息，如果是 POST 方法，那么还要有请求体。这些数据经过二进制分帧层处理之后，会被转换为一个个带有请求 ID 编号的帧，通过协议栈将这些帧发送给服务器。服务器接收到所有帧之后，会将所有相同 ID 的帧合并为一条完整的请求信息。然后服务器处理该条请求，并将处理的响应行、响应头和响应体分别发送至二进制分帧层。同样，二进制分帧层会将这些响应数据转换为一个个带有请求 ID 编号的帧，经过协议栈发送给浏览器。浏览器接收到响应帧之后，会根据 ID 编号将帧的数据提交给对应的请求

TCP多路复用的实现

HTTP2.0

概念：基于 UDP 实现了类似于 TCP 的多路数据流、传输可靠性等功能，我们把这套功能称为QUIC 协议

特点：实现了类似 TCP 的流量控制、传输可靠性的功能。虽然 UDP 不提供可靠性的传输，但 QUIC 在 UDP 的基础之上增加了一层来保证数据可靠性传输。它提供了数据包重传、拥塞控制以及其他一些 TCP 中存在的特性。集成了 TLS 加密功能。目前 QUIC 使用的是 TLS1.3，相较于早期版本 TLS1.3 有更多的优点，其中最重要的一点是减少了握手所花费的 RTT 个数。实现了 HTTP/2 中的多路复用功能。和 TCP 不同，QUIC 实现了在同一物理连接上可以有多个独立的逻辑数据流。实现了数据流的单独传输，就解决了 TCP 中队头阻塞的问题。实现了快速握手功能。由于 QUIC 是基于 UDP 的，所以 QUIC 可以实现使用 0-RTT 或者 1-RTT 来建立连接，这意味着 QUIC 可以用最快的速度来发送和接收数据，这样可以大大提升首次打开页面的速度。QUIC协议不需要三次握手，优化了连接建立的握手延迟，在应用层实现了TCP的可靠性、TLS安全性和HTTP2的并发性。

HTTP3.0(QUIC)

概念：HTTPS协议是通过加入SSL（Secure Sockets Layer）层来加密HTTP数据进行安全传输的HTTP协议，同时启用默认的443端口进行数据传输。

流程：首先浏览器向服务器发送对称加密套件列表、非对称加密套件列表和随机数 client-random；服务器保存随机数 client-random，选择对称加密和非对称加密的套件，然后生成随机数 service-random，向浏览器发送选择的加密套件、service-random 和数字证书（里面包含了公钥）；浏览器端对证书进行验证操作，验证成功之后，利用 client-random 和 service-random 计算出来 pre-master，然后利用公钥对 pre-master 加密，并向服务器发送加密后的数据；服务器拿出自己的私钥，解密出 pre-master 数据，并返回确认消息;服务器和浏览器就有了共同的 client-random、service-random 和 pre-master，然后服务器和浏览器会使用这三组随机数生成对称密钥;双方使用对称加密的方式来传输数据;

HTTPS

get、post、head、options、put、patch、delete、connect、trace

请求方法

100、200、301、302、304、400、401、403、404、500

常见状态码

HTTP

首部组成结构：（20-60字节）源端口号、目的端口号、序列号(seq)、确认号(ack)、状态控制码（URG、ACK、PSH、RST、SYN、FIN）、滑动窗口、检验和等

三次握手、四次挥手过程

如何保证其可靠性？检验和序列号确认应答机制连接管理（三次握手、四次挥手）流量控制拥塞控制（慢启动、拥塞避免、快重传、快恢复）

TCP

首部组成结构：（8字节）源端口号、目标端口号、数据包长度、校验值和数据

UDP

TCP/UDP

概念：应用层通过传输层进行数据通信时，TCP和UDP会遇到同时为多个应用程序进程提供并发服务的问题。为了区别不同的应用程序进程和连接，许多计算机操作系统为应用程序与TCP／IP协议交互提供了称为套接字(Socket)的接口，区分不同应用程序进程间的网络通信和连接。

Socket与TCP/IP的关系：TCP/IP只是一个协议栈，就像操作系统的运行机制一样，必须要具体实现，同时还要提供对外的操作接口。这个就像操作系统会提供标准的编程接口，比如win32编程接口一样，TCP/IP也要提供可供程序员做网络开发所用的接口，这就是Socket编程接口。比如一些最基本的函数接口create、 listen、connect、accept、send、read和write等等

Socket

攻击者通过在目标网站上注入恶意脚本，使之在用户的浏览器上运行。利用这些恶意脚本，攻击者可获取用户的敏感信息如 Cookie、SessionID 等，进而危害数据安全。

存储型

反射型

DOM型（MXSS）

由服务器对输入脚本进行过滤或者转码充分利用CSP（网页安全策略）使用HttpOnly属性

预防方法

XSS攻击

CSRF是指非源站点按照源站点的数据请求格式提交非法数据给源站点服务器的一种攻击方法。简单来讲，CSRF 攻击就是黑客利用了用户的登录状态，并通过第三方的站点来做一些非法的事情

自动发起Get请求自动发起POST请求引诱用户点击链接

攻击方式

充分利用好Cookie中的SameSite属性验证请求的来源站点（origin和referer头部域）CSRF Token

CSRF攻击

DNS劫持

概念：HTTP劫持是指，在用户浏览器与访问的目的服务器之间所建立的网络数据传输通道中从网关或防火墙层上监视特定数据信息，当满足一定的条件时，就会在正常的数据包中插入或修改成为攻击者设计的网络数据包，目的是让用户浏览器解释“错误”的数据，或者以弹出新窗口的形式在使用者浏览器界面上展示宣传性广告或者直接显示某块其他的内容。

HTTP劫持

使用HTTPS连接

请求劫持

概念：SSL劫持攻击即SSL证书欺骗攻击，攻击者为了获得HTTPS传输的明文数据，需要先将自己接入到客户端和目标网站之间；在传输过程中伪造服务器的证书，将服务器的公钥替换成自己的公钥，这样，中间人就可以得到明文传输带Key1、Key2和Pre-Master-Key，从而窃取客户端和服务端的通信数据；

预防方法：如果中间人伪造了证书，在校验证书过程中会提示证书错误由用户选择继续操作还是返回，由于大多数用户的安全意识不强，会选择继续操作，此时，中间人就可以获取浏览器和服务器之间的通信数据。

SSL劫持攻击

概念：将攻击者设置为中间人，之后把HTTPS协议替换为HTTP返回给浏览器，而中间人和服务器之间仍然保持HTTPS服务器。由于HTTP是明文传输的，所以中间人可以获取客户端和服务器传输数据。

预防方法：设置Strict-Transport-Security(STS)预防

SSL剥离攻击

中间人攻击(主要针对HTTPS协议的攻击)

网络攻击

计算机网络

大前端