自我介绍

浏览器窗口的组成部分

没学过，上来就寄了

用户界面：用户与浏览器交互的部分 (地址栏、工具栏、前进回退、书签栏)
渲染引擎：复杂解析 HTML 和 CSS 并转化为用户可见的网页内容，通过构建 DOM 树和 CSSOM 树将其绘制到页面上
浏览器引擎：用户界面 和 渲染引擎 的桥梁，(页面加载进度、处理弹窗提示)
网络模块：处理所有网络请求（通过HTTP协议加载网页资源）
JavaScript引擎：解释并执行网页中的JS代码，动态交互和页面更新 (如现代V8引擎)
数据存储：管理浏览器的本地数据 (Cookies、缓存、LocalStorage)

事件循环是什么，解决了什么问题

没什么问题

JS是单线程语言，同一时间只能执行一个任务

如果一个任务耗时过长（网络请求、文件读取），会阻塞后续代码的进行，所以出现了同步任务和异步任务

同步任务：立刻放入JS引擎（JS主线程）执行，原地等待结果

异步任务：先放入宿主环境（浏览器/Node），不阻塞主线程，在将来执行

同步任务进入主线程，异步任务进入任务队列，主线程内的任务执行完毕为空，会去任务队列读取对应的任务，推入主线程执行，这样不断重复就是事件循环

事件循环是实现 JS 单线程但非阻塞的解决方法

浏览器存储相关

猪脑子一开始忘了 LocalStorage 的英文名了不过好在最后说出来了，然后接着说了cookie 和 token(?)，整体答的不是很好

localStorage (<4KB)：持久化本地存储，数据永不过期 (除非手动删除)，存储的信息同域共享，只能存入字符串，不能直接存对象 ||||| 用户偏好设置、离线缓存

sessionStorage (5–10MB)：同 localStorage，但页面/会话关闭删除存储数据 ||||| 临时数据（如表单草稿）

cookie (5–10MB)：小型文本文件，网站为了辨别用户身份而发送给用户并存储在用户本地终端上的数据，为了解决 HTTP 无状态问题，自动随每个同域请求发送请求，由 Name名、Value值、有效期、安全性、使用范围 组成 ||||| 身份认证（Session ID）、跟踪用户行为

IndexedDB (数百 MB 到 GB)：持久化对象/文件 ||||| 用于离线应用

用户登录一个页面的期间发生了什么

一开始以为说是输入 URL 到界面渲染的流程，然后面试官说不是，然后猜是登录相关的，回答了身份验证的部分

输账号密码，登录（收集表单数据）

发登录请求（feach/axios）

服务器验证身份（查询数据库对比用户名密码）

验证成功（创建 Sesson 存储在服务端，下发 cookie 给客户端）

浏览器接收响应（用户本地自动保存 Cookie，并设置认证状态(Vuex/Pinia)）

后续请求携带 Cookie

登录完成后请求 /user/info 接口展示头像、昵称等

http和https的区别

忘得太干净了，然后说是加密方式不一样，结果发现 HTTP 根本没有加密…

HTTPS

• 加密（Encryption）：数据加密传输，第三方看不到内容
• 验证（Authentication）：确认服务器身份，防止中间人攻击
• 完整性（Integrity）：防止数据在传输过程中被篡改

响应码

没问题

1 信息性响应

2 成功

3 资源重定向

4 客户端错误响应

5 服务器错误响应

平时怎么使用和配置vite

不知道从哪说起，然后就从用vite install 一个新项目讲了一下，配置的话举了个改 @ 全局路径的例子，然后他又追问插件什么的，我就说在根目录下的 vite.config.ts 全局导出的配置里有个 plugin 选项，平时可能接触 vue 的那个适配插件会多一点

早知道把 vite 构建那套搬出来说一下了
夹带私货：飞书图书馆 “pnpm 的背后(vite 构建)”

git常见的指令操作

说了 clone / add / commit / push / pull 和连接操作，然后追问了回退操作（没用过根本不记得）

回退操作

怎么通过GitHun Action实现流水线

说是主要通过在 .github/workflows/deploy.yml 实现相应的部署指令，然后流程是在github依赖该文件内的指令，从而实现在远端仓库进行 test测试到 install安装依赖，最后 build构建产物

npm/pnpm/yarn的区别

回答了pnpm的树形依赖结构，npm/yarn是扁平的，然后说pnpm节省磁盘空间，下载速度快，面试官又问yarn速度也快为什么不用yarn，然后我就没话说了

npm

扁平化依赖树
每个项目独立安装，安装的依赖提到node_modules顶层，相同包的不同版本会被重复安装
磁盘占用大、安装速度慢、可能出现未声明却可用的包(幽灵依赖)

yarn

缓存 + 扁平化安装
安装时先查缓存，命中则软链接/复制，并行快速下载，.lock保证依赖一致
存在冗余，node_modules依然较大

pnpm

缓存 + 硬链接 + 符号链接 + 全局寻址存储
所有包统一存在全局仓库，项目通过符号链接指向全局包，不同版本的包只存一份(相同内容哈希一致)
极省磁盘空间(项目共用依赖)，安装极快(硬链接)、严格依赖隔离(无幽灵依赖)

有没有开发过插件，具体是为了实现了什么功能

把组件库的自动化注册组件插件搬出来说了一下

有没有移动端的实践经验

“没有，但是用过 Electron 做过桌面端的”，然后就没问了

页面的响应式一般怎么做

@media媒体查询、flex弹性布局、grid网格布局、rem/vw/vh百分比单位、JS动态控制

一开始先说了 媒体查询，然后又追问除了媒体查询还有没有其他实现方式，又挤出来一个 flex 和 vue 的 computed，直接忘了rem/vw/vh 和 grid 这茬事了

为什么学vue而不是react

大概说是不太习惯JSX的写法

算法：递归set数组＋排序

返回一个新的数组 → 把下面数组内的所有数字排序并去重

arr = [1，[2，[5，3，3]，9，[1，2]，7，4，1，2]，2，9，[7，14]，6]

JS：简单的闭包

const counter1 = createrCounter()
console.log(counter1()) // 1
const counter2 = createrCounter()
console.log(counter2()) // 1
counter2()
console.log(counter2()) // 2

实现 createrCounter 函数