PerformancePaintTiming 提供的 first-paint 与 first-contentful-paint 有什么区别,FCP 偏晚通常意味着什么?
围绕“PerformancePaintTiming 提供的 first-paint 与 first-contentful-”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖必须区分任意像素首绘与首个内容(文本、图片、canvas)绘制,并能把 FCP 偏晚归因到渲染阻塞资源链上。
性能优化专题面试题第 2 页,显示第 51–100 题,共找到 340 道完整解析,可继续按分类、标签与关键词缩小范围。
按稳定语义路径排序
围绕“PerformancePaintTiming 提供的 first-paint 与 first-contentful-”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖必须区分任意像素首绘与首个内容(文本、图片、canvas)绘制,并能把 FCP 偏晚归因到渲染阻塞资源链上。
围绕“给 touchstart、wheel 监听加 passive:true 为什么能改善滚动流畅度,加上之后代码里不能再”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要解释浏览器无需等待监听器决定是否取消默认滚动即可立即合成滚动帧,以及 passive 下 preventDefault 无效。
围绕“为什么用 transform 和 opacity 做动画通常比修改 top/left 或 width 更流畅”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖回答需要围绕必须落到三类属性分别触发布局、绘制、仅合成的流水线差异上。
围绕“什么时候应该用 IndexedDB 游标而不是直接用 get 或 index”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖必须给出范围扫描和分页场景。
围绕“localStorage 存储中 JSON 序列化和深层嵌套有什么问题”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖必须讨论性能与数据大小边界,以及备用方案。
本题解释 Transferable 对象(如 ArrayBuffer)在 Worker postMessage 中的零拷贝传递原理:共享所有权转移而非复制,原上下文对象被分离;对比结构化克隆,突出性能与安全优势,并给出使用边界和一些可转移对象类型。
围绕“CSS 的 contain: layout 或 contain: paint 如何帮助解决由全屏不必要的重排或绘制引”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要解释 containment 隔离盒内容与外部布局,减少重排范围,并说明应用场景(如长列表项),不深入小册子。
围绕“:has() 伪类为什么被称为“父选择器”?它的引入对 CSS 选择器有哪些影响”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要解释能选择包含某子元素的元素,以及性能注意。
围绕“在哪些情况下会创建独立的合成层?如何利用 will-change 提升动画性能”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖列出常见触发条件,并说明过度使用 will-change 反而带来内存开销。
围绕“在 CSS 动画中频繁修改 CSS 自定义属性(属性)会导致性能问题吗?为什么推荐避免”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖指出修改自定义属性可能引发大量样式计算。
围绕“给图片应用 filter: grayscale() 后如何用 transition 实现平滑去色?会有什么性能瓶颈”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖回答需要围绕强调过渡 filter 会持续重新计算像素,建议配合开关,不深入 GPU 加速原理。
对比 transition-property 取 all 与显式列出属性的真实性能差异:浏览器按变更属性创建过渡,开销接近,差异在意外的过渡触发、时长不可拆分与维护风险。
围绕“媒体查询会增加页面性能开销吗?如何避免因媒体查询导致的重排或无效样式”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要讨论渲染原理与优化建议,不压缩图片等独立话题。
解析Kafka生产者在acks=0、1、all下的可靠性差异,包括失败可见性、延迟和副本持久性。详细说明每种级别的消息丢失场景及min.insync.replicas的作用,指导配置选择。
围绕“Docker 容器写文件时 OverlayFS 的写时复制(copy-on-write)会发生什么”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要讲清清容器可写层如何复制只读层文件以及性能影响。
围绕“跨架构构建时 QEMU 模拟何时被触发,对构建速度有何影响”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖解释无原生节点时二进制翻译的开销及何时改用交叉编译或远程原生 builder。
围绕“如何用 --cpuset-cpus 把 Docker 容器绑定到指定 CPU 核,这解决什么性能问题”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要说明绑核的用法与减少上下文切换/缓存失效的收益。
围绕“为什么写入容器可写层的数据性能差且随容器消失,而挂载卷能避免这两点”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要说明存储驱动 copy-on-write 的开销与卷直接挂载绕过存储驱动的差异。
围绕“DocumentFragment 是用来解决什么问题的”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要说明它作为轻量级容器避免多次重排和性能问题,但不适于实际插入。
围绕“在 Express 项目中用 JSON Schema / Zod / Joi 做校验相比手写 if 判断,设计取舍是”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖必须从类型推导复用、声明式可读性、运行时性能与包体积角度给出选型判断,不讲任一库 API 细节。
围绕“超大型前端 monorepo 中 git log/status 变慢,commit-graph 文件如何加速历史遍历”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要说明预计算提交图加速可达性遍历的机制及 core.commitGraph 开关。
围绕“广告、嵌入 iframe 等第三方内容导致布局偏移怎么处理”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要说明为动态尺寸内容预留 min-height 或临时标记容器的策略。
围绕“为什么给图片写死 width/height 属性能防 CLS,有了 CSS aspect-ratio 还需要吗”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要说明浏览器用宽高属性预推 aspect-ratio 预留空间。
围绕“CLS 的会话窗口机制是什么,为什么不用简单的累计总分”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要说明按 1 秒间隔、5 秒上限的窗口取最大值。
围绕“用户点击后 500 毫秒内的布局变化为什么可以不计入 CLS”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要说明 hadRecentInput 排除窗口的设计意图。
围绕“Web 字体加载完成前后的字形切换为什么会造成 CLS,如何缓解”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要说明字体度量差异导致换行变化及 size-adjust 回退字体匹配。
围绕“代码分包为什么能改善首屏性能,入口包多大开始出现明显收益递减”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要说明按需加载减少解析编译与执行成本及拆包过细的请求开销权衡。
围绕“为什么 CSS 是渲染阻塞资源,media 属性如何让部分 CSS 不阻塞渲染”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要说明渲染树依赖完整 CSSOM 及按媒体条件降级阻塞范围。
围绕“用户反馈点击卡顿但本地测不出来,如何定位 INP 差的交互”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要说明用现场数据、web-vitals attribution 与 Performance 面板回放定位慢交互。
围绕“font-display 的 swap、fallback、optional 分别适合什么类型的站点”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要对比三种策略的阻塞期与交换期行为及对 FOIT/FOUT 与 CLS 的影响。
围绕“字体要不要 preload,预加载字体的收益和代价分别是什么”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要说明预加载消除字体晚发现但抢占其他关键资源带宽及 crossorigin 必要性。
围绕“中文字体几 MB 怎么破,字体子集化和 unicode-range 如何工作”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要说明按 unicode-range 分包按需加载与构建期子集化两条路线。
围绕“浏览器如何决定资源的加载优先级,fetchpriority 属性能覆盖什么”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要说明默认优先级推断规则与 fetchpriority 调整图片/fetch 的场景。
围绕“为什么建议用图片 CDN 按设备出图,自己压一套固定尺寸有什么问题”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要说明按请求协商格式与尺寸节省带宽的价值及固定档位的浪费,不做具体 CDN 厂商对比。
围绕“WebP、AVIF、JPEG 之间如何为照片类图片选型,为什么不全部用 AVIF”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要比较压缩率、编码成本与兼容性并给出 picture 回退链。
围绕“原生 loading=lazy 的实现机制是什么,为什么首屏主图不能加”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要说明浏览器按视口距离延迟加载及首屏 LCP 图懒加载的反效果。
围绕“INP 多少算良好,为什么取第 75 分位而不是平均值”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要说明 200/500ms 阈值与 p75 现场数据统计口径。
围绕“INP 把一次交互分成输入延迟、处理时间、呈现延迟,分别由什么导致”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖按三段拆分交互延迟并对应到主线程占用与渲染工作。
围绕“为什么同步 JavaScript 会阻塞解析,async 和 defer 的行为差异是什么”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要对比默认、async、defer 的下载与执行时机及适用场景。
围绕“为什么 CSS background-image 不计入 LCP,这对首屏大图实现方式有什么影响”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要说明 LCP 候选元素不含 CSS 背景图并给出 hero 图的实现建议。
围绕“如何拆分 LCP 的 TTFB、资源加载延迟、渲染延迟等子阶段定位瓶颈”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要说明用四个子阶段拆分 LCP 时间并按最大子阶段决定优化方向。
围绕“为什么 Core Web Vitals 用 LCP 而不是 FCP 衡量加载体验”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖解释 FCP 只表示任何内容出现而 LCP 表示主要内容完成,不罗列所有性能指标。
围绕“什么是长任务,为什么 50 毫秒被当作划分界限”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要说明长任务阻塞输入响应与 RAIL 100ms 预算的关系。
围绕“如何用 PerformanceNavigationTiming 读出一个页面加载的各阶段耗时”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要说明 fetchStart、domInteractive、loadEventEnd 等时间点的含义与计算。
围绕“performance.now 比 Date.now 精度高在哪,为什么实际精度仍被限制”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要说明单调时钟与高分辨率及为防侧信道攻击的粗化。
围绕“如何用 PerformanceObserver 采集 LCP、长任务等条目,为什么回调里可能拿不到全部数据”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要说明 observe buffered 选项与条目缓冲及丢帧场景。
围绕“preconnect 和 dns-prefetch 分别在什么场景值得用”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要对比提前建连与仅 DNS 解析的成本与收益及回退写法。
围绕“link rel=preload 解决什么问题,为什么必须带 as 属性”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要说明预加载提升晚发现资源的优先级及 as 决定请求类型与去重。
围绕“preload 和 prefetch 都提前加载资源,使用场景怎么区分”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要说明 preload 服务当前页高优先级、prefetch 服务未来导航低优先级。
围绕“第三方脚本拖慢总阻塞时间,有哪些不影响功能的治理手段”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要说明延迟加载、facade 临时标记、web worker 隔离等第三方脚本治理。