Web前端知识点

Web前端知识点笔记，详细总结了操作系统，前端工程化工具，前端架构，常用框架，算法，计算机网络相关，HYML。

Web前端知识点笔记

HTML

HTML5

对HTML语义化的理解

指在使用标签的过程中，正确使用能够代表作用的标签，使整体代码结构良好，便于理解，例如使用<header>、<footer>、<nav>等标签

HTML5的新特性

script标签的defer和async

没有属性

串行加载，会阻塞dom树的加载，加载完成后就运行

defer

异步加载，不会阻塞dom树的加载，加载完成后会等待dom树加载完成后运行

async

异步加载，加载时不会阻塞dom树的加载，加载完成后若dom树未加载完成，依然会运行

替换元素和非替换元素

替换元素

根据元素的属性来判断具体显示的内容，如img、vedio等标签

非替换元素

浏览器直接显示其包含内容的标签，如p、h等标签

img的title、alt属性

title

任何元素都具有title属性，鼠标悬浮在元素上后会显示的内容

alt

图片无法加载时，alt的内容会代替图片，alt的内容可以被搜索引擎捕获

CSS

盒模型

CSS3新特性

Flex布局

Grid布局

常用单位

px

em

rem

vw

wh

%

移动端适配方案

1.Media查询

基本格式

@media screen and (min-width:400px)

2.Flex弹性布局

基本概念

主轴

交叉轴

父元素

flex-direction:选定主轴的方向

row:水平，主轴在左边

column：垂直，主轴在上沿

flex-warp:规定主轴放不下如何换行

nowrap：不换行

wrap：换行，新元素放在下方

justify-content:主轴方向的对齐方式

align-items：交叉轴方向的对齐方式

子元素

flex-grow:属性的放大比例：当有剩余空间时，放大的比例

flex-shrink:属性的缩小比例：当空间不足时，缩小的比例

flex-base:分配剩余空间前元素的本来大小，默认为auto，即本来的大小

flex：上面三个的简写形式，默认为0,1,auto

3.rem+viewport缩放

rem:相对单位，大小为根元素大小的rem倍，默认为16px

viewport

常见属性

width

height

User-scalable

Initial-scale

maximum-scale

minimum-scale

使元素消失的方法

visbility：hidden 实际元素还存在于结构中，并且无法触发各种事件

display：none 实际已不存在于结构中，无法触发各种事件

z-index:-1

opacity:0 实际依然存在于结构中，和正常的可见元素无区别，可以触发各种事件

position的值

absolute：生成绝对定位的的元素，相对于static元素以外的第一个父元素

relative：生成相对定位的元素，相对于其正常位置进行定位

static：没有定位，出现在正常的流中

fixed：生成绝对定位的元素，相对于窗口进行定位

inherit：继承自父元素的position的值

回流和重绘

回流：当渲染树因为元素的结构、显示方式等结构方面发生改变时，会引发回流

重绘：当渲染树因为元素外观、颜色等不影响整体结构的属性变化发生改变时，会引发重绘

对应关系：回流比将引起重绘，重绘不一定引起回流

CSS选择器

CSS浮动

清除浮动的原因

自元素设置浮动后会脱离父元素，导致父元素塌陷

给父元素添加一个::after伪元素，并设置为block，clear设置为both

元素重叠

给浮动的元素添加clear，会使浮动元素旁边不允许出现浮动元素

CSS属性继承

基本概念

特定的CSS属性会向下传递到后代元素

有继承性的属性

1.字体系列属性

font开头系列的属性

2.文本系列属性

text-align等属性

line-height

color

3.元素可见性

visibility

解决CSS变量污染问题的方法

1.添加:local 标签名

表明是一个局部作用域

2.尽量少用标签选择器

3.使用规范的类名避免重复

3.使用行内css

CSS模块化

使用模块化的原因

解决样式命名冲突

解决代码复用等问题

BFC

Block Formating Context

目的

形成完全独立的空间，使子元素不会影响父元素外面的元素

实现方式

1.float不为none

2.position不为relative和static

3.overflow为auto、scroll和hidden

4.display的值为table-cell或inline-block

解决问题

1.浮动元素使父元素高度坍塌问题

2.侧边栏宽度固定 右侧宽度自适应

3.垂直方向margin重叠问题

字符串超出省略号

单行

overflow:hidden

text-overflow:ellipsis

white-space:nowarp

多行

text-overflow:ellipsis

overflow:hidden

元素垂直水平居中

1.父元素display设置为table，子元素设置cell-table，并设置vertical-align:center

2.父元素display设置为flex，align-items:center justfiy-content:center

3.父元素display设置为flex，子元素margin:auto

4.父元素positon设置为relative子元素left、top设置为50%,transoform:translate:-50% -50%

5.仅限于文字：line-height：父元素高度，text-align:center

实现0.5px边框

1.设置border宽短为1px

2.transform:scale(0.5)

3.left、right、buttom、top设置为-50%

JavaScript

内置对象

Array

检测数组

Array.prototype.isArray()

instanceof

缺陷：如果有多个全局环境，每个全局环境中有不同版本的Array，判断时会出线问题

操作方法

队列方法

Array.prototype.shift()

Array.prototype.unshift()

栈方法

Array.prototype.push()

Array.prototype.pop()

Array.prototype.concat(array):基于当前数组所有相创建一个数组，末尾追加array中的内容

Array.prototype.slice(start?,end?):基于当前数组的起始位置和结束位置创建一个新数组

Array.protype.splice(start?,num?,array):基于当前数组的起始位置增加或者删除元素

遍历方法

Array.prototype.map((item,index,array) => {}) 返回每次调用返回组成的数组

Array.prototype.filter((item,index,array) => {})

Array.prototype.every()

Array.prototype.some()

重排序方法

Array.prototype.sort()

Array.protype.reverse()

转换方法

Array.prototype.join():将数组拼接为字符串

String.prototype.splict():将字符串转换为数组，需要输入分隔符

Set

Map

Math

Math.random()

使用random生成n个(0,X]区间的数

Math.floor(Math.random() * n +a)

for in 和 for of 的区别

for in

循环时会返回所有能通过对象访问的、可枚举的属性，其中既包含存在于实例中的属性，又包含存在于原型中的属性

for of

循环时返回有所有的值

正则表达式

基本创建方式：

1.使用/表达式内容/的方式创建(字面量方式）

2.使用对象创建new RegExp(语句，模式)

基本方法：

/表达式/.test(str) :检测str是否满足表达式

原子表和原子组中的选择符：

[字符串]

表示满足字符串中任意一个字符（或）

原子表中加^表示除了原子表中的全部满足

(字符串｜字符串)

表示满足两个字符串中任意一个

/D : 除了数字

/d :0 - 9的数字

/w:字符、数子、下划线

/W:除了字母数子下划线

/s：空格、换行符

/S：除了空格、换行符

+：表示满足一个或多个

*：表示零个或多个

. 除换行外任何字符

边界限定

^字符:以后面的字符开头

字符$：以前面的字符结束

{a,b}

限定匹配的长度，a - b

元字符{数值}

匹配数值个元字符

模式

g:全局匹配

s:视为单行

i:不区分大小写

m:每一行单独处理

\数值 :前面第数值个括号的匹配项

子主题

this指针相关

this指向的几种情况

作为对象的方法调用:this指向该对象

作为普通函数调用:this总是指向全局对象

构造器调用:使用new操作符调用函数时，函数被当作构造器来使用，调用后会返回一个对象，构造器里的this指针指向该对象（构造器函数需要没有显示返回其他对象或返回非对象数据）

Function.protype.call或Function.prototype.apply调用:this指向传入的对象

闭包

概念

有权访问另一个函数作用域中变量的函数

作用域链

每个函数执行时都会包含一个执行环境，环境中有一个与之关联的变量对象，当函数执行过程中会创建一个对应环境的作用域链，作用域链最前端为当前函数的变量对象，作用域链一直延续到全局的变量对象（每个函数对应一条作用域链）

实现原理

将外部函数的活动对象添加到作用域链中

常用情景

模仿块级作用域

利用for循环为多个div添加点击事件

封装变量

函数防抖

任务频繁触发的情况下，只有超过了设置的间隔才会执行任务

节流

指定时间间隔内任务只会执行一次

缺点

由于会携带包含它的函数的作用域，因此比其他函数会占用更多的内存

可能会造成内存泄漏：与Javascript垃圾回收机制有关，若闭包的作用域链中包含一个HTML元素，那么该元素将无法被销毁

函数柯里化

概念

函数柯里化又称为部分求值。一个柯里化函数在接收一些参数后，不会立即执行，而是继续返回另外一个函数，传入的参数会在函数形成的闭包中被保存下来，待到真正需要求值的时候，之前传入的参数会被一次性用于求值

常用场景

1.避免重复传参

高阶函数

概念

至少满足以下条件之一的函数:

1.函数可以作为参数被传递

2.函数可以作为返回值输出

常见案例

函数作为参数传递

1.回调函数

2.Array.protype.sort

函数作为返回值输出

1.判断数据的类型（Object.protype.toString)

原型链

类

实现的方式

1.工厂模式

2.构造函数

3.原型模式

4.构造函数和原型模式混合使用

5.动态原型模式 原型的相关定义放到构造函数中，通过typeof 判断内部方法是否有定义

类的继承

实现原理

子类的prototype指向父类的一个实例

实现的方式

1.纯原型链

2.借用构造函数：在子类构造函数中通过call()函数调用超类的构造函数，传入this，当作普通函数使用

3.组合继承 原型链和借用构造函数组合使用 原型方法属性通过原型链 实例属性通过构造函数定义

new操作符具体做了什么事情

1.创建一个空对象

2.链接原型，使空对象.__proto__等于目标类型.prototype

3.使用call来执行构造函数，this指向该对象

4.将对象返回

垃圾回收机制

标记清除

为所有变量加上标记，然后去除被引用的变量的标记，之后剩余的标记的变量即为可以被删除的变量

引用计数

当变量被引用时就加1，如果引用取消就减1 定时回收引用数为0的变量

深拷贝、浅拷贝

JavaScript的内存

堆：由程序员手动分配，并手动回收，高级语言一般有自己的垃圾回收机制

栈：由系统自动分配，自动回收，效率高，但容量小

JavaScript的复制操作

对于栈中的元素，复制时系统直接开辟新的内存空间，两个变量完全独立

对于堆中的元素，复制时复制的是原来变量的地址，相当于指针一样，此时两个变量指向同一片内存空间

概念

深拷贝：在复制对象中的引用类型时，重新为副本开辟新的内存空间，相当于拷贝原引用对象的一个副本

浅拷贝：在复制对象中的引用类型时，并不创建副本，只是拷贝一份原引用类型的指针

常见的深拷贝、浅拷贝

深拷贝：JSON.parse(JSON.stringfy(obj))

弊端：

时间只会变为字符串的形式

正则对象、Error对象会被变为空对象

undefined等会被直接丢失

浅拷贝：

Object.assign

Array.prototype.slice

Array.prototype.concat

BOM

DOM

基本概念

D:document：文档

O:Object：对象，这里主要指宿主对象，即浏览器提供的对象

M:模型

节点层次

文档节点（document）是每个文档的根节点

文档元素为html元素，文档节点只有一个子节点，即文档元素

Node类型

基本属性

nodeName:保存元素的标签名

nodeValue:保存元素的值

childNodes:包含一个NodeList对象，是一个伪数组对象

parentNode：指向父节点

previousSibling:指向前一个兄弟节点，若为第一个元素，则该属性为null

nextSibling：指向下一个兄弟节点，若为最后一个元素，则该属性为null

firstChild:指向该元素的第一个子节点

lastChild:指向该元素的最后一个子节点

操作节点的方法

添加节点

appendChild(newNode):用于向childNodes列表的末尾添加节点,运行后返回添加的节点

insertBefore(newNode,oldNode):在oldNode前插入newNode，若oldNode为null，则执行和appendChild相同的操作

替换节点

replaceChild(newNode,someNode.firstChild)

移除节点

removeChild(someNode.fistChild)

Document类型

所属关系

document表示整个HTML页面，并且document对象是window对象的一个属性，可以全局访问

基本属性

documentElement:指向html标签

body:指向body标签

常用方法

查找

getElementById()

getElementsByTagName():返回包含零个或多个元素的NodeList，即一个HTMLCollection对象

Element类型

基本属性

nodeName/tagName:返回标签名

HTMLElement

基本属性

id

title

className

基本方法

特性相关

getAttribute

setAttribute

removeAttribute

事件

事件流

事件冒泡（自底向上）

事件捕获（自顶向下）

DOM事件流顺序

1.事件捕获

2.目标阶段

3.事件冒泡

事件处理程序

1.HTML事件处理程序

使用HTML的onxx属性去添加事件

2.DOM0级事件处理程序

使用JavaScript将一个函数赋值给一个事件处理程序属性

3.DOM2级事件处理程序

使用addEventListener和removEventListener，均接收三个参数，要处理的事件名、对应的函数、最后是一个布尔值，若为true表示在捕获阶段调用事件处理，若为false，表示在冒泡阶段调用事件处理

event对象

preventDefault():取消特定事件的默认行为

stopPropagation():立即停止事件在DOM层次中的传播

事件委托

一种DOM性能优化的手段，利用事件冒泡的原理，不必给所有子元素添加事件，而是单独给父元素添加相关事件监听，由于事件冒泡的原理，无论哪个子元素触发了事件，都会传给父元素。因此可以提高性能

AJAX

XMLHttpRequest对象

基本属性

status:状态码

responseText:响应主体返回的文本

readyState

0:未初始化

1：启动，已调用open()方法

2：发送，已调用send()方法

3：接收，已接收到部分响应数据

4:完成，已接收到全部响应数据

常用方法

open(method,url,isAsyn):设定请求的方式、url、是否为异步

send(body):发送请求，若body为空，必须设置为null

onreadystatechange():当readyState发生改变时会调用该函数

setRequestHeader(key,value):用于设置自定义头部，必须在open方法后、send方法前调用

发送请求的步骤

1.let xhr = new XHRHttprequest; //创建一个XHR对象

2. xhr.onreadystatechange = function(){} //设置onreadystatechange回调函数

3.xhr.open("get","www.baidu.com",true); //设置请求方式和目标url和是否为异步操作

4.xhr.setRequestHeader(key,value); //若有需要，添加自定义请求头

5.xhr.send(null) 发送请求

跨域问题

同源策略的概念

通过XHR对象实现AJax通信的主要限制来源于跨域安全策略。默认情况下XHR对象只能访问与包含的它页面位于同一域的资源。

解决方案

CORS

Access-Control-Allow-Origin:允许跨域的源

Access-Control-Allow-Headers:允许跨域的请求头格式

Access-Control-Allow-Methods:允许跨域访问的方法

Access-Control-Allow-Credentials：允许携带cokie跨域

JSONP

script标签

img标签

WebSocket

Nginx反向代理

proxy

axios的实现

变量提升

javascript中所有变量、函数的定义都会被放到作用域顶端，函数的声明与定义会被一起放到顶端

ES6新特性

var、let、const的区别

var声明的变量作用域为所在的函数，存在变量提升

let声明的变量作用域为所在的代码块，不存在变量提升

const声明的变量作用域为所在的代码块，不存在变量提升，如果是基本类型的话，无法修改，但是引用类型的话，对应的对象可以修改。因为此事const声明的变量只是一个指针，这个指针的具体指向不能被修改，而指向的内存的内容可以修改

Promise对象

Promise.prototype.resolve

Promise.prototype.reject

Promise.prototype.then

Promise.prototype.catch

Promise.protype.race

Promise.protype.all

箭头函数和匿名函数的区别

1.箭头函数不能使用new进行创建

2.箭头函数没有arguments对象

3.this指向不同，匿名函数根据调用的环境来决定；箭头函数的this指向最原始的对象

模块化

es6模块化和commonjs的区别

Symbol对象

symbol的作用：

1.当做对象的属性名来使用，为不为外部调用和使用的变量进行命名

在对象中使用[变量名]的形式进行定义，或直接用Symbol()代替也可以

在外部通过obj[变量名]的方式进行访问

2.用symbol代替常量

async/await:

async用于修饰某个函数为异步函数

基本用法

async function 函数名

async函数默认返回一个promise对象

若返回常量，则会包装在promise的resolve中

在async函数中可以使用await关键字来修饰变量，当遇到await变量时，会阻塞

事件循环

JavaScript在执行时包含

1.运行栈：一般的函数操作都默认进入运行栈按照先进后出的顺序执行

2.宏队列：

setTimeout等函数

3.微队列:

promise.then等函数

运行顺序

1.执行完所有的运行栈中的任务

2.执行完所有微队列中的任务

3.执行宏队列任务，期间如果微队列有新的任务，则再执行微队列中的任务

bind、call与apply:

区别

call()与apply()第一个参数完全相同，仅在在于参数的传递方式，call需要后面一一列出参数，而apply可以直接传递一个数组

用途

1.改变this指向

2.Function.prototype.bind

3.借用其他对象的方法

模式设计

订阅者模式

单例模式

策略模式

隐式转换

1.若操作数是布尔值，则在比较前将布尔值转换为数值，false为0，true为1

2.若操作数是字符串，另一个是数值，则将字符串转换为数值

3.若一个操作数是对象，另一个数不是，则调用调用toString方法，转换为字符串，然后再转为数值,若无法转为数值，则为NaN

解决调用栈溢出的方法：

使用setTimeOut分片执行，每次循环只执行部分

图片懒加载

基本属性

document.documentElement.clientHeight

浏览器可视窗口的大小

element.offsetTop

元素相对于文档顶部的高度

document.documentElement.scrollTop

可视窗口相对于文档顶部的高度

getBoundingClientRect

获取元素相对于可视窗口的位置

存储方式：堆和栈

堆内存

用于存放引用类型具体的值

栈内存

主要用于存储基本类型、引用类型的指针。大小固定

TypeScript

类型

基础静态类型

对象静态类型

数组

类

函数

类型注解和类型推断

类型注解

let age : number = 13;

类型推断

let number = 13

会被自动推断为number类型

函数参数和返回值的注解

function a () : number {}

新增的类型：never（循环或永远无法执行完成的函数)

数组的类型注解

let a = (string | number) []

类型别名

type Boy = {name : string, age : number}

联合类型和类型守护

联合类型：function a(b : c | d )

做类型守护：

断言：as关键字

(a as D).skill

in关键字判断属性是否存在

typeof关键字

instanceof关键字

泛型

函数/方法中的泛型（模版类）

enum A { MESSAGE = 200 }

泛型的约束：通过extends去进行约束

命名空间

使用 namespace进行命名空间定义

计算机网络相关

常用的状态码和含义

2XX状态码：请求被正常处理

200：客户端发来的请求被正常处理

204：服务器已成功处理请求，但不含实体的主体部分

3XX状态码：请求需要附加操作以完成请求

301：永久性重定向

302：临时性重定向

304：请求的资源并没有被修改

4XX状态码：服务器无法处理请求

400：请求报文存在语法错误

401:请求需要通过HTTP认证，若之前已进行过一次请求，则认为认证失败

403：请求资源被服务器拒绝

404：请求资源在服务中不存在

5XX状态码：服务器处理请求出错

500：服务器在执行请求时发生错误，也可能是Web应用存在bug引发错误

503：服务器暂时处于超负载或正在进行停机维护

TCP、UDP

TCP建立连接的三次握手和四次挥手

字段概念

SYN

1表明要建立连接

ACK

1表明请求有效

FIN

1表明要断开连接

ack

下一位要接收的报文序号

seq

下一位要发送的报文序号

三次握手

1.客户端向服务端发起请求，其中报文中SYN标志位为1，表明要建立连接，并附带一个随机seq

2.服务器接收到消息后，响应客户端的请求，报文中SYN为1，附带一个随机的seq，ACK为1，表明请求有效，ack为客户端请求的seq + 1

3.客户端再次向服务器发送报文，表示请求有效，ACK字段为1，ack为服务器端的seq+1

四次挥手

1.客户端向服务器发送断开请求，FIN字段为1，seq继续延续

2.服务器端确认断开，ACK为1，ack为客户端seq+1

3.服务器端向客户端发送断开请求，FIN字段为1，seq延续

4.客户端确认断开，ACK为1，ack为服务器端seq+1

TCP与UDP的区别

1.TCP时面向连接的，UDP是无连接的，TCP可以提供可靠的传输服务，而UDP不能保证传输的可靠性

2.UDP支持单播、多播、广播

3.首部开销不同，UDP首部开销更小

4.适用场景不同，TCP适合文件传输，UDP适合直播、IP电话等

HTTP和HTTPS

概念

http

超文本传输协议

https

可以理解为http的安全版，在http下加入了SSL层

区别

1.http传输的数据都是未加密的，采用明文传输的形式，而https是经过SSL加密处理过的，传输相对http更加安全

2.使用的端口号不同，http默认为80，而https默认使用443

3.申请证书需要额外的费用，并且会增大网络的开销

https工作原理

1.客户端向服务器发起https请求

2.服务器会将安全证书和一份公钥传输给客户端

3.客户端通过使用公钥对数据进行加密

4.服务器端接收到数据后再通过私钥对数据进行解密然后处理

http2新特性

与1.1的区别

解析采用二进制

采用多路复用

影响网络请求延迟的两个因素

带宽

延迟

服务器阻塞

DNS查询

建立连接

1.1与1.0的区别

引入了更多的缓存策略

支持断点续传、请求部分资源

支持长连接，在一次连接建立后可以传送多条数据

POST、GET的区别

1.一般情况下GET用于请求服务器对应资源，POST用于向服务器发送数据

2.GET请求的参数全部暴露在URL中，POST请求的参数包含在请求报文的body中

3.由于GET的参数全部暴露在URL中，因此相对于POST来说并不安全，并且有长度限制，最长为2K字节

XSS和CSRF

XSS（跨站脚本攻击）

概念：跨站脚本攻击，Cross-Site-Scripting 的简称，为于CSS区分，改成XSS,原理为在用户的HTML代码中插入恶意脚本并执行。

解决方案：对用户输入的数据进行转义，在展示数据时使用innerText而不是innerHTML

CSRF（跨站请求伪造）

概念：跨站请求伪造，原理为在被浏览器信任的前提下，冒充为用户发送请求

解决方案：使用token验证、添加人机验证

满足攻击的条件：用户已登陆某网站，点击了受控制的网站的请求，此时因为已经是合法登陆状态，服务器无法判断用户的请求是受控制网站发出的还是用户本身发出的

浏览器缓存机制

基本概念

浏览器缓存是指浏览器在本地磁盘对用户最近请求过的文档进行存储，当用户再次访问时，可以直接从本地加载文档

优点

1.减少冗余数据的传输

2.减少服务器的负担

3.加快客户端加载网页的速度

缓存的类型

强缓存（本地缓存）

使用Cache-control:max-age和Expires判断缓存是否过期，Cache-control:max-age字段的优先级更高

涉及字段

Cache-control:max-age

Expires

软缓存（协商缓存）

由服务器确定缓存资源是否可用

涉及字段

Etag和If-None-Match

Last-Modifed和If-Modifed-Since

1.浏览器在第一次请求一个资源时，服务器返回的Header中会包含一个Last-Modify字段，记录该资源的最后修改时间。

2.当浏览器再次请求该资源时，请求头中会包含If-Modifed-Since字段，值为之前的Last-Modifed，服务器会对该值进行判断，若命中缓存，则返回304，若不命中，则返回新的相关数据

缓存判断的过程

1.浏览器第一次请求数据时，服务器会把资源最后的修改日期通过Last-Modifyied发送给浏览器，还会发送一个Etag

2.浏览器对之前请求过的资源再次发起请求时，首先根据之前缓存文件Header的Expires和Cache-control:max-age来判断缓存是否过期

3.若已过期，则首先判断是否有Etag字段，若有则将该字段的值以If-None-Match发送给服务器，服务器根据该值来判断是否命中缓存

4.若不存在Etag字段，则将Last-Modified的值以If-Modified-Since发送给服务器，服务器根据该值来判断是否命中缓存

Cookie、Session

Cookie

基本概念

会话

会话由一组请求和响应组成，是围绕着一件相关事情所进行的请求与响应

Cookie

Cookie是由服务器生成并将其保存在客户端的一种信息载体，只要Cookie不被清空或者超时，会话就是有效的

基本流程

1.客户端进行第一次请求后，服务器就会生成Cookie，并将其封装在响应头中

2.客户端接收到请求后，会将Cookie保存在本地

3.当客户端再次发起同类请求时，请求中就会携带用户的Cookie信息

组成部分

key

value

基本操作方式

1.存储

document.cookie='name=value'

expires:日期对象字符串，代表过期时间

2.读取

Cookie、Session的区别

1.存储位置不同。Cookie存储于客户端，Session存储于服务器端。因此对服务器的压力也不同。

2.存储容量不同。Cookie的存储容量最大为4kb，每个网站不能超过20个，而Session没有上限，但要考虑服务器的性能问题

3.存储方式不同，Cookie只会存储ASCII字符串，而Session可以存储各种类型的数据

4.有效期不同，Cookie可以通过设置属性来达到长期储存的目的，而Session在关闭窗口后就会失效。

5.cookie支持跨域访问，Session不支持跨域访问

浏览器渲染的过程

基本概念

dom树

cssom树

HTML解析顺序

根据HTML代码自上而下进行构建，如果遇到script脚本会阻塞渲染

详细过程

1.解析过程

DOM树解析

1.字节

2.字符

3.标签

4.节点

5.DOM

CSSOM树解析

1.字节

2.字符

3.标签

4.节点

5.CSSMO树

2.渲染过程

浏览器将DOM树和CSSMO树结合，生成渲染树

浏览器根据渲染树绘制最后正确的页面

浏览器输入url后发生了什么

1.URL解析

2.DNS查询

1.向dns服务器发送请求，获取域名对应的服务器ip地址

2.dns查询到ip地址后将信息发送给客户端

3.客户端向目标服务器发送请求

3.TCP连接：三次握手

4.服务器处理请求

5.客户端接收响应

6.断开TCP连接：四次挥手

7.渲染界面

计算机网络和OSI层级

物理层

数据链路层

网络层

IP协议

传输层

TCP、UDP协议

会话层

表示层

应用层

HTTP协议

DNS解析过程（以www.baidu.com为例子）

1.客户端发起请求后，在本地查找host文件，查看是否有对应的ip地址

2.若没有查找到，则向本地DNS服务器发起请求

3.本地DNS服务器向根DNS服务器发送请求进行查找.com的DNS服务器

4.查找到后本地DNS服务器又会向.com的DNS服务器发起查找请求，查找baidu.com的ip地址

5.本地DNS服务器接收到baidu.com的ip地址后，会将地址再发送给客户端

浏览器的构成

1.用户界面

2.浏览器引擎

3.渲染引擎

涉及浏览器的渲染过程

4.网络

5.UI后端

6.JS解释器

7.数据存储

http常见的字段

request Header

Host：主机名

method：请求方法名

response Header

状态码

URI

算法

算法常用基本概念

时间复杂度

空间复杂度

排序算法

基本排序算法

选择排序

排序思路

1.每次假设最左边的元素为最小的元素，向后遍历，若遍历项比当前项更小，则进行替换

2.当遍历结束后接着从第二项开始遍历之前，直到遍历到倒数第二项

冒泡排序

排序思路

1.每次都与自己相邻的后一个元素做比较，若比自己更小，则替换位置

2.每趟都从第一项开始遍历，第n项第i趟需要遍历n - i - 1次

插入排序

排序思路

1.与打牌类似，从数组第二项开始，记下当前项，与前面的项进行比较，若前面的项比当前项大，则将前面的项向后移动，然后将当前项插入到对应的位置

2.遍历所有项，直到数组末尾

高级排序算法

希尔排序

1.插入排序的改良版，引入了间隔的概念，即设置一组合适的间隔，间隔最后一项必须为1

2.根据间隔对数组进行分组，例如间隔为3，则第n项与n+3项为同一组

3.在组内再进行插入排序

4.遍历所有间隔，直到间隔变为1

归并排序

1.递归调用将所有元素进行拆分

2.对拆分后的元素进行合并

快速排序

1.设置一个基数，可以选择数组的第一个元素

2.从第二项开始遍历，将比基数小的数放到smaller数组，大的放到bigger数组

3.对smaller和bigger继续递归调用

4.直到数组为空，则return

常见题目

回溯

生成任意数目的合法括号

求和

输入一个数，寻找数组中和为该数的数组

数据结构

数组

一维数组

二维数组

栈

1.数制转换

2.括号匹配

字符串

链表

树

二叉树

遍历方法

前序遍历

先访问根节点，在访问左子节点，最后访问右子节点

中序遍历

先访问左子节点，再访问根节点，最后访问右子节点

后序遍历

先访问左子节点，再访问右子节点，最后访问根节点

特例

二叉搜索树

在二叉搜索树中，左子节点总是小于或者等于根节点，而右子节点总是大于或者等于根节点

堆

最大堆

最大堆中根节点的值最大

最小堆

最小堆中根节点的值最小

红黑树

把树中的节点定义为红黑两种颜色，并通过规则确保从根节点到叶节点的最长路径的长度不超过最短路径的两倍

图

哈希表

高级算法

动态规划

算法思路

与递归相反，从问题的底部开始解决问题，将所有小问题解决掉，然后合并成一个整体方案，从而解决一个大问题，通过一个数据表来记录之前的值，以便在后续使用

算法步骤

1.根据问题写出问题的状态转移方程

2.根据方程的变量数量判断要列一维还是二维数据表

3.根据递推公式，从表的‘左上角’，即变量为0时开始逐步向后计算，每次的值根据问题的条件进行判断，每次的值都与前序步骤的值相关

常见问题

1.斐波那契数列求和

2.背包问题

3.最长子序列问题

4.最长公共子串问题

贪心算法

常用框架

React

虚拟DOM

简述什么是虚拟DOM

虚拟DOM是真实DOM在内存中的表示，UI的表示形式保存在内存中，并与实际DOM同步。这是一个发生仔细渲染函数被调用和元素在屏幕上显示之间的步骤，整个过程被称为调和

为什么要用虚拟DOM

类组件和函数组件之间的区别

类组件可以使用其他特性，如状态(state)和生命周期钩子。当组件只是接收props渲染到页面时，就是无状态组件，属于函数组件，也被称为哑组件或者展示组件。函数组件的性能比类组件的性能要高，因为类组件使用的时候要实例化，而函数组件直接执行函数取返回结果即可。为了提高性能，尽量使用函数组件。

Diff算法

diff策略

1.前端UI中很少涉及到DOM节点的跨级移动

2.相同类的两个组件将会生成相似的树形结构，拥有不同类的两个组件会生成不同的树形结构

3.对于同一层级的子节点，可以通过唯一id进行区分

对应算法

1.tree diff

1.采用平层比较，同层若发现有新节点或者删除了节点，则直接进行添加或者删除操作，不再进行比较

2.component diff

2.如果是同一类型的component，按照原策略继续比较virtual dom tree，如果不是相同类型的组件，直接进行替换

3.element diff

3.React对节点操作提供 添加、移动、删除三种操作，若同级只是位置发生变化，则需要删除再添加，为了优化，可以为同级节点添加key，若只是位置发生变化，则只需要进行移动操作

react什么操作会引起render

setState

props

react新特性

props与state的区别

1.来源不同。props的值来自于父组件，state来源于组件自身

2.操作权限不同。props为只读，无法进行修改 state可读可写，但写操作需要通过setState来进行

生命周期执行顺序

1.挂载阶段：实例被创建并插入DOM的阶段

1.constructor():组件挂载前调用的函数，一般只用于初始化state和绑定事件处理函数，只执行一次

2.render():调用时会检查this.props和this,state的变化，会执行多次

3.componentDidMount()：在组件成功挂载后立即调用，只执行一次

2.更新阶段:组件的state和props发生改变时会触发的阶段

1.shouldComponentUpdate():根据该函数的返回值，判断每次props和state发生改变时是否进行重新渲染，在渲染执行前会被调用，首次渲染不会调用

2.render()

3.componentDidUpdate():在组件渲染完成后立即调用，首次渲染不会进行调用

3.卸载阶段

1.componentWillUnmount():在组件销毁前调用，一般用于清除timer、取消网络请求等

Hooks

基本概念

Hook是一些可以在函数组件中钩入React state和生命周期函数特性的函数

副作用

在React组件中执行的数据获取、订阅、手动修改dom等操作，统称为副作用

基本方法

useEffect

通过使用useEffect，可以将订阅、取消订阅等操作整合到一起，而不需要拆分到不同的生命周期函数中

useState

返回参数

1.当前的state

2.修改state的函数

基本使用规则

1.只能在函数最外层调用，不要在循环、判断或者子函数中调用

2.只能在React函数组件中调用

Fiber

Redux

Redux的工作流程

1.组件发出状态改变

2.通过action向store发出申请

3.store寻找不到的话在reducer中进行查找

4.将结果返回给component

操作步骤

1.定义一个action

2.action中填写type和value

3.通过store.dispath将值进行存储

4.reducer对实际的值进行了操作

React-Redux

使用方式

将store中的值通过props传递给组件

connect接收两个参数

1.state到props的映射关系函数

2.dispatch到props的映射关系，需要return一个对象，传递一个dispatch参数，可以在props中调用return对象中的函数

路由实现原理

hash路由

hash:url中#后面的部分

原理：当hash发生改变后，不会被包含在http请求中，因此对后端完全无影响

实现思路：监听window对象的onhashchange事件

history路由

使用history对象中的pushstate和replaceState方法

两个方法提供了对历史记录修改的功能，输入后url会发生改变，但不会触发请求

使用方法

参数对象

stateObj

title

url

监听window对象的onpopstate，传入eventObj，通过判断eventObj的值来判断是否需要更新

Vue

标准、规范、性能优化与兼容性

性能优化

事件委托:把事件添加到父元素，根据event.target来判断具体触发事件的子元素

不使用事件处理程序时手动删除事件处理程序

浏览器兼容性问题

基本概念

产生原因：市面上浏览器的种类众多，不同浏览器使用的内核不同，所以对网页的解析会有一定出入

常见浏览器的内核

谷歌浏览器：Blink

IE：Trident

Safari：Webkit

html

css

不同浏览器默认的margin和padding不同：css里直接*{padding:0,margin:0}

IE6图片下方有空隙：给图片设置display

IE6设置浮动后，外边距margin为值的两倍（IE6双边距问题）：display:block

IE6中没有min-width的概念，使用min-width默认为width

javaScript

IE10不支持ES6新的数据结构

IE10 addEventListener不支持inputText事件

IE10不支持箭头函数

IE10不支持默认参数

W3C标准

前端规范

ES6 Module

CommonJs

AMD

前端架构

MVC、MVVM

MVC

M:Model

V:View

C:Controller

MVVM

前端工程化工具

npm

git

基本概念

工作区

工作区为本地仓库可以看到的目录

暂存区

.git文件夹中为版本库，暂存区为其中的一个区域

文件提交步骤

1.初始化一个新的本地仓库

git init

2.将文件添加到本地仓库

git add 文件名

git add .(将当前目录下所有文件全部添加到本地仓库,注意不要忘记小数点)

3.将代码进行提交

git commit -m '提交信息'

查看版本历史

git log 文件名（若不加文件名则列出所有文件的历史）

比较未提交文件差异

git diff 文件名(若不加文件名则列出所有文件的差异)

删除某个文件

git rm 文件名

恢复某个文件

git checkout 文件名

从远程克隆某个仓库

git clone 仓库地址

分支

概念：git每次提交，都会把它们串成一条时间线，这条时间线就是一条分支。

主分支

在仓库创建后，会有一条主分支，叫做master分支

HEAD

HEAD可以理解为一个指针，指向当前的分支

创建分支的方式

创建一个新的指针，指向当前提交，改变HEAD指针，指向该指针

命令行写法

1.git branch 分支名

2.git checkout 分支名

简写

git checkout -b 分支名

合并分支

1.使用git checkout 分支名 切换到要合并其他分支的分支

2.使用git merge 分支名 将其他分支合并到当前分支

webpack

基本流程

1.找到项目的入口文件

2.通过入口文件绘制依赖关系树

3.生成chunk

4.对chunk中不同类型的文件进行处理

5.通过bundle将最后的项目输出

核心概念

1.Entry

指示webpack以哪个文件作为入口文件进行打包，并进行分析构建内部依赖图

2.Output

指定webpack打包后的静态资源bundles输出到哪里去，以及如何命名

3.Loader

让webpack能够去处理非JavaScript文件

4.Plugins

用于执行范围更广的任务，包括打包优化、压缩等

5.Mode

指示webpack以相应的模式运行

development

production

标准目录结构

build 放置打包好的静态文件

src 资源文件

index.js 入口文件

配置文件

webpack.config.js

loader的使用流程

1.下载

2.配置文件中的module中引入

plugin的使用流程

1.下载

2.配置文件中require

3.在plugins中配置

代码优化

css优化

1.分离css

mini-css-extract-plugin

2.代码压缩

optimize-css-assets-webpack-plugin

3.兼容度

postcss-loader

js优化

1.js语法检查

eslint全家桶（airbnb）

2.兼容度处理

babel

babel/polyfill(全部引入)

core-js(按需引入)

性能优化

优化的种类

开发环境性能优化

1.优化打包速度

HMR

模块热替换：只替换打包修改的模块

2.优化调试功能

Source-map

源代码到构建代码的映射

inline内联source-map

内联在index.js中

outline外联source-map

在外部的文件中

eval source-map

在对应的文件中

生产环境性能优化

1.打包速度

1.oneOf:

以下loader只会匹配一个

2.缓存

babel缓存

文件资源缓存

使用hash/chunkHash/chontenthash去区别缓存

3.树摇（tree shaking），减少打包体积

去除无用的代码

前提：必须使用ES6 module，开启production模式

4.代码分隔（code split）

5.多进程打包

2.代码运行的速度

6.dll

node

特点

1.异步IO

2.事件与回调函数

3.单线程

4.跨平台

CommonJS规范

CommJS的出现主要为解决JS没有标准的缺陷

模块规范

require

expors

引入模块的步骤

1.路径分析

2.文件定位

3.编译执行

终端程序常用api

process对象

输出

stdout

stderr

输入

stdin

参数

argv

数组开头始终是node

第二位为执行文件的路径

剩余位为读取的参数

cwd

获取当前工作目录

chdir

改变当前工作目录

exit

退出程序

__dirname

当前执行文件执行时所在的目录

文件读写

fs

readFile

writeFile

readdir

stream

createReadStream

可监听stream的data、end事件

事件循环

高阶函数

可以将函数作为参数或者可以把函数当做结果返回的函数

笔试

C++常用库

字符转数字

数字转字符

<string> to_string()

Map

include<map>

map<int,string> test

map.find:查找元素是否存在

map的使用

插入

insert(pair<a,b>(va,vb))

查找

使用迭代器map<a,b>::iterator iter

iter=map.find(value)

若存在，则iter!=map.end()

iter->first:key

iter -> second:value

vector

声明

vector<T>

添加

push_back():末尾添加

vec.insert(vec.begin()+n)：插入到第n项

清空

clear()

判断是否为空

empty()

遍历

使用iterator

反序

<algorithm> reverse(a.begin(),b.begin())

判断是否为数子或字母

<ctype.h> isalnum

大写转小写

<ctype.h> tolower

操作系统

进程和线程

区别

进程是资源分配的基本单位

线程是cpu调度的基本单位

进程的基本通讯方式

管道

无名管道

有名管道

信号量

一般为资源的引用记数，锁机制

消息队列

信号

共享内存

套接字（不同设备间通讯）

线程的基本通讯方式

锁机制

信号量机制