[{"data":1,"prerenderedAt":412},["ShallowReactive",2],{"navigation-zh-CN":3,"doc-zh-CN-/features/performance":81,"surround-zh-CN-/features/performance":407},[4,23,45,67],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":22},"开始使用","i-lucide-rocket","/getting-started","1.getting-started",[10,14,18],{"title":11,"path":12,"stem":13},"认识 TraceVista","/getting-started/introduction","1.getting-started/1.introduction",{"title":15,"path":16,"stem":17},"5 分钟快速接入","/getting-started/quick-start","1.getting-started/2.quick-start",{"title":19,"path":20,"stem":21},"核心概念","/getting-started/concepts","1.getting-started/3.concepts",false,{"title":24,"icon":25,"path":26,"stem":27,"children":28,"page":22},"产品能力","i-lucide-blocks","/features","2.features",[29,33,37,41],{"title":30,"path":31,"stem":32},"功能总览","/features/overview","2.features/1.overview",{"title":34,"path":35,"stem":36},"性能指标与优化","/features/performance","2.features/2.performance",{"title":38,"path":39,"stem":40},"前端错误监控","/features/errors","2.features/3.errors",{"title":42,"path":43,"stem":44},"访问分析与业务事件","/features/analytics","2.features/4.analytics",{"title":46,"icon":47,"path":48,"stem":49,"children":50,"page":22},"SDK 接入","i-lucide-code-xml","/sdk","3.sdk",[51,55,59,63],{"title":52,"path":53,"stem":54},"安装浏览器 SDK","/sdk/installation","3.sdk/1.installation",{"title":56,"path":57,"stem":58},"SDK 配置","/sdk/configuration","3.sdk/2.configuration",{"title":60,"path":61,"stem":62},"SDK API 参考","/sdk/api","3.sdk/3.api",{"title":64,"path":65,"stem":66},"隐私、安全与采集边界","/sdk/privacy","3.sdk/4.privacy",{"title":68,"icon":69,"path":70,"stem":71,"children":72,"page":22},"网站与额度","i-lucide-folder-cog","/account","4.account",[73,77],{"title":74,"path":75,"stem":76},"管理监控网站","/account/projects","4.account/1.projects",{"title":78,"path":79,"stem":80},"免费接收量与用量规则","/account/quota","4.account/2.quota",{"id":82,"title":34,"body":83,"description":397,"extension":398,"links":399,"meta":403,"navigation":404,"path":35,"seo":405,"stem":36,"__hash__":406},"docs_zh_cn/2.features/2.performance.md",{"type":84,"value":85,"toc":383},"minimal",[86,90,95,98,179,190,194,197,203,222,226,229,234,251,255,258,263,281,285,288,291,295,298,303,317,321,324,335,339,353,356,359,377],[87,88,89],"p",{},"性能指标把“页面很慢”拆成几个可以独立分析的问题：内容出现得慢、点击响应慢、页面布局不稳定、服务器响应慢，分别需要完全不同的优化方法。",[91,92,94],"h2",{"id":93},"先看核心-web-指标","先看核心 Web 指标",[87,96,97],{},"Google 当前定义的 Core Web Vitals 包括 LCP、INP 和 CLS。建议使用真实访问的第 75 百分位（P75）评估页面，并区分移动端与桌面端。",[99,100,101,124],"table",{},[102,103,104],"thead",{},[105,106,107,111,114,118,121],"tr",{},[108,109,110],"th",{},"指标",[108,112,113],{},"体验维度",[108,115,117],{"align":116},"right","良好",[108,119,120],{"align":116},"需要改进",[108,122,123],{"align":116},"较差",[125,126,127,145,162],"tbody",{},[105,128,129,133,136,139,142],{},[130,131,132],"td",{},"LCP",[130,134,135],{},"加载性能",[130,137,138],{"align":116},"≤ 2.5 秒",[130,140,141],{"align":116},"2.5～4 秒",[130,143,144],{"align":116},"> 4 秒",[105,146,147,150,153,156,159],{},[130,148,149],{},"INP",[130,151,152],{},"交互响应",[130,154,155],{"align":116},"≤ 200 毫秒",[130,157,158],{"align":116},"200～500 毫秒",[130,160,161],{"align":116},"> 500 毫秒",[105,163,164,167,170,173,176],{},[130,165,166],{},"CLS",[130,168,169],{},"视觉稳定性",[130,171,172],{"align":116},"≤ 0.1",[130,174,175],{"align":116},"0.1～0.25",[130,177,178],{"align":116},"> 0.25",[87,180,181,182,189],{},"以上区间来自 ",[183,184,188],"a",{"href":185,"rel":186},"https://web.dev/articles/vitals",[187],"nofollow","Web Vitals 官方说明","。阈值适合用作统一基线，但最终仍应结合你的业务页面和用户设备分布判断。",[91,191,193],{"id":192},"lcp主要内容多久出现","LCP：主要内容多久出现",[87,195,196],{},"Largest Contentful Paint 表示视口中最大的内容元素完成渲染的时间，通常对应主图、Banner 或主要文字块。它接近用户对“页面主要内容是否已经出来”的感受。",[87,198,199],{},[200,201,202],"strong",{},"LCP 较高时优先检查：",[204,205,206,210,213,216,219],"ul",{},[207,208,209],"li",{},"首屏大图是否过大，是否使用现代格式、响应式尺寸和预加载",[207,211,212],{},"关键资源是否被 CSS、字体或同步 Script 阻塞",[207,214,215],{},"服务端 TTFB 是否过高",[207,217,218],{},"首屏内容是否依赖客户端请求和大量 JavaScript 才能渲染",[207,220,221],{},"CDN、缓存和资源域名连接是否合理",[91,223,225],{"id":224},"inp交互是否及时响应","INP：交互是否及时响应",[87,227,228],{},"Interaction to Next Paint 衡量用户点击、触摸或键盘交互到下一次视觉更新之间的延迟。数值高时，用户会感觉按钮“点了没反应”或输入卡顿。",[87,230,231],{},[200,232,233],{},"INP 较高时优先检查：",[204,235,236,239,242,245,248],{},[207,237,238],{},"是否存在超过 50 毫秒的长任务",[207,240,241],{},"点击处理函数是否同步执行了大量计算",[207,243,244],{},"Vue/React 更新是否一次触发过大的组件树渲染",[207,246,247],{},"第三方脚本是否长期占用主线程",[207,249,250],{},"是否可以拆分任务、延迟非关键工作或使用 Web Worker",[91,252,254],{"id":253},"cls页面是否意外跳动","CLS：页面是否意外跳动",[87,256,257],{},"Cumulative Layout Shift 衡量页面生命周期内意外布局移动的程度。用户准备点击按钮时元素突然移位，是典型的高 CLS 体验。",[87,259,260],{},[200,261,262],{},"CLS 较高时优先检查：",[204,264,265,268,271,274],{},[207,266,267],{},"图片、视频和 iframe 是否预留了宽高或比例",[207,269,270],{},"异步内容、广告和提示条是否插入到已有内容上方",[207,272,273],{},"Web Font 切换是否造成文字尺寸变化",[207,275,276,277],{},"动画是否修改了会触发布局的属性，而不是使用 ",[278,279,280],"code",{},"transform",[91,282,284],{"id":283},"fcp第一次看到页面内容","FCP：第一次看到页面内容",[87,286,287],{},"First Contentful Paint 表示浏览器第一次绘制文字、图片、Canvas 或 SVG 内容的时间。它回答“页面什么时候不再是一片空白”。官方建议 P75 不超过 1.8 秒；超过 3 秒通常属于较差体验。",[87,289,290],{},"FCP 好但 LCP 差，说明页面很快给出反馈，但主要内容仍然加载较慢。可以检查首屏主资源和渲染链路。",[91,292,294],{"id":293},"ttfb服务器首字节速度","TTFB：服务器首字节速度",[87,296,297],{},"Time to First Byte 表示请求开始到收到响应首字节的时间，包含网络连接、服务器处理和链路延迟。它是后续 FCP、LCP 的基础成本。多数站点可以把 0.8 秒以内作为良好参考，超过 1.8 秒应重点调查。",[87,299,300],{},[200,301,302],{},"TTFB 较高时优先检查：",[204,304,305,308,311,314],{},[207,306,307],{},"服务端接口和 SSR 渲染耗时",[207,309,310],{},"数据库查询与外部服务调用",[207,312,313],{},"缓存命中率、CDN 与边缘节点",[207,315,316],{},"重定向、DNS、TLS 与跨地域链路",[91,318,320],{"id":319},"tbt主线程被阻塞多久","TBT：主线程被阻塞多久",[87,322,323],{},"Total Blocking Time 累计页面加载期间长任务超出 50 毫秒的阻塞部分。它可以帮助发现 JavaScript 执行压力，也是没有真实交互时判断响应能力的辅助信号。",[87,325,326,327,330,331,334],{},"TraceVista SDK 使用 ",[278,328,329],{},"PerformanceObserver"," 观察 ",[278,332,333],{},"longtask","，把每个长任务超过 50 毫秒的部分累加。数值越低越好。",[91,336,338],{"id":337},"dcl-与-load","DCL 与 Load",[204,340,341,347],{},[207,342,343,346],{},[200,344,345],{},"DOMContentLoaded（DCL）","：HTML 解析完成，延迟脚本执行结束。",[207,348,349,352],{},[200,350,351],{},"Load","：页面及其依赖资源完成加载。",[87,354,355],{},"它们适合观察页面生命周期和历史趋势，但不直接等同于用户看到主要内容或可以交互的时间，因此不能替代 LCP 与 INP。",[91,357,358],{"id":358},"如何正确解读数据",[360,361,362,365,368,371,374],"ol",{},[207,363,364],{},"优先看分位数和分布，不只看平均值。",[207,366,367],{},"移动端和桌面端分开判断。",[207,369,370],{},"按页面比较，避免用一个全站数值掩盖局部慢页面。",[207,372,373],{},"将性能变化与版本发布、访问量和错误变化放在一起看。",[207,375,376],{},"浏览器对 Performance API 的支持不同，缺失指标不等同于数值为零。",[378,379,380],"note",{},[87,381,382],{},"TraceVista 当前基于浏览器原生 Performance API 直接采集。其样本、浏览器覆盖和聚合方式可能与 Chrome UX Report 或其他平台不同，适合观察本平台内的真实趋势，不建议把不同平台的单个数值机械地一一对比。",{"title":384,"searchDepth":385,"depth":386,"links":387},"",3,2,[388,389,390,391,392,393,394,395,396],{"id":93,"depth":386,"text":94},{"id":192,"depth":386,"text":193},{"id":224,"depth":386,"text":225},{"id":253,"depth":386,"text":254},{"id":283,"depth":386,"text":284},{"id":293,"depth":386,"text":294},{"id":319,"depth":386,"text":320},{"id":337,"depth":386,"text":338},{"id":358,"depth":386,"text":358},"理解 LCP、INP、CLS、FCP、TTFB、TBT、DCL 和 Load 的作用、参考区间与常见优化方向。","md",[400],{"label":188,"icon":401,"to":185,"target":402},"i-lucide-external-link","_blank",{},true,{"title":34,"description":397},"RAEhXqx0wN",[408,410],{"title":30,"path":31,"stem":32,"description":409,"children":-1},"从访问、性能、错误和业务事件四个角度，了解 TraceVista 如何呈现完整的用户体验。",{"title":38,"path":39,"stem":40,"description":411,"children":-1},"了解自动捕获的错误类型、上下文、去重和限流机制，以及如何主动报告业务异常。",1789572467809]