Git 常用指令

• git init 创建一个空 git 代码库或初始化现有的 git 代码库
• git clone 从远程克隆一个代码库到本地
• git pull 从远程仓库或其他本地分支获取更新并与当前仓库分支合并
• git push 将本地分支更新推送到远程仓库
• git fetch 从远程仓库获取更新
• git add 添加更新到暂存区
• git commit 提交暂存区到仓库区

常见前端网络安全漏洞

• XSS 攻击 - 跨站脚本攻击

攻击者向网站中注入恶意代码，使得其在浏览器中执行，并用于恶意目的如盗取客户端信息等

浏览器将恶意代码当成正常代码的一部分执行而导致

避免服务端拼接代码；充分转义将插入代码的内容；指定 CSP 策略，控制允许加载和执行的外部资源；敏感资源保护，如 Cookie 的 HttpOnly 策略、验证码等

• CSRF 攻击 - 跨站请求伪造攻击

攻击者诱导用户进入第三方网站，随后第三方网站向被攻击网站发送跨站请求，利用用户保存的登录态执行恶意操作

Cookie 会在同源请求中自动携带并发送给服务器

进行同源检测，利用 origin 头和 referer 头；设置 Cookie 为 SameOrigin，阻止第三方页面使用该 Cookie；启用 Cookie 双重验证，将 Cookie 放入请求参数；使用 CSRF Token，请求参数中使用专属 token 验证身份

语义化标签作用

• 优化 SEO，提升页面的搜索引擎的优先级
• 便于其他设备解析，如屏幕阅读器等，方便残障人员的访问
• 优化整体代码格式，增强语义化，便于代码的开发与维护
• 便于用户阅读，特别是针对样式丢失的情形

Vue diff 算法

1. 首先比较新老节点是否为同一节点，若不是的话则删除该节点并创建新节点以进行替换
2. 若为相同节点，则会对节点的子节点进行判断
3. 先判断是否属于一方无子节点而一方有子节点的情况
4. 若双方均有子节点，则判断如何对新老节点的子节点进行操作；若找到相同的子节点，则对子节点的子节点也递归进行比较

Vue3 相较于 Vue2 的区别

• Vue3 的响应式基于 Proxy 实现；Vue2 的响应式基于 Object.defineProperty 实现

• Vue3 更推荐使用 Composition API；Vue2 更推荐使用 Options API

• Vue3 相较 Vue2 更利用 TypeScript 开发

• Vue3 相对于 Vue2 更支持 TreeShaking

组件通信方式

• props & emits 父=>子 & 子=>父

• provide & inject 祖=>孙

• ref|$refs 引用 & expose

• 事件总线 EventBus & $on|$emit

• $parent & $root

• $attrs

<keep-alive> 理解

在组件切换的时候，保存一些组件的状态防止重复渲染 DOM

LRU 缓存策略 - 找出最久未使用的数据并置换新的数据
通常基于链表实现，将新数据插至链表头部，若命中已有数据则将老数据移至链表头部，链表满后则丢弃链表尾部的数据

此时组件会增加 deactivated 与 activated 生命周期钩子，而替代 mounted 和 unmounted 生命周期钩子

nextTick() 理解

作为 Vue 内部的异步队列的调用方法同时提供给开发者使用，核心是利用了如 Promise、MutationObserver、setImmediate、setTimeout 等原生 JavaScript 方法来模拟对应的微/宏任务的实现，本质是对 JavaScript 执行原理 EventLoop 的一种应用

通常在数据变化后执行的某个操作需要使用随数据变化而变化的 DOM 结构的时候或需在 created 生命周期内修改 DOM 结构时使用

MVVM 概念

Model - 数据模型，定义数据和业务逻辑

View - UI 视图，负责数据展示

ViewModel - 负责监听 Model 数据改变并控制视图更新，同时处理用户交互操作

HTTP2 与 HTTP1 区别

• HTTP2 是一个二进制协议

HTTP1.1 的报头必须是文本，数据体可以是文本或是二进制
HTTP2 的报头和数据体均为二进制，分别被称为头信息帧和数据帧

• HTTP2 实现头信息压缩

HTTP2 中头信息使用 gzip 或 compress 压缩后再发送
HTTP2 中客户端和服务器同时维护一张头信息表，所有字段存储在表中并生成索引号，头信息不会重复多次发送，后续头信息利用索引号避免重复发送

• HTTP2 支持多路复用

HTTP2 支持同时无序的发送多个请求或响应，从而避免队头堵塞的问题

• HTTP2 使用数据流的概念

因为 HTTP2 的数据包不是按序发送的，同个连接内的数据包可能属于不同的请求；因此 HTTP2 中将每个请求或响应的数据包均作为数据流给出唯一的编号，每个数据包均需标记数据流 ID，以表示其所属的数据流 ID

• HTTP2 支持服务器推送

HTTP2 允许服务器未经请求，主导向客户端发送资源，可以一定程度上减少延迟时间

HTTP3 与 HTTP2 区别

• 流量控制、传输可靠性

• 集成 TLS 加密功能

• 多路复用 - 同一物理连接上可以有多个独立的逻辑数据流

• 快速连接 - 基于 UDP，仅需 1~2 RTT 建立连接

TCP 与 UDP 区别

• TCP 是面向连接；UDP 是面向无连接

TCP 发送数据前必须建立连接后发送数据
UDP 发送数据前不建立连接直接发送

• TCP 是可靠传输，使用流量控制和拥塞控制；UDP 是不可靠传输，不支持流量控制和拥塞控制

TCP 连接通过给包编号并通过接收到数据后返回的 ACK 判断传输是否成功，从而确定是否重传数据；在出现拥塞时，会通过减小注入网络数据的速率和数量以缓解拥塞
UDP 不会进行检测包的发送成功与否，以恒定速率发送数据，不会根据网络状况调整发送速率

• TCP 只能是一对一；UDP 可以一对一或一对多或多对一或多对多

TCP 连接只有两个端点，只能进行点对点的数据传输
UDP 支持单播、多播、广播功能

• TCP 是面向字节流传输；UDP 是面向报文传输

TCP 连接在不保留报文边界情况下以字节流传输数据
UDP 连接在保留报文边界情况下以报文形式传输数据

• TCP 首部最小 20 字节到 60 字节；UDP 首部为 8 字节

• TCP 使用要求可靠连接的应用；UDP 适用于实时应用

常见 HTTP 状态码

• 200 OK 服务器成功处理
• 301 Moved Permanently 永久重定向
• 302 Found 临时重定向资源
• 304 Not Modified 使用客户端缓存
• 403 Forbidden 服务器拒绝资源访问
• 404 Not Found 服务器未找到资源或无原因的拒绝访问
• 500 Internal Server Error 服务器执行出错

TCP/IP五层协议

• 应用层 - 直接为应用进程提供服务 | HTTP HTTPS DNS FTP SMTP
• 传输层 - 负责为主机的进程提供通信服务 | TCP UDP
• 网络层 - 负责为主机提供通信服务 | IP寻址
• 数据链路层 - 负责将数据封装为帧并在链路间传输 | MAC地址
• 物理层 - 负责保证数据在物理介质上传输