[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"public:announcements":3,"footer:categories:zh":4,"public:navigations:zh":132,"post:detail:post-21-前端性能优化Cor:zh":177},[],[5,23,39,55,71,88,103,117],{"id":6,"name":7,"slug":12,"description":13,"icon":18,"color":19,"cover_image":20,"created_at":21,"post_count":22},1,{"en":8,"ja":9,"zh":10,"zh_Hant":11},"Technology","テクノロジー","技术","技術","technology",{"en":14,"ja":15,"zh":16,"zh_Hant":17},"Cutting-edge technology exploration and in-depth analysis covering programming languages, frameworks, and architecture design","プログラミング言語、フレームワーク、アーキテクチャ設計を含む先端技術の探究","前沿技术探索与深度分析，涵盖编程语言、框架、架构设计等核心领域","前沿技術探索與深度分析，涵蓋編程語言、框架、架構設計等核心領域","heroicons:cog-6-tooth","#6366f1",null,"2026-09-30T18:09:53.633610Z",8,{"id":24,"name":25,"slug":29,"description":30,"icon":35,"color":36,"cover_image":20,"created_at":37,"post_count":38},2,{"en":26,"ja":27,"zh":28,"zh_Hant":28},"Tutorial","チュートリアル","教程","tutorial",{"en":31,"ja":32,"zh":33,"zh_Hant":34},"Hands-on tutorials from scratch with clear steps and complete code for developers at all levels","ゼロから始める実践的なチュートリアル。明確な手順と完全なコードで、全てのレベルの開発者に最適","从零开始的实战教程，步骤清晰，代码完整，适合各阶段开发者学习","從零開始的實戰教程，步驟清晰，代碼完整，適合各階段開發者學習","heroicons:academic-cap","#10b981","2026-09-30T18:09:53.641581Z",6,{"id":40,"name":41,"slug":45,"description":46,"icon":51,"color":52,"cover_image":20,"created_at":53,"post_count":54},3,{"en":42,"ja":43,"zh":44,"zh_Hant":44},"Frontend","フロントエンド","前端","frontend",{"en":47,"ja":48,"zh":49,"zh_Hant":50},"Full coverage of web frontend development including Vue, React, new CSS features, and performance optimization","Vue、React、CSSの新機能やパフォーマンス最適化を含むWebフロントエンド開発の全領域","Web前端开发全栈覆盖，包括Vue、React、CSS新特性及性能优化等话题","Web前端開發全棧覆蓋，包括Vue、React、CSS新特性及性能優化等話題","heroicons:computer-desktop","#ec4899","2026-09-30T18:09:53.644838Z",7,{"id":56,"name":57,"slug":62,"description":63,"icon":68,"color":69,"cover_image":20,"created_at":70,"post_count":40},4,{"en":58,"ja":59,"zh":60,"zh_Hant":61},"Backend","バックエンド","后端","後端","backend",{"en":64,"ja":65,"zh":66,"zh_Hant":67},"Server-side development best practices including API design, database optimization, and microservices architecture","API設計、データベース最適化、マイクロサービスアーキテクチャを含むサーバーサイド開発の実践","服务端开发实战经验，API设计、数据库优化、微服务架构等深度内容","服務端開發實戰經驗，API設計、數據庫優化、微服務架構等深度內容","heroicons:server-stack","#f59e0b","2026-09-30T18:09:53.647836Z",{"id":72,"name":73,"slug":78,"description":79,"icon":84,"color":85,"cover_image":20,"created_at":86,"post_count":87},5,{"en":74,"ja":75,"zh":76,"zh_Hant":77},"Fullstack","フルスタック","全栈","全棧","fullstack",{"en":80,"ja":81,"zh":82,"zh_Hant":83},"End-to-end development guides covering the full project lifecycle and technology stack selection","フロントエンドからバックエンドまでの開発プロセス全体をカバーするガイド","从前端到后端的全流程开发指南，覆盖完整项目生命周期与技术选型","從前端到後端的全流程開發指南，覆蓋完整項目生命週期與技術選型","heroicons:swatch","#8b5cf6","2026-09-30T18:09:53.650513Z",0,{"id":38,"name":89,"slug":94,"description":95,"icon":100,"color":101,"cover_image":20,"created_at":102,"post_count":56},{"en":90,"ja":91,"zh":92,"zh_Hant":93},"Essays","エッセイ","随笔","隨筆","essays",{"en":96,"ja":97,"zh":98,"zh_Hant":99},"Technical reflections and development insights recording the programmer's growth journey","プログラマーの成長の軌跡を記録する技術的考察と開発の洞察","技术思考与开发心得分享，记录程序员成长路上的点滴感悟","技術思考與開發心得分享，記錄程序員成長路上的點滴感悟","heroicons:pencil-square","#f43f5e","2026-09-30T18:09:53.653105Z",{"id":54,"name":104,"slug":108,"description":109,"icon":114,"color":115,"cover_image":20,"created_at":116,"post_count":56},{"en":105,"ja":106,"zh":107,"zh_Hant":107},"Tools","ツール","工具","tools",{"en":110,"ja":111,"zh":112,"zh_Hant":113},"Development toolchain and productivity tool recommendations to supercharge your development experience","開発効率を飛躍的に向上させるツールチェーンと生産性ツールの推奨","开发工具链与效率提升利器推荐，让你的开发体验如虎添翼","開發工具鏈與效率提升利器推薦，讓你的開發體驗如虎添翼","heroicons:wrench-screwdriver","#06b6d4","2026-09-30T18:09:53.655605Z",{"id":22,"name":118,"slug":123,"description":124,"icon":129,"color":130,"cover_image":20,"created_at":131,"post_count":87},{"en":119,"ja":120,"zh":121,"zh_Hant":122},"Translation","翻訳","翻译","翻譯","translation",{"en":125,"ja":126,"zh":127,"zh_Hant":128},"Curated translations of high-quality foreign technical articles to keep up with international trends","国際的な技術トレンドを追うための厳選された海外技術記事の翻訳","优质外文技术文章精选翻译，紧跟国际技术前沿动态","優質外文技術文章精選翻譯，緊跟國際技術前沿動態","heroicons:language","#84cc16","2026-09-30T18:09:53.658041Z",[133,144,150,157,164,171],{"id":6,"title":134,"url":139,"icon":20,"parent_id":20,"location":140,"order":6,"is_active":141,"target_blank":142,"created_at":143,"updated_at":20},{"zh":135,"en":136,"ja":137,"zh_TW":138},"首页","Home","ホーム","首頁","\u002F","header",true,false,"2026-09-30T18:09:54.251095Z",{"id":24,"title":145,"url":149,"icon":20,"parent_id":20,"location":140,"order":24,"is_active":141,"target_blank":142,"created_at":143,"updated_at":20},{"zh":146,"en":147,"ja":148,"zh_TW":146},"文章","Posts","記事","\u002Fposts",{"id":40,"title":151,"url":156,"icon":20,"parent_id":20,"location":140,"order":40,"is_active":141,"target_blank":142,"created_at":143,"updated_at":20},{"zh":152,"en":153,"ja":154,"zh_TW":155},"分类","Categories","カテゴリー","分類","\u002Fcategories",{"id":56,"title":158,"url":163,"icon":20,"parent_id":20,"location":140,"order":56,"is_active":141,"target_blank":142,"created_at":143,"updated_at":20},{"zh":159,"en":160,"ja":161,"zh_TW":162},"标签","Tags","タグ","標籤","\u002Ftags",{"id":72,"title":165,"url":170,"icon":20,"parent_id":20,"location":140,"order":72,"is_active":141,"target_blank":142,"created_at":143,"updated_at":20},{"zh":166,"en":167,"ja":168,"zh_TW":169},"关于","About","概要","關於","\u002Fpage\u002Fabout",{"id":38,"title":172,"url":176,"icon":20,"parent_id":20,"location":140,"order":38,"is_active":141,"target_blank":142,"created_at":143,"updated_at":20},{"zh":173,"en":174,"ja":175,"zh_TW":173},"留言板","Guestbook","ゲストブック","\u002Fpage\u002Fguestbook",{"id":178,"title":179,"subtitle":20,"slug":180,"source":181,"source_url":20,"audio":20,"video":20,"video_url":20,"content":182,"excerpt":183,"cover_image":20,"author":184,"category":187,"tags":188,"status":211,"visibility":212,"password":20,"views":213,"likes_count":87,"is_pinned":142,"allow_comments":141,"comments_count":6,"is_password_protected":142,"meta_title":179,"meta_description":183,"meta_keywords":214,"created_at":215,"published_at":215,"updated_at":216,"reading_time":6},21,"前端性能优化：Core Web Vitals 实战","post-21-前端性能优化Cor","原创","# 前端性能优化：Core Web Vitals (LCP\u002FCLS\u002FINP) 实战\n\n自 2021 年起 Google 把 Core Web Vitals 纳入搜索排名因子，性能不再只是体验问题，而是直接影响业务增长。三个指标分别衡量加载\u002F稳定\u002F流畅的用户直观感受。\n\n## LCP 最大内容绘制 \u003C2.5s\n\n四大影响因素：慢服务器响应→CDN\u002FHTTP3\u002Fpreconnect关键域名；资源阻塞渲染→内联关键CSS\u002Fdefer非关键JS；资源加载慢→fetchpriority=high\u002Fsrcset多尺寸\u002FAVIF；客户端渲染慢→SSR\u002F孤岛架构。\n\n```typescript\n```typescript\nimport { onCLS, onINP, onLCP, type Metric } from \"web-vitals\";\n\nconst URL = \"\u002Fapi\u002Fanalytics\u002Fvitals\";\nfunction send(metric: Metric) {\n    const body = JSON.stringify({\n        name: metric.name, value: metric.value, rating: metric.rating,\n        id: metric.id, url: location.href, ts: Date.now(),\n    });\n    if (navigator.sendBeacon) navigator.sendBeacon(URL, body);\n    else fetch(URL, { body, method: \"POST\", keepalive: true }).catch(() => {});\n}\nexport function initVitals() {\n    if (location.hostname === \"localhost\") {\n        const log = (m: Metric) => console.log(`[vitals] ${m.name}=${Math.round(m.value)} rating=${m.rating}`);\n        onLCP(log); onCLS(log); onINP(log); return;\n    }\n    onLCP(send); onCLS(send); onINP(send);\n}\n\nexport function scheduleHigh(work: () => void): void {\n    if (\"scheduler\" in window && \"postTask\" in (window as any).scheduler)\n        (window as any).scheduler.postTask(work, { priority: \"user-blocking\" });\n    else if (\"requestIdleCallback\" in window)\n        requestAnimationFrame(() => requestIdleCallback(() => work(), { timeout: 1500 }));\n    else setTimeout(work, 0);\n}\n\nexport function splitTasks(total: number, unit: (i: number) => void, chunk = 25): void {\n    let i = 0;\n    const pump = (deadline?: any): void => {\n        const rem = typeof deadline !== \"undefined\" && deadline.timeRemaining ? deadline : { timeRemaining: () => 8 };\n        while (i \u003C total && rem.timeRemaining() > 1 && (i % chunk !== 0 || i === 0)) unit(i++);\n        if (i \u003C total) \"requestIdleCallback\" in window ? requestIdleCallback(pump) : setTimeout(pump, 0);\n    };\n    \"requestIdleCallback\" in window ? requestIdleCallback(pump) : pump();\n}\n\nexport function throttle\u003CT extends (...a: any[]) => void>(fn: T, wait = 150, opts: { leading?: boolean; trailing?: boolean } = {}): T {\n    const { leading = true, trailing = true } = opts;\n    let last = 0, tId: any = null, lastArgs: any[] | null = null;\n    return function (this: any, ...args: any[]) {\n        const now = Date.now();\n        if (!last && !leading) last = now;\n        const remaining = wait - (now - last);\n        lastArgs = args;\n        if (remaining \u003C= 0) {\n            if (tId) { clearTimeout(tId); tId = null; }\n            last = now; fn.apply(this, args); lastArgs = null;\n        } else if (trailing && !tId) {\n            tId = setTimeout(() => {\n                last = leading ? Date.now() : 0; tId = null;\n                if (lastArgs) { fn.apply(this, lastArgs); lastArgs = null; }\n            }, remaining);\n        }\n    } as T;\n}\n```\n```\n\n## CLS 布局偏移 \u003C0.1 & INP \u003C200ms\n\nCLS 元凶：图片\u002Fvideo缺宽高、字体替换抖动、未预留高度的横幅\u002F动态插入内容。INP 是 FID 继任指标，关注每次输入到下一次绘制，>50ms 长任务是重点优化对象。\n\n| 指标 | 目标阈值 | 最大元凶 1 | 最大元凶 2 | 核心优化方法 |\n|------|---------|----------|----------|------------|\n| LCP | \u003C2.5s (绿) | 大图片\u002F视频 | 慢TTFB | preconnect, AVIF, fetchpriority |\n| CLS | \u003C0.1 (绿) | 图片未设尺寸 | 字体切换抖动 | width+height声明, font-display:optional |\n| INP | \u003C200ms (绿) | 长任务阻塞主线程 | 重样式\u002F重排 | scheduler.postTask, rIC splitting |\n| TTFB | \u003C800ms | 后端慢查询 | 无缓存\u002F边缘 | CDN缓存, SSR streaming |\n\n## 最佳实践\n\n安装 web-vitals 库埋点真实用户数据（RUM），别只看本地 Lighthouse 实验室数据。移动端性能预算 3x 重要，因为设备慢 3-10 倍。","Google 搜索排名核心指标完全实战：LCP 最大内容绘制（预连接\u002F图像优先级\u002FCDN缓存）、CLS 累积布局偏移（图像尺寸\u002F字体FOIT\u002F动态占位）、INP 交互响应（长任务拆分\u002F防抖节流）全面落地。",{"id":6,"username":185,"nickname":185,"avatar":20,"cover_image":20,"bio":20,"website":20,"github":20,"avatar_source":20,"resolved_avatar_url":20,"title":20,"created_at":186},"Choyeon","2026-09-30T18:09:53.330367Z",{"id":40,"name":44,"slug":45,"description":49,"icon":51,"color":52,"cover_image":20,"created_at":53,"post_count":87},[189,194,199,205],{"id":72,"name":190,"slug":191,"color":192,"icon":20,"is_active":141,"created_at":193,"post_count":87},"Astro","astro","#ff5d01","2026-09-30T18:09:53.678001Z",{"id":54,"name":195,"slug":196,"color":197,"icon":20,"is_active":141,"created_at":198,"post_count":87},"JavaScript","javascript","#f7df1e","2026-09-30T18:09:53.683194Z",{"id":200,"name":201,"slug":202,"color":203,"icon":20,"is_active":141,"created_at":204,"post_count":87},14,"CSS","css","#1572b6","2026-09-30T18:09:53.704077Z",{"id":206,"name":207,"slug":208,"color":209,"icon":20,"is_active":141,"created_at":210,"post_count":87},15,"性能优化","performance","#f97316","2026-09-30T18:09:53.707190Z","published","public",145,"JavaScript,性能优化,CSS,Astro","2026-09-15T07:09:53.733462Z","2026-10-01T10:32:43.083654Z"]