{"id":265,"date":"2026-09-06T01:20:12","date_gmt":"2026-09-05T17:20:12","guid":{"rendered":"https:\/\/www.ziliaochi.cn\/index.php\/2026\/09\/06\/frontend-observability-system\/"},"modified":"2026-09-06T01:20:12","modified_gmt":"2026-09-05T17:20:12","slug":"frontend-observability-system","status":"publish","type":"post","link":"https:\/\/www.ziliaochi.cn\/index.php\/2026\/09\/06\/frontend-observability-system\/","title":{"rendered":"\u524d\u7aef\u76d1\u63a7\u4f53\u7cfb\u843d\u5730\uff1a\u4e09\u4e2a\u6307\u6807\u3001\u56db\u7c7b\u5f02\u5e38\u4e0e\u4e24\u4e2a\u95ed\u73af"},"content":{"rendered":"
\n
\u5173\u952e\u8bcd<\/span>\u524d\u7aef\u76d1\u63a7\u3001Core Web Vitals\u3001INP\u3001LCP\u3001CLS\u3001RUM<\/div>\n
\n
\u76ee\u5f55<\/div>\n
    \n
  1. \u4e00\u3001\u91c7\u4ec0\u4e48\uff1a\u4e09\u4e2a\u6838\u5fc3\u6307\u6807 + \u56db\u7c7b\u5f02\u5e38<\/a><\/li>\n
  2. \u4e8c\u3001\u600e\u4e48\u91c7\uff1a\u4f4e\u4fb5\u5165\u3001\u53ef\u5f52\u56e0\u3001\u63a7\u6210\u672c<\/a><\/li>\n
  3. \u4e09\u3001\u5f52\u56e0\uff1a\u628a\u300c\u6307\u6807\u5dee\u300d\u7ffb\u8bd1\u6210\u300c\u54ea\u91cc\u574f\u4e86\u300d<\/a><\/li>\n
  4. \u56db\u3001\u95ed\u73af\uff1a\u544a\u8b66\u5206\u7ea7\u4e0e\u56de\u5f52\u95e8\u7981<\/a><\/li>\n<\/ol>\n<\/div>\n

    \u5f88\u591a\u56e2\u961f\u7684\u524d\u7aef\u76d1\u63a7\u505c\u7559\u5728\u300c\u63a5\u4e86\u4e2a SDK\uff0c\u770b\u4e2a\u5927\u76d8\u300d\u7684\u9636\u6bb5\uff0c\u6307\u6807\u5168\u7eff\u4f46\u7528\u6237\u6295\u8bc9\u4e0d\u65ad\u3002\u95ee\u9898\u4e0d\u5728\u5de5\u5177\uff0c\u800c\u5728\u91c7\u96c6\u53e3\u5f84\u4e0e\u884c\u52a8\u95ed\u73af\u3002\u8fd9\u7bc7\u6309\u300c\u91c7\u4ec0\u4e48\u3001\u600e\u4e48\u91c7\u3001\u91c7\u5b8c\u600e\u4e48\u529e\u300d\u4e09\u6bb5\uff0c\u7ed9\u51fa\u4e00\u5957\u80fd\u843d\u5730\u7684\u76d1\u63a7\u4f53\u7cfb\uff0c\u6240\u6709\u6307\u6807\u53e3\u5f84\u5bf9\u9f50 Google Core Web Vitals<\/a>\u3002<\/p>\n

    \u4e00\u3001\u91c7\u4ec0\u4e48\uff1a\u4e09\u4e2a\u6838\u5fc3\u6307\u6807 + \u56db\u7c7b\u5f02\u5e38<\/h2>\n

    \u4f53\u9a8c\u6307\u6807\u53ea\u770b\u4e09\u4e2a\uff1aLCP<\/strong>\uff08\u52a0\u8f7d\uff09\u3001INP<\/strong>\uff08\u4ea4\u4e92\u54cd\u5e94\uff0c2024 \u5e74 3 \u6708\u8d77\u6b63\u5f0f\u53d6\u4ee3 FID\uff09\u3001CLS<\/strong>\uff08\u89c6\u89c9\u7a33\u5b9a\uff09\u3002INP \u662f\u6700\u5bb9\u6613\u88ab\u4f4e\u4f30\u7684\u2014\u2014\u5b83\u8861\u91cf\u6574\u4e2a\u9875\u9762\u751f\u547d\u5468\u671f\u5185\u6240\u6709\u4ea4\u4e92\u7684\u54cd\u5e94\u5ef6\u8fdf\uff0c\u6bd4 FID \u4e25\u683c\u5f97\u591a\uff0c\u957f\u4efb\u52a1\u3001 hydrate \u672a\u5b8c\u6210\u3001\u4e8b\u4ef6\u5904\u7406\u8fc7\u91cd\u90fd\u4f1a\u5728\u8fd9\u91cc\u73b0\u5f62\u3002<\/p>\n

    \u5f02\u5e38\u91c7\u96c6\u56db\u7c7b\uff1aJS \u8fd0\u884c\u65f6\u9519\u8bef\uff08window.onerror<\/code>\uff09\u3001Promise \u672a\u6355\u83b7\u62d2\u7edd\uff08unhandledrejection<\/code>\uff09\u3001\u8d44\u6e90\u52a0\u8f7d\u5931\u8d25\uff08error<\/code> \u6355\u83b7\u9636\u6bb5\uff09\u3001\u63a5\u53e3\u5931\u8d25\u4e0e\u6162\u8bf7\u6c42\uff08\u5c01\u88c5\u5c42\u7edf\u4e00\u57cb\u70b9\uff09\u3002<\/p>\n

    \"Core
    <\/figcaption><\/figure>\n

    \u4e8c\u3001\u600e\u4e48\u91c7\uff1a\u4f4e\u4fb5\u5165\u3001\u53ef\u5f52\u56e0\u3001\u63a7\u6210\u672c<\/h2>\n

    \u5b98\u65b9 web-vitals \u5e93<\/a>\uff08\u5f53\u524d 6.x\uff09\u5df2\u7ecf\u628a\u4e09\u4e2a\u6307\u6807\u7684\u6d4b\u91cf\u903b\u8f91\u5c01\u88c5\u597d\uff0c\u81ea\u5df1\u5b9e\u73b0\u5f88\u5bb9\u6613\u8e29\u53e3\u5f84\u504f\u5dee\uff1a<\/p>\n

    import { onLCP, onINP, onCLS } from \"web-vitals\";\n\nconst report = (metric) => {\n  navigator.sendBeacon(\"\/api\/rum\", JSON.stringify({\n    name: metric.name, value: metric.value,\n    id: metric.id,          \/\/ \u540c\u4e00\u4f1a\u8bdd\u53bb\u91cd\/\u805a\u5408\u7684\u952e\n    nav: performance.getEntriesByType(\"navigation\")[0]?.type,\n    url: location.pathname, \/\/ \u53ea\u91c7\u8def\u5f84\uff0c\u4e0d\u91c7 query\uff0c\u9632\u654f\u611f\u4fe1\u606f\u6cc4\u9732\n  }));\n};\nonLCP(report); onINP(report); onCLS(report);<\/code><\/pre>\n
    \u4e09\u6761\u5de5\u7a0b\u7ea2\u7ebf\uff1a\u4e0a\u62a5\u8d70 sendBeacon<\/code><\/strong>\uff08\u9875\u9762\u5378\u8f7d\u4e5f\u4e0d\u4e22\uff09\uff1b\u91c7\u6837\u7387\u6309\u6d41\u91cf\u5206\u7ea7<\/strong>\uff08\u5934\u90e8\u9875\u9762\u5168\u91cf\u3001\u957f\u5c3e 1%\u201310%\uff09\uff1b\u91c7\u96c6\u811a\u672c\u72ec\u7acb\u7248\u672c\u5316<\/strong>\uff0c\u4e0d\u8981\u8ddf\u7740\u4e1a\u52a1 bundle \u4e00\u8d77\u53d1\uff0c\u5426\u5219 SDK \u81ea\u8eab\u51fa\u95ee\u9898\u5c31\u662f\u76d1\u63a7\u76f2\u533a\u3002<\/p>\n
    \u4e09\u3001\u5f52\u56e0\uff1a\u628a\u300c\u6307\u6807\u5dee\u300d\u7ffb\u8bd1\u6210\u300c\u54ea\u91cc\u574f\u4e86\u300d<\/h2>\n
    \u6307\u6807\u53ea\u662f\u7ed3\u679c\uff0c\u5f52\u56e0\u8981\u9760\u7ec6\u8282\u5b57\u6bb5\u3002\u5b9e\u8df5\u4e2d\u6700\u503c\u94b1\u7684\u51e0\u4e2a\uff1a<\/p>\n
      \n
    • LCP \u5dee<\/strong>\uff1a\u770b metric.entries<\/code> \u91cc LCP \u5143\u7d20\u662f\u4ec0\u4e48\u3001\u5176\u8d44\u6e90\u7684 TTFB\/\u4e0b\u8f7d\u8017\u65f6\u5404\u5360\u591a\u5c11\u2014\u2014TTFB \u9ad8\u662f\u670d\u52a1\u7aef\u95ee\u9898\uff0c\u4e0b\u8f7d\u6162\u662f\u8d44\u6e90\u95ee\u9898\uff0c\u5143\u7d20\u665a\u51fa\u73b0\u662f\u6e32\u67d3\u963b\u585e\u95ee\u9898\uff1b<\/li>\n
    • INP \u5dee<\/strong>\uff1a\u7528 performance<\/code> \u7684 LongTask \u4e0e\u4e8b\u4ef6 timing \u5b9a\u4f4d\u5230\u5177\u4f53\u957f\u4efb\u52a1\uff0c\u5e38\u89c1\u5143\u51f6\u662f hydrate \u672a\u5b8c\u6210\u5c31\u7ed1\u4ea4\u4e92\u3001\u540c\u6b65\u8ba1\u7b97\u3001\u5927\u91cf DOM \u64cd\u4f5c\uff1b<\/li>\n
    • CLS \u5dee<\/strong>\uff1a\u67e5\u6ca1\u6709\u5c3a\u5bf8\u7684\u56fe\u7247\/\u5e7f\u544a\u4f4d\u3001\u52a8\u6001\u63d2\u5165\u5728\u9996\u5c4f\u4e0a\u65b9\u7684\u5143\u7d20\u3001\u5b57\u4f53\u5207\u6362\u95ea\u52a8\u3002<\/li>\n<\/ul>\n
      \u5efa\u8bae\u628a\u300c\u6307\u6807 + \u5f52\u56e0\u5b57\u6bb5 + \u7528\u6237\u4f1a\u8bdd ID\u300d\u843d\u6210\u4e00\u6761\u8bb0\u5f55\uff0c\u80fd\u4ece\u5927\u76d8\u4e00\u8def\u70b9\u5230\u4e00\u4e2a\u4f1a\u8bdd\u7684\u5b8c\u6574\u884c\u4e3a\u5e8f\u5217\uff0c\u8fd9\u662f\u6392\u67e5\u6295\u8bc9\u65f6\u6700\u7701\u65f6\u95f4\u7684\u5f62\u6001\u3002<\/p>\n
      \u56db\u3001\u95ed\u73af\uff1a\u544a\u8b66\u5206\u7ea7\u4e0e\u56de\u5f52\u95e8\u7981<\/h2>\n
      \u6ca1\u6709\u95ed\u73af\u7684\u76d1\u63a7\u53ea\u662f\u62a5\u8868\u3002\u4e24\u4e2a\u6293\u624b\uff1a<\/p>\n
        \n
      1. \u544a\u8b66\u5206\u7ea7<\/strong>\uff1ap75 \u6307\u6807\u52a3\u5316\u8d85 10% \u6301\u7eed 1 \u5c0f\u65f6 \u2192 \u7fa4\u901a\u77e5\uff1b\u8d85 25% \u6216\u9519\u8bef\u7387\u7a81\u589e \u2192 \u7535\u8bdd\u62c9\u4eba\u3002\u6309\u9875\u9762\u7ef4\u5ea6\u62c6\u5f00\u544a\u8b66\uff0c\u907f\u514d\u5927\u76d8\u5747\u503c\u63a9\u76d6\u5c40\u90e8\u6076\u5316\uff1b<\/li>\n
      2. \u53d1\u5e03\u95e8\u7981<\/strong>\uff1a\u6bcf\u6b21\u4e0a\u7ebf\u524d\u7528\u5b9e\u9a8c\u5ba4\u73af\u5883\uff08Lighthouse\/\u81ea\u5efa lab\uff09\u8dd1\u6838\u5fc3\u9875\u9762\uff0cLCP\/INP\/CLS \u4e0e bundle \u4f53\u79ef\u8d85\u9608\u503c\u5373\u963b\u65ad\u5408\u5e76\u3002\u7ebf\u4e0a\u56de\u5f52 lab \u6570\u636e\u4e0d\u51c6\u786e\uff0c\u4f46\u62e6\u4f4f\u300c\u660e\u663e\u53d8\u5dee\u300d\u8db3\u591f\u4e86\u3002<\/li>\n<\/ol>\n
        \u4e00\u53e5\u8bdd\u603b\u7ed3\uff1a\u76d1\u63a7\u4f53\u7cfb\u7684\u4ef7\u503c = \u91c7\u96c6\u53e3\u5f84\u7684\u51c6\u786e \u00d7 \u5f52\u56e0\u94fe\u8def\u7684\u5b8c\u6574 \u00d7 \u544a\u8b66\u540e\u7684\u54cd\u5e94\u901f\u5ea6<\/strong>\u3002\u4e09\u4e2a\u6307\u6807\u3001\u56db\u7c7b\u5f02\u5e38\u3001\u4e24\u4e2a\u95ed\u73af\u6293\u624b\uff0c\u5c31\u6784\u6210\u4e86 2026 \u5e74\u524d\u7aef\u76d1\u63a7\u7684\u5408\u683c\u7ebf\u3002<\/p>\n
        \n
        \u6807\u7b7e<\/div>\n
        #\u524d\u7aef\u76d1\u63a7<\/span>#\u6027\u80fd\u4f18\u5316<\/span>#Web Vitals<\/span>#\u53ef\u89c2\u6d4b\u6027<\/span><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
        \u4e00\u5957\u80fd\u843d\u5730\u7684\u524d\u7aef\u76d1\u63a7\u4f53\u7cfb\uff1aLCP\/INP\/CLS \u4e09\u6307\u6807\u7684\u51c6\u786e\u91c7\u96c6\u53e3\u5f84\uff0cJS \u9519\u8bef\u3001\u8d44\u6e90\u5931\u8d25\u3001\u63a5\u53e3\u5f02\u5e38\u56db\u7c7b\u6570\u636e\u7684\u4f4e\u4fb5\u5165\u4e0a\u62a5\uff0c\u6307\u6807\u5230\u5f52\u56e0\u5b57\u6bb5\u7684\u7ffb\u8bd1\u65b9\u6cd5\uff0c\u4ee5\u53ca\u544a\u8b66\u5206\u7ea7\u4e0e\u53d1\u5e03\u95e8\u7981\u4e24\u4e2a\u95ed\u73af\u6293\u624b\u3002<\/p>\n","protected":false},"author":1,"featured_media":263,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,1],"tags":[136,135,52,35],"class_list":["post-265","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-frontend","category-technical","tag-web-vitals","tag-135","tag-52","tag-35"],"_links":{"self":[{"href":"https:\/\/www.ziliaochi.cn\/index.php\/wp-json\/wp\/v2\/posts\/265","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ziliaochi.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ziliaochi.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ziliaochi.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ziliaochi.cn\/index.php\/wp-json\/wp\/v2\/comments?post=265"}],"version-history":[{"count":0,"href":"https:\/\/www.ziliaochi.cn\/index.php\/wp-json\/wp\/v2\/posts\/265\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.ziliaochi.cn\/index.php\/wp-json\/wp\/v2\/media\/263"}],"wp:attachment":[{"href":"https:\/\/www.ziliaochi.cn\/index.php\/wp-json\/wp\/v2\/media?parent=265"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ziliaochi.cn\/index.php\/wp-json\/wp\/v2\/categories?post=265"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ziliaochi.cn\/index.php\/wp-json\/wp\/v2\/tags?post=265"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}