{"id":19,"date":"2026-06-16T22:43:36","date_gmt":"2026-06-16T14:43:36","guid":{"rendered":"https:\/\/io00.cn\/index.php\/2026\/06\/16\/%e5%89%8d%e7%ab%af%e6%80%a7%e8%83%bd%e4%bc%98%e5%8c%96%e5%ae%9e%e6%88%98%ef%bc%9a%e4%bb%8e-3s-%e5%88%b0-1s-%e7%9a%84%e8%9c%95%e5%8f%98\/"},"modified":"2026-06-16T22:43:36","modified_gmt":"2026-06-16T14:43:36","slug":"%e5%89%8d%e7%ab%af%e6%80%a7%e8%83%bd%e4%bc%98%e5%8c%96%e5%ae%9e%e6%88%98%ef%bc%9a%e4%bb%8e-3s-%e5%88%b0-1s-%e7%9a%84%e8%9c%95%e5%8f%98","status":"publish","type":"post","link":"https:\/\/io00.cn\/index.php\/2026\/06\/16\/%e5%89%8d%e7%ab%af%e6%80%a7%e8%83%bd%e4%bc%98%e5%8c%96%e5%ae%9e%e6%88%98%ef%bc%9a%e4%bb%8e-3s-%e5%88%b0-1s-%e7%9a%84%e8%9c%95%e5%8f%98\/","title":{"rendered":"\u524d\u7aef\u6027\u80fd\u4f18\u5316\u5b9e\u6218\uff1a\u4ece 3s \u5230 1s \u7684\u8715\u53d8"},"content":{"rendered":"<p>\u9875\u9762\u52a0\u8f7d\u901f\u5ea6\u76f4\u63a5\u5f71\u54cd\u7528\u6237\u4f53\u9a8c\u548c\u8f6c\u5316\u7387\u3002\u672c\u6587\u5c06\u5206\u4eab\u6211\u5728\u5b9e\u9645\u9879\u76ee\u4e2d\u8fdb\u884c\u6027\u80fd\u4f18\u5316\u7684\u7ecf\u9a8c\uff0c\u5c06\u9875\u9762\u52a0\u8f7d\u65f6\u95f4\u4ece 3 \u79d2\u4f18\u5316\u5230\u4e86 1 \u79d2\u4ee5\u5185\u3002<\/p>\n<h2>\u6027\u80fd\u4f18\u5316\u524d\u7684\u51c6\u5907<\/h2>\n<p>\u5728\u5f00\u59cb\u4f18\u5316\u4e4b\u524d\uff0c\u6211\u4eec\u9700\u8981\u5148\u4e86\u89e3\u5f53\u524d\u7684\u6027\u80fd\u72b6\u51b5\u3002<\/p>\n<h3>\u6027\u80fd\u6d4b\u91cf\u5de5\u5177<\/h3>\n<ul>\n<li><strong>Lighthouse<\/strong>\uff1aGoogle \u63a8\u51fa\u7684\u6027\u80fd\u68c0\u6d4b\u5de5\u5177\uff0c\u63d0\u4f9b\u5168\u9762\u7684\u6027\u80fd\u62a5\u544a\u3002<\/li>\n<li><strong>WebPageTest<\/strong>\uff1a\u53ef\u4ee5\u5728\u4e0d\u540c\u5730\u70b9\u548c\u8bbe\u5907\u4e0a\u6d4b\u8bd5\u9875\u9762\u6027\u80fd\u3002<\/li>\n<li><strong>Chrome DevTools<\/strong>\uff1a\u5f3a\u5927\u7684\u5f00\u53d1\u8005\u5de5\u5177\uff0c\u5305\u542b Performance \u548c Network \u9762\u677f\u3002<\/li>\n<\/ul>\n<h3>\u5173\u952e\u6027\u80fd\u6307\u6807<\/h3>\n<ol>\n<li><strong>LCP (Largest Contentful Paint)<\/strong>\uff1a\u6700\u5927\u5185\u5bb9\u7ed8\u5236\u65f6\u95f4\uff0c\u76ee\u6807\u5c0f\u4e8e 2.5s<\/li>\n<li><strong>FID (First Input Delay)<\/strong>\uff1a\u9996\u6b21\u8f93\u5165\u5ef6\u8fdf\uff0c\u76ee\u6807\u5c0f\u4e8e 100ms<\/li>\n<li><strong>CLS (Cumulative Layout Shift)<\/strong>\uff1a\u7d2f\u79ef\u5e03\u5c40\u504f\u79fb\uff0c\u76ee\u6807\u5c0f\u4e8e 0.1<\/li>\n<\/ol>\n<h2>\u4f18\u5316\u65b9\u6848<\/h2>\n<p>\u6839\u636e\u6027\u80fd\u62a5\u544a\uff0c\u6211\u4eec\u5236\u5b9a\u4e86\u4ee5\u4e0b\u4f18\u5316\u65b9\u6848\uff1a<\/p>\n<h3>1. \u56fe\u7247\u4f18\u5316<\/h3>\n<p>\u56fe\u7247\u662f\u9875\u9762\u52a0\u8f7d\u901f\u5ea6\u7684\u6700\u5927\u74f6\u9888\uff0c\u5360\u6bd4\u901a\u5e38\u8d85\u8fc7 50%\u3002<\/p>\n<h4>\u4f18\u5316\u63aa\u65bd<\/h4>\n<ol>\n<li><strong>\u4f7f\u7528\u73b0\u4ee3\u56fe\u7247\u683c\u5f0f<\/strong>\uff1a\u5c06 JPEG\/PNG \u8f6c\u6362\u4e3a WebP \u6216 AVIF\uff0c\u4f53\u79ef\u53ef\u51cf\u5c11 25% \u5230 50%\u3002<\/li>\n<li><strong>\u54cd\u5e94\u5f0f\u56fe\u7247<\/strong>\uff1a\u4f7f\u7528 srcset \u548c sizes \u5c5e\u6027\uff0c\u6839\u636e\u8bbe\u5907\u5206\u8fa8\u7387\u52a0\u8f7d\u5408\u9002\u5927\u5c0f\u7684\u56fe\u7247\u3002<\/li>\n<li><strong>\u61d2\u52a0\u8f7d<\/strong>\uff1a\u53ea\u52a0\u8f7d\u53ef\u89c6\u533a\u57df\u5185\u7684\u56fe\u7247\u3002<\/li>\n<li><strong>\u538b\u7f29\u56fe\u7247<\/strong>\uff1a\u4f7f\u7528\u5de5\u5177\u538b\u7f29\u56fe\u7247\u8d28\u91cf\uff0c\u53bb\u9664\u5143\u6570\u636e\u3002<\/li>\n<\/ol>\n<h4>\u4ee3\u7801\u793a\u4f8b<\/h4>\n<pre><code class=\"language-html\">&lt;img \n  src=\"image.webp\" \n  srcset=\"image-480.webp 480w, image-800.webp 800w\" \n  sizes=\"(max-width: 600px) 480px, 800px\"\n  loading=\"lazy\"\n  alt=\"\u793a\u4f8b\u56fe\u7247\"\n&gt;\n<\/code><\/pre>\n<h3>2. JavaScript \u4f18\u5316<\/h3>\n<p>JavaScript \u6267\u884c\u65f6\u95f4\u8fc7\u957f\u4f1a\u963b\u585e\u9875\u9762\u6e32\u67d3\u3002<\/p>\n<h4>\u4f18\u5316\u63aa\u65bd<\/h4>\n<ol>\n<li><strong>\u4ee3\u7801\u5206\u5272<\/strong>\uff1a\u4f7f\u7528 Webpack \u6216 Vite \u7684\u4ee3\u7801\u5206\u5272\u529f\u80fd\uff0c\u6309\u9700\u52a0\u8f7d\u3002<\/li>\n<li><strong>\u538b\u7f29\u4ee3\u7801<\/strong>\uff1a\u4f7f\u7528 Terser \u538b\u7f29 JavaScript \u4ee3\u7801\u3002<\/li>\n<li><strong>\u79fb\u9664\u672a\u4f7f\u7528\u7684\u4ee3\u7801<\/strong>\uff1a\u4f7f\u7528 Tree Shaking \u79fb\u9664\u672a\u4f7f\u7528\u7684\u6a21\u5757\u3002<\/li>\n<li><strong>\u5f02\u6b65\u52a0\u8f7d<\/strong>\uff1a\u5bf9\u975e\u5173\u952e\u811a\u672c\u4f7f\u7528 async \u6216 defer \u5c5e\u6027\u3002<\/li>\n<\/ol>\n<h4>\u4ee3\u7801\u793a\u4f8b<\/h4>\n<pre><code class=\"language-html\">&lt;script src=\"app.js\" defer&gt;&lt;\/script&gt;\n&lt;script src=\"analytics.js\" async&gt;&lt;\/script&gt;\n<\/code><\/pre>\n<h3>3. CSS \u4f18\u5316<\/h3>\n<p>CSS \u963b\u585e\u6e32\u67d3\uff0c\u9700\u8981\u5c3d\u53ef\u80fd\u4f18\u5316\u3002<\/p>\n<h4>\u4f18\u5316\u63aa\u65bd<\/h4>\n<ol>\n<li><strong>\u5185\u8054\u5173\u952e CSS<\/strong>\uff1a\u5c06\u9996\u5c4f\u6240\u9700\u7684 CSS \u5185\u8054\u5230 HTML \u4e2d\u3002<\/li>\n<li><strong>\u538b\u7f29 CSS<\/strong>\uff1a\u4f7f\u7528 CSSNano \u538b\u7f29 CSS \u4ee3\u7801\u3002<\/li>\n<li><strong>\u79fb\u9664\u672a\u4f7f\u7528\u7684 CSS<\/strong>\uff1a\u4f7f\u7528 PurgeCSS \u6216 Chrome DevTools \u7684 Coverage \u9762\u677f\u3002<\/li>\n<li><strong>\u4f7f\u7528 CSS \u53d8\u91cf<\/strong>\uff1a\u51cf\u5c11\u91cd\u590d\u4ee3\u7801\uff0c\u4fbf\u4e8e\u7ef4\u62a4\u3002<\/li>\n<\/ol>\n<h3>4. \u7f13\u5b58\u7b56\u7565<\/h3>\n<p>\u5408\u7406\u4f7f\u7528\u7f13\u5b58\u53ef\u4ee5\u663e\u8457\u51cf\u5c11\u91cd\u590d\u8bf7\u6c42\u3002<\/p>\n<h4>\u4f18\u5316\u63aa\u65bd<\/h4>\n<ol>\n<li><strong>\u6d4f\u89c8\u5668\u7f13\u5b58<\/strong>\uff1a\u8bbe\u7f6e\u5408\u9002\u7684 Cache-Control \u548c ETag \u54cd\u5e94\u5934\u3002<\/li>\n<li><strong>\u670d\u52a1\u7aef\u7f13\u5b58<\/strong>\uff1a\u4f7f\u7528 Redis \u7b49\u7f13\u5b58\u6570\u636e\u5e93\u5b58\u50a8\u8ba1\u7b97\u7ed3\u679c\u3002<\/li>\n<li><strong>CDN \u7f13\u5b58<\/strong>\uff1a\u5229\u7528 CDN \u7684\u8fb9\u7f18\u7f13\u5b58\u80fd\u529b\u3002<\/li>\n<li><strong>\u7248\u672c\u63a7\u5236<\/strong>\uff1a\u7ed9\u9759\u6001\u8d44\u6e90\u6dfb\u52a0\u7248\u672c\u53f7\uff0c\u5982 app.abc123.js\u3002<\/li>\n<\/ol>\n<h4>HTTP \u7f13\u5b58\u5934\u793a\u4f8b<\/h4>\n<pre><code class=\"language-http\">Cache-Control: public, max-age=31536000, immutable\nETag: \"abc123\"\n<\/code><\/pre>\n<h3>5. \u670d\u52a1\u5668\u4f18\u5316<\/h3>\n<p>\u670d\u52a1\u5668\u54cd\u5e94\u901f\u5ea6\u4e5f\u4f1a\u5f71\u54cd\u9875\u9762\u52a0\u8f7d\u65f6\u95f4\u3002<\/p>\n<h4>\u4f18\u5316\u63aa\u65bd<\/h4>\n<ol>\n<li><strong>\u4f7f\u7528 CDN<\/strong>\uff1a\u5c06\u9759\u6001\u8d44\u6e90\u90e8\u7f72\u5230 CDN\uff0c\u51cf\u5c11\u7f51\u7edc\u5ef6\u8fdf\u3002<\/li>\n<li><strong>\u542f\u7528 Gzip\/Brotli \u538b\u7f29<\/strong>\uff1a\u538b\u7f29\u4f20\u8f93\u7684\u6570\u636e\u3002<\/li>\n<li><strong>\u4f7f\u7528 HTTP\/2<\/strong>\uff1a\u652f\u6301\u591a\u8def\u590d\u7528\uff0c\u51cf\u5c11\u8fde\u63a5\u5f00\u9500\u3002<\/li>\n<li><strong>\u4f18\u5316\u6570\u636e\u5e93\u67e5\u8be2<\/strong>\uff1a\u6dfb\u52a0\u7d22\u5f15\uff0c\u51cf\u5c11\u67e5\u8be2\u65f6\u95f4\u3002<\/li>\n<\/ol>\n<h2>\u4f18\u5316\u6548\u679c\u5bf9\u6bd4<\/h2>\n<p>\u7ecf\u8fc7\u4ee5\u4e0a\u4f18\u5316\uff0c\u6211\u4eec\u7684\u9875\u9762\u6027\u80fd\u5f97\u5230\u4e86\u663e\u8457\u63d0\u5347\uff1a<\/p>\n<table>\n<thead>\n<tr>\n<th>\u6307\u6807<\/th>\n<th>\u4f18\u5316\u524d<\/th>\n<th>\u4f18\u5316\u540e<\/th>\n<th>\u63d0\u5347\u5e45\u5ea6<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>LCP<\/td>\n<td>3.2s<\/td>\n<td>0.8s<\/td>\n<td>75%<\/td>\n<\/tr>\n<tr>\n<td>FID<\/td>\n<td>280ms<\/td>\n<td>60ms<\/td>\n<td>79%<\/td>\n<\/tr>\n<tr>\n<td>CLS<\/td>\n<td>0.35<\/td>\n<td>0.08<\/td>\n<td>77%<\/td>\n<\/tr>\n<tr>\n<td>\u9875\u9762\u52a0\u8f7d\u65f6\u95f4<\/td>\n<td>3.5s<\/td>\n<td>1.1s<\/td>\n<td>69%<\/td>\n<\/tr>\n<tr>\n<td>\u8bf7\u6c42\u6570\u91cf<\/td>\n<td>45<\/td>\n<td>22<\/td>\n<td>51%<\/td>\n<\/tr>\n<tr>\n<td>\u8d44\u6e90\u603b\u5927\u5c0f<\/td>\n<td>1.2MB<\/td>\n<td>450KB<\/td>\n<td>62%<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2>\u6301\u7eed\u4f18\u5316<\/h2>\n<p>\u6027\u80fd\u4f18\u5316\u4e0d\u662f\u4e00\u6b21\u6027\u7684\u5de5\u4f5c\uff0c\u9700\u8981\u6301\u7eed\u5173\u6ce8\u548c\u6539\u8fdb\u3002<\/p>\n<h3>\u5efa\u7acb\u6027\u80fd\u76d1\u63a7<\/h3>\n<ul>\n<li>\u8bbe\u7f6e\u6027\u80fd\u9884\u7b97\uff0c\u5728 CI\/CD \u6d41\u7a0b\u4e2d\u52a0\u5165\u6027\u80fd\u68c0\u6d4b<\/li>\n<li>\u4f7f\u7528 Real User Monitoring (RUM) \u5de5\u5177\u6536\u96c6\u771f\u5b9e\u7528\u6237\u6570\u636e<\/li>\n<li>\u5b9a\u671f\u8fdb\u884c\u6027\u80fd\u5ba1\u8ba1<\/li>\n<\/ul>\n<h3>\u4fdd\u6301\u4f18\u5316\u610f\u8bc6<\/h3>\n<ul>\n<li>\u5728\u5f00\u53d1\u8fc7\u7a0b\u4e2d\u8003\u8651\u6027\u80fd\u5f71\u54cd<\/li>\n<li>\u4f18\u5148\u4f7f\u7528\u6027\u80fd\u53cb\u597d\u7684\u6280\u672f\u65b9\u6848<\/li>\n<li>\u5173\u6ce8\u884c\u4e1a\u6700\u65b0\u7684\u6027\u80fd\u4f18\u5316\u6280\u672f<\/li>\n<\/ul>\n<h2>\u603b\u7ed3<\/h2>\n<p>\u6027\u80fd\u4f18\u5316\u662f\u4e00\u4e2a\u7cfb\u7edf\u6027\u7684\u5de5\u7a0b\uff0c\u9700\u8981\u4ece\u591a\u4e2a\u65b9\u9762\u5165\u624b\uff1a<\/p>\n<ol>\n<li>\u5148\u6d4b\u91cf\uff0c\u518d\u4f18\u5316<\/li>\n<li>\u4f18\u5148\u89e3\u51b3\u6700\u5927\u7684\u6027\u80fd\u74f6\u9888<\/li>\n<li>\u4f7f\u7528\u5408\u9002\u7684\u5de5\u5177\u548c\u6280\u672f<\/li>\n<li>\u6301\u7eed\u76d1\u63a7\u548c\u6539\u8fdb<\/li>\n<\/ol>\n<p>\u8bb0\u4f4f\uff0c\u6bcf\u51cf\u5c11 100ms \u7684\u52a0\u8f7d\u65f6\u95f4\uff0c\u90fd\u53ef\u80fd\u5e26\u6765\u663e\u8457\u7684\u7528\u6237\u4f53\u9a8c\u63d0\u5347\u548c\u8f6c\u5316\u7387\u589e\u957f\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u9875\u9762\u52a0\u8f7d\u901f\u5ea6\u76f4\u63a5\u5f71\u54cd\u7528\u6237\u4f53\u9a8c\u548c\u8f6c\u5316\u7387\u3002\u672c\u6587\u5c06\u5206\u4eab\u6211\u5728\u5b9e\u9645\u9879\u76ee\u4e2d\u8fdb\u884c\u6027\u80fd\u4f18\u5316\u7684\u7ecf\u9a8c\uff0c\u5c06\u9875\u9762\u52a0\u8f7d\u65f6\u95f4\u4ece 3 \u79d2\u4f18\u5316 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[2,27,8],"class_list":["post-19","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-2","tag-27","tag-8"],"_links":{"self":[{"href":"https:\/\/io00.cn\/index.php\/wp-json\/wp\/v2\/posts\/19","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/io00.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/io00.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/io00.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/io00.cn\/index.php\/wp-json\/wp\/v2\/comments?post=19"}],"version-history":[{"count":0,"href":"https:\/\/io00.cn\/index.php\/wp-json\/wp\/v2\/posts\/19\/revisions"}],"wp:attachment":[{"href":"https:\/\/io00.cn\/index.php\/wp-json\/wp\/v2\/media?parent=19"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/io00.cn\/index.php\/wp-json\/wp\/v2\/categories?post=19"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/io00.cn\/index.php\/wp-json\/wp\/v2\/tags?post=19"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}