1.给数字加千分位分隔符（每三位加 ,）常见有三种实现方式：
正则实现：
javascript
function format(num) {
return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
}
console.log(format(123456789)) // 123,456,789字符串实现：
javascript
function format(num){
let str = num.toString()
let result = ''
let count = 0
for(let i = str.length - 1;i >= 0; i++){
result = str[i] + result
count++
if(count % 3 === 0 && i !== 0){
result = ',' + result
}
}
return result
}2.对前端的理解
前端是负责用户界面展示和交互逻辑实现的技术领域，通过浏览器将数据和服务以可视化形式呈现给用户。
前端的核心职责主要包括：
页面展示：使用 HTML + CSS 构建页面结构和样式，实现用户界面。
交互逻辑：使用 JavaScript 实现用户交互、事件处理、数据操作等功能。
与后端通信：通过 HTTP / AJAX / Fetch / WebSocket 等方式与后端进行数据交互。
工程化与架构：通过构建工具、模块化、组件化等方式提高开发效率和代码可维护性。
简单来说：前端 = 页面展示 + 用户交互 + 数据通信 + 工程化开发
在性能优化方面，通常从以下几个方面进行：
网络优化，如 CDN、缓存、HTTP/2、资源压缩
资源优化，如代码压缩、图片优化、按需加载
渲染优化，如减少 DOM 操作、避免重排重绘、防抖节流
代码优化，如组件拆分、事件委托、缓存计算结果
在编译优化方面，通常通过构建工具（如 Webpack、Vite）进行优化，包括：
Tree Shaking：去除未使用代码。
Code Splitting：将代码拆分成多个 chunk。
懒加载：只在需要的时候加载模块。
代码压缩：删除空格，删除注释
公共资源提取：
从而减少打包体积，提高页面加载速度和整体性能。
3.如何优化渲染前端10000条数据
常见的优化方法包括：
分页加载：一次只渲染部分数据
虚拟列表：只渲染可视区域数据，这是最常用的方法
虚拟列表实现的核心思想是只渲染可视区域，
假设：每一项高度 = 30px，数据 = 10000，总高度：totalHeight = 10000 × 30
container
├─ spacer(height: 300000px)，spacer 是一个占位元素（占位 div），它的作用是：撑开列表的总高度，让滚动条看起来像有 10000 条数据一样。
└─ list(只渲染20条)
javascript
const itemHeight = 30
const visibleCount = 20
container.addEventListener('scroll', () => {
const scrollTop = container.scrollTop
const start = Math.floor(scrollTop / itemHeight)
const end = start + visibleCount
render(data.slice(start, end))
})每一个列表项高度 = 30px，第n条的位置 = n × itemHeight，const visibleCount = 20，意思：屏幕最多能看到 20 条数据，scrollTop 表示：已经向下滚动了多少 px，举例：scrollTop = 0 顶部；scrollTop = 300 向下滚动300px；scrollTop = 900 向下滚动900px
分批渲染：利用 requestAnimationFrame 分批插入 DOM
DocumentFragment：减少 DOM 操作次数
Web Worker：将复杂计算放到子线程
4.简述一下css盒模型，以及box-sizing属性对他的影响
CSS盒模型是元素的布局模型，由 content、padding、border、margin 组成；box-sizing 用来控制宽高计算方式，content-box 只包含内容，而 border-box 包含 padding 和 border，实际开发中通常使用 border-box。
5.Promise有哪几种状态？Promise.all和Promise.allSettled有什么区别？
Promise 有三种状态：pending、fulfilled 和 rejected。Promise 创建时是 pending 状态，当异步操作成功时变为 fulfilled，失败时变为 rejected。Promise 的状态一旦改变就不可再修改。
Promise.resolve 用来快速创建一个已成功的 Promise，而 new Promise 用来创建 Promise 并执行异步逻辑。then 方法一定会返回一个新的 Promise，返回普通值会变成 fulfilled，返回 Promise 会跟随其状态，抛出错误会变成 rejected。Promise.all 表示全部成功才成功，Promise.race 表示谁先完成返回谁，Promise.allSettled 表示等待所有 Promise 执行完成并返回每个结果状态。
6.数组去重有哪些实现方式？最少三种
常见有三种方式：第一种是使用 ES6 的 Set 结构，通过 [...new Set(arr)] 实现去重；第二种是使用 filter 结合 indexOf 判断元素第一次出现的位置；第三种是通过循环配合 includes 或 indexOf 判断新数组中是否已经存在该元素。
7.如何进行前端性能优化？有哪些性能量化指标？
前端性能优化一般从资源加载、渲染性能、网络请求和代码层面进行。例如通过代码压缩、图片优化、懒加载、CDN、浏览器缓存减少加载时间，通过减少 DOM 操作、使用虚拟列表、节流防抖等优化渲染性能，同时利用 HTTP/2 和 gzip 提高网络传输效率。
常见的性能指标包括 Web Vitals，比如 FCP（首次内容绘制）、LCP（最大内容渲染时间）、CLS（布局偏移）、TTI（可交互时间）以及 TBT（主线程阻塞时间），这些指标可以通过 Lighthouse 或 Chrome DevTools 进行监控。
8.微前端是什么，什么情况下使用。常见的实现方案是哪些
微前端是一种将大型前端应用拆分成多个独立子应用的架构思想，每个子应用可以独立开发、部署和升级，主应用负责整合它们。适用于大型项目、多团队协作、不同技术栈共存或者渐进式改造老项目的场景。
常见方案包括：基于 iframe（完全隔离，但性能差）、动态加载 JS/CSS 资源（主应用通过 script/link 加载子应用）、以及框架级方案，如 single-spa、Qiankun（提供 sandbox、样式隔离、路由管理）和 Webpack 5 的 Module Federation（模块级共享，动态加载远程模块）。
9.谈谈你对跨域的理解，生产环境下通常怎么解决跨域问题
跨域是浏览器的安全策略，同源策略会阻止一个域名的网页请求另一个域的资源。跨域包括协议、域名或端口不同的情况。
首选方案是用Nginx做反向代理。将前端和后端部署在同个域下，通过Nginx转发API请求，从根源消除跨域。如果必须保持跨域架构，我会让后端开启CORS。但生产环境配置要特别注意安全性------Access-Control-Allow-Origin必须指定具体域名，不能用*；如果涉及Cookie，还要配合withCredentials并在服务端做相应配置。
10.如果让你设计一个虚拟列表，你的核心思路是什么？
计算容器可视高度，根据单行高度计算可渲染的行数。
监听滚动事件，根据 scrollTop 计算当前可视区域起始索引和结束索引，只渲染这部分 DOM。
使用占位元素（padding 或 transform）保持滚动条长度，模拟完整列表。
回收和复用 DOM 节点，减少创建和销毁开销。
可选：如果列表项高度不固定，需要动态记录每个 item 高度并计算偏移量。
11.token无感刷新
Token 无感刷新是一种保证用户登录状态持续、用户无需重新登录的机制。它通常在前后端分离项目中使用，核心思路是使用 短期有效的 access_token 和 长期有效的 refresh_token。
当用户登录时，服务器会下发 access_token 和 refresh_token。access_token 用于接口访问，有短期有效期，refresh_token 用于在 access_token 过期时刷新 token。
前端在请求接口时，如果发现 access_token 过期（通常返回 401），会自动调用刷新接口，用 refresh_token 换取新的 access_token，然后继续原来的请求，这个过程对用户是透明的，因此称为无感刷新。
这样既保证了安全性（短期 token 降低被盗风险），又保证了用户体验（无需频繁登录）。在实现中，refresh_token 一般放在 HttpOnly Cookie 里，以防 XSS 攻击，同时可以设置刷新频率和过期策略来保证安全。
12.reactive和ref的区别
在 Vue3 中，ref 和 reactive 都用于创建响应式数据。ref 一般用于基本数据类型，需要通过 .value 访问；reactive 主要用于对象或数组类型，直接访问属性即可。在实际开发中，简单变量通常用 ref，复杂对象状态通常使用 reactive。
13.vue双向数据流 react单向数据流
Vue 提供了 v-model 实现表单的双向数据绑定，数据可以从 data 更新到 view，也可以从 view 更新到 data。而 React 采用单向数据流，state 只能通过 setState 修改，视图更新必须经过 state 变化触发。需要注意的是 Vue 在组件通信上其实也是单向数据流，props 只能由父组件向子组件传递。
Vue 提供了 v-model 这样的语法糖，在表单组件中可以实现数据和视图的双向同步。
v-model 的本质其实是 value 属性绑定 + input 事件监听。当 data 改变时会更新 view，当用户输入触发 input 事件时又会更新 data，所以看起来像是数据可以双向流动。