前端微服务架构的实践经验
一、什么是微前端微前端是一种类似于微服务的架构理念，它将前端应用分解成一些更小、更简单的能够独立开发、测试、部署的应用，而在用户看来仍然是内聚的单个产品。
1. 核心价值
技术栈无关
独立开发部署
增量升级
团队自治
二、实现方案1. 基于路由分发1234567891011121314151617181920212223242526272829303132333435363738394041// router.jsclass MicroRouter { constructor() { this.apps = new Map() this.currentApp = null this.init() } init() { window.addEventListener('popstate', () => { this.handleRoute(window.location.pathname) }) } register(path, ap ...
前端性能指标有哪些，如何获取和分析？
一、核心性能指标1. 加载性能指标
FCP (First Contentful Paint)
首次内容绘制时间
标记浏览器渲染第一个 DOM 内容的时间点12345678910// 方式一：Performance APInew PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { console.log('FCP:', entry.startTime); }}).observe({ entryTypes: ['paint'] });// 方式二：Web Vitalsimport { getFCP } from 'web-vitals';getFCP(console.log);
LCP (Largest Contentful Paint)
最大内容绘制时间
页面主要内容加载完成的时间12345new Perfor ...
大数据量的 Excel 导出解决方案有哪些？
一、问题背景在实际业务中，经常需要导出大量数据到 Excel 文件，这可能会遇到以下问题：
浏览器内存占用过大
导出过程页面卡顿
请求超时
文件过大下载慢
二、前端导出方案1. 使用 XLSX.js1.1 基础导出1234567891011121314151617181920212223242526import * as XLSX from 'xlsx';class ExcelExport { constructor() { this.workbook = XLSX.utils.book_new(); } // 创建工作表 createSheet(data, sheetName = 'Sheet1') { const worksheet = XLSX.utils.json_to_sheet(data); XLSX.utils.book_append_sheet(this.workbook, worksheet, sheetName); } // 导出文件 ...
说说你对keep-alive的理解是什么？
一、Keep-alive 是什么keep-alive是vue中的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM
keep-alive 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们
keep-alive可以设置以下props属性：
include - 字符串或正则表达式。只有名称匹配的组件会被缓存
exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存
max - 数字。最多可以缓存多少组件实例
关于keep-alive的基本用法：
123<keep-alive> <component :is="view"></component></keep-alive>
使用includes和exclude：
12345678910111213<keep-alive include="a,b"> <component :is="view"></component></keep-alive& ...
你知道vue中key的原理吗？说说你对它的理解
一、Key是什么开始之前，我们先还原两个实际工作场景
当我们在使用v-for时，需要给单元加上key
123<ul> <li v-for="item in items" :key="item.id">...</li></ul>
用+new Date()生成的时间戳作为key，手动强制触发重新渲染1<Comp :key="+new Date()" />
那么这背后的逻辑是什么，key的作用又是什么？
一句话来讲
key是给每一个vnode的唯一id，也是diff的一种优化策略，可以根据key，更准确， 更快的找到对应的vnode节点
场景背后的逻辑当我们在使用v-for时，需要给单元加上key
如果不用key，Vue会采用就地复地原则：最小化element的移动，并且会尝试尽最大程度在同适当的地方对相同类型的element，做patch或者reuse。
如果使用了key，Vue会根据keys的顺序记录element，曾经拥有了key的elemen ...
请描述下你对vue生命周期的理解？在created和mounted这两个生命周期中请求数据有什么区别呢？
一、生命周期是什么生命周期（Life Cycle）的概念应用很广泛，特别是在政治、经济、环境、技术、社会等诸多领域经常出现，其基本涵义可以通俗地理解为“从摇篮到坟墓”（Cradle-to-Grave）的整个过程在Vue中实例从创建到销毁的过程就是生命周期，即指从创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程我们可以把组件比喻成工厂里面的一条流水线，每个工人（生命周期）站在各自的岗位，当任务流转到工人身边的时候，工人就开始工作PS：在Vue生命周期钩子会自动绑定 this 上下文到实例中，因此你可以访问数据，对 property 和方法进行运算这意味着你不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())
二、生命周期有哪些Vue生命周期总共可以分为8个阶段：创建前后, 载入前后,更新前后,销毁前销毁后，以及一些特殊场景的生命周期
生命周期
描述
beforeCreate
组件实例被创建之初
created
组件实例已经完全创建
beforeMount
组件挂载之前
...
JavaScript 引擎的理解
一、什么是 JavaScript 引擎JavaScript 引擎是一个专门处理 JavaScript 代码的程序。它负责解析和执行 JavaScript 代码，将我们编写的 JavaScript 代码转换为机器能够理解和执行的机器码。
目前主流的 JavaScript 引擎有：
V8（Google）：用于 Chrome 浏览器和 Node.js
SpiderMonkey（Mozilla）：用于 Firefox 浏览器
JavaScriptCore（Apple）：用于 Safari 浏览器
Chakra（Microsoft）：用于 IE 和 Edge 浏览器（旧版）
二、主要组成部分1. Memory Heap（内存堆）
用于存储对象、数组等引用类型数据
进行动态内存分配
包含垃圾回收机制（分代回收、标记清除、引用计数等）
处理内存碎片化问题
2. Call Stack（调用栈）
记录代码执行的上下文
基于 LIFO（后进先出）原则
包含以下信息：
局部变量
参数
返回地址
临时变量
3. Parser（解析器）解析过程分为两个阶段：
词法分析（Tokenization）
...
了解的js数据结构？
什么是数据结构？数据结构是计算机存储、组织数据的方式。数据结构意味着接口或封装：一个数据结构可被视为两个函数之间的接口，或者是由数据类型联合组成的存储内容的访问方法封装。
我们每天的编码中都会用到数据结构数组是最简单的内存数据结构下面是常见的数据结构：
数组（Array）
栈（Stack）
队列（Queue）
链表（Linked List）
字典
散列表（Hash table）
树（Tree）
图（Graph）
堆（Heap）
数组（Array）数组是最最基本的数据结构，很多语言都内置支持数组。数组是使用一块连续的内存空间保存数据，保存的数据的个数在分配内存的时候就是确定的。
在日常生活中，人们经常使用列表：待办事项列表、购物清单等。
而计算机程序也在使用列表，在下面的条件下，选择列表作为数据结构就显得尤为有用：数据结构较为简单不需要在一个长序列中查找元素，或者对其进行排序反之，如果数据结构非常复杂，列表的作用就没有那么大了。
栈（Stack）栈是一种遵循后进先出（LIFO）原则的有序集合在栈里，新元素都接近栈顶，旧元素都接近栈底。每次加入新的元素和拿走元素都在顶部操作
队列（Qu ...
Javascript如何实现继承？
一、是什么继承（inheritance）是面向对象软件技术当中的一个概念。
如果一个类别B”继承自”另一个类别A，就把这个B称为”A的子类”，而把A称为”B的父类别”也可以称”A是B的超类”
继承的优点
继承可以使得子类具有父类别的各种属性和方法，而不需要再次编写相同的代码
在子类别继承父类别的同时，可以重新定义某些属性，并重写某些方法，即覆盖父类别的原有属性和方法，使其获得与父类别不同的功能
虽然JavaScript并不是真正的面向对象语言，但它天生的灵活性，使应用场景更加丰富
关于继承，我们举个形象的例子：
定义一个类（Class）叫汽车，汽车的属性包括颜色、轮胎、品牌、速度、排气量等
1234567class Car{ constructor(color,speed){ this.color = color this.speed = speed // ... }}
由汽车这个类可以派生出”轿车”和”货车”两个类，在汽车的基础属性上，为轿车添加一个后备厢、给货车添加一个大货箱
12 ...
地图海量点渲染的解决方案有哪些？
一、问题背景在地图应用中，经常需要展示海量的点位数据（如出租车、共享单车、监控点位等）。当数据量达到几万甚至几十万个点时，会带来以下问题：
渲染性能下降
交互响应迟缓
内存占用过大
视觉上的点位重叠
二、解决方案1. 数据分层与分块1.1 按层级分组12345678910111213141516class LayerManager { constructor() { this.layers = new Map(); // 存储不同层级的数据 } addPoint(point, zoom) { if (!this.layers.has(zoom)) { this.layers.set(zoom, new Set()); } this.layers.get(zoom).add(point); } getVisiblePoints(zoom) { return this.layers.get(Math.floor(zoom)) || new Set() ...
