前端场景类面试题

总结了一些网上提到的前端场景类的面试题，答案是自己简写的，有兴趣的的搜索详细答案，有需要的可以拿去，后面不定期更新。

1.如何判断用户设备

实际开发中，会综合考虑，比如页面首次加载判断用 UA + viewport 宽度联合判断，样式层面配合 media query，避免单一判断方式带来的误判。

2.将多次提交压缩成一次提交

实际工作中经常使用 git rebase -i 对开发中的多次提交做 squash，这样在创建合并请求（PR）或推送代码前，能保持 commit 历史整洁易读，方便代码 review

3.介绍下navigatorsendBeacon方法

navigator.sendBeacon() 是浏览器提供的一个非阻塞上报数据的 API，主要用于在页面即将关闭时仍能可靠地将数据发送给服务器，比如用于用户行为埋点、性能分析等场景。它的优势是不会阻塞页面跳转，也不容易被浏览器中断，比传统的 fetch 或 XHR 更稳定。不过它不支持自定义请求头，也无法获取响应结果，所以适合做“发出去就可以”的轻量数据上传。

4.混动跟随导航(电梯导航)该如何实现

混动跟随导航的实现，核心是监听页面滚动，实时判断当前模块位置，从而高亮对应导航项；同时在点击导航时通过 scrollIntoView 或 window.scrollTo 平滑滚动到目标模块。滚动判断可以用 scrollY + offsetTop 的方式，也可以用更现代的 IntersectionObserver 监听元素进入视口，性能更好。

5.退出浏览器之前，发送积压的埋点数据请求，该如何做?

为了在用户关闭页面前可靠地发送积压的埋点数据，会使用 navigator.sendBeacon()。这种方式可以在页面卸载时异步发送数据，不会阻塞跳转，也不容易被中断。通常在 visibilitychange（状态变为 hidden）或 beforeunload 中触发上报，同时维护一个埋点缓存队列，定时或条件满足后进行 flush。相比 fetch，sendBeacon 更适合做“临终”上报。

6.如何统计页面的long task(长任务)

页面长任务（long task）会导致主线程卡顿，影响用户体验。前端可以通过 PerformanceObserver 监听 longtask 类型的性能条目，在每次任务执行时间超过 50ms 时捕捉事件，分析来源和时长，从而优化性能瓶颈。现代浏览器都支持这个 API，可以用于线上性能监控系统的数据收集。

7.移动端如何实现下拉滚动加载(顶部加载)

移动端的下拉刷新需要监听 touchstart, touchmove, touchend 三个触摸事件，并在页面处于顶部时捕捉用户的下拉距离，超过设定的阈值后触发刷新请求。通过 transform 做出拖拽动画，transition 平滑还原，并阻止默认滚动。也可以使用现成的组件库，比如 BetterScroll、Vant 的 PullRefresh 等，提高开发效率

8.判断页签是否为活跃状态

判断页面是否为活跃状态可以通过监听 visibilitychange 事件和 document.visibilityState 属性来实现。当页面标签页切换或被最小化时，状态会变为 hidden，可以暂停轮询请求、停止动画等，以提升性能。当页面重新可见时，再恢复相关逻辑。

9.在网络带宽一定的情况下，切片上传感觉和整体上传消费的时间应该是差不多的这种说法正确吗

虽然理论上带宽是固定的，切片上传和整体上传的数据量一致，耗时应当相近。但实际上，切片上传会涉及多个请求，存在额外的连接、认证、服务端处理开销。如果切片上传是串行执行，这些开销会被放大，从而使总耗时大于整体上传。不过，切片上传的优势不在于提速，而在于支持大文件、断点续传、并发上传和错误容忍等特性。

10.大文件切片上传的时候，确定切片数量的时候，有那些考量因素

切片数量是由文件大小和每片的 chunkSize 决定的，设置时要权衡传输效率、请求开销、并发能力和前后端负载。切片太多会导致请求次数暴增，切片太大又可能影响重传效率和并发性能。通常每片建议设为 1~5MB，总切片数控制在几百以内。还要考虑浏览器性能、服务端合并压力以及是否支持断点续传等实际场景。

11.页面关闭时执行方法，该如何做

页面关闭时一般使用 visibilitychange 或 pagehide 事件来监听浏览器隐藏或卸载的时机，并配合 navigator.sendBeacon() 来上报数据。相比 beforeunload 或 unload，这些方式更现代、更稳定，尤其适合移动端或 SPA 页面，能更高概率地确保请求发出成功。

12.如何统计用户 pv 访问的发起请求数量

要统计某次用户访问中发起的请求数量，可以通过 Performance API 的 performance.getEntriesByType('resource') 获取全部资源加载记录，进行总量或分类统计。如果只关注用户行为触发的网络请求（如 ajax / fetch），可以通过代理 fetch 和 XMLHttpRequest 来统计。两者结合可以实现精准的 PV 请求统计。

13.长文本溢出，展开/收起如何实现

展开收起长文本，常用 -webkit-line-clamp 配合 overflow: hidden 来实现折叠效果。点击“展开”按钮时，通过 JS 切换 class 控制是否展示全部内容。实现简单且在移动端和现代浏览器中表现良好。如果需要兼容旧浏览器，也可以使用 max-height + height 动画 的方式。

14.如何实现鼠标拖拽

鼠标拖拽通常由三步组成：mousedown 记录起点，mousemove 实时更新位置，mouseup 结束拖拽。在实际项目中也可以加上吸附、边界检测等增强交互体验。如果是移动端场景，则需改用 touch 系列事件。

15.统计全站每一个静态资源加载耗时，该如何做

浏览器提供了 Performance API 来获取静态资源加载详情。通过 performance.getEntriesByType('resource') 可以拿到所有 JS、CSS、图片等资源的加载时间、大小、协议等信息，开发中常用于性能统计和埋点上报。如果是实时监控场景，还可以使用 PerformanceObserver 来监听懒加载资源的加载耗时。

16.防止前端页面重复请求

防止重复请求的策略分场景使用：比如按钮请求用加锁，输入框用防抖或中止请求；还可以为请求生成唯一 key 做缓存，避免重复并发调用。这些手段可以有效提升用户体验，避免资源浪费或数据错乱。

17.ResizeObserver作用是什么

ResizeObserver 是一个监听 DOM 元素尺寸变化的原生 API，相比 window.onresize 更精细，适用于监听任意元素的大小变化。它常用于响应式布局、图表组件自适应、容器 resize 等场景。该 API 支持现代浏览器，异步触发，性能优于轮询方式。

18.要实时统计用户浏览器窗口大小，该如何做

实时统计浏览器窗口大小最常见的方式是监听 window.resize 事件。为了优化性能，可以结合防抖函数减少回调频率；如果要监控的是某个 DOM 元素的尺寸变化，可以使用 ResizeObserver。如果涉及上报数据，可以使用 sendBeacon 实现异步埋点。

19.如何还原用户操作流程

如果要还原用户操作流程，会先通过关键行为埋点记录点击、输入、跳转等信息。更进一步可以集成像 rrweb 这样的操作录制工具，通过 DOM 快照 + 事件流重放用户行为，精准还原用户操作过程，从而定位 bug 或优化体验。

20.可有办法将请求的调用源码地址包括代码行数也上报上去?

在项目中封装了所有的网络请求函数，并在请求发起时自动获取调用栈信息，提取文件名和代码位置进行上报。为了解决代码压缩导致的定位困难，也会结合 sourcemap 文件，将错误定位回原始源码。这一策略对定位线上问题帮助非常大。

21.请求失败会弹出一个 toast,如何保证批量请求失败，只弹出一个 toast

为了避免多个请求失败时出现重复 toast，会设置一个 toast 锁，在设定的冷却时间内只展示一次提示；如果需要展示多个错误信息，也可以在这段时间内将错误信息收集起来，合并展示，避免干扰用户操作。

22.如何减少项目里面 if-else

为了减少 if-else，通常会使用对象映射或策略模式来优化条件逻辑。对于业务流程复杂的模块，更倾向于使用表驱动或类继承方式来做解耦。这样既增强了代码的扩展性，又避免未来维护时产生“if 地狱”。

23.babel-runtime 作用是啥

@babel/runtime 是 Babel 编译生成代码时所依赖的辅助函数集合，它可以让 Babel 插件在转换 ES6+ 语法时，避免重复注入函数，比如 _classCallCheck、_asyncToGenerator 等；配合 plugin-transform-runtime 使用，可以按需引入这些函数，并避免污染全局作用域，同时显著减少打包体积。

24.如何实现预览 PDF 文件

实现 PDF 预览推荐使用 pdf.js，它可以将 PDF 精准渲染到 canvas 上，并支持翻页、缩放、搜索等操作。如果只是简单预览，iframe 也是可行方案。在移动端或加载性能要求高的场景下，也可以考虑将 PDF 转成图片进行展示。

25.如何在划词选择的文本上添加右键菜单(划词:标滑动选择一组字符，对组字符进行操作)

这个需求可以通过监听 contextmenu 事件配合 window.getSelection() 来实现。当用户在页面划词后右键，通过阻止默认菜单并展示自定义菜单来完成交互。选中的文本可以从 selection.toString() 拿到，位置用 getBoundingClientRect() 获取。还可以做一些边界控制和内容过滤来增强体验。

26.富文本里面，是如何做到划词的(鼠标滑动选择一组字符，对组字符进行操作)

富文本划词本质是对用户选区进行操作。通过 window.getSelection() 获取选中内容，通过 Range 来控制 DOM 的插入和替换。插入高亮、链接、加粗等操作都是在选区 DOM 上插标签完成的。为了避免破坏富文本结构，操作时还需要判断节点是否属于编辑区域。

27.如何做好前端监控方案

可以从稳定性，性能监控，行为监控等几个方向展开。稳定性包括使用try-catch进行容错并上报收集错误信息。性能监控可以通过浏览器的Performance API进行性能监控，如：PerformanceObserver来进行长任务的监听，Performance.getEntriesByType('resource') 来进行静态资源的加载监听。通过埋点等方式来进行用户行为的监听。

28.浏览器有同源策略，但是为何 cdn 请求资源的时候不会有跨域限制

虽然浏览器有同源策略，但加载静态资源（如 JS、CSS、图片等）属于浏览器发起的资源请求，不是 AJAX 类型的数据通信，不会触发跨域安全限制。但像字体、XHR 请求仍然会受到 CORS 限制，需要服务器配置相应的 Access-Control-Allow-Origin 响应头。

29.cookie 可以实现不同域共享吗

Cookie 本身只能在同一个主域名下共享，如果需要在子域之间共享，可以通过设置 domain=.example.com 来实现。但如果是完全不同的域名，例如 a.com 和 b.com，Cookie 是不能共享的。这时可以通过跳转 + token 参数、iframe + postMessage、或后端统一登录服务等方式来间接实现“登录状态共享”。

30.axios 是否可以取消请求

Axios 支持取消请求，推荐使用 AbortController，它是浏览器原生支持的方式，也被 Axios 所兼容。这在实现请求防抖、组件销毁、Tab 切换等场景中非常实用，可以有效防止内存泄漏和接口数据覆盖。

31.dom 里面，如何判定a元素是否是b元素的子元素

可以通过 DOM 的 Node.contains() 方法判断一个节点是否是另一个节点的子节点。这是一个广泛支持的方法，返回布尔值。如果需要排除“自身是自己”的情况，需要加一个额外判断。

32.判断一个对象是否为空，包含了其原型链上是否有自定义数据或者方法。 该如何判定

判断对象是否“真正为空”时，除了自身属性外，也需要判断原型链上是否有非内置的自定义方法或属性。可以通过遍历原型链、过滤标准属性的方式来实现。通过Object.getOwnPropertyNames判断当前对象自身是否为空，通过Object.getPrototypeOf获取对象的原型对象，然后进行递归

33.怎么判断dom是否在可视区域

判断元素是否在可视区域，常用 getBoundingClientRect 来获取元素位置，结合 window.innerHeight 判断是否在 viewport 内。更现代的做法是使用 IntersectionObserver，可以实现高性能的懒加载、曝光埋点等。

34.flex:1代表什么

flex: 1 是 Flex 布局的简写，等同于： flex-grow: 1; flex-shrink: 1; flex-basis: 0%; 三个属性的叠加。表示该元素可以在容器中根据比例占据剩余空间，常用于响应式布局和等比宽度分配场景。

35.一般是怎么做代码重构的

通常做代码重构时，会先评估哪些模块存在重复逻辑、结构混乱、职责不清等问题，然后设定目标，比如提升复用性、降低耦合、支持扩展。重构过程中，会拆分组件、封装 hooks、优化状态管理，尽量让功能清晰且可维护。过程中会借助单元测试、review 和自动化测试保障逻辑不出问题。

分为以下几个方向：组件重构：组件拆分、逻辑复用；样式重构：样式抽离、统一设计规范。状态管理：React 用 Zustand/Recoil，Vue 用 Pinia；路由结构：配置式路由、按需加载；请求逻辑：抽离为 统一方法、统一错误处理、loading 管理；性能优化：懒加载、节流防抖、虚拟滚动、缓存策略；构建工具：优化 Webpack/Vite 配置、拆包、分析构建速度

36.如何清理源码里面没有被应用的代码

使用 Webpack 插件 unused-files-webpack-plugin来获取所有未被打包的文件，使用webpack-bundle-analyzer生成可视化页面，查看所有打包文件

37.前端应用 如何做国际化

可以使用 Vue + vue-i18n 插件，它提供了语言包配置、切换语言、懒加载等能力。将所有文字抽取成 key，语言配置文件中写对应翻译

38.应用如何做应用灰度发布

灰度发布是一种逐步发布新版本的策略，可以把新功能只让部分用户先体验，避免新版本直接影响所有用户。如果出现问题，可以快速回滚，降低风险。通常结合后端或网关进行用户分流，按照一定的用户 ID、地域、账号类型来灰度。

有以下几种方式：基于 URL 或子域名、基于 cookie 或 localStorage 标识、灰度路由/灰度功能开关（feature flag）、按版本部署 两套CDN 静态资源

39.为何通常在 微前端 应用隔离，不选择 iframe 方案

iframe 虽然隔离性强，但用户体验差、通信复杂、共享状态困难、不利统一样式和部署管理，所以实际项目中更倾向用 qiankun 等框架，通过沙箱等方式实现软隔离，兼顾体验和性能。

40.Qiankun 是如何做 JS 隔离的

Qiankun 实现 JS 隔离主要依赖沙箱机制，底层使用 Proxy 代理了 window 对象，让子应用的全局变量、事件监听等都限制在代理对象中，防止污染主应用或其他子应用。

卸载时会清除副作用，确保其他子应用正常运行。

41.微前端架构一般是如何做 JavaScript隔离

微前端要实现隔离，主要从样式、JS 执行、路由、资源等维度做隔离。通常使用像 qiankun 这样的框架，它通过 JS 沙箱 + 动态样式隔离来防止子应用污染主应用，全局状态与通信也由主应用统一管理。

42.循环渲染中 为什么推荐不用 index 做 key

在列表渲染中使用 index 作为 key，虽然能工作，但在数据增删、排序或状态管理场景下会造成错误复用，导致 UI 显示错乱或状态不一致。推荐使用具有业务唯一性的字段（如 id）作为 key，这样框架能精准 diff，提高性能并保证 UI 正确。

43.webpack如何实现热更新

Webpack 的热更新依赖于 WebSocket 实时通知客户端代码变更，然后客户端通过 webpack runtime 加载更新模块并替换老模块。在替换模块时，如果使用了 module.hot.accept，可以不刷新页面完成热替换，从而保留应用状态，提升开发效率。CSS 模块天然支持热更新，JS 模块则需要手动配置 accept 逻辑。

44.前端如何截图

前端截图一般分为 DOM 区域截图、屏幕截图和 canvas 截图几种。常用方案是 html2canvas 把指定 DOM 元素转为 canvas 后导出图片，如果需要截图整个屏幕，可以使用 getDisplayMedia 接口。上传图片后的裁剪场景常用 Cropper.js 来支持截图和裁剪功能。canvas 本身也可以直接导出为图片。

45.当QPS达到峰值时,该如何处理

QPS 峰值时先通过限流保护系统（针对多接口进行令牌桶/漏铜算法，针对单接口设置访问频率上线，防止刷接口），再考虑缓存和降级做兜底，最后通过异步解耦、架构优化等手段做根本提升，同时配合监控确保问题快速响应

46.js 超过 Number 最大值的数怎么处理

JavaScript 的 Number 类型基于 IEEE 754 双精度浮点数，最大安全整数是 Number.MAX_SAFE_INTEGER（2^53 - 1）。超过这个值后可能会导致精度丢失。如果需要处理超出该范围的大整数，使用 BigInt 类型，它可以表示任意精度的整数，避免精度丢失问题

47.使用同一个链接， 如何实现 PC 打开是 web 应用、手机打开是一个 H5 应用

通过在服务端或前端进行 User-Agent 的判断，来实现同一个链接根据设备自动跳转不同页面

48.如何保证用户的使用体验

通常从性能优化、交互设计、错误处理、兼容适配和用户数据分析几个方面去保证用户体验。比如首屏加载会采用懒加载、骨架屏技术，接口数据用本地缓存加快响应，异常情况有降级处理和提示，整体尽可能做到“快、稳、清晰”，让用户在不同设备上都能有流畅、可预期的体验

49.如何解决页面请求接口大规模并发问题

针对大规模并发请求问题，解决方案通常是从多个层面进行优化。前端方面，通过请求去重、合并、节流、懒加载等技术减少不必要的请求；后端方面，采用负载均衡、限流、异步处理等方法保障系统稳定；同时，通过缓存机制、微服务架构和消息队列等技术提高系统的扩展性和稳定性。这些优化措施能够有效减轻系统压力，提升性能并确保用户体验。

50.大文件上传了解多少

大文件上传涉及的技术包括分片上传、断点续传、流式上传等。根据具体的业务需求，结合前端和后端的优化方案，可以提高上传的稳定性、可靠性和效率。对于高并发、大流量的文件上传场景，使用CDN和分片上传等技术可以显著提高性能和用户体验。

51.H5 如何解决移动端适配问题

主要通过以下几点：viewport来控制视窗的缩放；使用媒体查询（@media）来进行多套布局；使用更灵活的单位，例如rem和em；使用flex布局或grid布局；使用一些第三方框架来进行栅格布局支持响应式。

52.站点一键换肤的实现方式有哪些

可以通过使用css变量和js设置变量样式的方式来进行全站样式调整，或者通过使用js加载不同的css文件来换肤，还可以使用css预处理器（比如sass）来调整变量，并通过使用LocalStorage 或 Cookies 存储用户皮肤选择。另外可以使用一些第三方框架，比如element+

53.如何实现网页加载进度条

使用第三方库，或者手动在顶部设置加载进度条，通过动画使进度条滚动，如果提前加载完成滚动条加速前进到100%，如果超时未加载完成，滚动条到达90%时停止前进。

54.常见图片懒加载方式有哪些

通过原生方式loading="lazy"实现。使用 IntersectionObserver 监听图片是否进入视口，先使用data-src绑定src，如果进入视口再动态设置src。或者监听scroll事件，通过window.innerHeight获取视窗高度，通过getBoundingClientRect获取图片的宽高位置信息，判断图片在可视区域后加载src

55.DNS 协议了解多少

将用户输入的域名转换为对应的 IP 地址，让浏览器能发起请求，一次完整的流程包括：浏览器 → 本地 DNS 缓存 → 本地 hosts 文件 → 本地 DNS 服务器 → 根域名服务器 → 顶级域名服务器（如 .com）→ 权威域名服务器 → 返回 IP

56.函数式编程了解多少

函数式编程是一种以纯函数和不可变数据（通过返回新数据来更新状态）为核心的编程范式，在日常开发中会用 map、reduce、filter、高阶函数等方式提升代码可读性与复用性，也使用过 Redux 等函数式理念浓厚的框架。

57.前端水印了解多少

Canvas、SVG 和 DOM 三种常见水印实现方式，实际项目中用过 canvas 方式配合用户身份生成全局水印，同时通过 MutationObserver 防止被删除，主要用于敏感页面内容的防护

58.什么是领域模型

领域模型是一种用来表达业务概念、业务状态以及业务行为的模型。它通过类（对象）、属性和方法来映射真实世界的业务逻辑，是连接业务和技术的桥梁。

59.一直在 window 上面挂东西是否有什么风险

长期在 window 上挂载全局变量确实存在风险，比如污染全局命名空间、变量被覆盖、调试困难和安全问题。现代开发更推荐使用模块化或者封装在命名空间中，避免直接挂载在 window 上

60.小程序为什么会有两个线程

小程序采用了多线程模型，主要有 UI 线程（主线程，负责渲染和交互） 和 JavaScript 线程（逻辑线程，负责业务逻辑和数据计算）。这两个线程的分工可以帮助优化性能和提升用户体验，两个线程并行执行防止阻塞，小程序的 UI 线程 和 JavaScript 线程 通过 消息机制（即事件循环和消息队列）进行通信

61.web 应用中如何对静态资源加载失败的场景做降级处理

当图片加载失败时，可以展示一个默认的占位图或者替代文本。在加载 css或JavaScript 文件时，网络问题或文件缺失可能导致加载失败。可以通过捕获错误并尝试重新加载或者切换到备用的 JS 文件来进行降级处理。

62.html 中前缀为 data- 开头的元素厘性是什么

前缀为 data- 开头的属性是 自定义数据属性（Custom Data Attributes）。这些属性用于在 HTML 元素中嵌入自定义的数据，而不会影响页面的功能或样式

63.移动端如何实现上拉加载，下拉刷新

下拉刷新一般用于刷新当前页面内容，用户通过下拉触发。可以通过监听 touchstart（记录用户的滑动开始位置）、touchmove（计算下拉的距离，如果下拉的距离超过某个阈值，显示加载动画） 和 touchend（判断是否执行刷新操作） 事件来实现。

上拉加载通过监听 scroll 事件来判断当前滚动位置，如果滚动到底部或者接近底部时，触发加载更多内容的操作。

64.如何判断dom元素是否在可视区域

getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。通过此方法可以获取元素的四个边界（上、下、左、右），然后与视口的尺寸（window.innerHeight）进行比较，从而判断元素是否可见。

或者使用IntersectionObserver来异步监听一个元素是否与视口相交。它比监听滚动事件更高效，并且可以更精确地控制元素是否出现在视口内。

65.如何通过设置失效时间清除本地存储的数据

将信息存储在localStorage，sessionStorage或者cookie中，并记录当前时间和失效时间，在下次调用的时候检查如果超过失效时间，自动清除数据，或者设置定时任务清除数据。

66.package.json 里面 sideEffects 属性的作用是什么

用于 优化 Tree Shaking（摇树优化） ，就是标记哪些文件是“纯的”（无副作用的），哪些不是，帮助打包工具判断哪些代码可以安全地移除。

Tree Shaking 是一种在打包阶段 移除没有被使用的代码 的技术。比如你从某个库里只引入了 A 方法，库里还有 B 和 C，打包时就会尝试把 B 和 C 删掉。但有些文件即使看起来没被用到，其实可能会执行副作用代码（比如修改全局变量、打日志、插入样式、注册组件等）。如果误删了这些代码，可能导致项目运行出错。

67.为什么 SPA 应用都会提供一个 hash 路由，好处是什么

在 SPA（单页应用）中使用 hash 路由，主要是为了解决浏览器刷新时资源路径问题，确保前端路由不会被服务端误解析

68.vue如何监听路由变化

在 Vue 中监听路由变化可以通过 watch $route 或路由守卫如 beforeRouteUpdate 实现。Vue 3 中则可以使用组合式 API 中的 watch 搭配 useRoute 来监听路由对象变化。这些方法可以用于做权限控制、埋点、数据刷新等逻辑。

69.单点登录是什么？具体流程是什么？

用户在一次登录后，就可以在多个相互信任的系统中无缝访问，无需再次登录。用户在打开A系统的时候，如果检测到未登录，会跳转sso系统进行登录，登录成功后系统生成一个token，携带token返回A子系统，A系统验证token的合法性后，登录成功并生成自己的cookie。打开B系统时自动跳转到sso系统进行登录，发现用户已登录，之后携带token返回B系统，B系统验证token合法性后登录成功，并生成自己的cookie。

70.web 网页如何禁止别人移除水印

使用 MutationObserver 监听水印节点是否被篡改或删除，或者设置定时任务，每段时间刷新水印

71.如何理解数据驱动视图， 有哪些核心要素

“数据驱动视图”是现代前端框架的核心思想，它通过操作数据状态，自动完成视图更新，解耦了数据与 DOM 的操作，极大提升了开发效率与代码可维护性。它的关键在于响应式系统、虚拟 DOM、声明式渲染等机制的配合。

72.JS 执行 100 万个任务，如何保证浏览器不卡顿

为了防止浏览器在处理大量任务（如 100 万个操作）时卡顿，会采用任务切片（Task Chunking）的思路。通过 setTimeout、requestIdleCallback 或 requestAnimationFrame 分批执行任务，保证主线程能持续响应用户交互。如果任务是 CPU 密集型的，则会使用 Web Worker 将计算任务转移到子线程，从而提升性能和用户体验。

73.JS 放在 head 里和放在 div 里有什么区别

将 JS 放在 <head> 中会阻塞页面渲染，容易导致白屏或 DOM 未加载的问题；通常建议将 <script> 放在 <body> 最后，或者在 <head> 中使用 defer 属性加载脚本，以提高页面性能和保证 DOM 操作安全。

74.虚拟混动加载原理是什么，用JS 代码简单实现一个虚拟 滚动加加载

虚拟滚动技术通过仅渲染可视区域内的内容来提高性能，特别适用于处理大量数据时。简单说就是通过虚拟dom来渲染当前可是区域的内容，当页面滚动到可视区域的边界时，通过修改虚拟dom来加载新内容，并移除不可见的内容

75.介绍一下requestldleCallback api

允许开发者在浏览器空闲时执行任务。它可以帮助开发者将不重要的任务安排在浏览器渲染的空闲时间，从而不会阻塞主线程的渲染操作，提高用户体验。用于资源预加载，延迟加载，任务调度

76.documentFragment api是什么，有哪些使用场景

一个轻量级的、临时的容器，用于存储 DOM 节点。它本身不是文档的一部分，但可以在内存中持有一组 DOM 元素。当你将内容添加到 DocumentFragment 中时，它不会立即对页面造成影响。只有将其内容插入到文档中时，才会发生真正的 DOM 更新。

通常用于批量添加节点到 DOM 中时，可以将所有节点添加到 DocumentFragment 中，最后一次性将其添加到页面上，这样能显著减少页面的渲染次数，提升性能。

77.git pull 和 git fetch 有啥区别

git fetch更新但不会合并分支，git pull会先执行git fetch，然后合并代码到本地分支

78.如何保证系统稳定性

为了保证系统的稳定性，需要通过高质量的代码、性能优化、错误监控、兼容性测试、网络处理、自动化测试、以及合理的版本控制等手段，确保系统在不同环境下平稳运行，并及时发现和解决潜在问题。

79.V8 里面的 JT 是什么

V8 中的 JT（JIT 编译器）是 JavaScript 性能优化的关键技术之一，通过动态编译将 JavaScript 代码转化为机器码，极大提高了代码的执行速度

80.vue 中 Scoped Styles 是如何实现样式隔离的，原理是啥

Vue 的 scoped 样式通过为每个组件的样式生成独特的选择器，确保样式只作用于当前组件的元素，从而实现了样式的隔离。通过这种方式，Vue 能够有效避免组件间样式冲突，提升开发体验。