1、会 node？ts？vue3？React？
2、为什么 http2.0 没有 TCP 限制
http2.0 的报文头和主体都可以使用二进制，并统称为帧，基于这个我们可以把请求的报文拆分成数据包，每个数据包里面携带对应的请求信息，这样服务端和客户端可以同时发送多个请求或回应。
理论上是无限制的，但是实际上浏览器在实现的时候，控制了请求并发数。
3、如果并发数比较多的话，怎么优化性能
归纳：减少 http 请求
图片：精灵图、图片压缩、base64
文件：文件合并、代码压缩
过滤请求：请求节流、缓存请求（实时修改但不是立马给服务端）
4、强缓存和协商缓存，打包后的值怎么和缓存配合（重点）
5、长列表优化
- 懒加载：IntersectionObserver（交叉观察器）（监听 scroll + 节流 可能会有性能问题）
- 触底加载
- 虚拟列表：将页面按照可视区域内容大小进行切片，只展示可视区的内容，非可见区域不渲染，在滚动时，实时更新可见区域内容
6、cookie 和 storage
7、cookie 和 session
8、内存泄漏的问题
意外的全局变量
定时器里面引用了外部变量
DOM 被删除了，但是没有清除对 DOM 的引用
清楚延时器/避免意外的全局变量/使用 weakMap、weakSet
9、浏览器一个 tab 的内存上限
较新的 chrome 版本，单 tab 内存上限是 1.8G。正常情况下程序使用的内存是不会超出这个限制的，但是如果存在内存泄漏，可能会在较长的时间之后超出内存限制。
10、下拉框里面的数据过多，全选的话数据超过请求的体积限制，怎么做
和服务端协商，修改数据传参
11、实现一个自适应输入框，根据用于输入的值自动设置宽度
监听 input 事件，获取输入值的宽度并设置，怎么获取输入值，最开始说获取内容的数量，但这个是不精确的，后面说外面包一层 div，获取 input 的实时宽度，设置 div 的样式（输入框样式）
外面包一层透明的 span（宽高由内容决定），input 设置为宽高 100%自适应
12、有哪些图片格式
webp 也支持动图和透明，文件体积小，支持有损和无损压缩
jpg 有损压缩 png 无损压缩 GIF 无损压缩
13、懒加载的 lazy
<img src="https://i.postimg.cc/GtN3Cs02/1.jpg" loading="lazy" />
懒加载有以下几种方式
- 设置 img 的 loading 标签值为 lazy，需要知道图片的宽高
- interSectionObserver API webAPI，低版本需要 polyfill
- vue 的官方懒加载插件 lazyLoad，github 现存 issues 较多
14、webpack5 新技术
更快的构建速度、更小的代码体积
- 持久性的缓存，通过文件内容生成 hash 作为文件名（通过 cache 配置）
- 模块联邦，适用于微前端，解决不同子应用之间代码共享的问题
- 改进的 Tree Shaking
- 入口文件的顶层使用异步加载
- 内置压缩功能
- 更好的代码分割
15、怎么不打包部分代码
externals
16、useMemo 和 useCallback
相同点：缓存
区别：mome 对应变量 callback 对应函数
主要区别是 React.useMemo 将调用 fn 函数并返回其结果，而 React.useCallback 将返回 fn 函数而不调用它。
如果 useCallback 中使用大型 State 会有什么问题
React 函数式组件还是类组件
函数式组件实现一个定时器，拿不到 count，使用 useEffect
17、hppts 的加密方式是怎么加密的
对称加密 + 数字签名
信息加密 + 完整性校验（数据 hash 值传输验证）+ 身份验证（非对称加密）
18、对称加密和非对称加密有哪些以及区别
非对称加密：RSA
对称加密：ASE
19、http2.0 和 http1.0 区别
20、http3.0 了解吗
21、Vue父子组件之间的通信
22、Vue 的响应式原理的实现
23、虚拟 DOM 了解吗
24、你知道微前端吗 用过吗 公司有需求吗
项目里有 iframe 嵌入吗，简单说一下嵌入的实现
25、vuex 的几个核心
26、ref 和 DOM API 的区别
如果 ref 用在组件上，$refs 可以得到组件的实例对象
27、常见的路由守卫
全局守卫：beforeEach、beforeResolve、afterEach
路由守卫：beforeEnter
组件内守卫：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
28、rem 和 em 区别
29、less 具体优点
less 编程式语言，使用变量、函数、嵌套，sass 的功能比 less 会更多一点
30、用过混入吗
31、父子页面生命周期加载顺序
32、怎么实现深拷贝，function 可以 JSON.stringify 吗
JSON.parse(JSON.stringify(obj))
无法处理的值：undefined、function、Symbol、包含循环应用的对象
33、es6 的新特性
新变量：Symbol、BigInt、Map、Set、模板字符串、class 类
变量声明使用：let const、可选链、解构、扩展运算符
方法：箭头函数、数组对象新增方法
请求处理：promise
变量声明：声明一个变量
变量定义：赋值
34、箭头函数可以用 call 吗
35、你了解的 this 指向
默认 window
作为对象方法调用，指向.
创建 new 实例的时候，指向实例对象
显示通过 call、apply、bind 绑定
36、对同步和异步的理解
同步：自上而下的执行任务，如果当前任务需要一段时间才能返回结果，会一直等待任务结果，结果返回之后再继续向下执行。
异步：自上而下的执行任务，如果当前任务需要一段时间处理，跳过这个任务，把这个任务存起来，继续向下执行，执行完所有的任务之后，再来看之前存起来的任务是不是执行好了，执行完毕后去处理。
37、安全方面的问题由关注过 用过吗
XSS 跨站脚本攻击
- 输入过滤（来自 url 的参数、input 输入的值过滤，已经通过加密套件处理好了） 输出编码（输出到页面上的数据，可以对<>进行编码）
- CSP：限制网页加载资源
CSRF 跨站请求伪造攻击
- origin、refer
- SameSite：Lax（导航到目标网站的 GET 请求可以携带 a link get 提交表单）
DNS 攻击
中间人劫持
38、DNS 劫持知道吗？怎么预防
本地劫持、路由器劫持、域名服务器劫持、拦截浏览器和域名服务器的通信（明文）
预防
- 不要点击可疑或者不熟悉的链接
- 使用信誉良好的反病毒软件
- 使用 VPN 构建加密通道
- 更改路由器的密码（强密码）
- 限制 DNS 访问
- 客户端锁定
www.kaspersky.com.cn/resource-ce…
39、数组去重的方式，多个对象按照 id 去重
双重循环，id 相等
一次循环，some/find 方法
reduce(初始值, 当前元素值, 当前元素下标, 被遍历的数组)
40、简单说一下 webpack 的配置项（mode）
开发 mode：速度快，体积大
生产 mode：构建速度慢，体积小
mode、入口、出口、loader、plugin、devServer
41、怎样通过 webpack 提升页面性能
打包体积（删除无用代码、压缩）、分包、打包后的命名和缓存结合
42、怎样通过 webpack 提升加载速度
升级 webpack5
webpack5 的 cache
多进程、dll、缩小文件搜索范围
43、具体 webpack 缓存是怎么做的
loader 缓存：cacheDirectory 或者 loader 抛出的其他属性
webpack4 有一个缓存插件，将内容缓存到内存中
webpack5 新增持久化缓存功能，直接配置 cache，文件内容 hash 表示
44、常用的 Git 指令
- 配置指令 Git config
- 初始化、连接远程仓库 Git init、Git remote
- 提交代码 Git add commit push pull reset merge rebase
- 分支 Git checkout branch
- 跟踪 Git log status
45、更新代码冲突怎么办（Git pull）
编辑器查看冲突部分（可视化）
找到提交冲突代码的人
协商看看如何处理冲突
处理完成之后继续提交
46、tree-shaking 的理解
47、被打包后的文件是 es 还是 commonjs
commonjs，发生在代码转义阶段（？）
48、keep-alive 的理解
通过缓存数组存储组件的 vnode（描述虚拟组件的节点）
设置了 keep-alive 缓存的组件，会多出两个生命周期钩子（activated与deactivated）：
-
首次进入组件时：
beforeRouteEnter>beforeCreate>created>mounted>activated> ... ... >beforeRouteLeave>deactivated -
再次进入组件时：
beforeRouteEnter>activated> ... ... >beforeRouteLeave>deactivated
49、继承，怎么继承静态属性
es5 中的静态属性、静态方法是无法通过继承直接传递下来，需要手动赋值
es6 可以继承下来
静态方法是没有 this 的，因为 this 指向实例，而静态方法属于类
50、svg 的优势，怎么管理 svg
优势：矢量图、缩放不影响清晰度、文件较小、可编程性
svg 可透明、也可以设置动图
只有 svg 图片可以生成字体图标
类似于精灵图
51、怎么使用 webp 的
可以使用 picture
项目中判断是否支持 webp，挂载在外部的标签上，less 函数判断父类是否包含
特殊处理（CDN 的图片处理能力）
52、什么会阻塞页面渲染
CSS 解析：CSS 文件太大或者选择器效率低，CSS 解析变慢，阻塞页面渲染
JS 阻塞：JS 线程和 GUI 渲染线程互斥
浏览器的渲染帧率达不到 60，比较卡顿
回流重排的次数太多（性能消耗，不停的进行布局）
53、for 循环跳出
break 跳出当前循环、continue 跳出当次循环、return 跳出函数
例外：forEach 的 return 只会跳出当次循环，且不能使用 break 和 continue
可以通过 try catch 抛出错误跳出循环，或者设置 index 为最后一个下标
54、Map 和 weakMap
Map 键可以使用任何类型、weakmap 的键只能是对象
WeakMap 中的键不参与垃圾回收，引用消失，键值对自动消失
WeakMap 内部没有实现迭代器
55、看过 Map 源码吗 知道底层序列化吗
56、用过 vite 吗 vite 和 webpack 区别
vite 的开发环境启动速度和模块热更新速度都很快，但是 webpack 的插件生态更丰富
vite 不会将代码打包，利用浏览器原生支持 esm 的方式，实现按需加载，webpack 需要加载成 commonjs，速度较慢，即使 webpack 也有热更新，但是效率也比不上 vite
57、如果有 100 个 esm 为什么会阻塞页面渲染（？）
阻塞、并发
