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

微信公众号

订阅号

小程序

sunny-ngrok

内网传透

接口配置

URL

Token

co-wechat

客服消息应答

签名认证

我们验证微信

服务API调用

mongoose

co-wechat

集成了验签

co-wechat-api

集成了获取access_token和微信api

微信小程序

详情本地设置

不校验合法域名

app.json

配置项

地理位置

pages

wx.

调用原生能力api

wx.request

接口请求

wx.cloud.callFunction

调用云函数

wx.scanCode

扫码

子主题

cloudfunctions

云函数文件夹

node.js函数

上传云函数

云端测试

本地测试

右键终端。npm i，这里就像运行node一样

cloud.database()

其实是mogo数据库

初始化数据库

添加索引建立主键

collection('book').add({data:{内容}})

云开发

project.config.json

自动添加，老项目可以手动添加

云开发控制台

数据库

创建集合

子主题

文件上传

文件格式校验

文件后缀

二进制头信息

体验要好

进度条UI优化

粘贴、拖拽上传

大文件、网络不稳定

切片上传

文件唯一标示

限制上传次数

TCP慢启动逻辑

控制算法

断点续传

秒传

md5值计算

大文件卡顿

web-worker

time slice requestIdCallback

抽样hash（布隆过滤器）

fs模块读取文件

返回的进行切割buffer.slice

生成多个小文件

前端监控

监控目标

稳定性

JS报错，Promise的异常

方法

JS报错

window.addEventListener('error'）

promise报错

window.addEventListener('unhandledrejection'）

资源异常

script、link等资源加载异常

接口错误

ajax或fetch请求接口异常

白屏

页面空白

用户体验

性能监控

lighthouse

performance API

指标

TTFB

time to First Byte

首字节到达时间点

FP

first paint

首次绘制，标记浏览器渲染任何在视觉上不同于导航前屏幕内容的时间点

FCP

First contentful Paint

⾸次内容绘制

LCP

Largest Contentful Paint

最⼤内容绘制时间

SI

Speed Index

速度指标

TTI

Time to Interactive

可交互时间

TBT

Total Blocking Time

总共阻塞时间，计算的是从 FCP 到 TTI 之间，主线程阻塞的总时间

FID

first input delay

首次输入延迟

CLS

Cumulative Layout Shift

累计布局偏移。

业务

PV

page view即页面浏览量或点击量

UV

指访问某个站点的不同IP地址的人数

页面停留时间

用户在页面的停留时间

集成好的

阿里云ARMS前端监控

神策数据

Ptmind Ptengine

GrowingIO

性能优化

loading 提示

压缩

gzip

Vue的gzip压缩

压缩方式

gzip

zopfli

brotli

服务端渲染

Nuxt.js、Next.js

(伪)服务端渲染

prerender-spa-plugin

开启 HTTP2

HTTP

缺陷：线程阻塞，在同一时间，同一域名的请求有一定数量限制，超过限制数目的请求会被阻塞。

HTTP/1.1 存在的问题:

TCP 连接数限制

线头阻塞 (Head Of Line Blocking) 问题

Header 内容多，而且每次请求 Header 不会变化太多，没有相应的压缩传输优化方案

明文传输不安全

HTTP2

二进制协议

采用二进制格式而非文本格式；

完全多路复用

完全多路复用，而非有序并阻塞的、只需一个连接即可实现并行；（解决了线头阻塞的问题，与Http1最重要的区别）

报头压缩

使用报头压缩，降低开销

服务器推送

HTTP协议通常承载于TCP协议之上，在HTTP和TCP之间添加一个安全协议层（SSL或TSL），这个时候，就成了我们常说的HTTPS.

开启浏览器缓存

骨架屏

React: antd 内置的骨架图Skeleton方案

Vue: vue-skeleton-webpack-plugin

Tree Shaking

减少包体积

polyfill动态加载

解决这个问题的方法很简单,直接引入 <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script> 即可

动态加载 ES6 代码

路由级别拆解代码

React.lazy()

plugin-syntax-dynamic-import

组件加载

组件懒加载

组件预加载

keep-alive

单元测试

TDD

test-driven development

通过测试推动开发进行，从调用者的角度出发，尝试函数逻辑的各种可能性，进而辅助性增强代码质量

BDD

Behavior-driven development

通过预期行为逐步构建功能块，通过与客户讨论对预期结果又初步认识，尝试达到预期效果

前端管理

管理类型

高P架构师线路

最认可，很难

纯管理

程序员不擅长

技术管理

最可行

自由职业

规划

业务

需要资源

标准

开源

投入产出

团队成长

新的思路、骚点子

规划原则

目标明确化

目标可量化

目标可达到

目标和老板的一致性

目标时间限制

成长维度

硬技能

算法

react

node

小程序

软技能

运营

执行

技术影响力

社交

技术方向

框架

组件

脚手架

通用框架

研发流程

cicd

规范

校验

开发工具

监控报警

lowcode

全栈方向

es6

set

类似于数组，但成员值唯一，没有重复

WeakSet

成员只能是对象，不能是其它类型的值

中的对象都是弱引用，垃圾回收机制不考虑WeakSet对该对象的引用

map

类似于对象，也是键值对的集合，但键值的范围不限于字符串

map的键实际是是和内存地址绑定的

map转化数组

[...myMap]

数组转为map

new Map([[true,7]])

map 转对象

借助for of循环

对象转map

借助for of循环在.set()

WeakMap

只接受对象为键值

键名不计入垃圾回收机制

promise

状态that.state

三个唯一的状态

const PENDING = 'pending'

const RESOLVED = 'resolved'

onst REJECTED = 'rejscted'

一个值that.value = null

两个储存回调的数组

that.resolvedCallBacks = []

that.rejectedCallBacks = []

resolve方法

改变状态执行回调方法

reject方法

改变状态执行回调方法

创建时参数callback的执行

myPromise.prototype.then方法

根据状态

pending时 push回调函数

因为有可能异步

resolved或rejected时执行回调函数

如果执行后还是一个promise

执行这个promise

链式调用返回新的promise

js

call

使用 call() 方法，您可以编写能够在不同对象上使用的方法。

给后对象加一个方法，执行之后在删除

apply

与call主要是参数不同

call() 方法分别接受参数。

apply() 方法接受数组形式的参数。

bind

bind() 方法创建一个新的函数

在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。

防抖

防止抖动，如果n秒内再次触发，重新计时

节流

在规定的时间内只发生一次，如果这段时间内多次触发函数，只执行一次，只执行第一次的触发

时间的最后触发

利用定时器，改变变量判断

时间的开始触发

判断时间是否到时

面试

面前准备

你不知道的js

犀牛书

红宝书

简历

简单清晰突出亮点

自我介绍

简述亮点

职业经历

软素质

一面

基础概念

底层原理

算法

手写

二面

项目应用场景

项目中的困难

技术

排期沟通等

重构的设计思路及重构优势

实现某一功能的思路

开放性问题，逻辑思维

三面

综合素质

逻辑思维能力

性格

优缺点等

四面

坚持底线（不要透露），争取预期

个人总结

面试问，你想招一个怎样的人呢？能达到怎样的能力才符合你的预期

优势劣势

优势:不断的主动的去学习吧，并不是遇到问题才去学，而是在闲暇的时候就去学，腾讯课堂，哔哩哔哩找一些教程，去一些名人博客多关注一下，阮一峰，廖雪峰，林峰呀。去教育机构的课程里看一下了，专业的人做专业的事，也许他们的大纲里就是现在，或未来较热门的东西吧。

劣势呢，可能自己的创造能力差吧，也像像尤大师一样写出一些开原的库，给大家使用，以后也尽量把自己写的好的东西分享出来，一起检讨一起用。

在平时工作中，快速的定位问题，急速的解决问题的能力

可视化拖拽

存储模板，可.render()创建的

预览模块

遮盖禁止相关元素的事件

显示模块

定位判断显示位置

阻止很多默认事件

可视化拖拽

两层

显示区

编辑区类似弹窗

左菜单

菜单配置项

list

用来循环渲染左侧菜单

蒙版盖着不让操纵

map

方便根据组件key查找组件

数据 []

定位

top属性

left属性

组件key

componentKey

是否要位置居中

adjustPosition: true,

是否选中

focus

事件传递

...custom

中

数据

根据数据渲染出一个内容

位置移动

鼠标事件

onmousedown

onmouseenter

onmouseleave

onmousemove

onmouseover

这里要监听移动距离，改变当前元素的位置

onmouseout

onmouseup

阻止事件

preventDefault()

通知浏览器不要执行与事件关联的默认动作。

stopPropagation()

不再派发事件

addEventListener添加了事件

移除removeEventListener

贴边对齐

XY两条线

循环未选中元素计算X，Y

顶对顶

顶对底

中间对中间

画布中间对齐

右键菜单

oncontextmenu右键事件

拖拽改变大小

cursor鼠标显示方式

鼠标事件，注意阻止默认默写事件捕获冒泡等

e.stopPropagation()

根据横纵向调整或角上宽高

右

属性设置

根据数据和选中的key

渲染props和model

修改后更新数据

顶处理项

快捷键

name

命令唯一标识

keyboard

命令监听的快捷键

execute

命令被执行的时候，所做的内容

一个命令的状态库

命令的序列index

命令队列[]

命令对象数组

命令方法对象{}

focusData

焦点数据

删除

未选中的保留

更新数据

保留记录

添加一个重做的方法

添加一个撤销的方法

拖拽时

添加一组保留记录

move在中间移动时

添加一组保留记录

键值监听

一种方法就是把数据推到一个数组里，控制前进后退

数据可能越来越多

导入导出数据

主要是对数据的操作

对数据格式有要求要和给的结构一致并做校验

置顶

查询未选中的z-index,

设置一个大的

useModel

做了输入框的双向绑定

TS

有思路了，先定义规则，再实现它

rollup

tree-shaking

y原理作用于分析

magic-string

是一个操作字符串和生成source-map的工具

acorn

把代码转成抽象语法树

作用域链

是由当前执行环境与上层执行环境的一系列变量对象组成的，它保证了当前执行环境对符合访问权限的变量和函数的有序访问

区别

webp打包非常繁琐，打包体积比较大

代码拆分不如webpack

Rollup 也不支持模块的热更新

Rollup它能处理大多数 CommonJS 文件（通过插件）然而有些东西根本不能转译为 ES2015

Http

URL的输入到浏览器解析

DNS解析

网站和IP的转换

本地域名服务器查找

根域名服务器

com顶级域名服务器

DNS优化

DNS缓存

DNS负载均衡

发起TCP连接

字段分析

三次握手

第一次握手

客户端发送syn包(Seq=x)到服务器，并进入SYN_SEND状态，等待服务器确认；

第二次握手

服务器收到syn包，必须确认客户的SYN（ack=x+1），同时自己也发送一个SYN包（Seq=y），
即SYN+ACK包，此时服务器进入SYN_RECV状态；

第三次握手

客户端收到服务器的SYN＋ACK包，向服务器发送确认包ACK(ack=y+1)，此包发送完毕，
客户端和服务器进入ESTABLISHED状态，完成三次握手。

四次挥手

第一次挥手

客户端发送一个FIN，用来关闭客户端到服务器的数据传送，也就是客户端告诉服务器：我已经不会再给你发数据了

第二次挥手

服务器收到FIN包后，发送一个ACK给对方并且带上自己的序列号seq，确认序号为收到序号+1（与SYN相同，一个FIN占用一个序号）

第三次挥手

服务器发送一个FIN，用来关闭服务器到客户端的数据传送，也就是告诉客户端，我的数据也发送完了，不会再给你发数据了。

第四次挥手

主动关闭方收到FIN后，发送一个ACK给被动关闭方，确认序号为收到序号+1，此时，客户端就进入了TIME-WAIT（时间等待）状态

发起HTTP请求

请求行

请求行的格式

Method Request-URL HTTP-Version CRLF eg: GET index.html HTTP/1.1

常用的方法有

GET

POST

PUT

EDLETE

OPTIONS

HEAD

请求报头

Accept

用于指定客户端用于接受哪些类型的信息

Accept-Encoding

Accept-Encoding与Accept类似，它用于指定接受的编码方式

Connection

Keep-alive用于告诉客户端本次HTTP请求结束之后并不需要关闭TCP连接，这样可以使下次HTTP请求使用相同的TCP通道，节省TCP连接建立的时间。

请求正文

HTTP缓存

强制缓存

协商缓存

服务器处理请求并返回HTTP报文

状态码

浏览器解析渲染页面

回流

重绘

JS的解析

Event Loop

连接结束

OSI七层模型

应用层

表示层

会话层

传输层

TCP

UDP

网络层

IP

数据链路层

物理层

0 1

非归零编码

曼彻斯特编码

跨域

jsonp

document.domin

iframe、hash

CORS（cross-origin-resource-sharing）

服务器中转代理

其它

postMessage和onMessage

nodejs中间件

WebSocket协议跨域

link、script、img、background：URL（）、@font-face()等均不受跨域