面试官：SPA（单页应用）首屏加载速度慢怎么解决？

一、什么是首屏加载 首屏时间（First Contentful Paint），指的是浏览器从响应用户输入网址地址，到首屏内容渲染完成的时间，此时整个网页不一定要全部渲染完成，但需要展示当前视窗需要的内容 performance来计算出首屏时间 // 方案一： document.addEventListener('DOMContentLoaded', (event) => { console.log('first contentful painting'); }); // 方案二： performance.getEntriesByName("first-contentful-paint")[0].startTime // performance.getEntriesByName ("first-contentful-paint")[0] // 会返回一个 PerformancePaintTiming的实例，结构如下： { name: "first-contentful-paint

前端性能优化--数据指标体系

参考《经济时报》如何超越核心网页指标阈值，并使跳出率总体提高了 43%，这个例子中主要优化了两个指标：Largest Contentful Paint (LCP) 和 Cumulative Layout 常见的前端性能指标 我们来看下常见的前端性能指标，由于网页的响应速度往往包含很多方面（页面内容出现、用户可操作、流畅度等等），因此性能数据也由不同角度的指标组成： First Contentful Paint Input Delay (FID)、Largest Contentful Paint (LCP)、Cumulative Layout Shift (CLS) 和 Interaction to Next LCP Largest Contentful Paint (LCP) 指标会报告视口内可见的最大图片或文本块的呈现时间（相对于用户首次导航到页面的时间）。 我们可以使用 Largest Contentful Paint API 在 JavaScript 中测量 LCP: new PerformanceObserver((entryList) => {

2026年三大企业级CMS内容管理系统的特点及分析

2、Contentful‌Contentful‌典型的“无头CMS”（HeadlessCMS），被大量用于各种智能终端厂商的内容分发、其专注于API驱动的内容交付，内容与前端完全解耦，适用于多终端（Web API优先的架构‌：Contentful采用API优先的设计理念，将内容作为结构化数据通过API提供给任何前端或设备。 灵活的内容建模能力‌：Contentful允许用户通过可视化界面自定义内容模型，将不同类型的内容（如文章、产品、FAQ）抽象为可复用的数据结构。 强大的系统集成能力：Contentful提供丰富的SDK、插件和API工具链，支持与CRM、ERP、CDP等企业系统深度集成，其与VueStorefront、Gatsby等现代前端框架的无缝对接，进一步提升了电商与营销站点的开发效率

37% 的专业人士使用生成式人工智能工具每周可节省 5-10 小时的时间

4月17日讯，据businesswire报道，Contentful的一份报告显示，38%的受访者表示，使用 genAI 工具每周可节省 1 到近 5 个小时；37% 每周可节省 5 到 10 个小时；11% Contentful 对多个行业、公司规模和国家的 820 名技术和非技术岗位人员进行了调查，以了解 genAI 在工作场所带来的机遇和挑战。

新时代的 Google Web Vitals 性能指标

First Paint (FP), First Contentful Paint (FCP) 内容有用吗？ Largest Contentful Paint (LCP) Total Blocking Time (TBT) Cumulative Layout Shift (CLS) Largest Contentful 然而，其中的一些指标据我们所知，有一些明显的缺陷： 指标 定义 问题 First Contentful Paint (FCP) 浏览器绘制第一块 DOM 内容的时间点。 最大内容绘制在 Calibre[8]（一个性能监控平台）、Chrome DevTools 或通过 Largest Contentful Paint API[9] 都可以使用。 Paint API: https://wicg.github.io/largest-contentful-paint/ [10] 性能得分计算器: https://paulirish.github.io

面试必问——前端页面性能指标基本介绍

基本指标介绍 首先前端性能指标一般分为以下几种： 首屏绘制（First Paint，FP） 首屏内容绘制（First Contentful Paint，FCP） 可交互时间（Time to Interactive ，TTI） 最大内容绘制（Largest Contentful Paint，LCP) 首次有效绘制（First Meaning Paint, FMP） FP 是时间线上的第一个“时间点”，是指浏览器从响应用户输入网址地址 FCP（全称“First Contentful Paint”，翻译为“首次内容绘制”），是指浏览器从响应用户输入网络地址，在页面首次绘制文本，图片（包括背景图）、非白色的 canvas 或者SVG 才算做 LCP（全称“Largest Contentful Paint”）表示可视区“内容”最大的可见元素开始出现在屏幕上的时间点。 initiatorType ：谁发起的请求，具体见下： 值 描述 mark 通过 mark() 方法添加到数组中的对象 paint 通过 measure() 方法添加到数组中的对象 measure first-contentful-paint

性能测试初学指南:利用 Playwright 探索关键 Web 性能指标

entries.length-1];resolve(lastEntry.renderTime||lastEntry.loadTime);});observer.observe({type:'largest-contentful-paint ',buffered:true});//如果LCP已经发生，直接获取constpo=performance.getEntriesByType('largest-contentful-paint');if constpaintEntries=performance.getEntriesByType('paint');constfcp=paintEntries.find(entry=>entry.name==='first-contentful-paint ');//获取LCPconstlcpEntries=performance.getEntriesByType('largest-contentful-paint');constlcp=lcpEntries.length newPerformanceObserver((list)=>{window.lcpEntry=list.getEntries().slice(-1)[0];});observer.observe({type:'largest-contentful-paint

vue项目你一定会用到的性能优化！

说起Lighthouse在现代的谷歌浏览器中业已经集成 他可以分析出我们的页面性能，通过几个指标 Lighthouse 会衡量以下性能指标项： 首次内容绘制（First Contentful Paint 指First Contentful Paint 首次内容绘制 (FCP)与Time to Interactive 可交互时间 (TTI)之间的总时间 最大内容绘制（Largest Contentful 否则就会有如下错误 image.png 接下来我们就从LCP、 FCP和speedIndex 这三个指标入手 FCP（First Contentful Paint） 顾名思义就是首次内容绘制，也就是页面最开始绘制内容的时间 例如，在一个带有文本和首图的网页上，浏览器最初可能只渲染文本部分，并在此期间分发一个largest-contentful-paint条目，其element属性通常会引用一个

或

 。 随后，一旦首图完成加载，浏览器就会分发第二个largest-contentful-paint条目，其element属性将引用 。

2026 AI时代:CMS建站系统及建站平台的选型指南

、写得慢、成本高”的核心痛点，结合合规需求，打造实用化、轻量化的AI功能，同时在国产化适配、本土场景适配上形成优势，国内主流CMS的AI支持程度同样可分为三个梯队，以PageAdmin、Drupal、Contentful 第二梯队：生态型CMS，AI功能丰富且可定制（代表：SiteCore、Contentful）Contentful作为全球知名的无头CMS，其AI能力早已突破“辅助工具”的定位，实现了全链路智能赋能。 此外，Contentful还提供开放的AI接口，支持与AzureOpenAI、ChatGPT、Claude等国外主流大模型无缝对接，企业可嵌入自研模型，打造专属智能平台。 与Contentful类似，SiteCore也支持对接主流国际大模型，实现生成式内容创作，同时借助AI优化资源调度，保障高并发场景下的稳定性。

Chrome Dev Summit 2019，你需要知道关于前端性能的内容都在这里

3 新的性能指标：LCP、TBT、CLS 最大内容渲染 (Largest Contentful Paint - LCP), 页面阻塞总时长(Total Blocking Time - TBT) 和 累积布局位移 最大内容渲染 - LCP LCP - Largest Contentful Paint，代表在viewport中最大的页面元素加载的时间。 相关信息可以查看： w3c提案：https://wicg.github.io/largest-contentful-paint/ LCP介绍：https://web.dev/lcp/ 页面阻塞总时长 -

浏览器页面渲染全解析过程优化及实战指南详解

CRP)优化（一）CRP定义从HTML、CSS、JavaScript加载到首次渲染的整个过程（二）优化步骤分析CRP使用Chrome DevTools的Performance面板分析关键指标：First Contentful Paint (FCP)、Largest Contentful Paint (LCP)减少关键资源数量压缩HTML、CSS、JavaScript合并文件减少HTTP请求使用CDN加速资源加载优化资源加载顺序关键 三）关键优化点异步组件加载：按需加载组件路由懒加载：分割代码，减少初始加载体积预加载策略：提前加载关键路由组件服务端渲染(SSR)：改善首屏加载时间九、性能监控与持续优化（一）关键性能指标First Contentful Paint (FCP)Largest Contentful Paint (LCP)First Input Delay (FID)Cumulative Layout Shift (CLS)（二）监控工具

浏览器之性能指标_FCP

Contentful ❝在 Chrome 的性能指标中，"Contentful" 是一个术语，用来描述页面上已绘制的有意义的内容。 ❞ 这里，再啰嗦一遍上面的部分内容。 Largest Contentful Paint (LCP)：最大内容绘制，指页面中最大的可见内容元素绘制完成并可见的时间点。 "Contentful" 强调了在页面加载过程中绘制的内容具有意义和可见性，与其他不相关的绘制内容（例如背景或辅助元素）相区分。 ---- 网站的首次内容绘制（First Contentful Paint 简称：FCP）是Google核心Web要素中最有意义的指标之一。 : https://www.elegantthemes.com/blog/wordpress/fcp-first-contentful-paint

用户体验角度来看前端性能监控

FCP: First Contentful Paint，第一个内容（文本/SVG/Image等）被绘制在屏幕上的时刻。 从定义上来看这两个指标配合足够我们评估用户看到的页面什么时候不是空白的了。 那么我们将目光转向业界来看一下： FMP: First Meaningful Paint，代表着页面的主要内容被绘制在屏幕上的时刻 SI: Speed Index，代表着页面的可见内容填充速度 LCP: Largest Contentful let lastEntry = perfEntries[perfEntries.length - 1]; // Process the latest candidate for largest contentful paint }); observer.observe({entryTypes: ['largest-contentful-paint']}); 同样从caniuse来看兼容并不好。

图解 SSR 等 6 种前端渲染模式

渲染流程如下图： P.S.其中出现的 FCP 与 TTI 是两个重要的性能指标： FCP（First Contentful Paint）：用户所请求的内容在屏幕上可见的时间点 TTI（Time To Interactive HTML 文件，并进一步借助CDN加速访问： Static rendering happens at build-time and offers a fast First Paint, First Contentful without the need to execute much client-side JS, whereas prerendering improves the First Paint or First Contentful

浏览器页面渲染全解析过程优化及实战指南详解

一）CRP定义 从HTML、CSS、JavaScript加载到首次渲染的整个过程 （二）优化步骤 分析CRP 使用Chrome DevTools的Performance面板分析 关键指标：First Contentful Paint (FCP)、Largest Contentful Paint (LCP) 减少关键资源数量 压缩HTML、CSS、JavaScript 合并文件减少HTTP请求 使用CDN加速资源加载 优化资源加载顺序 异步组件加载：按需加载组件 路由懒加载：分割代码，减少初始加载体积 预加载策略：提前加载关键路由组件 服务端渲染(SSR)：改善首屏加载时间 九、性能监控与持续优化 （一）关键性能指标 First Contentful Paint (FCP) Largest Contentful Paint (LCP) First Input Delay (FID) Cumulative Layout Shift (CLS) （二）

三大企业级CMS内容管理系统的特点及分析

API优先的架构：Contentful采用API优先的设计理念，将内容作为结构化数据通过API提供给任何前端或设备。 灵活的内容建模能力：Contentful允许用户通过可视化界面自定义内容模型，将不同类型的内容（如文章、产品、FAQ）抽象为可复用的数据结构。 强大的系统集成能力：Contentful提供丰富的SDK、插件和API工具链，支持与CRM、ERP、CDP等企业系统深度集成，其与Vue、Storefront、Gatsby等现代前端框架的无缝对接，进一步提升了电商与营销站点的开发效率

前端性能优化学习 02 Web 性能指标「建议收藏」

为了能衡量用户视觉体验，Web 标准中定义了一些性能指标，这些性能指标被各大浏览器标准化实现，例如 First paint（首次绘制）和 First contentful paint（首次内容绘制）。 还有一些由 Web 孵化器社区组（WICG）提出的性能指标，如 Largest Contentful Paint（最大内容绘制）、Time to interactive（可持续交互时间）、First input Animation、Idle、Load） 基于用户体验的核心指标 – 基于 RAIL 下具体的指标方案 新一代型性能指标：Web Vitals – 在以上指标方案的简化，重点 LCP（Largest Contentful First Contentful Paint（FCP） FCP（First Contentful Paint）首次内容绘制，浏览器首次绘制来自 DOM 内容的时间，内容必须是文本、图片（包含背景图）、非白色的 Paint（LCP） LCP（Largest Contentful Paint）最大内容绘制，可视区域中最大的内容元素呈现到屏幕上的时间，用以估算页面的主要内容对用户可见时间。

前端监控 SDK 的一些技术要点原理分析

性能数据采集 chrome 开发团队提出了一系列用于检测网页性能的指标： FP(first-paint)，从页面加载开始到第一个像素绘制到屏幕上的时间 FCP(first-contentful-paint )，从页面加载开始到页面内容的任何部分在屏幕上完成渲染的时间 LCP(largest-contentful-paint)，从页面加载开始到最大文本块或图像元素在屏幕上完成渲染的时间 CLS(layout-shift FCP FCP(first-contentful-paint)，从页面加载开始到页面内容的任何部分在屏幕上完成渲染的时间。 (list) => { for (const entry of list.getEntries()) { if (entry.name === 'first-contentful-paint LCP LCP(largest-contentful-paint)，从页面加载开始到最大文本块或图像元素在屏幕上完成渲染的时间。

前端页面加载性能指标之LCP

什么是 LCPLargest Contentful Paint（LCP）衡量的是页面从开始加载到视口内最大的图片或文本块完全渲染的时间。 console.log(entry.element); lastLcp = entry.startTime; } }});po.observe({ type: "largest-contentful-paint

前端性能优化实战指南：从首屏加载到用户体验的全面提升

核心性能指标 在开始优化之前，我们需要了解几个关键的性能指标： FCP (First Contentful Paint)：首次内容绘制时间，理想值 < 1.8秒 LCP (Largest Contentful runnerResult.lhr.categories.performance.score * 100; // 关键指标 const metrics = runnerResult.lhr.audits; const fcp = metrics['first-contentful-paint '].displayValue; const lcp = metrics['largest-contentful-paint'].displayValue; const cls = metrics entries.length - 1]; this.metrics.lcp = lastEntry.startTime; }).observe({ entryTypes: ['largest-contentful-paint