[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"knowledge-\u002Fapi\u002Fknowledge\u002Fteam-documents\u002F19":3,"knowledge-related-\u002Fknowledge\u002Fteam-documents\u002F19":1017,"knowledge-series-\u002Fknowledge\u002Fteam-documents\u002F19":1041},{"source":4,"connector":5,"page":6},"sqlite","better-sqlite3",{"path":7,"title":8,"description":9,"category":10,"tags":11,"date":17,"pinned":18,"draft":18,"body":19,"seo":1013,"stem":1014,"id":1015,"extension":1016},"\u002Fknowledge\u002Fteam-documents\u002F19","GridView 宫格加载渲染优化","系统首页 GridView 宫格模块接口耗时不高，但首次进入总耗时接近 22s。复盘耗时分层定位过程、代码层面的瓶颈（约 2000 行、100 个 tab 重复节点）、优化手段与最终指标对比。","团队文档",[12,13,14,15,16],"team","vue","performance","table","geo","2026-03-17",false,{"type":20,"value":21,"toc":999},"minimark",[22,26,39,43,46,139,147,151,154,174,180,187,190,255,260,274,277,346,352,355,420,423,488,491,495,864,871,874,911,914,957,960,977,980,995],[23,24,8],"h1",{"id":25},"gridview-宫格加载渲染优化",[27,28,29,30,34,35,38],"p",{},"系统首页使用 ",[31,32,33],"code",{},"GridView"," 宫格模块，接口耗时本身并不高，但页面首次进入总耗时接近 ",[31,36,37],{},"22s","，明显超出预期，用户反馈「打开首页要等很久」。",[40,41,42],"h2",{"id":42},"问题定位",[27,44,45],{},"优化前先分层定位耗时来源，避免一上来就盲目改代码：",[15,47,48,64],{},[49,50,51],"thead",{},[52,53,54,58,61],"tr",{},[55,56,57],"th",{},"阶段",[55,59,60],{},"耗时",[55,62,63],{},"说明",[65,66,67,82,95,113,126],"tbody",{},[52,68,69,73,79],{},[70,71,72],"td",{},"首次打开页面总耗时",[70,74,75,76],{},"约 ",[31,77,78],{},"20s-30s",[70,80,81],{},"用户实际感知到的等待时间",[52,83,84,87,92],{},[70,85,86],{},"本地资源加载",[70,88,75,89],{},[31,90,91],{},"1s-2s",[70,93,94],{},"排除本地静态资源问题",[52,96,97,104,110],{},[70,98,99,100,103],{},"外链 ",[31,101,102],{},"Vue"," 资源下载",[70,105,106,107],{},"接近 ",[31,108,109],{},"15s",[70,111,112],{},"网络链路影响明显，是最大单项耗时",[52,114,115,118,123],{},[70,116,117],{},"去掉外链后总耗时",[70,119,75,120],{},[31,121,122],{},"12s",[70,124,125],{},"排除外链影响后，仍远高于预期",[52,127,128,131,136],{},[70,129,130],{},"其中纯渲染耗时",[70,132,133],{},[31,134,135],{},"8s-10s",[70,137,138],{},"排除资源加载后剩余的“真实渲染成本”",[27,140,141,142,146],{},"结论：",[143,144,145],"strong",{},"问题不仅是资源加载，还存在页面渲染层面的结构性开销","，两者叠加才导致了 22s 的总耗时，因此优化需要「资源加载」与「渲染逻辑」两个方向同时推进。",[148,149,150],"h3",{"id":150},"渲染层面的瓶颈",[27,152,153],{},"继续查看源码发现：",[155,156,157,165,171],"ul",{},[158,159,160,161,164],"li",{},"页面代码接近 ",[31,162,163],{},"2000"," 行，逻辑高度集中在单个组件内；",[158,166,167,170],{},[31,168,169],{},"100"," 个 tab 存在大量重复节点与重复逻辑，每个 tab 几乎是相似结构的复制粘贴；",[158,172,173],{},"可复用部分未封装，导致渲染成本随 tab 数量线性叠加，同时维护成本也偏高（改一处逻辑需要同步改 100 处）。",[175,176,177],"blockquote",{},[27,178,179],{},"分析图如下",[27,181,182],{},[183,184],"img",{"alt":185,"src":186},"GridView分析图","https:\u002F\u002Fcdn.wangxiaoze.cn\u002Fstatic\u002Fimages\u002Faff5ff27-34ff-4d68-b7d3-f9049665b9c2.svg",[40,188,189],{"id":189},"优化方案",[15,191,192,205],{},[49,193,194],{},[52,195,196,199,202],{},[55,197,198],{},"手段",[55,200,201],{},"具体做法",[55,203,204],{},"解决的问题",[65,206,207,218,229,240],{},[52,208,209,212,215],{},[70,210,211],{},"提炼重复逻辑",[70,213,214],{},"将 100 个 tab 中重复的判断、计算逻辑抽取为公共函数",[70,216,217],{},"减少无效代码体积与重复执行开销",[52,219,220,223,226],{},[70,221,222],{},"抽取公共节点结构",[70,224,225],{},"统一渲染模板，用配置数据驱动而非手写重复 DOM",[70,227,228],{},"降低模板编译体积，减少重复的虚拟 DOM diff 成本",[52,230,231,234,237],{},[70,232,233],{},"封装公共渲染函数",[70,235,236],{},"每个 tab 通过统一函数生成节点，避免独立拼装",[70,238,239],{},"减少组件实例数量与重复的生命周期开销",[52,241,242,245,252],{},[70,243,244],{},"关键元素动态追加",[70,246,247,248,251],{},"部分非首屏必需元素通过 ",[31,249,250],{},"JS"," 动态追加，而非全部走模板编译",[70,253,254],{},"减少不必要的编译渲染开销，缩短首屏可交互时间",[175,256,257],{},[27,258,259],{},"涉及公司源码，以下仅展示无敏感信息的示意图",[27,261,262,266,270],{},[183,263],{"alt":264,"src":265},"GridView解决图1","https:\u002F\u002Fcdn.wangxiaoze.cn\u002Fstatic\u002Fimages\u002F84280e6f-8fc1-438c-a4a7-af87017c8f84.png",[183,267],{"alt":268,"src":269},"GridView解决图2","https:\u002F\u002Fcdn.wangxiaoze.cn\u002Fstatic\u002Fimages\u002Ff11f0578-7f31-4a58-b1a4-25123f316671.png",[183,271],{"alt":272,"src":273},"GridView解决图3","https:\u002F\u002Fcdn.wangxiaoze.cn\u002Fstatic\u002Fimages\u002F73304971-9515-410f-b4ac-71037b26a316.png",[40,275,276],{"id":276},"优化结果与指标",[15,278,279,292],{},[49,280,281],{},[52,282,283,286,289],{},[55,284,285],{},"指标",[55,287,288],{},"优化前",[55,290,291],{},"优化后",[65,293,294,310,322,335],{},[52,295,296,299,303],{},[70,297,298],{},"首次进入总耗时",[70,300,75,301],{},[31,302,78],{},[70,304,305,306,309],{},"降低约 ",[31,307,308],{},"7s-8s","，整体等待时间显著缩短",[52,311,312,315,319],{},[70,313,314],{},"纯渲染耗时",[70,316,317],{},[31,318,135],{},[70,320,321],{},"明显下降（随重复节点与重复逻辑消除同步降低）",[52,323,324,327,332],{},[70,325,326],{},"页面代码规模",[70,328,106,329,331],{},[31,330,163],{}," 行、大量重复",[70,333,334],{},"通过公共函数与模板抽取后显著精简",[52,336,337,340,343],{},[70,338,339],{},"维护成本",[70,341,342],{},"改一处需同步改 100 处 tab",[70,344,345],{},"改公共逻辑\u002F模板即可覆盖全部 tab",[27,347,348,349,351],{},"通过渲染链路重构后，页面减少了编译阶段的冗余开销，渲染等待时间降低约 ",[31,350,308],{},"，整体体验显著提升。",[40,353,354],{"id":354},"优化前后代码结构对比",[15,356,357,368],{},[49,358,359],{},[52,360,361,364,366],{},[55,362,363],{},"维度",[55,365,288],{},[55,367,291],{},[65,369,370,384,395,406],{},[52,371,372,375,381],{},[70,373,374],{},"组件规模",[70,376,377,378,380],{},"单组件约 ",[31,379,163],{}," 行，逻辑集中",[70,382,383],{},"拆分公共函数 + 配置数据驱动，单文件复杂度显著下降",[52,385,386,389,392],{},[70,387,388],{},"Tab 渲染方式",[70,390,391],{},"100 个 tab 手写重复结构",[70,393,394],{},"统一渲染函数按配置遍历生成",[52,396,397,400,403],{},[70,398,399],{},"改动成本",[70,401,402],{},"改一处逻辑需同步改 100 处",[70,404,405],{},"改公共函数\u002F配置即可覆盖全部 tab",[52,407,408,411,414],{},[70,409,410],{},"非首屏元素",[70,412,413],{},"全部走模板编译",[70,415,416,417,419],{},"部分非首屏必需元素改为 ",[31,418,250],{}," 动态追加",[40,421,422],{"id":422},"优化思路示意",[424,425,430],"pre",{"className":426,"code":427,"language":428,"meta":429,"style":429},"language-mermaid shiki shiki-themes material-theme-lighter github-light github-dark","flowchart LR\n  A[页面渲染耗时高] --> B[100个tab重复渲染]\n  B --> C[提炼公共判断\u002F计算逻辑]\n  B --> D[抽取统一渲染模板]\n  C --> E[配置数据驱动渲染]\n  D --> E\n  E --> F[公共渲染函数生成节点]\n  F --> G[非首屏元素改为JS动态追加]\n  G --> H[渲染耗时下降7-8s]\n","mermaid","",[31,431,432,440,446,452,458,464,470,476,482],{"__ignoreMap":429},[433,434,437],"span",{"class":435,"line":436},"line",1,[433,438,439],{},"flowchart LR\n",[433,441,443],{"class":435,"line":442},2,[433,444,445],{},"  A[页面渲染耗时高] --> B[100个tab重复渲染]\n",[433,447,449],{"class":435,"line":448},3,[433,450,451],{},"  B --> C[提炼公共判断\u002F计算逻辑]\n",[433,453,455],{"class":435,"line":454},4,[433,456,457],{},"  B --> D[抽取统一渲染模板]\n",[433,459,461],{"class":435,"line":460},5,[433,462,463],{},"  C --> E[配置数据驱动渲染]\n",[433,465,467],{"class":435,"line":466},6,[433,468,469],{},"  D --> E\n",[433,471,473],{"class":435,"line":472},7,[433,474,475],{},"  E --> F[公共渲染函数生成节点]\n",[433,477,479],{"class":435,"line":478},8,[433,480,481],{},"  F --> G[非首屏元素改为JS动态追加]\n",[433,483,485],{"class":435,"line":484},9,[433,486,487],{},"  G --> H[渲染耗时下降7-8s]\n",[27,489,490],{},"核心思路是把「100 个几乎相同的 tab」从「重复手写」转变为「配置 + 公共函数」，渲染成本不再随 tab 数量线性叠加编译开销，而是共享同一套渲染逻辑。",[40,492,494],{"id":493},"配置数据驱动示例示意","配置数据驱动示例（示意）",[424,496,500],{"className":497,"code":498,"language":499,"meta":429,"style":429},"language-javascript shiki shiki-themes material-theme-lighter github-light github-dark","\u002F\u002F 优化前：每个 tab 手写重复结构（示意，实际有 100 处类似代码）\nfunction renderTab1() {\n  return `\u003Cdiv class=\"tab-item\">...tab1 专属结构...\u003C\u002Fdiv>`;\n}\nfunction renderTab2() {\n  return `\u003Cdiv class=\"tab-item\">...tab2 专属结构...\u003C\u002Fdiv>`;\n}\n\u002F\u002F ... 重复 100 次\n\n\u002F\u002F 优化后：配置驱动 + 公共渲染函数\nconst tabConfigs = [\n  { id: 1, title: \"分类一\", icon: \"icon1\" },\n  { id: 2, title: \"分类二\", icon: \"icon2\" },\n  \u002F\u002F ... 100 项配置数据，而非 100 段重复代码\n];\n\nfunction renderTabItem(config) {\n  return `\u003Cdiv class=\"tab-item\" data-id=\"${config.id}\">\n    \u003Cimg src=\"${config.icon}\" \u002F>\n    \u003Cspan>${config.title}\u003C\u002Fspan>\n  \u003C\u002Fdiv>`;\n}\n\nconst html = tabConfigs.map(renderTabItem).join(\"\");\n","javascript",[31,501,502,508,525,545,550,561,574,578,583,589,595,613,664,704,710,718,723,743,770,790,810,820,825,830],{"__ignoreMap":429},[433,503,504],{"class":435,"line":436},[433,505,507],{"class":506},"sutJx","\u002F\u002F 优化前：每个 tab 手写重复结构（示意，实际有 100 处类似代码）\n",[433,509,510,514,518,522],{"class":435,"line":442},[433,511,513],{"class":512},"sbsja","function",[433,515,517],{"class":516},"sGLFI"," renderTab1",[433,519,521],{"class":520},"sP7_E","()",[433,523,524],{"class":520}," {\n",[433,526,527,531,535,539,542],{"class":435,"line":448},[433,528,530],{"class":529},"sVHd0","  return",[433,532,534],{"class":533},"sjJ54"," `",[433,536,538],{"class":537},"s_sjI","\u003Cdiv class=\"tab-item\">...tab1 专属结构...\u003C\u002Fdiv>",[433,540,541],{"class":533},"`",[433,543,544],{"class":520},";\n",[433,546,547],{"class":435,"line":454},[433,548,549],{"class":520},"}\n",[433,551,552,554,557,559],{"class":435,"line":460},[433,553,513],{"class":512},[433,555,556],{"class":516}," renderTab2",[433,558,521],{"class":520},[433,560,524],{"class":520},[433,562,563,565,567,570,572],{"class":435,"line":466},[433,564,530],{"class":529},[433,566,534],{"class":533},[433,568,569],{"class":537},"\u003Cdiv class=\"tab-item\">...tab2 专属结构...\u003C\u002Fdiv>",[433,571,541],{"class":533},[433,573,544],{"class":520},[433,575,576],{"class":435,"line":472},[433,577,549],{"class":520},[433,579,580],{"class":435,"line":478},[433,581,582],{"class":506},"\u002F\u002F ... 重复 100 次\n",[433,584,585],{"class":435,"line":484},[433,586,588],{"emptyLinePlaceholder":587},true,"\n",[433,590,592],{"class":435,"line":591},10,[433,593,594],{"class":506},"\u002F\u002F 优化后：配置驱动 + 公共渲染函数\n",[433,596,598,601,605,609],{"class":435,"line":597},11,[433,599,600],{"class":512},"const",[433,602,604],{"class":603},"s_hVV"," tabConfigs",[433,606,608],{"class":607},"smGrS"," =",[433,610,612],{"class":611},"su5hD"," [\n",[433,614,616,619,623,626,630,633,636,638,641,644,647,649,652,654,656,659,661],{"class":435,"line":615},12,[433,617,618],{"class":520},"  {",[433,620,622],{"class":621},"skxfh"," id",[433,624,625],{"class":520},":",[433,627,629],{"class":628},"srdBf"," 1",[433,631,632],{"class":520},",",[433,634,635],{"class":621}," title",[433,637,625],{"class":520},[433,639,640],{"class":533}," \"",[433,642,643],{"class":537},"分类一",[433,645,646],{"class":533},"\"",[433,648,632],{"class":520},[433,650,651],{"class":621}," icon",[433,653,625],{"class":520},[433,655,640],{"class":533},[433,657,658],{"class":537},"icon1",[433,660,646],{"class":533},[433,662,663],{"class":520}," },\n",[433,665,667,669,671,673,676,678,680,682,684,687,689,691,693,695,697,700,702],{"class":435,"line":666},13,[433,668,618],{"class":520},[433,670,622],{"class":621},[433,672,625],{"class":520},[433,674,675],{"class":628}," 2",[433,677,632],{"class":520},[433,679,635],{"class":621},[433,681,625],{"class":520},[433,683,640],{"class":533},[433,685,686],{"class":537},"分类二",[433,688,646],{"class":533},[433,690,632],{"class":520},[433,692,651],{"class":621},[433,694,625],{"class":520},[433,696,640],{"class":533},[433,698,699],{"class":537},"icon2",[433,701,646],{"class":533},[433,703,663],{"class":520},[433,705,707],{"class":435,"line":706},14,[433,708,709],{"class":506},"  \u002F\u002F ... 100 项配置数据，而非 100 段重复代码\n",[433,711,713,716],{"class":435,"line":712},15,[433,714,715],{"class":611},"]",[433,717,544],{"class":520},[433,719,721],{"class":435,"line":720},16,[433,722,588],{"emptyLinePlaceholder":587},[433,724,726,728,731,734,738,741],{"class":435,"line":725},17,[433,727,513],{"class":512},[433,729,730],{"class":516}," renderTabItem",[433,732,733],{"class":520},"(",[433,735,737],{"class":736},"s99_P","config",[433,739,740],{"class":520},")",[433,742,524],{"class":520},[433,744,746,748,750,753,756,758,761,764,767],{"class":435,"line":745},18,[433,747,530],{"class":529},[433,749,534],{"class":533},[433,751,752],{"class":537},"\u003Cdiv class=\"tab-item\" data-id=\"",[433,754,755],{"class":533},"${",[433,757,737],{"class":611},[433,759,760],{"class":533},".",[433,762,763],{"class":611},"id",[433,765,766],{"class":533},"}",[433,768,769],{"class":537},"\">\n",[433,771,773,776,778,780,782,785,787],{"class":435,"line":772},19,[433,774,775],{"class":537},"    \u003Cimg src=\"",[433,777,755],{"class":533},[433,779,737],{"class":611},[433,781,760],{"class":533},[433,783,784],{"class":611},"icon",[433,786,766],{"class":533},[433,788,789],{"class":537},"\" \u002F>\n",[433,791,793,796,798,800,802,805,807],{"class":435,"line":792},20,[433,794,795],{"class":537},"    \u003Cspan>",[433,797,755],{"class":533},[433,799,737],{"class":611},[433,801,760],{"class":533},[433,803,804],{"class":611},"title",[433,806,766],{"class":533},[433,808,809],{"class":537},"\u003C\u002Fspan>\n",[433,811,813,816,818],{"class":435,"line":812},21,[433,814,815],{"class":537},"  \u003C\u002Fdiv>",[433,817,541],{"class":533},[433,819,544],{"class":520},[433,821,823],{"class":435,"line":822},22,[433,824,549],{"class":520},[433,826,828],{"class":435,"line":827},23,[433,829,588],{"emptyLinePlaceholder":587},[433,831,833,835,838,840,842,844,847,850,852,855,857,860,862],{"class":435,"line":832},24,[433,834,600],{"class":512},[433,836,837],{"class":603}," html",[433,839,608],{"class":607},[433,841,604],{"class":611},[433,843,760],{"class":520},[433,845,846],{"class":516},"map",[433,848,849],{"class":611},"(renderTabItem)",[433,851,760],{"class":520},[433,853,854],{"class":516},"join",[433,856,733],{"class":611},[433,858,859],{"class":533},"\"\"",[433,861,740],{"class":611},[433,863,544],{"class":520},[27,865,866,867,870],{},"配置化之后，新增\u002F调整 tab 只需修改 ",[31,868,869],{},"tabConfigs"," 数据，不再需要新增或修改渲染函数本身。",[40,872,873],{"id":873},"回归检查清单",[155,875,878,887,893,899,905],{"className":876},[877],"contains-task-list",[158,879,882,886],{"className":880},[881],"task-list-item",[883,884],"input",{"disabled":587,"type":885},"checkbox"," 全部 100 个 tab 在优化后功能表现与优化前一致（点击、切换、数据展示均正常）；",[158,888,890,892],{"className":889},[881],[883,891],{"disabled":587,"type":885}," 首次进入页面的总耗时、纯渲染耗时符合优化后的预期指标；",[158,894,896,898],{"className":895},[881],[883,897],{"disabled":587,"type":885}," 非首屏动态追加的元素在滚动到可视区域后能正确展示，不出现闪烁或错位；",[158,900,902,904],{"className":901},[881],[883,903],{"disabled":587,"type":885}," 弱网环境下验证外链资源加载失败时的兜底表现（如降级为本地资源或提示）；",[158,906,908,910],{"className":907},[881],[883,909],{"disabled":587,"type":885}," 后续新增 tab 时，只需修改配置数据即可正常渲染，无需改动公共渲染函数。",[40,912,913],{"id":913},"常见疑问",[915,916,917,931,947],"ol",{},[158,918,919,922,925,927,928,930],{},[143,920,921],{},"为什么先排查「资源加载」和「渲染」两个方向，而不是直接改代码？",[923,924],"br",{},[31,926,37],{}," 的总耗时可能由多个独立因素叠加导致，如果不先分层定位，很容易把大量精力投入到收益有限的方向（例如只优化渲染，却忽略了外链下载占了近 ",[31,929,109],{},"），分层定位能帮助优化资源投入到收益最大的环节。",[158,932,933,936,938,939,942,943,946],{},[143,934,935],{},"抽取公共渲染函数后，是否会影响个别 tab 的差异化需求？",[923,937],{},"\n配置数据驱动并不意味着所有 tab 必须完全一致，可以在配置项中增加可选字段（如 ",[31,940,941],{},"variant","、",[31,944,945],{},"extra","），公共渲染函数内部按需处理差异分支，仍能覆盖少数特殊 tab 的个性化需求。",[158,948,949,954,956],{},[143,950,951,953],{},[31,952,250],{}," 动态追加非首屏元素是否会影响可访问性或 SEO？",[923,955],{},"\n该页面为登录后的业务首页，不涉及 SEO 需求；可访问性方面需要确保动态追加的元素仍具备正确的语义标签与可聚焦特性，不能因为「动态追加」而遗漏无障碍属性。",[40,958,959],{"id":959},"后续建议",[155,961,962,971,974],{},[158,963,964,965,967,968,970],{},"对外链资源（如 ",[31,966,102],{}," 等公共库）评估是否可迁移至更稳定的 CDN 节点或自建静态资源域名，进一步压缩约 ",[31,969,109],{}," 的外链下载耗时；",[158,972,973],{},"类似「多 tab \u002F 多宫格」重复结构的页面，建议在设计阶段就采用「配置数据 + 公共渲染函数」模式，而非等积累到 100 个 tab 才回头优化；",[158,975,976],{},"建立首屏耗时监控埋点，区分「资源加载」与「渲染耗时」两段上报，便于后续类似问题快速定位到具体阶段，而不必每次都从头分层排查。",[40,978,979],{"id":979},"相关链接",[155,981,982,989],{},[158,983,984],{},[985,986,988],"a",{"href":987},"\u002Fknowledge\u002Fteam-documents\u002F13","新商家系统性能优化实践",[158,990,991],{},[985,992,994],{"href":993},"\u002Fknowledge\u002Fteam-documents\u002F07","企业微信群工具打开缓慢原因分析",[996,997,998],"style",{},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sutJx, html code.shiki .sutJx{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#6A737D;--shiki-default-font-style:inherit;--shiki-dark:#6A737D;--shiki-dark-font-style:inherit}html pre.shiki code .sbsja, html code.shiki .sbsja{--shiki-light:#9C3EDA;--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sGLFI, html code.shiki .sGLFI{--shiki-light:#6182B8;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sP7_E, html code.shiki .sP7_E{--shiki-light:#39ADB5;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sVHd0, html code.shiki .sVHd0{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#D73A49;--shiki-default-font-style:inherit;--shiki-dark:#F97583;--shiki-dark-font-style:inherit}html pre.shiki code .sjJ54, html code.shiki .sjJ54{--shiki-light:#39ADB5;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s_sjI, html code.shiki .s_sjI{--shiki-light:#91B859;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s_hVV, html code.shiki .s_hVV{--shiki-light:#90A4AE;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .smGrS, html code.shiki .smGrS{--shiki-light:#39ADB5;--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .su5hD, html code.shiki .su5hD{--shiki-light:#90A4AE;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .skxfh, html code.shiki .skxfh{--shiki-light:#E53935;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .srdBf, html code.shiki .srdBf{--shiki-light:#F76D47;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s99_P, html code.shiki .s99_P{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#E36209;--shiki-default-font-style:inherit;--shiki-dark:#FFAB70;--shiki-dark-font-style:inherit}",{"title":429,"searchDepth":442,"depth":442,"links":1000},[1001,1004,1005,1006,1007,1008,1009,1010,1011,1012],{"id":42,"depth":442,"text":42,"children":1002},[1003],{"id":150,"depth":448,"text":150},{"id":189,"depth":442,"text":189},{"id":276,"depth":442,"text":276},{"id":354,"depth":442,"text":354},{"id":422,"depth":442,"text":422},{"id":493,"depth":442,"text":494},{"id":873,"depth":442,"text":873},{"id":913,"depth":442,"text":913},{"id":959,"depth":442,"text":959},{"id":979,"depth":442,"text":979},{"title":8,"description":9},"knowledge\u002Fteam-documents\u002F19","knowledge\u002Fknowledge\u002Fteam-documents\u002F19.md","md",{"items":1018},[1019,1023,1027,1031,1035,1037],{"path":1020,"title":1021,"description":1022,"category":10,"score":712},"\u002Fknowledge\u002Fteam-documents\u002F04","老系统升级与兼容改造实践","公司原有业务系统采用 Node + jQuery 架构，长期运行后暴露出典型遗留系统问题：",{"path":1024,"title":1025,"description":1026,"category":10,"score":712},"\u002Fknowledge\u002Fteam-documents\u002F02","防篡改水印","在各类管理后台、SaaS 平台或内部系统中，页面水印已经是非常常见的能力：一方面在截图时携带账号、姓名、时间等信息，降低截图外传的风险；另一方面在上传图片或文档预览时，通过水印标记上传者与时间，满足审计和合规需求。",{"path":1028,"title":1029,"description":1030,"category":10,"score":712},"\u002Fknowledge\u002Fteam-documents\u002F05","内部插件 \u002F 工具库开发实践","在企业前端项目中，utils、hooks、libs 这类通用能力通常分散在多个仓库，常见问题包括：",{"path":1032,"title":1033,"description":1034,"category":10,"score":712},"\u002Fknowledge\u002Fteam-documents\u002F10","图片上传前的自定义水印实践","项目需要在图片上传前叠加动态水印。水印内容不是固定文案，而是由多个动态元素组成（如时间、地点、业务字段等）。",{"path":987,"title":988,"description":1036,"category":10,"score":615},"商家系统新版本上线后，团队持续针对构建效率与用户体验做了一轮系统性优化。本文记录核心方案与落地结果，供后续版本复用。",{"path":1038,"title":1039,"description":1040,"category":10,"score":615},"\u002Fknowledge\u002Fteam-documents\u002F03","键盘弹起导致底部被顶起问题（H5 适配）","在移动端 H5 页面中，当用户聚焦 input、textarea 等可编辑元素、软键盘弹出时，常见表现包括：",{"series":1042,"title":1043,"items":1044,"index":745,"prev":1116,"next":1117},"team-documents","team documents",[1045,1049,1051,1053,1055,1057,1061,1063,1067,1071,1073,1077,1081,1083,1087,1091,1095,1099,1103,1104,1108,1112],{"path":1046,"title":1047,"date":1048,"pinned":18},"\u002Fknowledge\u002Fteam-documents\u002F01","执行价格弹窗：表头 \u002F 表体合并与可配置表格","2024-07-27",{"path":1024,"title":1025,"date":1050,"pinned":18},"2024-01-09",{"path":1038,"title":1039,"date":1052,"pinned":18},"2024-09-17",{"path":1020,"title":1021,"date":1054,"pinned":18},"2024-12-12",{"path":1028,"title":1029,"date":1056,"pinned":18},"2021-08-19",{"path":1058,"title":1059,"date":1060,"pinned":18},"\u002Fknowledge\u002Fteam-documents\u002F06","企业微信与小程序工单问题","2025-10-01",{"path":993,"title":994,"date":1062,"pinned":18},"2020-04-12",{"path":1064,"title":1065,"date":1066,"pinned":18},"\u002Fknowledge\u002Fteam-documents\u002F08","属性排序需求","2024-06-16",{"path":1068,"title":1069,"date":1070,"pinned":18},"\u002Fknowledge\u002Fteam-documents\u002F09","同业主重复单提醒规则","2020-06-07",{"path":1032,"title":1033,"date":1072,"pinned":18},"2021-06-10",{"path":1074,"title":1075,"date":1076,"pinned":18},"\u002Fknowledge\u002Fteam-documents\u002F11","系统下单（重复单提示框）异常复盘","2023-11-21",{"path":1078,"title":1079,"date":1080,"pinned":18},"\u002Fknowledge\u002Fteam-documents\u002F12","系统自动更新说明","2025-05-26",{"path":987,"title":988,"date":1082,"pinned":18},"2025-04-08",{"path":1084,"title":1085,"date":1086,"pinned":18},"\u002Fknowledge\u002Fteam-documents\u002F14","选项卡切换与 Loading 状态封装","2019-11-03",{"path":1088,"title":1089,"date":1090,"pinned":18},"\u002Fknowledge\u002Fteam-documents\u002F15","移动端返回事件触发两次问题复盘","2021-03-09",{"path":1092,"title":1093,"date":1094,"pinned":18},"\u002Fknowledge\u002Fteam-documents\u002F16","在线协作表格接入实践","2023-10-27",{"path":1096,"title":1097,"date":1098,"pinned":18},"\u002Fknowledge\u002Fteam-documents\u002F17","支付中转页面升级实践","2022-10-15",{"path":1100,"title":1101,"date":1102,"pinned":18},"\u002Fknowledge\u002Fteam-documents\u002F18","中英文输入法下搜索触发冲突复盘","2024-09-01",{"path":7,"title":8,"date":17,"pinned":18},{"path":1105,"title":1106,"date":1107,"pinned":18},"\u002Fknowledge\u002Fteam-documents\u002F20","H5 GPS 定位问题说明","2023-08-31",{"path":1109,"title":1110,"date":1111,"pinned":18},"\u002Fknowledge\u002Fteam-documents\u002F21","vxe-table 行 Hover 联动高亮","2024-08-31",{"path":1113,"title":1114,"date":1115,"pinned":18},"\u002Fknowledge\u002Fteam-documents\u002F22","企业微信 uni-app H5：OAuth 回退白屏与列表缓存","2023-08-17",{"path":1100,"title":1101,"date":1102,"pinned":18},{"path":1105,"title":1106,"date":1107,"pinned":18}]