日常面试问题总结

标签：总结 渲染 区别 面试 webpack 日常 Vue3 组件 优化

面试题

 

1.typescript 中 interface 与 type 有何区别

interface是接口，type是类型，本身就是两个概念。只是碰巧表现上比较相似。 希望定义一个变量类型，就用type，如果希望是能够继承并约束的，就用interface。 如果你不知道该用哪个，说明你只是想定义一个类型而非接口，所以应该用type。

interface和type都可以用来声明和约束变量类型结构，interface可以被继承重载，type要想被继承只能使用联合&，而且interface的性能比type更好

 

 

2.闭包

闭包是一个函数, 其可以记住并访问外部变量.

在函数被创建时, 函数的隐藏属性 [[Environment]] 会记住函数被创建时的位置, 即当时的词法环境 Lexical Environment

这样, 无论在哪里调用函数, 都会去到 [[Environment]] 所引用的词法环境

当查找变量时, 先在词法环境内部查找, 当没有找到局部变量时, 前往当前词法环境所记录的外部词法环境查找

我知道的闭包的应用: 封装私有变量和处理回调函数

 

3.词法环境

 

• 全局环境
  没有外部环境引用的词法环境，外部环境引用为outer: null,拥有内建的object/ array对象等。在环境记录器里的原型函数，还有全局对象
• 函数环境
  用户定义的变量存储在环境记录器，外部引用outer可以为全局环境，也可以为包含此内部函数的外部函数

变量环境

• 用来处理var和function声明的标识符

 

 

4.react diff 和vue diff 

React 的 diff 算法：

React 使用了一种叫做 “Reconciliation” 的 diff 算法。在比较新旧 Virtual DOM 时，React 会按照以下三种策略进行：

1. 元素类型不同：如果元素类型不同，React 会直接销毁旧元素及其子元素，并创建新元素。
2. 元素类型相同，是 DOM 元素：React 会比较这两个元素的属性，并只更新变化的属性。
3. 元素类型相同，是组件：如果组件类型相同，React 会调用组件的 render 方法生成新的 Virtual DOM，并递归地进行 diff。如果组件类型不同，React 会销毁旧组件并创建新组件。

React 的 diff 算法默认假设不同类型的元素会产生不同的树，而且开发者不会在同一位置改变元素的类型。因此，它在处理列表时，如果没有手动添加 key，可能会造成不必要的元素重渲染。

Vue 的 diff 算法：

Vue 的 diff 算法是基于 “就地复用” 的策略。当新旧 Virtual DOM 进行比较时，Vue 会尝试复用旧节点，并且根据需要进行更新。这使得 Vue 在处理列表时，即使没有手动添加 key，也能尽可能地复用元素，避免不必要的元素重渲染。

然而，这种策略在某些情况下可能会导致问题。例如，如果你有一个列表，其中的元素可能改变类型，那么你需要手动添加 key 来告诉 Vue 哪些元素可以复用，哪些元素需要创建或销毁。

总的来说，React 和 Vue 的 diff 算法都是为了提高渲染性能，但是它们在实现细节和优化策略上有所不同。在实际开发中，你需要根据你的应用的需求和性能要求来选择使用哪一个。

 

5.vue3 computed watch

 

源码角度 effect triger track

 

6.webpack vite 区别

Vite 开发esbuild

生产rollup

 

esm，rollup 

webpack  Hmr  

HMR（Hot Module Replacement），热更新又称热替换，基于 webpack-dev-server。 第一步：webpack 对文件系统进行 watch 打包到内存中 第二步：devServer 通知浏览器端文件发生改变，在这一阶段，sockjs 是服务端和浏览器端之间的桥梁，在启动 devServer 的时候，sockjs 在服务端和浏览器端建立了一个 webSocket 长连接，以便将 webpack 编译和打包的各个阶段状态告知浏览器 第三步：webpack-dev-server/client 接收到服务端消息做出响应 第四步：webpack 接收到最新 hash 值验证并请求模块代码 第五步：HotModuleReplacement.runtime 对模块进行热更新 第六步：调用accept 方法，及时将新后的内容插入到页面中

 

 

7.leader 时间分配

为什么离职

作为tl 如何管理团队

 

8优化相关，

 面试的时候问页面性能有哪些指标，却经常得到合并文件、压缩资源等优化手段的答案，是时候整体盘一下“性能指标”了。

1. 基本指标介绍

首先前端性能指标一般分为以下几种：

• 首屏绘制（First Paint，FP）
• 首屏内容绘制（First Contentful Paint，FCP）
• 可交互时间（Time to Interactive，TTI）
• 最大内容绘制（Largest Contentful Paint，LCP)
• 首次有效绘制（First Meaning Paint, FMP）

 

9 ast 联系 webpack 构建优化

了解swc吗

tree-shaking 原理 ：esmodule 静态分析 ast 剪枝

 

 

 

10 事件循环eventloop 

 

宏任务，微任务

 

 

11.已读回执，多账号登录，正在输入中状态

12.对接在线的视频流（m3u8） 

 

 

 

13.useLayoutEffect 和 useEffect 有什么区别

 

1. useLayoutEffect 相比 useEffect，通过同步执行状态更新可解决一些特性场景下的页面闪烁问题。
2. useEffect 可以满足百分之99的场景，而且 useLayoutEffect 会阻塞渲染，请谨慎使用

14. hooks不能在if中使用

1. react 优化
2. redux 核心概念
3. Redux处理异步逻辑
4. uniapp 转h5 生命周期。
5. Im交互 

 

20 postmessage，

1. worker 
2. react 19 Ioc forwardref 
3. 跨端dsbridge内部原理
4. sso实现

 

prefetch 与 preload 的区别是什么

 

<link rel="prefetch" href="style.css" as="style" />

<link rel="preload" href="main.js" as="script" />

1. preload 加载当前路由必需资源，优先级高。一般对于 Bundle Spliting 资源与 Code Spliting 资源做 preload
2. prefetch 优先级低，在浏览器 idle 状态时加载资源。一般用以加载其它路由资源，如当页面出现 Link，可 prefetch 当前 Link 的路由资源。（next.js 默认会对 link 做懒加载+prefetch，即当某条 Link 出现页面中，即自动 prefetch 该 Link 指向的路由资源

 

Fiber

• Scheduler（调度器）—— 调度任务的优先级，高优任务优先进入Reconciler
• Reconciler（协调器）—— 负责找出变化的组件
• Renderer（渲染器）—— 负责将变化的组件渲染到页面上

 

babel的转换流程是什么样的

首先读取字符串，然后通过babel-parser将字符串代码转换成抽象语法树AST，之后对该AST进行节点遍历和转换，生成新的AST，最后通过babel-generator将新的AST再转换成新的代码字符串。

babel包含哪几个部分，核心包有哪些

包含脚手架cli、一些预设转换规则preset、语法兼容模块polyfill和插件plugin等。核心包主要有@babel/core、@babel/parser、@babel/traverse、@babel/generator等。

 

 

 

 

对 useCallback、useMemo 这两个 hook 的理解，有什么样的区别，适合在什么场景下使用

1. 是不是所有的变量或者函数都需要用这两个 hook 进行包裹
1. 能不能量化一下，什么情况下需要使用
2. 包裹后性能一定会好吗，为什么？
3. 有没有更底层一点的理解

对类组件和函数组件的理解，它们的区别，什么情况下写类组件更好，什么情况下写函数组件更好

 

 

浏览器渲染过程

 

 

1. JS 为什么会有浮点精度问题，然后怎么去解决这个问题？
2. React 的任务调度是怎么做的
3. React 中怎么判断出来浏览器剩余多少空间时间

4.HOC hoc怎么处理静态属性，跨层级ref等问题

• 5 高阶组件怎么控制渲染，隔离渲染？
• 6 高阶组件怎么监控原始组件的状态？

 

1. 箭头函数可以作为构造函数吗？

 

webpack 是怎么处理 commonjs/esm

1. 跨域是服务器拒绝请求还是浏览器去拒绝的请求？

 

requestAnimationFrame 和 requestIdleCallback

 

渲染层和逻辑层 

 无感登录

无感授权定位

 

 

Commonjs esm 区别

构建性能分析， 更快的 loader: swc

core-js 是做什么用的？

 

页面缓存。

 

讲一下setState之后发生了哪些事情

先讲React的架构，包含了Renderer、Scheduler和Reconciler三部分，然后具体说了每一部分大概是做什么，之后讲setState其实就是触发组件的一次渲染过程，具体过程如下：

1. setState会生成一份新的组件内状态数据并重新执行Reconciler中的render方法
2. render方法会根据JSX和最新的数据去创建一个新的fiber节点树，每一个树节点的创建都是Reconciler中的一个工作单元
3. 所有的创建fiber节点工作单元生成后，这些工作单元的执行和调度会由Scheduler中的任务队列来执行
4. 任务队列每次取出一个创建fiber节点的任务执行，执行完成之后会调用浏览器的requestIdeCallback方法来判断当前刷新帧剩余时间是否够执行下一个任务
5. 如果时间够就执行下一个创建fiber节点任务，不够的话就先将创建任务暂停，等下一个刷新帧继续执行
6. 当所有的创建任务都执行完成之后，就生成了一棵新的fiber节点树，之后就是通过新旧两棵树去做diff算法获得要更新的树，后面的diff和渲染部分这里就不多介绍了

 

vue3.0编译做了哪一些优化？

Vue 3.0作为Vue.js的一次重大升级，其编译器也进行了一些优化，主要包括以下几方面：

1. 静态树提升： Vue 3.0 通过重写编译器，实现对静态节点（即不改变的节点）进行编译优化，使用HoistStatic功能将静态节点移动到 render 函数外部进行缓存，从而服务端渲染和提高前端渲染的性能。
2. Patch Flag：在Vue 3.0中，编译的生成vnode会根据节点patch的标记，只对需要重新渲染的数据进行响应式更新，不需要更新的数据不会重新渲染，从而大大提高了渲染性能。
3. 静态属性提升：Vue3中对不参与更新的元素，会做静态提升，只会被创建一次，在渲染时直接复用。免去了重复的创建操作，优化内存。 没做静态提升之前，未参与更新的元素也在render函数内部，会重复创建阶段。
   做了静态提升后，未参与更新的元素，被放置在render 函数外，每次渲染的时候只要取出即可。同时该元素会被打上静态标记值为-1，特殊标志是负整数表示永远不会用于 Diff。
4. 事件监听缓存：默认情况下绑定事件行为会被视为动态绑定（没开启事件监听器缓存），所以每次都会去追踪它的变化。开启事件侦听器缓存后，没有了静态标记。也就是说下次diff算法的时候直接使用。
5. 优化Render function：Vue 3.0的compile优化还包括：Render函数的换行和缩进、Render函数的条件折叠、Render函数的常量折叠等等。

总之，Vue 3.0通过多方面的编译优化，进一步提高了框架的性能和效率，使得Vue.js更加高效和易用。

 

Vue3 响应式 ref reactive toref torefs  不知道。vue2 响应式缺陷，requestAnimationFrame不了解，settimeout  单线程，defer async

 

 

从输入URL到页面渲染加载的过程

 

Proxy 只会代理对象的第一层，Vue3 如何处理  没答到点子

 

Vue3 解构丢失响应式   

 

Ref reactive 联系 源码。精度问题源码不清楚。 事件循环   了解执行顺序。 垃圾回收 新老生代不清楚 

 

优化手段  交易小程序 重复代码 组件重复 倒计时一致，

体验优化 异常兜底，防抖节流 

 

 

App通信，原理

 

 

 

 

Vue2 响应式缺陷 $set 原理 实现忘了，$nextTick 原理 队列回调，=》微任务  事件循环 宏任务，微任务 熟悉，requestAnimationFrame 和 settimeout 区别，

setstate 深入了解，

 

Vue3响应式 proxy，vue2缺陷 数组变化，vue2 微任务  事件循环 宏任务没答出。 从输入URL到页面渲染加载的过程 dns解析，浏览器渲染，ast 原理

 

 

转码工具

 

react和vue技术栈的对比 

 

小程序架构。

 

 

聊聊vue 或 react 的数据响应

Vue2 响应式的特点就是依赖收集，数据可变，自动派发更新，初始化时通过 Object.defineProperty 递归劫持 data 所有属性添加 getter/setter，触发 getter 的时候进行依赖收集，修改时触发 setter 自动派发更新找到引用组件重新渲染

Vue3 响应式使用原生 Proxy 重构了响应式，一是 proxy 不存在 Vue2 响应式存在的缺陷，二是性能更好，不仅支持更多的数据结构，而且不再一开始递归劫持对象属性，而是代理第一层对象本身。运行时才递归，用到才代理，用 effect 副作用来代替 Vue2 里的 watcher，用一个依赖管理中心 trackMap 来统一管理依赖代替 Vue2 中的 Dep，这样也不需要维护特别多的依赖关系，性能上取得很大进步。

相比 Vue 的自动化，React 则是基于状态，单向数据流，数据不可变，需要手动 setState 来更新，而且当数据改变时会以组件根为目录，默认全部重新渲染整个组件树，只能额外用 pureComponent/shouldComponentUpdate/useMemo/useCallback 等方法来进行控制，更新粒度更粗一些。

 

 

常见的前端架构包括以下几种：

• 单页面应用（Single Page Application, SPA）
• 优点：用户体验流畅，页面无需重新加载；前后端分离，便于维护和扩展。
• 缺点：初次加载时间长；SEO优化相对困难；对服务器压力较大。
• 应用场景：适用于需要高度交互性的应用，如社交网络、在线办公套件等。
• 微前端架构
• 优点：允许独立开发和部署不同的前端部分；提高了系统的灵活性和可维护性。
• 缺点：架构复杂性增加；需要解决不同微前端之间的通信和样式冲突问题。
• 应用场景：适合大型复杂应用，尤其是由多个团队共同维护的项目。
• 分层架构
• 优点：通过代码职责的拆分可以有效的将系统进行解耦，从而让各自部分能够很好的分工并且协同。
• 缺点：随着页面逻辑复杂度提升，数据更改容易混乱，还好出现了Redux、Mobx等数据流控制的框架，将数据管理进行了统一。
• 应用场景：只要不是静态网页，现代的web 应用，都会使用分层的架构。

 

 

Ref reactive 联系 

Vue3 解构丢失响应式   

Vue3 proxy 区别联系 

从输入URL到页面渲染加载的过程 dns解析，http请求 三次握手  cssom树 

口述 promise 实现 

 

项目 

webassembly 和js快慢

在许多情况下，Wasm 比 JavaScript 更快，因为：

• 获取 Wasm 花费的时间更少，因为它比 JavaScript 更紧凑，即使在压缩时也是如此。
• 解码 Wasm 比解析 JavaScript 花费的时间更少。
• 编译和优化花费的时间更少，因为 Wasm 比 JavaScript 更接近机器代码，并且已经在服务器端进行了优化。
• 不需要重新优化，因为 Wasm 内置了类型和其他信息，因此 JS 引擎不需要推测它何时优化它使用 JavaScript 的方式。
• 执行通常需要更少的时间，因为开发人员需要知道的编译器技巧和陷阱更少，才能编写出一致的高性能代码，而且 Wasm 的指令集更适合机器。
• 由于内存是手动管理的，因此不需要垃圾收集。

 Keep-alive.  $Next-tick 实现

Esmodule commonjs  区别  答错了 

 

Vue3 响应式 源码没有阅读过  观察 coding 

requestAnimationFrame 和 settimeout 区别  

Gis优化 卫星实时计算 重绘重排 虚拟列表实现 计算高度 

 

 

 

less sass 区别

Sass 是在服务端处理的，以前是 Ruby，现在是 Dart-Sass 或 Node-Sass，而 Less 是在客户端处理的，需要引入 less.js 来处理 Less 代码输出 CSS 到浏览器，也可以在开发服务器将 Less 语法编译成 CSS 文件，输出 CSS 文件到生产包目录，有 npm less、Less.app、SimpleLess、CodeKit.app 这样的工具，也有在线编译地址。

变量符不一样，Less 是 @，而 Sass 是 $。

Sass 的功能比 Less 强大，基本可以说是一种真正的编程语言。Less 只是一套自定义的语法及一个解析器，为 CSS 加入动态语言的特性。

Less 相对 Sass 清晰明了，安装便捷，易于上手，对编译环境要求比较宽松，适合小型项目。Sass 更适用于复杂或大型项目。

输出设置，Less 没有输出设置，Sass 提供 4 种输出选项：nested/compact/compressed/expanded，输出样式的风格可以有 4 种选择，默认为 nested。

Sass 支持条件语句，可以使用 if...else.../for...while...each循环等，Less 不支持。

Sass 引用的外部文件命名必须以 _ 开头，Sass 会认为以 _ 文件是一个引用文件，不会将其编译为 CSS 文件。Less 引用外部文件和 CSS 中的 @import 没什么差异。

Less 中的变量运算可以带或不带单位，Sass 需要带单位。

Sass 有工具库 Compass，简单说，Sass 和 Compass 的关系有点像 Javascript 和 jQuery 的关系，Compass 是 Sass 的工具库。在它的基础上，封装了一系列有用的模块和模板，补充强化了 Sass 的功能。Less 有 UI 组件库 Bootstrap，Bootstrap 是 Web 前端开发中一个比较有名的前端 UI 组件库，Bootstrap 的样式文件部分源码就是采用 Less 语法编写。

 

函数柯里化 

 

rebase merge区别 

 

利用Vite进行快速的开发和构建。通过合理的Vite配置，如代码分割、按需加载、压缩等，优化打包体积和加载速度，

提高应用的性能 具体实践

 

 

 

 

询问 vue3.0编译做了哪一些优化 webpack和vite区别  不行

 

setstate  之后发生了什么。Commonjs esm 区别      keep-alive 实现原理 

 

Vue3 源码 没读过 keep-alive组件缓存  实现 nexttick 原理  js eventloop  事件循环 

 

 setstate 流程 fiber  更新  vue数据响应，computed watch 区别  redux vuex 

 

 

垃圾回收  新老生代 引用计数 标记清除  。

vue3.0编译做了哪一些优化？ 编译加速 静态提升  tree-shaking  webpack  Hmr  原理

fiber 调度器。

 

Vue2 响应式  递归   缺点 对象属性  vue3  proxy  Ref reactive  使用 源码没看过  横向 联系react useref  比较浅 

 

 

从输入URL到页面渲染加载的过程  渲染流程不是很熟悉 requestanimationframe 执行效率 settimeout 不准确 

 

Esmodule commonjs  区别  没有深入了解 使用区别

 

 

react 实现 keep-alive  

 

useLayoutEffect 和 useEffect 有什么区别 

Redux状态管理。 轻量，

setstate 

Lru 不清楚

二叉树遍历 

dfs bfs 

webpack splitchunk 分割  图片压缩  url-loader      rapack 

hmr 

小程序分包 cdn 

口述promise 实现 没答出  race 实现 

 

 

Vue3 响应式 收集依赖 ref reactive  useRef 更新dom fiber 可中断 优先级更新requestidlecallback

浏览器合成cssom  

Vue2 区别   

webpack vite 调优 

Spa 全部加载-路由 按需加载 splitchunk 调优 performance 术语

vite 配置 

webpack hmr 原理  

 

源码 没看过 vue3响应式 watch watchEffect  nexttick 做什么 

 

Vue3 特点 对比 vue2 

 没读过源码。

react 事件合成。 setstate  细节 fiber  

webpack vite 区别。 配置简单 

webpack 热更新原理

Commonjs  esmodule 静态

 

Vue3 响应式 区别vue2升级 

react hooks 和vue3 hooks   细节

usememo usecallback 做什么的 按需 

React 19相关特性 没看

webpack vite 打包区别。升级点  

webpack 优化实践 loader 使用 plugin 压缩 splitchunk   tree-shaking 原理 hmr热更新原理 不了解 

Babel 转化  不了解 

Vite 开发环境 生产环境 

C端经验 

项目架构 

工作流

 

Vue3 源码 没看过  hooks 区别  react hooks 

Vue2 源码  

 

响应式区别 watcher，notify，

Vue3  proxy ref实现  不清楚 

Diff 算法 更新 静态提升 

keep-alive 原理 ， 

react hooks  v-model  

webpack 优化实践 压缩  cdn  分包splitchunk   量化指标  请求数量  分析包体积 ；首屏 图片  webpack忘记怎么做的，图片懒加载 现在的方案 toc项目最近没做。

安全性 xss，正则规格过滤，

 

 

弹幕实现人像露出  计算位置

播放器点击进度，实现分片加载

播放器 指定区域展示内容 

记录播放时间 心跳 多端登录

MediaSource 是什么 sourcebuffer

 

跨端跨平台编译 实现  

 

浏览器渲染 

 

Vue3 响应式，react 响应式  框架方面一般 

分包 

弹幕实现人像露出  mask  碰撞检测 

 

保活

 

Vue2/3 响应式 ref reactive 没读过源码

 

react setstate requestIdeCallback不清楚 

webpack vite 区别 

 

webpack 优化 loader-css 

vite 优化 

前端安全。 Xss 输入内容 明文加密

 

ref reactive   

Vue2 升级vue3 相关 兼容性问题 插件  

webpack 替换 vite  升级 

tree-shaking 

Esmodule commonjs  vite  不了解 

 

地图类 保活 

shadowref

 

 

跨端开发 

选择uniapp， 成本，

没有用过vue3，没有读过源码 

ref  reactive   ref基础类型   ref实现 vue3 watchEffect

Vue2 keep-alive 原理  nexttick 做什么  

Esmodule commonjs  区别  没有深入了解 使用区别   打包

Js 事件循环  了解 

webpack 优化 

原生 

 

项目优化 虚拟列表 实现 

 

没有用过vue3 响应式相关 toref torefs 不清楚

 

computed  watch 

nexttick 不清楚原理 

Commonjs esmodule 

条件搜索 优化 table优化 

单点登录 跨域 

 视频播放 

 

源码 

ref reactive 

watch 

watchEffect  联动useEffect  

uselayoutEffect 

nexttick 

react 任务调度 

 

浏览器渲染流程： 

Webpack 图片优化 ，

p-limit

 

 

 

Esmodule commonjs  区别  

 

Vue2 diff js 事件循环。setimeout    gc 

Vite不清楚 webpack 优化 按需加载 代码压缩 优化打包流程 

单点登录 

 

ref  template  模版编译    vue3 computed 缓存不清楚 vue3 diff  LRU 做什么 最长递增子序列 忘记了

 

 

uselayouteffect  渲染  

 

hooks 不能在if

Setstate同步 合并事件  

 

调度器 不了解 

 

浏览器  缓存 机制  

强缓存  协商缓存  

 

webpack  项目优化 

 

Vue3 了解不多 vue2基础 响应式 watch实现

nexttick  settimeout 

 

 

cicd webpack 优化 splitchunks  忘记了  压缩 文件哈希 

首屏loading  

按需引入 

 

performance 

Esmodule commonjs 

vite 快  

 

monorepo Webpack 、vite 

https 

HTTP/HTTPS协议 HTTP1.0、1.1、2.0区别

 

 

Vue3 编译优化 源码 没有看过   diff升级 不清楚   toref torefs

Vue2 升级点 组合式api 写法  响应式更新   definemodel 和v-model区别

interface type 区别

 omit    

 

对称加密 非对称加密 不知道

Esmodule  commonjs 一般  webpack vite 区别  不多。webpack 优化 打包代码分割 常规配置  ， es降级 babel 

monorepo 

小程序 分包 cdn 

 

Vue3 框架升级 

组合式api   mixin hooks  作用域 

响应式 

 

模版 diff  静态节点 属性

 

watch 

watchEffect  

 

Js 闭包 new function  作用域  gc   掌握比较一般

 

Esmodule commonjs 规范 require  同步 

esm 静态  tree-shaking  

 

懒加载 jsonp 

项目优化 

小程序分包  

微信小程序 图片懒加载  小程序 距离 

 

 

图片加载优化 lcp

标签：总结,渲染,区别,面试,webpack,日常,Vue3,组件,优化
From： https://www.cnblogs.com/zisi/p/18621878