杂项
计算机语言
计算机不能理解高级语言,只能理解机器语言,所以需要把高级语言转为机器语言,才能只执行高级语言编写的程序。根据执行语言的流程,把语言分为编译型语言和解释型语言。
编译型语言:
- 程序在执行之前,把程序编译成为机器语言的文件,运行时不需要重新翻译,可以直接使用。
程序执行效率高,依赖编译器,跨平台性差些。如C、++、90等
解释型语言:
- 程序在运行时才翻译成机器语言,每执行一次都要翻译一次。
程序执行效率低,依赖解释器,跨平台性好。
编译器执行过程:
- 源代码-->
语言分析
--> AST-->语义分析
--> 中间代码-->代码优化
--> 二进制文件-->直接执行
--> 执行
解释器执行过程:
- 源代码-->
语言分析
--> AST-->语义分析
--> 字节码-->解释执行
--> 执行
JS执行过程:
- JavaScropt-->
词法分析
--> 词法单元(Token)-->语法分析
--> 抽象语法树(AST)-->解释
--> 字节码-->优化字节码
--> 机器码--> 执行
基础算法
- 算法的复杂度分析。
- 排序算法,以及他们的区别和优化。
- 数组中的双指针、滑动窗口思想。
- 利用 Map 和 Set 处理查找表问题。
- 链表的各种问题。
- 利用递归和迭代法解决二叉树问题。
- 栈、队列、DFS、BFS。
- 回溯法、贪心算法、动态规划。
react原理
- 虚拟dom
- fiber架构
- 工作单元fiber初始化
- 遍历子节点和兄弟节点
- 构建子节点fiber树
- diff算法实现
- 渲染成真实dom
- 浏览器空闲
- 消息通讯
- 模拟React调度器
- 面试篇总
vue原理
- vue-模板编译(mustache模板引擎)
- vue-AST抽象语法树
- vue-数据响应式原理
- vue-虚拟dom和diff算法
- vue-指令和生命周期
- new Vue初始化过程
- vue-computed原理
- vue-nextTick原理
Figma 的 MCP
Figma 的 MCP 是指 Multiplayer Collaboration Platform(多人协作平台) ,这是 Figma 背后核心技术的核心名称之一。它使得多个设计师可以实时协作编辑同一个设计文件,就像 Google Docs 那样。
Figma 实现以下功能的技术基础:
- 多人同时在线编辑
- 实时同步更新
- 在线评论与反馈
- 历史版本追踪
- 用户光标和状态显示(谁在做什么)
MCP 的核心能力
功能 | 描述 |
---|---|
✅ 实时协同编辑 | 多个用户可同时在一个设计文件中工作,彼此的操作会即时同步 |
✅ 光标与状态显示 | 可以看到其他用户的鼠标位置、正在选择的元素、当前操作等 |
✅ 文档历史版本 | 所有变更都会被记录,支持回退到任意时间点 |
✅ 网络断开自动重连 | 即使网络中断,也能自动重新连接并同步更改 |
✅ 权限管理 | 支持不同权限等级:查看、评论、编辑、管理员 |
技术原理简析(基于公开资料)
1. Operational Transformation (OT) 或 Conflict-Free Replicated Data Types (CRDTs)
用于处理多用户并发编辑时的数据一致性问题。
- OT 是 Google Docs 使用的经典算法。
- CRDTs 是一种更现代的方式,适合分布式场景。Figma 很可能使用的是自研的、类似 CRDT 的数据结构来高效处理文档变更。
2. WebSockets + 自定义协议
Figma 客户端通过 WebSocket 与服务器保持长连接,用于:
- 同步文档状态
- 推送用户行为(如选中元素、输入文字)
- 传输二进制资源(如图片)
3. 客户端-服务端架构
- 每个用户运行一个浏览器端的设计“客户端”
- 所有变更先提交给 Figma 的服务器进行合并和广播
- 服务器负责协调所有用户的操作,避免冲突
TS解释文件
vite-env.d.ts
/// <reference types="vite/client" /> // TS引入文件时声明