前端技能思维导图模板_ProcessOn思维导图、流程图

js

类型转换

数据类型

8个基本数据类型（存放在栈中）

一个引用类型（值存放在堆中，指针存在栈中）

强制转换

隐式转换

面试题

闭包

能够读取其他函数内部的函数

作用(本质)

正常函数在执行完毕后会被垃圾回收掉，
但是闭包可以让作用域里的变量，在函数执行完毕后不被垃圾回收

节流防抖

防抖（debounce 鼠标滚轮事件）

对于频繁执行的一个事件，给它限定一个时间后再生效

节流（throttle 用户疯狂点击或滚动）

对于持续触发的函数，保证一段时间内只触发一次

防抖和节流能有效减少浏览器引擎的损耗，防止出现页面堵塞卡顿现象

如何实现一个深拷贝（解决循环引用问题）

原型，原型链，构造函数，实例对象

proto与prototype的区别

rxjs

RxJS：冷热模式的比较

安全

关于a标签target为_blank时，要加上rel="noopener noreferrer"

计算机网络

https（HTTP+SSL(TLS)）加密（握手）的过程

条件

首先服务器拥有数字证书签发机构(CA)颁发的数字证书，一般为收费。
CA颁发给我们的网站管理员，我们的管理员将这个数字证书放到我们的服务器上。

流程

1、服务器将携带的公钥向数字证书机构申请证书。
2、数字证书机构用自己的私钥对公钥签名颁发证书，并返回给服务器。
3、服务器将申请携带公钥的证书分发给客服端。
4、客户端验证证书，证书机构通过验证，或者用户接受不受信任的证书(非权威机构颁发的证书)。获取到公钥。
到这一步，在证书保证下服务器拥有私钥，客户端拥有公钥，可进行非对称性加密。
5、使用公钥加密报文发送给服务器，其中携带随机串。其中的随机串用户传输数据时进行对称加密
6、服务器使用私钥解密。获取报文信息及随机串。
7、解密后服务器发送握手消息给客户端。
8、客户端接受握手消息，握手结束，双方确定加密算法(使用随机串确定的对称性加密)，开始传输。
注意：确认加密算法的过程使用的是非对称性加密。
数据传输过程使用对称性加密

tcp与http

http2的新特性

HTTP与HTTPS的区别

HTTP

直接通过明文在浏览器和服务器之间传递信息

传统的HTTP报文是直接将报文信息传输到TCP然后TCP再通过TCP套接字发送给目的主机上

HTTPS

采用 对称加密 和 非对称加密 结合的方式来保护浏览器和服务端之间的通信安全

对称加密算法加密数据+非对称加密算法交换密钥+数字证书验证身份=安全

HTTPS是HTTP报文直接将报文信息传输给SSL套接字进行加密，SSL加密后将加密后的报文发送给TCP套接字，然后TCP套接字再将加密后的报文发送给目的主机，目的主机将通过TCP套接字获取加密后的报文给SSL套接字，SSL解密后交给对应进程

构建及打包

构建

gulp

侧重于前端开发过程的控制管理（像是流水线）

通过给gulp配置不通的task来构建整个前端开发流程。
（gulp.task()方法，比如启动server、sass/less预编译、文件的合并压缩等等）来让gulp实现不同的功能。

配置服务器，实现自动发布

模块打包

webpack

优化打包大小

Tree Shaking

提升打包速度

动态导入

提取公共模块

思想是“万物皆为模块”，通过loader（加载器）和plugins（插件）对资源进行处理

缓存

http缓存

304/200

本地缓存

cookie、session、localStorage、sessionStorage的不同

ngrx-store/redux/vuex

框架

angular

核心模块

DI依赖注入

数据绑定

ng-content,ng-template,ng-container

form源码

纯管道和非纯管道

@Pipe({name:'pipeName',pure:isPurePipe})

纯管道：只有输入值发生纯变更时才执行

非纯管道：只在每个组件的变更检测周期执行

自定义管道默认是非纯函数

变更检测

ChangeDetectionStrategy

onPush检测机制

告诉angular在执行检测时跳过当前组件内部的检测。
只有当组件的input输入值（基本类型）有变化或内部有事件event输出的时候，
或者组件再次通知angular的检测机制来更新组件(ChangeDetectorRef.markForCheck)，
但是如果input的值是引用类型也不会触发检测。

default

某些只是子组件的数据变化，angular会从父组件开始向下检测，
一旦检测到有数据变化就重新渲染页面，虽然很方便，但是如果组件很多非常耗费性能，
所以有了onpush优化

diff算法

装饰器

vue

react

生命周期里不能写if判断

useState参数第二个为[]

pipecook

nextjs

flutter

ts

type:可以声明联合类型

class：编译之后依然存在

interface：编译之后为空

范型T：可以理解为any

css

BFC

概念：

块级格式化上下文，可以理解为一块独立的区域，是web页面中盒子模型的CSS渲染模式

布局规则：

1.BFC内部的子元素，在垂直方向，边距会发生重叠

2.BFC在页面中是独立的容器，外面的元素不会影响里面的元素，反之亦然

3.BFC区域不与旁边的float box区域重叠。（可以用来清楚浮动带来的影响）

4.计算BFC的高度时，浮动的子元素也参与计算

如何生成BFC

1.overflow:不为visible,可以是hidden,auto;

2.浮动中：float的属性值不为none。只要设置了浮动，当前元素就创建了BFC

3.定位中：只要position的值不是static或者relative即可，可以是absolute或者fixed，就生成了一个BFC

4.display为inline-block,table-cell,yable-caption,flex,inline-flex

应用

1.让margin不再折叠

常规文档流，两个兄弟盒子直接的间距是以较大的那个margin为准，如何让其margin等于两个盒子的margin和呢？？
解决：让其中一个盒子处于BFC中。

2.BFC区域不与float区域重叠

3.防止文字环绕着浮动的盒子

4.清除浮动

ES6,ES7,ES8

ES6/ES2015

变量

var,定义全局变量（ES5,ES6）

可以重复声明，没有块级作用域，不能限制

let,定义局部变量

let和const作用：1.支持块级作用域；2.禁止重复声明；3.控制修改

const,定义常量

我们要习惯用 let 声明，减少var声明带来的污染全局空间

环境（为了兼容ES5）

写es6语法的js代码，通过Babel将ES6转换为ES5

函数扩展

箭头函数

传统：funtion fn1(a,b){return a+b;}
ES6:var fn2=(a,b)=>a+b;

this指向

普通函数this指向

如果是函数调用，this指向调用者

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

作为构造函数调用，this指向新对象

严格模式下（设置了'use strict'），this为undefined

当使用call，apply，bind（ES5新增）绑定的，this指向绑定对象，指向为空时，默认调用全局对象

call,bind,apply的区别？？

call和apply的第一个参数都是this,call后面跟一堆参数列表，而apply只有this,和一个数组，
bind和call都是跟着一堆参数列表，区别在于bind返回的是一个改变了上下文this的函数，不会立即执行
bind实现函数柯里化如图：

箭头函数this指向

默认参数值

传统： function fn(param) {
let p = param || 'hello';
console.log(p);
}
ES6: function fn(param = 'hello') {
console.log(param);
}

提醒⏰：默认值的后面不能有没有默认值的变量
比如：(a,b,c)三个参数，如果给b设置了默认值，那么c必须也要有默认值

扩展运算符

扩展运算符与rest运算符的区别？？？

对象扩展运算符

rest运算符

当传入的参数不确定时，使用rest运算符

模块化

历程：commonJS、AMD规范（RequireJS）、CMD规范（SeaJS）；import & export

promise

Promise

概述：

Promise对象：代表了未来某个将要发生的事件（通常是一个异步操作）
promise对象可以将异步操作以同步的流程表达出来，解决了回掉地狱的问题（避免层层嵌套的回掉函数）

promise对象的三个状态

pending

fullfilled

rejected

当面试关问你Promise的时候，他究竟想听到什么？

promise与observable的区别是什么？如何使用?

异常处理

1.使用reject

2.使用new Error()

3.reject一个new Error()

Symbol

Symbol是函数，但不是构造函数

创建一个Symbol数据类型：
let s=Symbol();
typeof s;//symbol
s;//Symbol()

for in,for of 遍历时不会遍历Symbol属性

将Symbol作为对象属性值时，不能用点.,应该用属性选择器的方式:obj[mySymbol]='hello';

Symbol()是函数，所以可以传参，通过参数的不同作为标识

可以用来定义常量：const MY_NAME=Sybol('my_name');

字符串，数组，对象的扩展

字符串扩展

1.includes(str); //是否以包含某个字符串
2.startsWith(str);//是否以指定字符串开头
3.endsWith(str);//是否以指定字符串结尾
4.repeat(count);//重复指定次数

数字扩展

1.Number.isFinite(i):判断是否为有限大的数;
2.Number.isNaN(i):判断是否为NaN;
3.Number.isInteger(i);
4.Number.parseInt(str)：将字符串转换为对应的数值
5.Math.trunc(i):去除小数部分；

数组扩展

1.Array.from(伪数组/可遍历的对象);将伪数组转换为真数组
2.Array.of(v1,v2,v3)；将一系列值转换为数组
3.find(function(item,index,arr){return true})；找出第一个满足条件（返回true）的元素
4.findIndex(function(item,index,arr){return true});找出第一个满足条件（返回true）的元素的index

对象扩展

Object.is(v1,v2);判断两个数组是否完全相等，底层是通过字符串来判断的

Object.assign(target,source1,source2...);将源对象的属性追加到目标对象上，如果对象里属性名相同，会被覆盖（将多个对象合并为一个新对象）；

_proto_属性：对象关联

优势

增加了很多功能上的不足：常量，作用域，对象代理，异步处理，类，继承等

使用babel语法转换器，支持低端浏览器

流行的库基本都是基于 ES6 构建。 React 默认使用 ES6 标准开发

ES7/ES2016

Array.prototype.includes()

查找数组里是否存在某值，返回true/false

includes与es6的indexof 区别

返回值不同

includes直接返回布尔，indexof返回下标或者-1

NaN的处理

都采用===比较，但是indexof,对NaN的处理是：NaN!==NaN

求幂运算符

基本用法

可与+=一起使用

Reflect

编写校验

Proxy

ES8/ES2017

async await

概念：同步流程解决异步操作，异步函数，
async可支持返回Promise和同步的值（return Promise.resolve(value)）
await用于一个异步操作之前，表示要“等待”这个异步操作的返回值, await也可以用于一个同步的值🌰

本质：Generator语法糖

语法：普通函数前面加上async就成了async函数

特点：
1.不需要像Generator去调用next方法，遇到await等待，当前的异步操作完成就往下执行；
2.async返回的总是Promise对象，可以用then方法进行下一步操作；
3.async取代Generator函数的✳️*，await取代Generator的yield;
4.语意上更为明确，使用简单，暂时无副作用；

使用方式

1.函数声明： async function foo() {}
2.函数表达式： const foo = async function() {}
3.对象的方式： let obj = { async foo() {} }
4.箭头函数： const foo = async () => {}

异常处理

new Error()

与promise链和Generate的对比

async函数中可以包含多个异步操作,
同Promise链一样，有一个promise被reject，后面的将不再执行，立马进入.catch()中；

Object.entries()

Object.values()

字符串填充

Object.getOwnPropertyDescriptors()

函数参数支持尾部逗号

修饰器Decorator

设计模式

桥接bridege

观察者模式observe

责任链模式

代理模式

浏览器及V8引擎

内核（渲染页面）

渲染页面的过程

V8（执行js）

v8内部结构

执行js代码的过程

js编译过程

词法分析

从字符串到Token

Token类型：关键字，标识符，字面量，操作符等

语法分析

从Token到AST

语义分析

语义规则

表达式规则：如加法运算的规则

各种语句规则：如循环语句的执行规则

作用域相关规则：比如变量名称的冲突和遮蔽

......

理解语义

分析内容

引用消解

类型计算

......

语义检查

中间代码

复用后端程序

解释执行

优化

源语言与目标语言的差异

程序员编程不够优化

生成目标代码

指令选择

寄存器分配

指令冲排序

node

错误优先回调函数

用于传递错误和数据，第一个参数永远是错误对象。用于检查程序是否出现错误，其余参数用于传递数据

算法（程序=算法+数据结构）

tree结构（递归算法）

实现tree结构

封装tree思路

数据结构

排序

如何判断链表有环