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 验证身份

宏任务与微任务

宏任务（普通脚本，setTimeout()，setInterval()，I/O，UI 渲染）

微任务（Promise，MutationObserver）

特殊任务 process.nextTick() 当前 event loop tick 将结束时且下一个 event loop tick 将开始时执行

特殊任务 setImmediate() 下一轮 event loop tick 的 macrotask 阶段将结束时执行

事件循环（Node）

• 同步任务

• 发出异步请求

• 规划定时器生效的时间

• 执行 process.nextTick() 的回调

• timers - 处理 setTimeout() 和 setInterval() 的回调函数

• I/O callbacks - 剩余的回调函数（setTimeout()、setInterval()、setImmediate() 及关闭请求回调函数之外）

• idle, prepare - 内部使用

• poll - 轮询时间，等待还未返回的 I/O 事件

• check - 执行 setImmediate() 的回调

• close callbacks - 关闭请求的回调

继承模式

• 原型链继承

  1 2	SubType.prototype = new SuperType() SubType.prototype.constructor = SubType

• 构造函数继承

  1	SuperType.call(this, superProp)

• 组合式继承

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

  function SuperType(superProp){ this.superProp = superProp } SuperType.prototype.printSuperProp = function(){ console.log(this.superProp) } function SubType(superProp, subProp){ SuperType.call(this, superProp) this.subProp = subProp } SubType.prototype = new SuperType() SubType.prototype.constructor = SubType SubType.prototype.printSubProp = function(){ console.log(this.subProp) }

• 寄生组合式继承

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

  function SuperType(superProp){ this.superProp = superProp } SuperType.prototype.printSuperProp = function(){ console.log(this.superProp) } function SubType(superProp, subProp){ SuperType.call(this, superProp) this.subProp = subProp } SubType.prototype = Object.create(SuperType.prototype) SubType.prototype.constructor = SubType SubType.prototype.printSubProp = function(){ console.log(this.subProp) }

Object 三种冻结方式

• Object.preventExtensions() | Object.isExtensible() | 阻止添加属性，原型不可更改

• Object.seal() | Object.isSealed() | 阻止添加属性，阻止移除属性，阻止配置属性（configurable 为 false），原型不可更改

• Object.freeze() | Object.isFrozen() | 阻止添加属性，阻止移除属性，阻止修改属性值，阻止配置属性（writable、configurable 为 false），原型不可更改

盒模型概念

页面中的一个元素在页面中占有的空间

包括：盒子中的元素内容（content）、内边距（padding）、边框（border）和外边距（margin）所占据的空间

• 块状盒子
  • 盒子会占据单行
  • 宽度和高度指定有效
  • 内边距、边框和外边距会导致其他元素推离盒子
  • 若宽度未指定，默认盒子宽度会尽可能占据可用空间，通常为父元素宽度的100%
• 行内盒子
  • 盒子不会占据单行
  • 宽度和高度指定无效
  • 上下内边距、边框和外边距会起效，但不会导致其他行内元素推离盒子
  • 左右内边距、边框和外边距会起效，且会导致其他行内元素推离盒子

语义化标签作用

• 优化 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地址
• 物理层 - 负责保证数据在物理介质上传输

TCP 三次握手及四次挥手

• 客户端向服务端发送连接请求报文段

• 服务端发送同意连接应答

• 客户端向服务端发送一个确认报文

• 客户端向服务端发送连接释放请求

• 服务端不再接收客户端发的数据，仍旧可以发送数据给客户端

• 服务端向客户端发送连接释放请求

• 客户端向服务端发送确认应答

HTTPS 过程

1. 客户端向服务器发起请求，请求中包含使用的协议版本号、生成的一个随机数、以及客户端支持的加密方法。
2. 服务器端接收到请求后，确认双方使用的加密方法、并给出服务器的证书、以及一个服务器生成的随机数。
3. 客户端确认服务器证书有效后，生成一个新的随机数，并使用数字证书中的公钥，加密这个随机数，然后发给服务器。并且还会提供一个前面所有内容的 hash 值，用来供服务器检验。
4. 服务器使用自己的私钥，来解密客户端发送过来的随机数。并提供前面所有内容的 hash 值来供客户端检验。
5. 客户端和服务器端根据约定的加密方法使用前面的三个随机数，生成对话秘钥，以后的对话过程都使用这个秘钥来加密信息。