https://codingice.vercel.app/

1<!DOCTYPE html>
2<html lang="en-US" dir="ltr">
3  <head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width,initial-scale=1">
6    <title>Full Stack Blog</title>
7    <meta name="description" content="记录前端与后端开发实践的技术博客">
8    <meta name="generator" content="VitePress v1.3.4">
9    <link rel="preload stylesheet" href="/assets/style.OVts03u_.css" as="style">
10    
11    

11<script type="module" src="/assets/app.C5Re9Tou.js"></script>

11
12    <link rel="preload" href="/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
13    <link rel="modulepreload" href="/assets/chunks/framework.B77G6WaV.js">
14    <link rel="modulepreload" href="/assets/chunks/theme.9gVg1ffQ.js">
15    <link rel="modulepreload" href="/assets/chunks/katex.CMdAwrm5.js">
16    <link rel="modulepreload" href="/assets/chunks/dagre-VKFMJZFB.BoBPEiY3.js">
17    <link rel="modulepreload" href="/assets/chunks/swimlanes-5IMT3BWC.Di3sSkF4.js">
18    <link rel="modulepreload" href="/assets/chunks/cose-bilkent-JH36ORCC.BcCgspsg.js">
19    <link rel="modulepreload" href="/assets/chunks/c4Diagram-LMCZKHZV.CfVoPJ_S.js">
20    <link rel="modulepreload" href="/assets/chunks/flowDiagram-23GEKE2U.CxvOylHN.js">
21    <link rel="modulepreload" href="/assets/chunks/swimlanesDiagram-G3AALYLV.CZ_XztNq.js">
22    <link rel="modulepreload" href="/assets/chunks/erDiagram-Q63AITRT.-B0T6eqF.js">
23    <link rel="modulepreload" href="/assets/chunks/gitGraphDiagram-IHSO6WYX.ClwGbDem.js">
24    <link rel="modulepreload" href="/assets/chunks/ganttDiagram-NO4QXBWP.CJlwMuiP.js">
25    <link rel="modulepreload" href="/assets/chunks/infoDiagram-FWYZ7A6U.DqV1xhka.js">
26    <link rel="modulepreload" href="/assets/chunks/pieDiagram-ENE6RG2P.DODPklvL.js">
27    <link rel="modulepreload" href="/assets/chunks/quadrantDiagram-ABIIQ3AL.CGvdoECO.js">
28    <link rel="modulepreload" href="/assets/chunks/xychartDiagram-FW5EYKEG.vfs58kxh.js">
29    <link rel="modulepreload" href="/assets/chunks/requirementDiagram-TGXJPOKE.2H3kfF4e.js">
30    <link rel="modulepreload" href="/assets/chunks/sequenceDiagram-DBY2YBRQ.DcW2d-1Z.js">
31    <link rel="modulepreload" href="/assets/chunks/classDiagram-OUVF2IWQ.CX2qUSj8.js">
32    <link rel="modulepreload" href="/assets/chunks/classDiagram-v2-EOCWNBFH.CX2qUSj8.js">
33    <link rel="modulepreload" href="/assets/chunks/stateDiagram-2N3HPSRC.C_opwG2H.js">
34    <link rel="modulepreload" href="/assets/chunks/stateDiagram-v2-6OUMAXLB.Bnn3W4NP.js">
35    <link rel="modulepreload" href="/assets/chunks/journeyDiagram-5HDEW3XC.-xy-OiGS.js">
36    <link rel="modulepreload" href="/assets/chunks/timeline-definition-FHXFAJF6.Pggx4Ccb.js">
37    <link rel="modulepreload" href="/assets/chunks/mindmap-definition-LN4V7U3C.CeSs36M5.js">
38    <link rel="modulepreload" href="/assets/chunks/kanban-definition-HUTT4EX6.CF5-8YYh.js">
39    <link rel="modulepreload" href="/assets/chunks/sankeyDiagram-HTMAVEWB.DjzGrl5o.js">
40    <link rel="modulepreload" href="/assets/chunks/diagram-NH7WQ7WH.hjA6JIRh.js">
41    <link rel="modulepreload" href="/assets/chunks/diagram-WEI45ONY.DqaCTwQA.js">
42    <link rel="modulepreload" href="/assets/chunks/blockDiagram-677ZJIJ3.HNy5K7mz.js">
43    <link rel="modulepreload" href="/assets/chunks/diagram-OA4YK3LP.RTPACnrK.js">
44    <link rel="modulepreload" href="/assets/chunks/architectureDiagram-ZJ3FMSHR.EVSkQcsc.js">
45    <link rel="modulepreload" href="/assets/chunks/diagram-FQU43EPY.BIO2cKJp.js">
46    <link rel="modulepreload" href="/assets/chunks/ishikawaDiagram-FXEZZL3T.DrO7-6HB.js">
47    <link rel="modulepreload" href="/assets/chunks/vennDiagram-L72KCM5P.qtxQCNTr.js">
48    <link rel="modulepreload" href="/assets/chunks/diagram-G47NLZAW.BvCKKEtG.js">
49    <link rel="modulepreload" href="/assets/chunks/wardleyDiagram-EHGQE667.HyuVSFO0.js">
50    <link rel="modulepreload" href="/assets/chunks/cynefinDiagram-TSTJHNR4.C5bjL0xX.js">
51    <link rel="modulepreload" href="/assets/chunks/railroadDiagram-RFXS5EU6.DJ79P_F1.js">
52    <link rel="modulepreload" href="/assets/chunks/ebnfDiagram-CCIWWBDH.DPBO51yx.js">
53    <link rel="modulepreload" href="/assets/chunks/abnfDiagram-VRR7QNED.J_cXaP-B.js">
54    <link rel="modulepreload" href="/assets/chunks/pegDiagram-2B236MQR.CBCHpizc.js">
55    <link rel="modulepreload" href="/assets/chunks/virtual_mermaid-config.DDnGl6nM.js">
56    <link rel="modulepreload" href="/assets/index.md.BvmjK8fv.lean.js">
57    

57<script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>

57
58    

58<script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>

58
59  </head>
60  <body>
61    <div id="app"><div class="Layout" data-v-6c3f26f1><!--[--><!--]--><!--[--><span tabindex="-1" data-v-04610445></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-04610445> Skip to content </a><!--]--><!----><header class="VPNav" data-v-6c3f26f1 data-v-dedffc9d><div class="VPNavBar" data-v-dedffc9d data-v-1780ac18><div class="wrapper" data-v-1780ac18><div class="container" data-v-1780ac18><div class="title" data-v-1780ac18><div class="VPNavBarTitle" data-v-1780ac18 data-v-c731ddc9><a class="title" href="/" data-v-c731ddc9><!--[--><!--]--><!----><span data-v-c731ddc9>Full Stack Blog</span><!--[--><!--]--></a></div></div><div class="content" data-v-1780ac18><div class="content-body" data-v-1780ac18><!--[--><!--]--><div class="VPNavBarSearch search" data-v-1780ac18><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-1780ac18 data-v-4ec40759><span id="main-nav-aria-label" class="visually-hidden" data-v-4ec40759> Main Navigation </span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/frontend/" tabindex="0" data-v-4ec40759 data-v-de333ba0><!--[--><span data-v-de333ba0>前端</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/backend/" tabindex="0" data-v-4ec40759 data-v-de333ba0><!--[--><span data-v-de333ba0>后端</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-1780ac18 data-v-59259ea6><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-59259ea6 data-v-ae8e547c data-v-3ab8adaf><span class="check" data-v-3ab8adaf><span class="icon" data-v-3ab8adaf><!--[--><span class="vpi-sun sun" data-v-ae8e547c></span><span class="vpi-moon moon" data-v-ae8e547c></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-1780ac18 data-v-73738304 data-v-4d46d059><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-4d46d059><span class="vpi-more-horizontal icon" data-v-4d46d059></span></button><div class="menu" data-v-4d46d059><div class="VPMenu" data-v-4d46d059 data-v-44b7da8a><!----><!--[--><!--[--><!----><div class="group" data-v-73738304><div class="item appearance" data-v-73738304><p class="label" data-v-73738304>Appearance</p><div class="appearance-action" data-v-73738304><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-73738304 data-v-ae8e547c data-v-3ab8adaf><span class="check" data-v-3ab8adaf><span class="icon" data-v-3ab8adaf><!--[--><span class="vpi-sun sun" data-v-ae8e547c></span><span class="vpi-moon moon" data-v-ae8e547c></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-1780ac18 data-v-1ae583b4><span class="container" data-v-1ae583b4><span class="top" data-v-1ae583b4></span><span class="middle" data-v-1ae583b4></span><span class="bottom" data-v-1ae583b4></span></span></button></div></div></div></div><div class="divider" data-v-1780ac18><div class="divider-line" data-v-1780ac18></div></div></div><!----></header><!----><!----><div class="VPContent is-home" id="VPContent" data-v-6c3f26f1 data-v-79d5cde0><div class="VPHome" data-v-79d5cde0 data-v-20c618bb><!--[--><!--]--><div class="VPHero has-image VPHomeHero" data-v-20c618bb data-v-f4059ee9><div class="container" data-v-f4059ee9><div class="main" data-v-f4059ee9><!--[--><!--]--><!--[--><h1 class="name" data-v-f4059ee9><span class="clip" data-v-f4059ee9>Full Stack Blog</span></h1><p class="text" data-v-f4059ee9>前端与后端开发实践</p><p class="tagline" data-v-f4059ee9>Notes and practices for frontend and backend development</p><!--]--><!--[--><!--]--><div class="actions" data-v-f4059ee9><!--[--><div class="action" data-v-f4059ee9><a class="VPButton medium brand" href="/frontend/" data-v-f4059ee9 data-v-ecc9622a>前端内容</a></div><div class="action" data-v-f4059ee9><a class="VPButton medium alt" href="/backend/" data-v-f4059ee9 data-v-ecc9622a>后端内容</a></div><!--]--></div><!--[--><!--]--></div><div class="image" data-v-f4059ee9><div class="image-container" data-v-f4059ee9><div class="image-bg" data-v-f4059ee9></div><!--[--><!--[--><img class="VPImage image-src" src="/img.jpg" alt="Full Stack Blog" data-v-0ccfb3a3><!--]--><!--]--></div></div></div></div><!--[--><!--]--><!--[--><!--]--><div class="VPFeatures VPHomeFeatures" data-v-20c618bb data-v-dc2f7038><div class="container" data-v-dc2f7038><div class="items" data-v-dc2f7038><!--[--><div class="grid-2 item" data-v-dc2f7038><div class="VPLink no-icon VPFeature" data-v-dc2f7038 data-v-ad6173e8><!--[--><article class="box" data-v-ad6173e8><!----><h2 class="title" data-v-ad6173e8>前端</h2><p class="details" data-v-ad6173e8>从 JavaScript 基础到现代 Web 架构与工程化实践。</p><!----></article><!--]--></div></div><div class="grid-2 item" data-v-dc2f7038><div class="VPLink no-icon VPFeature" data-v-dc2f7038 data-v-ad6173e8><!--[--><article class="box" data-v-ad6173e8><!----><h2 class="title" data-v-ad6173e8>后端</h2><p class="details" data-v-ad6173e8>围绕 Python、FastAPI、Linux 与 Docker 构建服务端能力。</p><!----></article><!--]--></div></div><!--]--></div></div></div><!--[--><!--]--><div class="vp-doc container" style="" data-v-20c618bb data-v-454b77b4><!--[--><div style="position:relative;" data-v-20c618bb><div></div></div><!--]--></div></div></div><!----><!--[--><!--]--></div></div>
62    

62<script>window.__VP_HASH_MAP__=JSON.parse("{\"backend_docker_basic_commands.md\":\"D1mY_sp8\",\"backend_docker_index.md\":\"CqlfeVKO\",\"backend_fastapi_client_spa_readme.md\":\"BsoJ1P3v\",\"backend_fastapi_index.md\":\"C3asNonq\",\"backend_fastapi_oauth2-jwt-login.md\":\"Bau3zxqo\",\"backend_index.md\":\"CrLk6W4S\",\"backend_news_readme.md\":\"CfCMSidb\",\"backend_python_async-context_index.md\":\"9ReTUntz\",\"backend_python_generator_index.md\":\"BIVgBRwR\",\"backend_python_index.md\":\"DW_zZjRM\",\"backend_python_iterator_index.md\":\"B6xMAgr_\",\"frontend_algorithm_index.md\":\"Cp23a9V6\",\"frontend_css_flex_index.md\":\"Cwq5nsmf\",\"frontend_index.md\":\"ZodT8glO\",\"frontend_interview_html-css_index.md\":\"BoujMlN6\",\"frontend_interview_js_index.md\":\"B3-EdPSo\",\"frontend_interview_security_index.md\":\"KVmfsKvs\",\"frontend_interview_web-vitals_index.md\":\"DCpj0_oX\",\"frontend_js_bom_index.md\":\"2WHfxJ2p\",\"frontend_js_class-extends_index.md\":\"BxF6T6dx\",\"frontend_js_client-storage_index.md\":\"DDOnjiY6\",\"frontend_js_data-types.md\":\"BbuEciPQ\",\"frontend_js_dom-event_index.md\":\"CHnuA9Yx\",\"frontend_js_es6_iterator-generator_index.md\":\"CGs-3AXG\",\"frontend_js_es6_promise.md\":\"-Mg8vQWq\",\"frontend_js_es6_proxy-reflect_index.md\":\"PkpN6gqs\",\"frontend_js_index.md\":\"DpaNcTbX\",\"frontend_js_memory-closure_index.md\":\"ywbH71LX\",\"frontend_js_populating_index.md\":\"C3h_UqEc\",\"frontend_js_run-scope-chain_index.md\":\"BQNSzUqX\",\"frontend_js_this.md\":\"BqdyLW7O\",\"frontend_next_app-router.md\":\"CZ2FnSEJ\",\"frontend_next_csr_ssr_ssg_isr.md\":\"Sk7zsQRb\",\"frontend_next_rendering-strategy.md\":\"B9pey7fI\",\"frontend_next_routes-dynamic-group-parallel-intercept.md\":\"CJuHlKMr\",\"frontend_next_server-actions.md\":\"mwX106fv\",\"frontend_next_streaming-prefetch.md\":\"D9GviSC9\",\"frontend_web3_eth_eip6963.md\":\"CKl1ph1d\",\"frontend_write_apply-call-bind_index.md\":\"Wyzch2F6\",\"frontend_write_async_promise-a_index.md\":\"Dsx5wP8a\",\"frontend_write_debounce_index.md\":\"C8IAyCbk\",\"frontend_write_deep-shallow-clone_index.md\":\"DR1g1OZE\",\"frontend_write_instanceof_index.md\":\"BmVtgc2w\",\"frontend_write_new_index.md\":\"CGrdk_C6\",\"frontend_write_scene_index.md\":\"QEGTSYLU\",\"frontend_write_throttle_index.md\":\"C_8QUj-5\",\"index.md\":\"BvmjK8fv\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"Full Stack Blog\",\"description\":\"记录前端与后端开发实践的技术博客\",\"base\":\"/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"nav\":[{\"text\":\"前端\",\"link\":\"/frontend/\",\"activeMatch\":\"^/frontend(?:/|$)\"},{\"text\":\"后端\",\"link\":\"/backend/\",\"activeMatch\":\"^/backend(?:/|$)\"}],\"sidebar\":{\"/frontend/\":[{\"text\":\"前端\",\"items\":[{\"text\":\"分类概览\",\"link\":\"/frontend/\"}]},{\"text\":\"HTML 与 CSS\",\"items\":[{\"text\":\"Flex 布局\",\"link\":\"/frontend/css/flex/\"}]},{\"text\":\"JavaScript\",\"collapsed\":false,\"items\":[{\"text\":\"概览\",\"link\":\"/frontend/js/\"},{\"text\":\"数据类型\",\"link\":\"/frontend/js/data-types\"},{\"text\":\"DOM 与事件\",\"link\":\"/frontend/js/dom-event/\"},{\"text\":\"BOM\",\"link\":\"/frontend/js/bom/\"},{\"text\":\"this\",\"link\":\"/frontend/js/this\"},{\"text\":\"运行原理与作用域\",\"link\":\"/frontend/js/run-scope-chain/\"},{\"text\":\"内存与闭包\",\"link\":\"/frontend/js/memory-closure/\"},{\"text\":\"浏览器渲染原理\",\"link\":\"/frontend/js/populating/\"},{\"text\":\"类与继承\",\"link\":\"/frontend/js/class-extends/\"},{\"text\":\"客户端存储\",\"link\":\"/frontend/js/client-storage/\"},{\"text\":\"Proxy 与 Reflect\",\"link\":\"/frontend/js/es6/proxy-reflect/\"},{\"text\":\"Iterator 与 Generator\",\"link\":\"/frontend/js/es6/iterator-generator/\"},{\"text\":\"Promise\",\"link\":\"/frontend/js/es6/promise\"}]},{\"text\":\"Next.js\",\"collapsed\":false,\"items\":[{\"text\":\"App Router\",\"link\":\"/frontend/next/app-router\"},{\"text\":\"动态、平行与拦截路由\",\"link\":\"/frontend/next/routes-dynamic-group-parallel-intercept\"},{\"text\":\"CSR / SSR / SSG / ISR\",\"link\":\"/frontend/next/csr_ssr_ssg_isr\"},{\"text\":\"渲染策略\",\"link\":\"/frontend/next/rendering-strategy\"},{\"text\":\"流式、预渲染与预取\",\"link\":\"/frontend/next/streaming-prefetch\"},{\"text\":\"Server Actions\",\"link\":\"/frontend/next/server-actions\"}]},{\"text\":\"其他主题\",\"items\":[{\"text\":\"Web3：EIP-6963\",\"link\":\"/frontend/web3/eth/EIP6963\"},{\"text\":\"算法与数据结构\",\"link\":\"/frontend/algorithm/\"}]},{\"text\":\"JavaScript 实现\",\"collapsed\":true,\"items\":[{\"text\":\"apply、call、bind\",\"link\":\"/frontend/write/apply-call-bind/\"},{\"text\":\"防抖\",\"link\":\"/frontend/write/debounce/\"},{\"text\":\"节流\",\"link\":\"/frontend/write/throttle/\"},{\"text\":\"深浅拷贝\",\"link\":\"/frontend/write/deep-shallow-clone/\"},{\"text\":\"new\",\"link\":\"/frontend/write/new/\"},{\"text\":\"instanceof\",\"link\":\"/frontend/write/instanceof/\"},{\"text\":\"Promise/A+\",\"link\":\"/frontend/write/async/promise-a/\"},{\"text\":\"场景实战\",\"link\":\"/frontend/write/scene\"}]},{\"text\":\"前端面试\",\"collapsed\":true,\"items\":[{\"text\":\"HTML 与 CSS\",\"link\":\"/frontend/interview/html-css/\"},{\"text\":\"JavaScript\",\"link\":\"/frontend/interview/js/\"},{\"text\":\"Web 安全\",\"link\":\"/frontend/interview/security/\"},{\"text\":\"网页关键指标\",\"link\":\"/frontend/interview/web-vitals/\"},{\"text\":\"缓存\",\"link\":\"/frontend/interview/cache/\"}]}],\"/backend/\":[{\"text\":\"后端\",\"items\":[{\"text\":\"分类概览\",\"link\":\"/backend/\"}]},{\"text\":\"Python\",\"collapsed\":false,\"items\":[{\"text\":\"概览\",\"link\":\"/backend/python/\"},{\"text\":\"迭代器\",\"link\":\"/backend/python/iterator/\"},{\"text\":\"生成器\",\"link\":\"/backend/python/generator/\"},{\"text\":\"异步与上下文管理\",\"link\":\"/backend/python/async-context/\"}]},{\"text\":\"FastAPI\",\"collapsed\":false,\"items\":[{\"text\":\"概览\",\"link\":\"/backend/fastapi/\"},{\"text\":\"OAuth2 密码登录与 JWT\",\"link\":\"/backend/fastapi/oauth2-jwt-login\"}]},{\"text\":\"Docker\",\"collapsed\":false,\"items\":[{\"text\":\"概览\",\"link\":\"/backend/docker/\"},{\"text\":\"常用命令\",\"link\":\"/backend/docker/basic/commands\"}]}]},\"outline\":{\"level\":[1,5]},\"lastUpdated\":{\"text\":\"Last Updated\"}},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>

62
63    
64  </body>
65</html>