吃透前端项目优化系列（二）：首屏渲染优化 + 性能指标拆解首屏加载慢、性能指标看不懂
引言 首屏加载慢 1 秒，用户流失率可能上涨 20%！这节专门解决 “首屏渲染” 和 “性能指标” 两大痛点 —— 从资源加载怎么排优先级，到页面渲染阻塞怎么破，再到核心 Web 指标怎么看，连 Vue3 特有的编译优化都拆成了实操步骤，帮你让页面加载又快又稳～ 性能优化不是 “凭感觉提速”，而是看懂指标、精准发力 开始 本节聚焦第二模块，专注首屏渲染与性能指标： | 序号 | 优化方向 | 本节聚焦 | 核心价值 | | | | |...
new操作
new操作符做了以下工作 手写new操作符（适用于Class类和Function构造函数） 1. 使用 ： 创建了一个新的空对象，并将其原型设置为 。这等同于手动设置 的效果，但更符合标准和规范。 2. 泛型类型参数 ： 定义了 是一个构造函数类型，它接受任意数量的参数并返回任意类型的实例。 InstanceType 是 TypeScript 中的一个类型操作符，用于从一个构造函数类型中提取其实例类型 表示 构造函数所创建的实例类型，这...
React基础篇前端面试题
<span style="color: var( g headertextcolor);" 一、基础概念</span 1.React核心设计思想 组件化设计 原子化构建 ： 分解为独立的功能单元（如函数式组件/类组件） 组合模式 ：通过 嵌套实现组件树结构 隔离型 ：每个组件维护自身状态和样式（ 生态支持） 复用机制 ：高阶组件（ ）与自定义 实现逻辑复用 声明式编程范式 状态驱动 ： 的数学表达式（无需手动操作DOM） 抽象渲染 ：开...
React进阶篇前端面试题
<span style="color: var( g headertextcolor);" 一、核心机制</span 1.合成事件机制 1.设计目的与核心原理 1.跨浏览器一致性 统一不同浏览器的事件处理接口（如 的行为） 修复浏览器兼容性问题（如IE事件模型差异） 2.性能优化 事件委托 ：将事件绑定到根节点（React 17+ 为应用根DOM），而非每个子元素 事件池化 （ ）：复用事件对象，减少内存开销 3.扩展能力 支持自定义事...
React高阶篇前端面试题
<span style="color: var( g headertextcolor);" 一、React Router</span 2.React Router的核心作用 SPA导航 ：在单页面应用中管理不同视图的切换，无需重新加载页面 URL与组件映射 ：将URL路径映射到对应的React组件，保持UI和URL同步 历史记录管理 ：支持浏览器历史记录的导航（前进/后退） 2.核心组件与API 1.路由器类型 BrowserRoute...
Vue3基础篇前端面试题
<span style="color: var( g headertextcolor);" 一、生命周期</span 核心变化 1.组合式API的引入 setup()替代beforeCreate和created 。所有组合式API逻辑在此函数中初始化，替代Vue2的 data、method 等选项式配置 钩子函数前缀on 。生命周期函数需要从Vue显示导入，如onMounted,且只能在setup()或 中使用。 2.钩子函数重命名 b...
Vue3进阶篇前端面试题
Vue进阶 一、keep alive 1.核心作用和使用场景 1.作用 缓存组件实例 ：避免重复销毁和创建，保留组件状态（如 ） 提升性能 ：适用于需要频繁切换但状态需保留的组件（如 ） 2.使用方式 2.生命周期钩子变化 新增钩子（仅在被缓存的组件中触发） onActivated ：组件被激活（插入DOM）时触发。 onDeactivated ：组件被停用（移除DOM）时触发 执行顺序: 首次加载 ： 切换离开 ： 再次进入 ： 彻底...
事件循环：JavaScript 的隐形排队大师
🍵 一、前情提要：JS 为啥搞异步？ JavaScript 天生是单线程的。啥意思？就是说它 一心只能做一件事 。 但现实世界太残酷：网络请求慢、I/O 慢、用户爱点按钮…… 那咋办？全堵着吗？页面卡死？ 别怕，JS 引擎和浏览器早想好了： “你主线程单着就单着吧，我给你整个事件循环系统 + 异步队列，你任务先放后处理，效率也能起飞。” 🔁 二、事件循环是什么？ 想象 JS 运行机制像一台寿司传送带 🍣： 👨🍳...
如何跨标签页通信
🎨 方案1：BroadCast Channel（对讲机频道） 🛠️ 方案2：Service Worker（隐形邮差） 📦 方案3：LocalStorage（共享小本本） 👨💻 方案4：Shared Worker（共享办公室） 🕵️♂️ 方案5 6：轮询侦查队（IndexedDB/Cookie） 👨👦 方案7：window.open（父子悄悄话） 🌐 方案8：WebSocket（专业电话线） 🧩 方案9：Shar...