前端脑图
2021-05-27 16:41:01 0 举报AI智能生成
前端知识
作者其他创作
大纲/内容
脑图
微信公众号
订阅号
小程序
sunny-ngrok
内网传透
接口配置
URL
Token
co-wechat
客服消息应答
签名认证
我们验证微信
服务API调用
mongoose
集成了验签
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压缩
压缩方式
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动态加载
动态加载 ES6 代码
<script type=\"module\">
路由级别拆解代码
React.lazy()
plugin-syntax-dynamic-import
组件加载
组件懒加载
组件预加载
keep-alive
单元测试
TDD
test-driven development
通过测试推动开发进行，从调用者的角度出发，尝试函数逻辑的各种可能性，进而辅助性增强代码质量
BDD
Behavior-driven development
通过预期行为逐步构建功能块，通过与客户讨论对预期结果又初步认识， 尝试达到预期效果
前端管理
管理类型
高P架构师线路
最认可，很难
纯管理
程序员不擅长
技术管理
最可行
自由职业
规划
需要资源
标准
开源
投入产出
团队成长
新的思路、骚点子
规划原则
目标明确化
目标可量化
目标可达到
目标和老板的一致性
目标时间限制
成长维度
硬技能
算法
Vue3
react
node
软技能
运营
执行
技术影响力
社交
技术方向
框架
组件
脚手架
通用框架
研发流程
cicd
规范
校验
开发工具
监控报警
lowcode
全栈方向
es6
set
类似于数组，但成员值唯一，没有重复
WeakSet
成员只能是对象，不能是其它类型的值
中的对象都是弱引用，垃圾回收机制不考虑WeakSet对该对象的引用
map
类似于对象，也是键值对的集合，但键值的范围不限于字符串
map的键实际是是和内存地址绑定的
map转化数组
[...myMap]
数组转为map
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()创建的
预览模块
遮盖禁止相关元素的事件
显示模块
定位判断显示位置
阻止很多默认事件
两层
显示区
编辑区类似弹窗
拖拽
拖动事件
在拖动目标上触发事件
ondragstart
用户开始拖动元素时触发
ondrag
元素正在拖动时触发
ondragend
用户完成元素拖动后触发
释放目标时触发的事件
ondragenter
当被鼠标拖动的对象进入其容器范围内时触发此事件
ondragover
当某被拖动的对象在另一对象容器范围内拖动时触发此事件
ondragleave
当被鼠标拖动的对象离开其容器范围内时触发此事件
ondrop
在一个拖动过程中，释放鼠标键时触发此事件
结束时获取组件名字和相对位置把当前拖动的元素添加一条到数据数组组中
DataTransfer
保存拖动并放下（drag and drop）过程中的数据
dropEffect
copy
在新位置生成源项的副本
move
将项目移动到新位置
link
在新位置建立源项目的链接
none
项目可能禁止拖放
左菜单
菜单配置项
list
用来循环渲染左侧菜单
蒙版盖着不让操纵
方便根据组件key查找组件
数据 []
定位
top属性
left属性
组件key
componentKey
是否要位置居中
是否选中
focus
事件传递
...custom
中
数据
根据数据渲染出一个内容
位置移动
鼠标事件
onmousedown
onmouseenter
onmouseleave
onmousemove
onmouseover
这里要监听移动距离，改变当前元素的位置
onmouseout
onmouseup
阻止事件
preventDefault()
通知浏览器不要执行与事件关联的默认动作。
stopPropagation()
\t不再派发事件
addEventListener添加了事件
移除removeEventListener
贴边对齐
XY两条线
循环未选中元素计算X，Y
顶对顶
顶对底
中间对中间
画布中间对齐
右键菜单
oncontextmenu右键事件
拖拽改变大小
cursor鼠标显示方式
鼠标事件，注意阻止默认默写事件捕获冒泡等
e.stopPropagation()
根据横纵向调整或角上宽高
右
属性设置
根据数据和选中的key
渲染props和model
修改后更新数据
顶处理项
快捷键
name
命令唯一标识
keyboard
命令监听的快捷键
execute
命令被执行的时候，所做的内容
一个命令的状态库
命令的序列index
命令队列[]
命令对象数组
命令方法对象{}
focusData
焦点数据
删除
未选中的保留
更新数据
保留记录
添加一个重做的方法
添加一个撤销的方法
拖拽时
添加一组保留记录
move在中间移动时
键值监听
一种方法就是把数据推到一个数组里，控制前进后退
数据可能越来越多
导入导出数据
主要是对数据的操作
对数据格式有要求要和给的结构一致并做校验
置顶
设置一个大的
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
常见
GET在浏览器回退时是无害的，而POST会再次提交请求。
GET产生的URL地址可以被Bookmark，而POST不可以。
GET请求会被浏览器主动cache，而POST不会，除非手动设置。
GET请求只能进行url编码，而POST支持多种编码方式。
GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
GET请求在URL中传送的参数是有长度限制的，而POST么有。
对参数的数据类型，GET只接受ASCII字符，而POST没有限制。
GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。
GET参数通过URL传递，POST放在Request body中。
重点
GET会产生一个TCP数据包，而POST会产生两个TCP数据包。
对于GET方式的请求，浏览器会把http header和data一并发送出去，服务器响应200(返回数据);
而对于POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok(返回数据)。
注意一点，并不是所有的浏览器都会发送两次数据包，Firefox就发送一次
请求报头
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
非归零编码
曼彻斯特编码
FTP
DNS
跨域
jsonp
document.domin
iframe、hash
CORS（cross-origin-resource-sharing）
服务器中转代理
其它
postMessage和onMessage
nodejs中间件
WebSocket协议跨域
link、script、img、background：URL（）、@font-face()等均不受跨域
0 条评论
回复 删除
下一页
