[{"data":1,"prerenderedAt":6210},["ShallowReactive",2],{"content-fallback-/about-html/web-page-editor-image-workflow":3,"related-/about-html/web-page-editor-image-workflow":1180},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"date":10,"topic":5,"author":11,"tags":12,"image":18,"imageAlt":19,"imageQuery":20,"pexelsPhotoId":21,"pexelsUrl":22,"featured":6,"readingTime":23,"body":24,"_type":1174,"_id":1175,"_source":1176,"_file":1177,"_stem":1178,"_extension":1179},"/about-html/web-page-editor-image-workflow","about-html",false,"","网页编辑器里的图片处理怎么做：压缩、格式、懒加载的实战工作流","很多网页编辑器项目不是页面搭不出来，而是图片处理太晚、太乱，最后一起拖慢首屏。本文从格式选择、压缩顺序、懒加载策略和回归检查出发，讲清图片工作流怎么建立。","2026-03-25","HTMLPAGE 团队",[13,14,15,16,17],"网页编辑器","图片优化","懒加载","网站性能","网页制作","/images/articles/web-page-editor-image-optimization-workflow-featured.jpg","设计师在电脑前优化网页图片素材与加载策略","image editing workflow website performance laptop",7675078,"https://www.pexels.com/photo/a-person-editing-a-photo-using-a-computer-7675078/",13,{"type":25,"children":26,"toc":1140},"root",[27,35,55,60,83,88,118,125,248,253,257,263,268,274,373,378,383,401,406,409,415,420,425,430,442,447,452,457,475,480,498,503,506,512,517,616,621,628,633,639,644,657,662,667,670,676,681,686,704,709,726,731,740,745,765,768,774,779,784,858,863,868,881,886,889,895,900,918,923,928,947,952,957,980,985,988,993,1056,1059,1064,1069,1097,1102,1107],{"type":28,"tag":29,"props":30,"children":31},"element","p",{},[32],{"type":33,"value":34},"text","很多网页编辑器项目一开始都把图片处理想得很简单：",{"type":28,"tag":36,"props":37,"children":38},"ul",{},[39,45,50],{"type":28,"tag":40,"props":41,"children":42},"li",{},[43],{"type":33,"value":44},"先把页面搭出来",{"type":28,"tag":40,"props":46,"children":47},{},[48],{"type":33,"value":49},"图片先传上去",{"type":28,"tag":40,"props":51,"children":52},{},[53],{"type":33,"value":54},"最后上线前再统一压一下",{"type":28,"tag":29,"props":56,"children":57},{},[58],{"type":33,"value":59},"这套做法的问题在于，它只处理了“文件大小”，没有处理真正决定体验的 4 件事：",{"type":28,"tag":36,"props":61,"children":62},{},[63,68,73,78],{"type":28,"tag":40,"props":64,"children":65},{},[66],{"type":33,"value":67},"这张图在页面里承担什么角色",{"type":28,"tag":40,"props":69,"children":70},{},[71],{"type":33,"value":72},"它该用什么格式",{"type":28,"tag":40,"props":74,"children":75},{},[76],{"type":33,"value":77},"它应该什么时候加载",{"type":28,"tag":40,"props":79,"children":80},{},[81],{"type":33,"value":82},"改完以后如何验证不会伤到首屏和转化",{"type":28,"tag":29,"props":84,"children":85},{},[86],{"type":33,"value":87},"所以图片处理不是一个末尾动作，而是一条工作流。",{"type":28,"tag":29,"props":89,"children":90},{},[91,93,100,102,108,110,116],{"type":33,"value":92},"如果你还在补编辑器与导出基础，可以先看 ",{"type":28,"tag":94,"props":95,"children":97},"a",{"href":96},"/about-html/visual-html-editor-guide",[98],{"type":33,"value":99},"可视化 HTML 编辑器完整指南",{"type":33,"value":101},"、",{"type":28,"tag":94,"props":103,"children":105},{"href":104},"/about-html/web-editor-html-code-audit-checklist",[106],{"type":33,"value":107},"网页编辑器生成 HTML 后怎么做代码审计",{"type":33,"value":109}," 和 ",{"type":28,"tag":94,"props":111,"children":113},{"href":112},"/topics/performance/image-optimization-guide",[114],{"type":33,"value":115},"图片优化指南",{"type":33,"value":117},"。",{"type":28,"tag":119,"props":120,"children":122},"h2",{"id":121},"先给结论图片处理不是压缩一遍而是-5-步工作流",[123],{"type":33,"value":124},"先给结论：图片处理不是压缩一遍，而是 5 步工作流",{"type":28,"tag":126,"props":127,"children":128},"table",{},[129,153],{"type":28,"tag":130,"props":131,"children":132},"thead",{},[133],{"type":28,"tag":134,"props":135,"children":136},"tr",{},[137,143,148],{"type":28,"tag":138,"props":139,"children":140},"th",{},[141],{"type":33,"value":142},"阶段",{"type":28,"tag":138,"props":144,"children":145},{},[146],{"type":33,"value":147},"目标",{"type":28,"tag":138,"props":149,"children":150},{},[151],{"type":33,"value":152},"最常见错误",{"type":28,"tag":154,"props":155,"children":156},"tbody",{},[157,176,194,212,230],{"type":28,"tag":134,"props":158,"children":159},{},[160,166,171],{"type":28,"tag":161,"props":162,"children":163},"td",{},[164],{"type":33,"value":165},"角色判断",{"type":28,"tag":161,"props":167,"children":168},{},[169],{"type":33,"value":170},"先搞清图片在页面里负责什么",{"type":28,"tag":161,"props":172,"children":173},{},[174],{"type":33,"value":175},"所有图片都用同一种策略",{"type":28,"tag":134,"props":177,"children":178},{},[179,184,189],{"type":28,"tag":161,"props":180,"children":181},{},[182],{"type":33,"value":183},"尺寸准备",{"type":28,"tag":161,"props":185,"children":186},{},[187],{"type":33,"value":188},"让图片和容器匹配",{"type":28,"tag":161,"props":190,"children":191},{},[192],{"type":33,"value":193},"用超大原图交给浏览器硬缩",{"type":28,"tag":134,"props":195,"children":196},{},[197,202,207],{"type":28,"tag":161,"props":198,"children":199},{},[200],{"type":33,"value":201},"格式选择",{"type":28,"tag":161,"props":203,"children":204},{},[205],{"type":33,"value":206},"在清晰度和体积间平衡",{"type":28,"tag":161,"props":208,"children":209},{},[210],{"type":33,"value":211},"一把梭全用 PNG",{"type":28,"tag":134,"props":213,"children":214},{},[215,220,225],{"type":28,"tag":161,"props":216,"children":217},{},[218],{"type":33,"value":219},"加载策略",{"type":28,"tag":161,"props":221,"children":222},{},[223],{"type":33,"value":224},"区分首屏和非首屏",{"type":28,"tag":161,"props":226,"children":227},{},[228],{"type":33,"value":229},"所有图片都立即请求",{"type":28,"tag":134,"props":231,"children":232},{},[233,238,243],{"type":28,"tag":161,"props":234,"children":235},{},[236],{"type":33,"value":237},"回归验证",{"type":28,"tag":161,"props":239,"children":240},{},[241],{"type":33,"value":242},"同时检查性能和表达",{"type":28,"tag":161,"props":244,"children":245},{},[246],{"type":33,"value":247},"只看体积，不看效果",{"type":28,"tag":29,"props":249,"children":250},{},[251],{"type":33,"value":252},"很多网页编辑器页面的 LCP 爆掉，并不是因为技术特别复杂，而是图片处理顺序从第一步就错了。",{"type":28,"tag":254,"props":255,"children":256},"hr",{},[],{"type":28,"tag":119,"props":258,"children":260},{"id":259},"一先判断图片角色再决定处理方式",[261],{"type":33,"value":262},"一、先判断图片角色，再决定处理方式",{"type":28,"tag":29,"props":264,"children":265},{},[266],{"type":33,"value":267},"同样是图片，处理策略完全不同。",{"type":28,"tag":269,"props":270,"children":272},"h3",{"id":271},"常见角色分类",[273],{"type":33,"value":271},{"type":28,"tag":126,"props":275,"children":276},{},[277,298],{"type":28,"tag":130,"props":278,"children":279},{},[280],{"type":28,"tag":134,"props":281,"children":282},{},[283,288,293],{"type":28,"tag":138,"props":284,"children":285},{},[286],{"type":33,"value":287},"图片类型",{"type":28,"tag":138,"props":289,"children":290},{},[291],{"type":33,"value":292},"页面职责",{"type":28,"tag":138,"props":294,"children":295},{},[296],{"type":33,"value":297},"优先关注",{"type":28,"tag":154,"props":299,"children":300},{},[301,319,337,355],{"type":28,"tag":134,"props":302,"children":303},{},[304,309,314],{"type":28,"tag":161,"props":305,"children":306},{},[307],{"type":33,"value":308},"首屏主视觉",{"type":28,"tag":161,"props":310,"children":311},{},[312],{"type":33,"value":313},"建立第一印象",{"type":28,"tag":161,"props":315,"children":316},{},[317],{"type":33,"value":318},"清晰度、优先级、尺寸",{"type":28,"tag":134,"props":320,"children":321},{},[322,327,332],{"type":28,"tag":161,"props":323,"children":324},{},[325],{"type":33,"value":326},"产品截图",{"type":28,"tag":161,"props":328,"children":329},{},[330],{"type":33,"value":331},"展示细节和可信度",{"type":28,"tag":161,"props":333,"children":334},{},[335],{"type":33,"value":336},"可读性、裁剪、压缩强度",{"type":28,"tag":134,"props":338,"children":339},{},[340,345,350],{"type":28,"tag":161,"props":341,"children":342},{},[343],{"type":33,"value":344},"内容配图",{"type":28,"tag":161,"props":346,"children":347},{},[348],{"type":33,"value":349},"辅助阅读节奏",{"type":28,"tag":161,"props":351,"children":352},{},[353],{"type":33,"value":354},"体积、懒加载",{"type":28,"tag":134,"props":356,"children":357},{},[358,363,368],{"type":28,"tag":161,"props":359,"children":360},{},[361],{"type":33,"value":362},"图标与装饰图",{"type":28,"tag":161,"props":364,"children":365},{},[366],{"type":33,"value":367},"增加识别度",{"type":28,"tag":161,"props":369,"children":370},{},[371],{"type":33,"value":372},"轻量、复用、适配",{"type":28,"tag":29,"props":374,"children":375},{},[376],{"type":33,"value":377},"最典型的错误，是把所有图片都当成“普通配图”。",{"type":28,"tag":29,"props":379,"children":380},{},[381],{"type":33,"value":382},"结果通常是：",{"type":28,"tag":36,"props":384,"children":385},{},[386,391,396],{"type":28,"tag":40,"props":387,"children":388},{},[389],{"type":33,"value":390},"首屏主图被压得太狠，视觉说服力下降",{"type":28,"tag":40,"props":392,"children":393},{},[394],{"type":33,"value":395},"产品截图用了激进压缩，文字变糊",{"type":28,"tag":40,"props":397,"children":398},{},[399],{"type":33,"value":400},"非首屏图提前全部加载，浪费首屏带宽",{"type":28,"tag":29,"props":402,"children":403},{},[404],{"type":33,"value":405},"如果先不分角色，后面做的很多优化都只是表面动作。",{"type":28,"tag":254,"props":407,"children":408},{},[],{"type":28,"tag":119,"props":410,"children":412},{"id":411},"二正确顺序是先裁剪再压缩再上传",[413],{"type":33,"value":414},"二、正确顺序是先裁剪，再压缩，再上传",{"type":28,"tag":29,"props":416,"children":417},{},[418],{"type":33,"value":419},"很多人拿到原图后第一反应是“先压缩”。",{"type":28,"tag":29,"props":421,"children":422},{},[423],{"type":33,"value":424},"这一步往往顺序反了。",{"type":28,"tag":29,"props":426,"children":427},{},[428],{"type":33,"value":429},"更稳的流程是：",{"type":28,"tag":431,"props":432,"children":436},"pre",{"className":433,"code":435,"language":33,"meta":7},[434],"language-text","先看页面容器尺寸\n  -> 再裁剪到需要的比例\n  -> 再选择格式和压缩参数\n  -> 最后上传到网页编辑器\n",[437],{"type":28,"tag":438,"props":439,"children":440},"code",{"__ignoreMap":7},[441],{"type":33,"value":435},{"type":28,"tag":269,"props":443,"children":445},{"id":444},"为什么裁剪优先于压缩",[446],{"type":33,"value":444},{"type":28,"tag":29,"props":448,"children":449},{},[450],{"type":33,"value":451},"因为浏览器不会因为图片被 CSS 缩小显示，就替你减少下载成本。",{"type":28,"tag":29,"props":453,"children":454},{},[455],{"type":33,"value":456},"如果页面里只需要一张 1200px 宽的 Hero 图，但你上传的是 4000px 原图：",{"type":28,"tag":36,"props":458,"children":459},{},[460,465,470],{"type":28,"tag":40,"props":461,"children":462},{},[463],{"type":33,"value":464},"网络传输成本已经发生",{"type":28,"tag":40,"props":466,"children":467},{},[468],{"type":33,"value":469},"解码压力已经发生",{"type":28,"tag":40,"props":471,"children":472},{},[473],{"type":33,"value":474},"首屏指标已经受到影响",{"type":28,"tag":269,"props":476,"children":478},{"id":477},"一个简单口径",[479],{"type":33,"value":477},{"type":28,"tag":36,"props":481,"children":482},{},[483,488,493],{"type":28,"tag":40,"props":484,"children":485},{},[486],{"type":33,"value":487},"首屏图按主要桌面容器宽度准备主版本",{"type":28,"tag":40,"props":489,"children":490},{},[491],{"type":33,"value":492},"卡片缩略图按卡片真实宽度准备",{"type":28,"tag":40,"props":494,"children":495},{},[496],{"type":33,"value":497},"产品截图按“用户要看清的最小可读尺寸”准备",{"type":28,"tag":29,"props":499,"children":500},{},[501],{"type":33,"value":502},"这一步做对了，后面的压缩空间才会更合理。",{"type":28,"tag":254,"props":504,"children":505},{},[],{"type":28,"tag":119,"props":507,"children":509},{"id":508},"三格式选择不是习惯问题而是内容类型问题",[510],{"type":33,"value":511},"三、格式选择不是习惯问题，而是内容类型问题",{"type":28,"tag":269,"props":513,"children":515},{"id":514},"一个实用选择表",[516],{"type":33,"value":514},{"type":28,"tag":126,"props":518,"children":519},{},[520,541],{"type":28,"tag":130,"props":521,"children":522},{},[523],{"type":28,"tag":134,"props":524,"children":525},{},[526,531,536],{"type":28,"tag":138,"props":527,"children":528},{},[529],{"type":33,"value":530},"内容类型",{"type":28,"tag":138,"props":532,"children":533},{},[534],{"type":33,"value":535},"建议格式",{"type":28,"tag":138,"props":537,"children":538},{},[539],{"type":33,"value":540},"原因",{"type":28,"tag":154,"props":542,"children":543},{},[544,562,580,598],{"type":28,"tag":134,"props":545,"children":546},{},[547,552,557],{"type":28,"tag":161,"props":548,"children":549},{},[550],{"type":33,"value":551},"摄影类主图",{"type":28,"tag":161,"props":553,"children":554},{},[555],{"type":33,"value":556},"WebP / JPEG",{"type":28,"tag":161,"props":558,"children":559},{},[560],{"type":33,"value":561},"体积与质量平衡较好",{"type":28,"tag":134,"props":563,"children":564},{},[565,570,575],{"type":28,"tag":161,"props":566,"children":567},{},[568],{"type":33,"value":569},"有透明背景的素材",{"type":28,"tag":161,"props":571,"children":572},{},[573],{"type":33,"value":574},"WebP / PNG",{"type":28,"tag":161,"props":576,"children":577},{},[578],{"type":33,"value":579},"需要保留透明信息",{"type":28,"tag":134,"props":581,"children":582},{},[583,588,593],{"type":28,"tag":161,"props":584,"children":585},{},[586],{"type":33,"value":587},"图标、线性图形",{"type":28,"tag":161,"props":589,"children":590},{},[591],{"type":33,"value":592},"SVG",{"type":28,"tag":161,"props":594,"children":595},{},[596],{"type":33,"value":597},"缩放稳定且体积小",{"type":28,"tag":134,"props":599,"children":600},{},[601,606,611],{"type":28,"tag":161,"props":602,"children":603},{},[604],{"type":33,"value":605},"文字密集截图",{"type":28,"tag":161,"props":607,"children":608},{},[609],{"type":33,"value":610},"WebP（保守压缩）/ PNG",{"type":28,"tag":161,"props":612,"children":613},{},[614],{"type":33,"value":615},"避免小字发糊",{"type":28,"tag":269,"props":617,"children":619},{"id":618},"最常见的两个误区",[620],{"type":33,"value":618},{"type":28,"tag":622,"props":623,"children":625},"h4",{"id":624},"误区-1所有图片都用-png",[626],{"type":33,"value":627},"误区 1：所有图片都用 PNG",{"type":28,"tag":29,"props":629,"children":630},{},[631],{"type":33,"value":632},"结果是页面体积快速膨胀，尤其对摄影类主图很不划算。",{"type":28,"tag":622,"props":634,"children":636},{"id":635},"误区-2所有图片都无脑转同一档-webp",[637],{"type":33,"value":638},"误区 2：所有图片都无脑转同一档 WebP",{"type":28,"tag":29,"props":640,"children":641},{},[642],{"type":33,"value":643},"结果是：",{"type":28,"tag":36,"props":645,"children":646},{},[647,652],{"type":28,"tag":40,"props":648,"children":649},{},[650],{"type":33,"value":651},"氛围图没问题",{"type":28,"tag":40,"props":653,"children":654},{},[655],{"type":33,"value":656},"但产品界面截图和图表细节会被压坏",{"type":28,"tag":29,"props":658,"children":659},{},[660],{"type":33,"value":661},"真正合理的方式，是按“图片信息密度”来选。",{"type":28,"tag":29,"props":663,"children":664},{},[665],{"type":33,"value":666},"信息越密、细节越多，压缩越需要保守。",{"type":28,"tag":254,"props":668,"children":669},{},[],{"type":28,"tag":119,"props":671,"children":673},{"id":672},"四加载策略必须把首屏和非首屏分开处理",[674],{"type":33,"value":675},"四、加载策略必须把首屏和非首屏分开处理",{"type":28,"tag":29,"props":677,"children":678},{},[679],{"type":33,"value":680},"很多网页编辑器项目加载慢，不是单张图特别大，而是图片请求顺序完全没有分级。",{"type":28,"tag":269,"props":682,"children":684},{"id":683},"首屏关键图应该怎么处理",[685],{"type":33,"value":683},{"type":28,"tag":36,"props":687,"children":688},{},[689,694,699],{"type":28,"tag":40,"props":690,"children":691},{},[692],{"type":33,"value":693},"设置明确宽高或占位，减少布局抖动",{"type":28,"tag":40,"props":695,"children":696},{},[697],{"type":33,"value":698},"让它尽快请求，不要误用懒加载",{"type":28,"tag":40,"props":700,"children":701},{},[702],{"type":33,"value":703},"避免被不必要的第三方脚本和字体阻塞",{"type":28,"tag":269,"props":705,"children":707},{"id":706},"非首屏图片应该怎么处理",[708],{"type":33,"value":706},{"type":28,"tag":36,"props":710,"children":711},{},[712,716,721],{"type":28,"tag":40,"props":713,"children":714},{},[715],{"type":33,"value":15},{"type":28,"tag":40,"props":717,"children":718},{},[719],{"type":33,"value":720},"接近视口时再请求",{"type":28,"tag":40,"props":722,"children":723},{},[724],{"type":33,"value":725},"长列表或长页面尽量分批加载",{"type":28,"tag":269,"props":727,"children":729},{"id":728},"一个实用原则",[730],{"type":33,"value":728},{"type":28,"tag":29,"props":732,"children":733},{},[734],{"type":28,"tag":735,"props":736,"children":737},"strong",{},[738],{"type":33,"value":739},"首屏关键图优先可见，非首屏图片优先延后。",{"type":28,"tag":29,"props":741,"children":742},{},[743],{"type":33,"value":744},"如果把所有图片都一股脑丢给页面首轮请求，首屏指标一定会被拖累。",{"type":28,"tag":29,"props":746,"children":747},{},[748,750,756,757,763],{"type":33,"value":749},"这部分可以配合 ",{"type":28,"tag":94,"props":751,"children":753},{"href":752},"/topics/performance/lcp-optimization-theory-practice",[754],{"type":33,"value":755},"LCP 优化理论与实践",{"type":33,"value":109},{"type":28,"tag":94,"props":758,"children":760},{"href":759},"/topics/performance/script-loading-guide",[761],{"type":33,"value":762},"脚本加载指南",{"type":33,"value":764}," 一起检查。",{"type":28,"tag":254,"props":766,"children":767},{},[],{"type":28,"tag":119,"props":769,"children":771},{"id":770},"五图片工作流必须包含回归不然优化可能把表达做坏",[772],{"type":33,"value":773},"五、图片工作流必须包含回归，不然优化可能把表达做坏",{"type":28,"tag":29,"props":775,"children":776},{},[777],{"type":33,"value":778},"图片优化不是“分数更高就一定更好”。",{"type":28,"tag":29,"props":780,"children":781},{},[782],{"type":33,"value":783},"至少要同时验证 4 个维度：",{"type":28,"tag":126,"props":785,"children":786},{},[787,803],{"type":28,"tag":130,"props":788,"children":789},{},[790],{"type":28,"tag":134,"props":791,"children":792},{},[793,798],{"type":28,"tag":138,"props":794,"children":795},{},[796],{"type":33,"value":797},"维度",{"type":28,"tag":138,"props":799,"children":800},{},[801],{"type":33,"value":802},"要检查什么",{"type":28,"tag":154,"props":804,"children":805},{},[806,819,832,845],{"type":28,"tag":134,"props":807,"children":808},{},[809,814],{"type":28,"tag":161,"props":810,"children":811},{},[812],{"type":33,"value":813},"性能",{"type":28,"tag":161,"props":815,"children":816},{},[817],{"type":33,"value":818},"LCP、图片总大小、请求数量",{"type":28,"tag":134,"props":820,"children":821},{},[822,827],{"type":28,"tag":161,"props":823,"children":824},{},[825],{"type":33,"value":826},"稳定性",{"type":28,"tag":161,"props":828,"children":829},{},[830],{"type":33,"value":831},"是否出现错位、裁切异常、CLS",{"type":28,"tag":134,"props":833,"children":834},{},[835,840],{"type":28,"tag":161,"props":836,"children":837},{},[838],{"type":33,"value":839},"表达",{"type":28,"tag":161,"props":841,"children":842},{},[843],{"type":33,"value":844},"主视觉是否仍能说明价值",{"type":28,"tag":134,"props":846,"children":847},{},[848,853],{"type":28,"tag":161,"props":849,"children":850},{},[851],{"type":33,"value":852},"业务",{"type":28,"tag":161,"props":854,"children":855},{},[856],{"type":33,"value":857},"CTA 点击率、停留时长是否异常",{"type":28,"tag":29,"props":859,"children":860},{},[861],{"type":33,"value":862},"很多团队在这一步只盯 Lighthouse 分数，忽略了首屏表达已经被压坏。",{"type":28,"tag":29,"props":864,"children":865},{},[866],{"type":33,"value":867},"如果图片一压完：",{"type":28,"tag":36,"props":869,"children":870},{},[871,876],{"type":28,"tag":40,"props":872,"children":873},{},[874],{"type":33,"value":875},"页面是快了",{"type":28,"tag":40,"props":877,"children":878},{},[879],{"type":33,"value":880},"但用户更难理解产品和服务",{"type":28,"tag":29,"props":882,"children":883},{},[884],{"type":33,"value":885},"那并不算真正优化成功。",{"type":28,"tag":254,"props":887,"children":888},{},[],{"type":28,"tag":119,"props":890,"children":892},{"id":891},"失败案例图片都压了lcp-还是很差",[893],{"type":33,"value":894},"失败案例：图片都压了，LCP 还是很差",{"type":28,"tag":269,"props":896,"children":898},{"id":897},"现象",[899],{"type":33,"value":897},{"type":28,"tag":36,"props":901,"children":902},{},[903,908,913],{"type":28,"tag":40,"props":904,"children":905},{},[906],{"type":33,"value":907},"团队把页面里的图片都压缩了一轮",{"type":28,"tag":40,"props":909,"children":910},{},[911],{"type":33,"value":912},"文件体积看起来已经降了不少",{"type":28,"tag":40,"props":914,"children":915},{},[916],{"type":33,"value":917},"但首屏 LCP 还是明显偏慢",{"type":28,"tag":269,"props":919,"children":921},{"id":920},"根因",[922],{"type":33,"value":920},{"type":28,"tag":29,"props":924,"children":925},{},[926],{"type":33,"value":927},"最后排查下来，问题通常不止一个：",{"type":28,"tag":929,"props":930,"children":931},"ol",{},[932,937,942],{"type":28,"tag":40,"props":933,"children":934},{},[935],{"type":33,"value":936},"首屏图仍然尺寸过大",{"type":28,"tag":40,"props":938,"children":939},{},[940],{"type":33,"value":941},"页面初始阶段同时请求了多张非首屏图片",{"type":28,"tag":40,"props":943,"children":944},{},[945],{"type":33,"value":946},"字体和第三方脚本抢占了首屏关键路径",{"type":28,"tag":269,"props":948,"children":950},{"id":949},"更稳的修法",[951],{"type":33,"value":949},{"type":28,"tag":29,"props":953,"children":954},{},[955],{"type":33,"value":956},"正确顺序应该是：",{"type":28,"tag":929,"props":958,"children":959},{},[960,965,970,975],{"type":28,"tag":40,"props":961,"children":962},{},[963],{"type":33,"value":964},"先定位首屏最大图片是谁",{"type":28,"tag":40,"props":966,"children":967},{},[968],{"type":33,"value":969},"把非首屏图全部后移加载",{"type":28,"tag":40,"props":971,"children":972},{},[973],{"type":33,"value":974},"审查字体和第三方脚本的加载时机",{"type":28,"tag":40,"props":976,"children":977},{},[978],{"type":33,"value":979},"再重新看首屏请求链路",{"type":28,"tag":29,"props":981,"children":982},{},[983],{"type":33,"value":984},"这类问题说明，图片优化不是独立动作，它和字体、脚本、页面结构是联动关系。",{"type":28,"tag":254,"props":986,"children":987},{},[],{"type":28,"tag":119,"props":989,"children":991},{"id":990},"图片处理清单",[992],{"type":33,"value":990},{"type":28,"tag":36,"props":994,"children":997},{"className":995},[996],"contains-task-list",[998,1011,1020,1029,1038,1047],{"type":28,"tag":40,"props":999,"children":1002},{"className":1000},[1001],"task-list-item",[1003,1009],{"type":28,"tag":1004,"props":1005,"children":1008},"input",{"disabled":1006,"type":1007},true,"checkbox",[],{"type":33,"value":1010}," 已区分首屏图、产品截图、内容配图和装饰图",{"type":28,"tag":40,"props":1012,"children":1014},{"className":1013},[1001],[1015,1018],{"type":28,"tag":1004,"props":1016,"children":1017},{"disabled":1006,"type":1007},[],{"type":33,"value":1019}," 图片在上传前已经按容器做尺寸裁剪",{"type":28,"tag":40,"props":1021,"children":1023},{"className":1022},[1001],[1024,1027],{"type":28,"tag":1004,"props":1025,"children":1026},{"disabled":1006,"type":1007},[],{"type":33,"value":1028}," 已根据内容类型选择格式，而不是全站单一格式",{"type":28,"tag":40,"props":1030,"children":1032},{"className":1031},[1001],[1033,1036],{"type":28,"tag":1004,"props":1034,"children":1035},{"disabled":1006,"type":1007},[],{"type":33,"value":1037}," 首屏关键图没有误用懒加载",{"type":28,"tag":40,"props":1039,"children":1041},{"className":1040},[1001],[1042,1045],{"type":28,"tag":1004,"props":1043,"children":1044},{"disabled":1006,"type":1007},[],{"type":33,"value":1046}," 非首屏图片采用延后加载策略",{"type":28,"tag":40,"props":1048,"children":1050},{"className":1049},[1001],[1051,1054],{"type":28,"tag":1004,"props":1052,"children":1053},{"disabled":1006,"type":1007},[],{"type":33,"value":1055}," 发布前已检查性能、清晰度、表达和业务影响",{"type":28,"tag":254,"props":1057,"children":1058},{},[],{"type":28,"tag":119,"props":1060,"children":1062},{"id":1061},"总结",[1063],{"type":33,"value":1061},{"type":28,"tag":29,"props":1065,"children":1066},{},[1067],{"type":33,"value":1068},"网页编辑器里的图片处理，真正重要的不是“上线前再压一遍”，而是把整条链路固定下来：",{"type":28,"tag":929,"props":1070,"children":1071},{},[1072,1077,1082,1087,1092],{"type":28,"tag":40,"props":1073,"children":1074},{},[1075],{"type":33,"value":1076},"先判断图片角色",{"type":28,"tag":40,"props":1078,"children":1079},{},[1080],{"type":33,"value":1081},"再准备尺寸",{"type":28,"tag":40,"props":1083,"children":1084},{},[1085],{"type":33,"value":1086},"再决定格式",{"type":28,"tag":40,"props":1088,"children":1089},{},[1090],{"type":33,"value":1091},"再安排加载顺序",{"type":28,"tag":40,"props":1093,"children":1094},{},[1095],{"type":33,"value":1096},"最后做回归验证",{"type":28,"tag":29,"props":1098,"children":1099},{},[1100],{"type":33,"value":1101},"只要顺序对了，图片就不会再是首屏性能和页面稳定性的第一杀手，而会变成真正可控的页面资产。",{"type":28,"tag":119,"props":1103,"children":1105},{"id":1104},"延伸阅读",[1106],{"type":33,"value":1104},{"type":28,"tag":36,"props":1108,"children":1109},{},[1110,1119,1126,1133],{"type":28,"tag":40,"props":1111,"children":1112},{},[1113],{"type":28,"tag":94,"props":1114,"children":1116},{"href":1115},"/about-html/web-page-editor-image-optimization-workflow",[1117],{"type":33,"value":1118},"网页编辑器里的图片优化工作流",{"type":28,"tag":40,"props":1120,"children":1121},{},[1122],{"type":28,"tag":94,"props":1123,"children":1124},{"href":104},[1125],{"type":33,"value":107},{"type":28,"tag":40,"props":1127,"children":1128},{},[1129],{"type":28,"tag":94,"props":1130,"children":1131},{"href":112},[1132],{"type":33,"value":115},{"type":28,"tag":40,"props":1134,"children":1135},{},[1136],{"type":28,"tag":94,"props":1137,"children":1138},{"href":752},[1139],{"type":33,"value":755},{"title":7,"searchDepth":1141,"depth":1141,"links":1142},3,[1143,1145,1148,1152,1160,1165,1166,1171,1172,1173],{"id":121,"depth":1144,"text":124},2,{"id":259,"depth":1144,"text":262,"children":1146},[1147],{"id":271,"depth":1141,"text":271},{"id":411,"depth":1144,"text":414,"children":1149},[1150,1151],{"id":444,"depth":1141,"text":444},{"id":477,"depth":1141,"text":477},{"id":508,"depth":1144,"text":511,"children":1153},[1154,1155],{"id":514,"depth":1141,"text":514},{"id":618,"depth":1141,"text":618,"children":1156},[1157,1159],{"id":624,"depth":1158,"text":627},4,{"id":635,"depth":1158,"text":638},{"id":672,"depth":1144,"text":675,"children":1161},[1162,1163,1164],{"id":683,"depth":1141,"text":683},{"id":706,"depth":1141,"text":706},{"id":728,"depth":1141,"text":728},{"id":770,"depth":1144,"text":773},{"id":891,"depth":1144,"text":894,"children":1167},[1168,1169,1170],{"id":897,"depth":1141,"text":897},{"id":920,"depth":1141,"text":920},{"id":949,"depth":1141,"text":949},{"id":990,"depth":1144,"text":990},{"id":1061,"depth":1144,"text":1061},{"id":1104,"depth":1144,"text":1104},"markdown","content:about-html:web-page-editor-image-workflow.md","content","about-html/web-page-editor-image-workflow.md","about-html/web-page-editor-image-workflow","md",[1181,1681,2079,2732,3219,3880],{"_path":1182,"_dir":1183,"_draft":6,"_partial":6,"_locale":7,"title":1184,"description":1185,"date":1186,"modified":1186,"image":1187,"slug":1188,"category":1189,"categorySlug":1183,"tags":1190,"path":1182,"canonical":1193,"body":1194,"_type":1174,"_id":1677,"_source":1176,"_file":1678,"_stem":1679,"_extension":1179,"sitemap":1680},"/web-design/webpage","web-design","网页是什么？网页制作/设计/编辑器/模板一篇讲清（附入口导航）","把“网页”的常见需求拆成 5 条路径：制作、设计、模板、编辑器、发布。你可以快速找到对应的教程与工具入口，不再在搜索结果里迷路。","2026-01-25T10:00:00","/images/articles/webpage-hub-featured.jpg","webpage","网页设计",[1191,17,1189,13,1192],"网页","网页模板","https://htmlpage.cn/web-design/webpage",{"type":25,"children":1195,"toc":1658},[1196,1201,1229,1234,1246,1249,1255,1260,1293,1298,1303,1306,1312,1317,1335,1340,1363,1366,1372,1377,1400,1404,1412,1415,1421,1426,1430,1443,1446,1452,1457,1470,1475,1478,1484,1489,1512,1516,1529,1532,1538,1544,1549,1555,1560,1566,1571,1577,1582,1588,1593,1599,1604,1610,1615,1621,1626,1629,1635],{"type":28,"tag":29,"props":1197,"children":1198},{},[1199],{"type":33,"value":1200},"你搜索“网页”，可能只是想做其中一件事：",{"type":28,"tag":36,"props":1202,"children":1203},{},[1204,1209,1214,1219,1224],{"type":28,"tag":40,"props":1205,"children":1206},{},[1207],{"type":33,"value":1208},"做一个能打开的网页（制作）",{"type":28,"tag":40,"props":1210,"children":1211},{},[1212],{"type":33,"value":1213},"把网页做得好看（设计）",{"type":28,"tag":40,"props":1215,"children":1216},{},[1217],{"type":33,"value":1218},"快速套用模板（模板）",{"type":28,"tag":40,"props":1220,"children":1221},{},[1222],{"type":33,"value":1223},"在线编辑并导出（编辑器）",{"type":28,"tag":40,"props":1225,"children":1226},{},[1227],{"type":33,"value":1228},"发布上线（域名/HTTPS/托管）",{"type":28,"tag":29,"props":1230,"children":1231},{},[1232],{"type":33,"value":1233},"但“网页”这个词太泛了，搜索结果里会混在一起：科普、教程、工具、模板、甚至百科。",{"type":28,"tag":29,"props":1235,"children":1236},{},[1237,1239,1244],{"type":33,"value":1238},"这篇 Hub 页的目标很简单：",{"type":28,"tag":735,"props":1240,"children":1241},{},[1242],{"type":33,"value":1243},"把你分流到最正确的一条路径",{"type":33,"value":1245},"，并给你对应的最短学习/操作路线。",{"type":28,"tag":254,"props":1247,"children":1248},{},[],{"type":28,"tag":119,"props":1250,"children":1252},{"id":1251},"网页是什么10-秒解释",[1253],{"type":33,"value":1254},"网页是什么（10 秒解释）",{"type":28,"tag":29,"props":1256,"children":1257},{},[1258],{"type":33,"value":1259},"网页（Web Page）是能通过浏览器访问的一段内容，它通常由：",{"type":28,"tag":36,"props":1261,"children":1262},{},[1263,1273,1283],{"type":28,"tag":40,"props":1264,"children":1265},{},[1266,1271],{"type":28,"tag":735,"props":1267,"children":1268},{},[1269],{"type":33,"value":1270},"HTML",{"type":33,"value":1272},"（结构）",{"type":28,"tag":40,"props":1274,"children":1275},{},[1276,1281],{"type":28,"tag":735,"props":1277,"children":1278},{},[1279],{"type":33,"value":1280},"CSS",{"type":33,"value":1282},"（样式）",{"type":28,"tag":40,"props":1284,"children":1285},{},[1286,1291],{"type":28,"tag":735,"props":1287,"children":1288},{},[1289],{"type":33,"value":1290},"JavaScript",{"type":33,"value":1292},"（交互，可选）",{"type":28,"tag":29,"props":1294,"children":1295},{},[1296],{"type":33,"value":1297},"组成。",{"type":28,"tag":29,"props":1299,"children":1300},{},[1301],{"type":33,"value":1302},"“网站”通常是多个网页的集合（首页、关于、产品、文章等）。",{"type":28,"tag":254,"props":1304,"children":1305},{},[],{"type":28,"tag":119,"props":1307,"children":1309},{"id":1308},"我想做网页从这里开始制作路径",[1310],{"type":33,"value":1311},"我想做网页：从这里开始（制作路径）",{"type":28,"tag":29,"props":1313,"children":1314},{},[1315],{"type":33,"value":1316},"如果你的目标是“尽快做出一个可发布的页面”，建议按这个顺序：",{"type":28,"tag":929,"props":1318,"children":1319},{},[1320,1325,1330],{"type":28,"tag":40,"props":1321,"children":1322},{},[1323],{"type":33,"value":1324},"选路线：模板 / 可视化编辑 / 写代码",{"type":28,"tag":40,"props":1326,"children":1327},{},[1328],{"type":33,"value":1329},"先做出第一版（能访问、能分享）",{"type":28,"tag":40,"props":1331,"children":1332},{},[1333],{"type":33,"value":1334},"再迭代（内容、样式、SEO、速度）",{"type":28,"tag":29,"props":1336,"children":1337},{},[1338],{"type":33,"value":1339},"推荐入口：",{"type":28,"tag":36,"props":1341,"children":1342},{},[1343,1348,1353,1358],{"type":28,"tag":40,"props":1344,"children":1345},{},[1346],{"type":33,"value":1347},"在线网页制作平台选型（从 0 到 1）：/about-html/online-website-builder-platform",{"type":28,"tag":40,"props":1349,"children":1350},{},[1351],{"type":33,"value":1352},"可视化编辑器入门（拖拽/WYSIWYG）：/about-html/visual-html-editor-guide",{"type":28,"tag":40,"props":1354,"children":1355},{},[1356],{"type":33,"value":1357},"模板怎么用（下载/在线编辑/导出）：/about-html/html-templates-comparison",{"type":28,"tag":40,"props":1359,"children":1360},{},[1361],{"type":33,"value":1362},"直接开始制作：/builder",{"type":28,"tag":254,"props":1364,"children":1365},{},[],{"type":28,"tag":119,"props":1367,"children":1369},{"id":1368},"我想让网页更好看从这里开始设计路径",[1370],{"type":33,"value":1371},"我想让网页更好看：从这里开始（设计路径）",{"type":28,"tag":29,"props":1373,"children":1374},{},[1375],{"type":33,"value":1376},"如果你觉得自己的页面“挤、乱、廉价”，不要先换模板，先学最小设计方法论：",{"type":28,"tag":36,"props":1378,"children":1379},{},[1380,1385,1390,1395],{"type":28,"tag":40,"props":1381,"children":1382},{},[1383],{"type":33,"value":1384},"信息层级（3 秒看懂）",{"type":28,"tag":40,"props":1386,"children":1387},{},[1388],{"type":33,"value":1389},"栅格与留白（对齐稳定）",{"type":28,"tag":40,"props":1391,"children":1392},{},[1393],{"type":33,"value":1394},"配色与字体（少即是多）",{"type":28,"tag":40,"props":1396,"children":1397},{},[1398],{"type":33,"value":1399},"响应式（移动端可用）",{"type":28,"tag":29,"props":1401,"children":1402},{},[1403],{"type":33,"value":1339},{"type":28,"tag":36,"props":1405,"children":1406},{},[1407],{"type":28,"tag":40,"props":1408,"children":1409},{},[1410],{"type":33,"value":1411},"网页设计入门（含检查清单）：/web-design/web-design-beginner-guide",{"type":28,"tag":254,"props":1413,"children":1414},{},[],{"type":28,"tag":119,"props":1416,"children":1418},{"id":1417},"我想快速套模板从这里开始模板路径",[1419],{"type":33,"value":1420},"我想快速套模板：从这里开始（模板路径）",{"type":28,"tag":29,"props":1422,"children":1423},{},[1424],{"type":33,"value":1425},"模板适合快速交付，但要注意：授权、响应式、导出与 SEO 能力。",{"type":28,"tag":29,"props":1427,"children":1428},{},[1429],{"type":33,"value":1339},{"type":28,"tag":36,"props":1431,"children":1432},{},[1433,1438],{"type":28,"tag":40,"props":1434,"children":1435},{},[1436],{"type":33,"value":1437},"模板三条路径对比：/about-html/html-templates-comparison",{"type":28,"tag":40,"props":1439,"children":1440},{},[1441],{"type":33,"value":1442},"模板库：/templates",{"type":28,"tag":254,"props":1444,"children":1445},{},[],{"type":28,"tag":119,"props":1447,"children":1449},{"id":1448},"我想在线编辑从这里开始编辑器路径",[1450],{"type":33,"value":1451},"我想在线编辑：从这里开始（编辑器路径）",{"type":28,"tag":29,"props":1453,"children":1454},{},[1455],{"type":33,"value":1456},"如果你的目标是“像做 PPT 一样拖拽搭建”，优先走可视化编辑器路线：",{"type":28,"tag":36,"props":1458,"children":1459},{},[1460,1465],{"type":28,"tag":40,"props":1461,"children":1462},{},[1463],{"type":33,"value":1464},"可视化编辑器入门：/about-html/visual-html-editor-guide",{"type":28,"tag":40,"props":1466,"children":1467},{},[1468],{"type":33,"value":1469},"直接开始编辑：/builder",{"type":28,"tag":29,"props":1471,"children":1472},{},[1473],{"type":33,"value":1474},"（如果你需要“在线运行/预览/导出源码”的代码型编辑器，也可以关注站内后续的在线编辑器教程。）",{"type":28,"tag":254,"props":1476,"children":1477},{},[],{"type":28,"tag":119,"props":1479,"children":1481},{"id":1480},"我想发布上线从这里开始发布路径",[1482],{"type":33,"value":1483},"我想发布上线：从这里开始（发布路径）",{"type":28,"tag":29,"props":1485,"children":1486},{},[1487],{"type":33,"value":1488},"发布上线不仅是“点一下发布”，你至少需要知道：",{"type":28,"tag":36,"props":1490,"children":1491},{},[1492,1497,1502,1507],{"type":28,"tag":40,"props":1493,"children":1494},{},[1495],{"type":33,"value":1496},"域名与 HTTPS",{"type":28,"tag":40,"props":1498,"children":1499},{},[1500],{"type":33,"value":1501},"缓存与更新（改了为什么不生效）",{"type":28,"tag":40,"props":1503,"children":1504},{},[1505],{"type":33,"value":1506},"图片与性能（首屏速度）",{"type":28,"tag":40,"props":1508,"children":1509},{},[1510],{"type":33,"value":1511},"SEO 最小项（Title/Description/canonical/内链）",{"type":28,"tag":29,"props":1513,"children":1514},{},[1515],{"type":33,"value":1339},{"type":28,"tag":36,"props":1517,"children":1518},{},[1519,1524],{"type":28,"tag":40,"props":1520,"children":1521},{},[1522],{"type":33,"value":1523},"在线网页制作平台的发布清单：/about-html/online-website-builder-platform",{"type":28,"tag":40,"props":1525,"children":1526},{},[1527],{"type":33,"value":1528},"直接开始制作并发布：/builder",{"type":28,"tag":254,"props":1530,"children":1531},{},[],{"type":28,"tag":119,"props":1533,"children":1535},{"id":1534},"常见问题faq",[1536],{"type":33,"value":1537},"常见问题（FAQ）",{"type":28,"tag":269,"props":1539,"children":1541},{"id":1540},"网页和网站有什么区别",[1542],{"type":33,"value":1543},"网页和网站有什么区别？",{"type":28,"tag":29,"props":1545,"children":1546},{},[1547],{"type":33,"value":1548},"网页是单个页面；网站通常由多个网页组成，并通过导航与链接组织在一起。",{"type":28,"tag":269,"props":1550,"children":1552},{"id":1551},"做一个网页要多久",[1553],{"type":33,"value":1554},"做一个网页要多久？",{"type":28,"tag":29,"props":1556,"children":1557},{},[1558],{"type":33,"value":1559},"如果用模板或可视化编辑器，当天就能做出可发布版本；如果要自研或深度定制，通常需要更久。",{"type":28,"tag":269,"props":1561,"children":1563},{"id":1562},"网页怎么发布到网上",[1564],{"type":33,"value":1565},"网页怎么发布到网上？",{"type":28,"tag":29,"props":1567,"children":1568},{},[1569],{"type":33,"value":1570},"常见方式是平台一键发布、导出后静态托管（CDN/对象存储）、或部署到自己的服务器。不同方式的控制权与成本不同。",{"type":28,"tag":269,"props":1572,"children":1574},{"id":1573},"网页能在手机上打开吗",[1575],{"type":33,"value":1576},"网页能在手机上打开吗？",{"type":28,"tag":29,"props":1578,"children":1579},{},[1580],{"type":33,"value":1581},"可以，但需要响应式布局与移动端检查（字号、按钮点击区域、图片裁切）。",{"type":28,"tag":269,"props":1583,"children":1585},{"id":1584},"网页要不要备案",[1586],{"type":33,"value":1587},"网页要不要备案？",{"type":28,"tag":29,"props":1589,"children":1590},{},[1591],{"type":33,"value":1592},"取决于你的托管位置与合规要求。若你使用国内服务器与域名，通常需要按规定处理备案。",{"type":28,"tag":269,"props":1594,"children":1596},{"id":1595},"网页制作要学什么",[1597],{"type":33,"value":1598},"网页制作要学什么？",{"type":28,"tag":29,"props":1600,"children":1601},{},[1602],{"type":33,"value":1603},"最小集合是：HTML（结构）+ CSS（样式）+ 发布上线常识。交互再补 JavaScript。",{"type":28,"tag":269,"props":1605,"children":1607},{"id":1606},"网页模板能商用吗",[1608],{"type":33,"value":1609},"网页模板能商用吗？",{"type":28,"tag":29,"props":1611,"children":1612},{},[1613],{"type":33,"value":1614},"要看授权条款。免费不等于可商用，商用前务必确认授权范围。",{"type":28,"tag":269,"props":1616,"children":1618},{"id":1617},"网页编辑器能导出源码吗",[1619],{"type":33,"value":1620},"网页编辑器能导出源码吗？",{"type":28,"tag":29,"props":1622,"children":1623},{},[1624],{"type":33,"value":1625},"取决于工具/平台。若你希望迁移或自托管，建议优先选择“支持导出源码且导出干净”的方案。",{"type":28,"tag":254,"props":1627,"children":1628},{},[],{"type":28,"tag":119,"props":1630,"children":1632},{"id":1631},"下一步直接开始制作",[1633],{"type":33,"value":1634},"下一步：直接开始制作",{"type":28,"tag":36,"props":1636,"children":1637},{},[1638,1643,1648,1653],{"type":28,"tag":40,"props":1639,"children":1640},{},[1641],{"type":33,"value":1642},"直接开始：/builder",{"type":28,"tag":40,"props":1644,"children":1645},{},[1646],{"type":33,"value":1647},"模板：/templates",{"type":28,"tag":40,"props":1649,"children":1650},{},[1651],{"type":33,"value":1652},"网页制作基础：/about-html/how-to-build-a-web-page",{"type":28,"tag":40,"props":1654,"children":1655},{},[1656],{"type":33,"value":1657},"网页设计入门：/web-design/web-design-beginner-guide",{"title":7,"searchDepth":1141,"depth":1141,"links":1659},[1660,1661,1662,1663,1664,1665,1666,1676],{"id":1251,"depth":1144,"text":1254},{"id":1308,"depth":1144,"text":1311},{"id":1368,"depth":1144,"text":1371},{"id":1417,"depth":1144,"text":1420},{"id":1448,"depth":1144,"text":1451},{"id":1480,"depth":1144,"text":1483},{"id":1534,"depth":1144,"text":1537,"children":1667},[1668,1669,1670,1671,1672,1673,1674,1675],{"id":1540,"depth":1141,"text":1543},{"id":1551,"depth":1141,"text":1554},{"id":1562,"depth":1141,"text":1565},{"id":1573,"depth":1141,"text":1576},{"id":1584,"depth":1141,"text":1587},{"id":1595,"depth":1141,"text":1598},{"id":1606,"depth":1141,"text":1609},{"id":1617,"depth":1141,"text":1620},{"id":1631,"depth":1144,"text":1634},"content:web-design:webpage.md","web-design/webpage.md","web-design/webpage",{"loc":1182},{"_path":1682,"_dir":1183,"_draft":6,"_partial":6,"_locale":7,"title":1184,"description":1185,"date":1186,"modified":1186,"image":1187,"slug":1188,"category":1189,"categorySlug":1183,"tags":1683,"path":1182,"canonical":1193,"body":1684,"_type":1174,"_id":2075,"_source":1176,"_file":2076,"_stem":2077,"_extension":1179,"sitemap":2078},"/web-design/webpage-hub",[1191,17,1189,13,1192],{"type":25,"children":1685,"toc":2056},[1686,1690,1713,1717,1726,1729,1733,1737,1764,1768,1772,1775,1779,1783,1798,1802,1821,1824,1828,1832,1851,1855,1862,1865,1869,1873,1877,1888,1891,1895,1899,1910,1914,1917,1921,1925,1944,1948,1959,1962,1966,1970,1974,1978,1982,1986,1990,1994,1998,2002,2006,2010,2014,2018,2022,2026,2030,2033,2037],{"type":28,"tag":29,"props":1687,"children":1688},{},[1689],{"type":33,"value":1200},{"type":28,"tag":36,"props":1691,"children":1692},{},[1693,1697,1701,1705,1709],{"type":28,"tag":40,"props":1694,"children":1695},{},[1696],{"type":33,"value":1208},{"type":28,"tag":40,"props":1698,"children":1699},{},[1700],{"type":33,"value":1213},{"type":28,"tag":40,"props":1702,"children":1703},{},[1704],{"type":33,"value":1218},{"type":28,"tag":40,"props":1706,"children":1707},{},[1708],{"type":33,"value":1223},{"type":28,"tag":40,"props":1710,"children":1711},{},[1712],{"type":33,"value":1228},{"type":28,"tag":29,"props":1714,"children":1715},{},[1716],{"type":33,"value":1233},{"type":28,"tag":29,"props":1718,"children":1719},{},[1720,1721,1725],{"type":33,"value":1238},{"type":28,"tag":735,"props":1722,"children":1723},{},[1724],{"type":33,"value":1243},{"type":33,"value":1245},{"type":28,"tag":254,"props":1727,"children":1728},{},[],{"type":28,"tag":119,"props":1730,"children":1731},{"id":1251},[1732],{"type":33,"value":1254},{"type":28,"tag":29,"props":1734,"children":1735},{},[1736],{"type":33,"value":1259},{"type":28,"tag":36,"props":1738,"children":1739},{},[1740,1748,1756],{"type":28,"tag":40,"props":1741,"children":1742},{},[1743,1747],{"type":28,"tag":735,"props":1744,"children":1745},{},[1746],{"type":33,"value":1270},{"type":33,"value":1272},{"type":28,"tag":40,"props":1749,"children":1750},{},[1751,1755],{"type":28,"tag":735,"props":1752,"children":1753},{},[1754],{"type":33,"value":1280},{"type":33,"value":1282},{"type":28,"tag":40,"props":1757,"children":1758},{},[1759,1763],{"type":28,"tag":735,"props":1760,"children":1761},{},[1762],{"type":33,"value":1290},{"type":33,"value":1292},{"type":28,"tag":29,"props":1765,"children":1766},{},[1767],{"type":33,"value":1297},{"type":28,"tag":29,"props":1769,"children":1770},{},[1771],{"type":33,"value":1302},{"type":28,"tag":254,"props":1773,"children":1774},{},[],{"type":28,"tag":119,"props":1776,"children":1777},{"id":1308},[1778],{"type":33,"value":1311},{"type":28,"tag":29,"props":1780,"children":1781},{},[1782],{"type":33,"value":1316},{"type":28,"tag":929,"props":1784,"children":1785},{},[1786,1790,1794],{"type":28,"tag":40,"props":1787,"children":1788},{},[1789],{"type":33,"value":1324},{"type":28,"tag":40,"props":1791,"children":1792},{},[1793],{"type":33,"value":1329},{"type":28,"tag":40,"props":1795,"children":1796},{},[1797],{"type":33,"value":1334},{"type":28,"tag":29,"props":1799,"children":1800},{},[1801],{"type":33,"value":1339},{"type":28,"tag":36,"props":1803,"children":1804},{},[1805,1809,1813,1817],{"type":28,"tag":40,"props":1806,"children":1807},{},[1808],{"type":33,"value":1347},{"type":28,"tag":40,"props":1810,"children":1811},{},[1812],{"type":33,"value":1352},{"type":28,"tag":40,"props":1814,"children":1815},{},[1816],{"type":33,"value":1357},{"type":28,"tag":40,"props":1818,"children":1819},{},[1820],{"type":33,"value":1362},{"type":28,"tag":254,"props":1822,"children":1823},{},[],{"type":28,"tag":119,"props":1825,"children":1826},{"id":1368},[1827],{"type":33,"value":1371},{"type":28,"tag":29,"props":1829,"children":1830},{},[1831],{"type":33,"value":1376},{"type":28,"tag":36,"props":1833,"children":1834},{},[1835,1839,1843,1847],{"type":28,"tag":40,"props":1836,"children":1837},{},[1838],{"type":33,"value":1384},{"type":28,"tag":40,"props":1840,"children":1841},{},[1842],{"type":33,"value":1389},{"type":28,"tag":40,"props":1844,"children":1845},{},[1846],{"type":33,"value":1394},{"type":28,"tag":40,"props":1848,"children":1849},{},[1850],{"type":33,"value":1399},{"type":28,"tag":29,"props":1852,"children":1853},{},[1854],{"type":33,"value":1339},{"type":28,"tag":36,"props":1856,"children":1857},{},[1858],{"type":28,"tag":40,"props":1859,"children":1860},{},[1861],{"type":33,"value":1411},{"type":28,"tag":254,"props":1863,"children":1864},{},[],{"type":28,"tag":119,"props":1866,"children":1867},{"id":1417},[1868],{"type":33,"value":1420},{"type":28,"tag":29,"props":1870,"children":1871},{},[1872],{"type":33,"value":1425},{"type":28,"tag":29,"props":1874,"children":1875},{},[1876],{"type":33,"value":1339},{"type":28,"tag":36,"props":1878,"children":1879},{},[1880,1884],{"type":28,"tag":40,"props":1881,"children":1882},{},[1883],{"type":33,"value":1437},{"type":28,"tag":40,"props":1885,"children":1886},{},[1887],{"type":33,"value":1442},{"type":28,"tag":254,"props":1889,"children":1890},{},[],{"type":28,"tag":119,"props":1892,"children":1893},{"id":1448},[1894],{"type":33,"value":1451},{"type":28,"tag":29,"props":1896,"children":1897},{},[1898],{"type":33,"value":1456},{"type":28,"tag":36,"props":1900,"children":1901},{},[1902,1906],{"type":28,"tag":40,"props":1903,"children":1904},{},[1905],{"type":33,"value":1464},{"type":28,"tag":40,"props":1907,"children":1908},{},[1909],{"type":33,"value":1469},{"type":28,"tag":29,"props":1911,"children":1912},{},[1913],{"type":33,"value":1474},{"type":28,"tag":254,"props":1915,"children":1916},{},[],{"type":28,"tag":119,"props":1918,"children":1919},{"id":1480},[1920],{"type":33,"value":1483},{"type":28,"tag":29,"props":1922,"children":1923},{},[1924],{"type":33,"value":1488},{"type":28,"tag":36,"props":1926,"children":1927},{},[1928,1932,1936,1940],{"type":28,"tag":40,"props":1929,"children":1930},{},[1931],{"type":33,"value":1496},{"type":28,"tag":40,"props":1933,"children":1934},{},[1935],{"type":33,"value":1501},{"type":28,"tag":40,"props":1937,"children":1938},{},[1939],{"type":33,"value":1506},{"type":28,"tag":40,"props":1941,"children":1942},{},[1943],{"type":33,"value":1511},{"type":28,"tag":29,"props":1945,"children":1946},{},[1947],{"type":33,"value":1339},{"type":28,"tag":36,"props":1949,"children":1950},{},[1951,1955],{"type":28,"tag":40,"props":1952,"children":1953},{},[1954],{"type":33,"value":1523},{"type":28,"tag":40,"props":1956,"children":1957},{},[1958],{"type":33,"value":1528},{"type":28,"tag":254,"props":1960,"children":1961},{},[],{"type":28,"tag":119,"props":1963,"children":1964},{"id":1534},[1965],{"type":33,"value":1537},{"type":28,"tag":269,"props":1967,"children":1968},{"id":1540},[1969],{"type":33,"value":1543},{"type":28,"tag":29,"props":1971,"children":1972},{},[1973],{"type":33,"value":1548},{"type":28,"tag":269,"props":1975,"children":1976},{"id":1551},[1977],{"type":33,"value":1554},{"type":28,"tag":29,"props":1979,"children":1980},{},[1981],{"type":33,"value":1559},{"type":28,"tag":269,"props":1983,"children":1984},{"id":1562},[1985],{"type":33,"value":1565},{"type":28,"tag":29,"props":1987,"children":1988},{},[1989],{"type":33,"value":1570},{"type":28,"tag":269,"props":1991,"children":1992},{"id":1573},[1993],{"type":33,"value":1576},{"type":28,"tag":29,"props":1995,"children":1996},{},[1997],{"type":33,"value":1581},{"type":28,"tag":269,"props":1999,"children":2000},{"id":1584},[2001],{"type":33,"value":1587},{"type":28,"tag":29,"props":2003,"children":2004},{},[2005],{"type":33,"value":1592},{"type":28,"tag":269,"props":2007,"children":2008},{"id":1595},[2009],{"type":33,"value":1598},{"type":28,"tag":29,"props":2011,"children":2012},{},[2013],{"type":33,"value":1603},{"type":28,"tag":269,"props":2015,"children":2016},{"id":1606},[2017],{"type":33,"value":1609},{"type":28,"tag":29,"props":2019,"children":2020},{},[2021],{"type":33,"value":1614},{"type":28,"tag":269,"props":2023,"children":2024},{"id":1617},[2025],{"type":33,"value":1620},{"type":28,"tag":29,"props":2027,"children":2028},{},[2029],{"type":33,"value":1625},{"type":28,"tag":254,"props":2031,"children":2032},{},[],{"type":28,"tag":119,"props":2034,"children":2035},{"id":1631},[2036],{"type":33,"value":1634},{"type":28,"tag":36,"props":2038,"children":2039},{},[2040,2044,2048,2052],{"type":28,"tag":40,"props":2041,"children":2042},{},[2043],{"type":33,"value":1642},{"type":28,"tag":40,"props":2045,"children":2046},{},[2047],{"type":33,"value":1647},{"type":28,"tag":40,"props":2049,"children":2050},{},[2051],{"type":33,"value":1652},{"type":28,"tag":40,"props":2053,"children":2054},{},[2055],{"type":33,"value":1657},{"title":7,"searchDepth":1141,"depth":1141,"links":2057},[2058,2059,2060,2061,2062,2063,2064,2074],{"id":1251,"depth":1144,"text":1254},{"id":1308,"depth":1144,"text":1311},{"id":1368,"depth":1144,"text":1371},{"id":1417,"depth":1144,"text":1420},{"id":1448,"depth":1144,"text":1451},{"id":1480,"depth":1144,"text":1483},{"id":1534,"depth":1144,"text":1537,"children":2065},[2066,2067,2068,2069,2070,2071,2072,2073],{"id":1540,"depth":1141,"text":1543},{"id":1551,"depth":1141,"text":1554},{"id":1562,"depth":1141,"text":1565},{"id":1573,"depth":1141,"text":1576},{"id":1584,"depth":1141,"text":1587},{"id":1595,"depth":1141,"text":1598},{"id":1606,"depth":1141,"text":1609},{"id":1617,"depth":1141,"text":1620},{"id":1631,"depth":1144,"text":1634},"content:web-design:webpage-hub.md","web-design/webpage-hub.md","web-design/webpage-hub",{"loc":1182},{"_path":2080,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":2081,"description":2082,"date":2083,"topic":5,"author":11,"tags":2084,"image":2088,"imageAlt":2089,"imageQuery":2090,"pexelsPhotoId":2091,"pexelsUrl":2092,"featured":6,"readingTime":23,"body":2093,"_type":1174,"_id":2729,"_source":1176,"_file":2730,"_stem":2731,"_extension":1179},"/about-html/collaboration-versioning-in-web-editors","网页编辑器里的协作与版本控制怎么做：多人编辑冲突、回滚和责任边界","多人一起做网页时，真正难的不是编辑本身，而是冲突、版本和回滚。本文从网页编辑器协作场景出发，给出协作与版本控制对比表、常见冲突和可执行回滚策略。","2026-03-16",[13,2085,2086,2087,17],"协作","版本控制","回滚","/images/articles/collaboration-versioning-in-web-editors-featured.jpg","多人在协作编辑网页项目","team collaboration laptop website design meeting",6476253,"https://www.pexels.com/photo/a-woman-using-a-laptop-at-work-6476253/",{"type":25,"children":2094,"toc":2707},[2095,2100,2105,2128,2133,2157,2160,2166,2171,2194,2199,2202,2207,2331,2334,2339,2345,2350,2356,2361,2367,2372,2378,2383,2386,2392,2398,2403,2421,2426,2432,2437,2460,2465,2471,2476,2499,2504,2507,2513,2517,2535,2539,2557,2562,2580,2600,2603,2609,2667,2670,2674],{"type":28,"tag":29,"props":2096,"children":2097},{},[2098],{"type":33,"value":2099},"一个人做网页时，编辑器的重点是效率；多人一起做网页时，编辑器的重点就变成了协作秩序。",{"type":28,"tag":29,"props":2101,"children":2102},{},[2103],{"type":33,"value":2104},"最常见的问题不是不会改，而是：",{"type":28,"tag":36,"props":2106,"children":2107},{},[2108,2113,2118,2123],{"type":28,"tag":40,"props":2109,"children":2110},{},[2111],{"type":33,"value":2112},"谁改了什么没人说得清",{"type":28,"tag":40,"props":2114,"children":2115},{},[2116],{"type":33,"value":2117},"两个人同时改同一区块",{"type":28,"tag":40,"props":2119,"children":2120},{},[2121],{"type":33,"value":2122},"改坏了以后只能整页回退",{"type":28,"tag":40,"props":2124,"children":2125},{},[2126],{"type":33,"value":2127},"页面虽然能恢复，但原因和责任链已经丢了",{"type":28,"tag":29,"props":2129,"children":2130},{},[2131],{"type":33,"value":2132},"所以网页编辑器一旦进入多人协作阶段，版本控制就不再是可选项，而是基本能力。",{"type":28,"tag":29,"props":2134,"children":2135},{},[2136,2138,2142,2143,2149,2150,2156],{"type":33,"value":2137},"如果你在评估编辑器或建站工作流，可以一起看 ",{"type":28,"tag":94,"props":2139,"children":2140},{"href":96},[2141],{"type":33,"value":99},{"type":33,"value":101},{"type":28,"tag":94,"props":2144,"children":2146},{"href":2145},"/about-html/html-editor-export-and-deploy-workflow",[2147],{"type":33,"value":2148},"HTML 编辑器导出与部署工作流",{"type":33,"value":109},{"type":28,"tag":94,"props":2151,"children":2153},{"href":2152},"/topics/git-version-control-guide",[2154],{"type":33,"value":2155},"Git 版本控制指南",{"type":33,"value":117},{"type":28,"tag":254,"props":2158,"children":2159},{},[],{"type":28,"tag":119,"props":2161,"children":2163},{"id":2162},"先分类协作问题和能不能多人同时在线不是一回事",[2164],{"type":33,"value":2165},"先分类：协作问题和“能不能多人同时在线”不是一回事",{"type":28,"tag":29,"props":2167,"children":2168},{},[2169],{"type":33,"value":2170},"很多工具会强调“支持多人协作”，但真正影响团队效率的，是这 4 件事：",{"type":28,"tag":36,"props":2172,"children":2173},{},[2174,2179,2184,2189],{"type":28,"tag":40,"props":2175,"children":2176},{},[2177],{"type":33,"value":2178},"是否知道谁改了什么",{"type":28,"tag":40,"props":2180,"children":2181},{},[2182],{"type":33,"value":2183},"是否能分清页面级、模块级和内容级改动",{"type":28,"tag":40,"props":2185,"children":2186},{},[2187],{"type":33,"value":2188},"是否能快速回退单一问题改动",{"type":28,"tag":40,"props":2190,"children":2191},{},[2192],{"type":33,"value":2193},"是否能在出问题后复盘",{"type":28,"tag":29,"props":2195,"children":2196},{},[2197],{"type":33,"value":2198},"所以协作能力不只是实时编辑，而是可追踪、可审查、可回滚。",{"type":28,"tag":254,"props":2200,"children":2201},{},[],{"type":28,"tag":119,"props":2203,"children":2205},{"id":2204},"协作与版本控制对比表",[2206],{"type":33,"value":2204},{"type":28,"tag":126,"props":2208,"children":2209},{},[2210,2236],{"type":28,"tag":130,"props":2211,"children":2212},{},[2213],{"type":28,"tag":134,"props":2214,"children":2215},{},[2216,2221,2226,2231],{"type":28,"tag":138,"props":2217,"children":2218},{},[2219],{"type":33,"value":2220},"方式",{"type":28,"tag":138,"props":2222,"children":2223},{},[2224],{"type":33,"value":2225},"优点",{"type":28,"tag":138,"props":2227,"children":2228},{},[2229],{"type":33,"value":2230},"缺点",{"type":28,"tag":138,"props":2232,"children":2233},{},[2234],{"type":33,"value":2235},"适合场景",{"type":28,"tag":154,"props":2237,"children":2238},{},[2239,2262,2285,2308],{"type":28,"tag":134,"props":2240,"children":2241},{},[2242,2247,2252,2257],{"type":28,"tag":161,"props":2243,"children":2244},{},[2245],{"type":33,"value":2246},"直接在线协同改同一页面",{"type":28,"tag":161,"props":2248,"children":2249},{},[2250],{"type":33,"value":2251},"沟通成本低、改动即时",{"type":28,"tag":161,"props":2253,"children":2254},{},[2255],{"type":33,"value":2256},"冲突高、责任边界模糊",{"type":28,"tag":161,"props":2258,"children":2259},{},[2260],{"type":33,"value":2261},"小团队快速共创",{"type":28,"tag":134,"props":2263,"children":2264},{},[2265,2270,2275,2280],{"type":28,"tag":161,"props":2266,"children":2267},{},[2268],{"type":33,"value":2269},"按页面分工",{"type":28,"tag":161,"props":2271,"children":2272},{},[2273],{"type":33,"value":2274},"边界清晰",{"type":28,"tag":161,"props":2276,"children":2277},{},[2278],{"type":33,"value":2279},"公共组件变更仍会冲突",{"type":28,"tag":161,"props":2281,"children":2282},{},[2283],{"type":33,"value":2284},"多页面内容站",{"type":28,"tag":134,"props":2286,"children":2287},{},[2288,2293,2298,2303],{"type":28,"tag":161,"props":2289,"children":2290},{},[2291],{"type":33,"value":2292},"按模块分工",{"type":28,"tag":161,"props":2294,"children":2295},{},[2296],{"type":33,"value":2297},"易复用、责任清楚",{"type":28,"tag":161,"props":2299,"children":2300},{},[2301],{"type":33,"value":2302},"需要更严格组件规范",{"type":28,"tag":161,"props":2304,"children":2305},{},[2306],{"type":33,"value":2307},"可视化编辑器团队",{"type":28,"tag":134,"props":2309,"children":2310},{},[2311,2316,2321,2326],{"type":28,"tag":161,"props":2312,"children":2313},{},[2314],{"type":33,"value":2315},"Git / 版本快照配合编辑器",{"type":28,"tag":161,"props":2317,"children":2318},{},[2319],{"type":33,"value":2320},"回滚和审查能力强",{"type":28,"tag":161,"props":2322,"children":2323},{},[2324],{"type":33,"value":2325},"流程稍重",{"type":28,"tag":161,"props":2327,"children":2328},{},[2329],{"type":33,"value":2330},"正式生产项目",{"type":28,"tag":254,"props":2332,"children":2333},{},[],{"type":28,"tag":119,"props":2335,"children":2337},{"id":2336},"多人编辑最常见的冲突类型",[2338],{"type":33,"value":2336},{"type":28,"tag":269,"props":2340,"children":2342},{"id":2341},"_1-内容冲突",[2343],{"type":33,"value":2344},"1. 内容冲突",{"type":28,"tag":29,"props":2346,"children":2347},{},[2348],{"type":33,"value":2349},"两个人同时改同一段文案或图片，最后难以判断哪个版本该保留。",{"type":28,"tag":269,"props":2351,"children":2353},{"id":2352},"_2-结构冲突",[2354],{"type":33,"value":2355},"2. 结构冲突",{"type":28,"tag":29,"props":2357,"children":2358},{},[2359],{"type":33,"value":2360},"一个人调整模块顺序，另一个人同时修改同一模块内容，最后页面结构和内容都可能乱套。",{"type":28,"tag":269,"props":2362,"children":2364},{"id":2363},"_3-样式冲突",[2365],{"type":33,"value":2366},"3. 样式冲突",{"type":28,"tag":29,"props":2368,"children":2369},{},[2370],{"type":33,"value":2371},"多个页面共用一个组件，但样式修改没有版本边界，结果一个页面的修复影响了别的页面。",{"type":28,"tag":269,"props":2373,"children":2375},{"id":2374},"_4-发布冲突",[2376],{"type":33,"value":2377},"4. 发布冲突",{"type":28,"tag":29,"props":2379,"children":2380},{},[2381],{"type":33,"value":2382},"页面编辑完成后，谁负责发布、回退和验证不清楚，导致线上版本和预期不一致。",{"type":28,"tag":254,"props":2384,"children":2385},{},[],{"type":28,"tag":119,"props":2387,"children":2389},{"id":2388},"可执行流程如何减少冲突并保住回滚能力",[2390],{"type":33,"value":2391},"可执行流程：如何减少冲突并保住回滚能力",{"type":28,"tag":269,"props":2393,"children":2395},{"id":2394},"第一步先定义协作单位",[2396],{"type":33,"value":2397},"第一步：先定义协作单位",{"type":28,"tag":29,"props":2399,"children":2400},{},[2401],{"type":33,"value":2402},"建议至少分清：",{"type":28,"tag":36,"props":2404,"children":2405},{},[2406,2411,2416],{"type":28,"tag":40,"props":2407,"children":2408},{},[2409],{"type":33,"value":2410},"页面级任务",{"type":28,"tag":40,"props":2412,"children":2413},{},[2414],{"type":33,"value":2415},"模块级任务",{"type":28,"tag":40,"props":2417,"children":2418},{},[2419],{"type":33,"value":2420},"文案级任务",{"type":28,"tag":29,"props":2422,"children":2423},{},[2424],{"type":33,"value":2425},"不要所有修改都笼统叫“改页面”。",{"type":28,"tag":269,"props":2427,"children":2429},{"id":2428},"第二步重要页面必须保留版本快照",[2430],{"type":33,"value":2431},"第二步：重要页面必须保留版本快照",{"type":28,"tag":29,"props":2433,"children":2434},{},[2435],{"type":33,"value":2436},"每次发布前至少保留：",{"type":28,"tag":36,"props":2438,"children":2439},{},[2440,2445,2450,2455],{"type":28,"tag":40,"props":2441,"children":2442},{},[2443],{"type":33,"value":2444},"页面快照",{"type":28,"tag":40,"props":2446,"children":2447},{},[2448],{"type":33,"value":2449},"变更说明",{"type":28,"tag":40,"props":2451,"children":2452},{},[2453],{"type":33,"value":2454},"发布人",{"type":28,"tag":40,"props":2456,"children":2457},{},[2458],{"type":33,"value":2459},"回滚点",{"type":28,"tag":29,"props":2461,"children":2462},{},[2463],{"type":33,"value":2464},"这样出了问题时，团队能快速定位到具体版本。",{"type":28,"tag":269,"props":2466,"children":2468},{"id":2467},"第三步公共模块改动必须单独审查",[2469],{"type":33,"value":2470},"第三步：公共模块改动必须单独审查",{"type":28,"tag":29,"props":2472,"children":2473},{},[2474],{"type":33,"value":2475},"任何影响：",{"type":28,"tag":36,"props":2477,"children":2478},{},[2479,2484,2489,2494],{"type":28,"tag":40,"props":2480,"children":2481},{},[2482],{"type":33,"value":2483},"Header",{"type":28,"tag":40,"props":2485,"children":2486},{},[2487],{"type":33,"value":2488},"Footer",{"type":28,"tag":40,"props":2490,"children":2491},{},[2492],{"type":33,"value":2493},"表单组件",{"type":28,"tag":40,"props":2495,"children":2496},{},[2497],{"type":33,"value":2498},"公共 Hero / CTA 模块",{"type":28,"tag":29,"props":2500,"children":2501},{},[2502],{"type":33,"value":2503},"的改动，都不该和普通内容修改混在一起。",{"type":28,"tag":254,"props":2505,"children":2506},{},[],{"type":28,"tag":119,"props":2508,"children":2510},{"id":2509},"失败案例两个人同时改一个落地页最后谁都说不清哪里出了问题",[2511],{"type":33,"value":2512},"失败案例：两个人同时改一个落地页，最后谁都说不清哪里出了问题",{"type":28,"tag":269,"props":2514,"children":2515},{"id":897},[2516],{"type":33,"value":897},{"type":28,"tag":36,"props":2518,"children":2519},{},[2520,2525,2530],{"type":28,"tag":40,"props":2521,"children":2522},{},[2523],{"type":33,"value":2524},"运营修改文案和图片",{"type":28,"tag":40,"props":2526,"children":2527},{},[2528],{"type":33,"value":2529},"设计调整模块顺序和样式",{"type":28,"tag":40,"props":2531,"children":2532},{},[2533],{"type":33,"value":2534},"发布后发现 CTA 文案错位、表单样式异常",{"type":28,"tag":269,"props":2536,"children":2537},{"id":920},[2538],{"type":33,"value":920},{"type":28,"tag":36,"props":2540,"children":2541},{},[2542,2547,2552],{"type":28,"tag":40,"props":2543,"children":2544},{},[2545],{"type":33,"value":2546},"没有协作边界",{"type":28,"tag":40,"props":2548,"children":2549},{},[2550],{"type":33,"value":2551},"没有版本快照",{"type":28,"tag":40,"props":2553,"children":2554},{},[2555],{"type":33,"value":2556},"没有把内容改动和结构改动拆开",{"type":28,"tag":269,"props":2558,"children":2560},{"id":2559},"修复方式",[2561],{"type":33,"value":2559},{"type":28,"tag":36,"props":2563,"children":2564},{},[2565,2570,2575],{"type":28,"tag":40,"props":2566,"children":2567},{},[2568],{"type":33,"value":2569},"先定义谁能改内容、谁能改结构",{"type":28,"tag":40,"props":2571,"children":2572},{},[2573],{"type":33,"value":2574},"重要改动保留独立快照或版本说明",{"type":28,"tag":40,"props":2576,"children":2577},{},[2578],{"type":33,"value":2579},"公共模块改动单独走审查",{"type":28,"tag":29,"props":2581,"children":2582},{},[2583,2585,2591,2592,2598],{"type":33,"value":2584},"这套方法和 ",{"type":28,"tag":94,"props":2586,"children":2588},{"href":2587},"/about-html/visual-editor-component-system-design",[2589],{"type":33,"value":2590},"可视化编辑器组件体系设计",{"type":33,"value":101},{"type":28,"tag":94,"props":2593,"children":2595},{"href":2594},"/about-html/template-style-swap-without-rewrite",[2596],{"type":33,"value":2597},"模板不重写也能换风格",{"type":33,"value":2599}," 结合起来会更稳。",{"type":28,"tag":254,"props":2601,"children":2602},{},[],{"type":28,"tag":119,"props":2604,"children":2606},{"id":2605},"checklist",[2607],{"type":33,"value":2608},"Checklist",{"type":28,"tag":36,"props":2610,"children":2612},{"className":2611},[996],[2613,2622,2631,2640,2649,2658],{"type":28,"tag":40,"props":2614,"children":2616},{"className":2615},[1001],[2617,2620],{"type":28,"tag":1004,"props":2618,"children":2619},{"disabled":1006,"type":1007},[],{"type":33,"value":2621}," 是否定义了页面级、模块级、文案级的协作边界",{"type":28,"tag":40,"props":2623,"children":2625},{"className":2624},[1001],[2626,2629],{"type":28,"tag":1004,"props":2627,"children":2628},{"disabled":1006,"type":1007},[],{"type":33,"value":2630}," 是否保留关键页面的版本快照和发布记录",{"type":28,"tag":40,"props":2632,"children":2634},{"className":2633},[1001],[2635,2638],{"type":28,"tag":1004,"props":2636,"children":2637},{"disabled":1006,"type":1007},[],{"type":33,"value":2639}," 公共模块改动是否单独审查",{"type":28,"tag":40,"props":2641,"children":2643},{"className":2642},[1001],[2644,2647],{"type":28,"tag":1004,"props":2645,"children":2646},{"disabled":1006,"type":1007},[],{"type":33,"value":2648}," 是否能快速回滚单次错误改动",{"type":28,"tag":40,"props":2650,"children":2652},{"className":2651},[1001],[2653,2656],{"type":28,"tag":1004,"props":2654,"children":2655},{"disabled":1006,"type":1007},[],{"type":33,"value":2657}," 是否能追踪是谁改了什么、为什么改",{"type":28,"tag":40,"props":2659,"children":2661},{"className":2660},[1001],[2662,2665],{"type":28,"tag":1004,"props":2663,"children":2664},{"disabled":1006,"type":1007},[],{"type":33,"value":2666}," 是否对高风险页面设置了发布后验证流程",{"type":28,"tag":254,"props":2668,"children":2669},{},[],{"type":28,"tag":119,"props":2671,"children":2672},{"id":1104},[2673],{"type":33,"value":1104},{"type":28,"tag":36,"props":2675,"children":2676},{},[2677,2684,2691,2698],{"type":28,"tag":40,"props":2678,"children":2679},{},[2680],{"type":28,"tag":94,"props":2681,"children":2682},{"href":2152},[2683],{"type":33,"value":2155},{"type":28,"tag":40,"props":2685,"children":2686},{},[2687],{"type":28,"tag":94,"props":2688,"children":2689},{"href":96},[2690],{"type":33,"value":99},{"type":28,"tag":40,"props":2692,"children":2693},{},[2694],{"type":28,"tag":94,"props":2695,"children":2696},{"href":2145},[2697],{"type":33,"value":2148},{"type":28,"tag":40,"props":2699,"children":2700},{},[2701],{"type":28,"tag":94,"props":2702,"children":2704},{"href":2703},"/builder",[2705],{"type":33,"value":2706},"HTMLPage Builder",{"title":7,"searchDepth":1141,"depth":1141,"links":2708},[2709,2710,2711,2717,2722,2727,2728],{"id":2162,"depth":1144,"text":2165},{"id":2204,"depth":1144,"text":2204},{"id":2336,"depth":1144,"text":2336,"children":2712},[2713,2714,2715,2716],{"id":2341,"depth":1141,"text":2344},{"id":2352,"depth":1141,"text":2355},{"id":2363,"depth":1141,"text":2366},{"id":2374,"depth":1141,"text":2377},{"id":2388,"depth":1144,"text":2391,"children":2718},[2719,2720,2721],{"id":2394,"depth":1141,"text":2397},{"id":2428,"depth":1141,"text":2431},{"id":2467,"depth":1141,"text":2470},{"id":2509,"depth":1144,"text":2512,"children":2723},[2724,2725,2726],{"id":897,"depth":1141,"text":897},{"id":920,"depth":1141,"text":920},{"id":2559,"depth":1141,"text":2559},{"id":2605,"depth":1144,"text":2608},{"id":1104,"depth":1144,"text":1104},"content:about-html:collaboration-versioning-in-web-editors.md","about-html/collaboration-versioning-in-web-editors.md","about-html/collaboration-versioning-in-web-editors",{"_path":2733,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":2734,"description":2735,"date":2736,"modified":2736,"image":2737,"imageAlt":2738,"pexelsPhotoId":2739,"pexelsUrl":2740,"slug":2741,"category":2742,"categorySlug":5,"tags":2743,"path":2733,"canonical":2746,"body":2747,"_type":1174,"_id":3215,"_source":1176,"_file":3216,"_stem":3217,"_extension":1179,"sitemap":3218},"/about-html/html-editor-beginner-selection-guide","HTML 编辑器新手指南：代码编辑、可视化编辑、网页编辑器到底怎么选","HTML 编辑器、网页编辑器、可视化编辑器常常被混着搜索。本文用新手视角重新梳理三类工具的差别、适用任务与选择路径，帮助你先选对入口，再开始做网页。","2026-03-24T10:00:00","/images/articles/html-editor-beginner-selection-guide-featured.jpg","用户在笔记本前进行网页编辑，代表 HTML 编辑器与新手建站入口选择",574077,"https://www.pexels.com/photo/person-using-macbook-pro-574077/","html-editor-beginner-selection-guide","HTML基础",[2744,13,2745,2742,17],"html编辑器","可视化编辑器","https://htmlpage.cn/about-html/html-editor-beginner-selection-guide",{"type":25,"children":2748,"toc":3194},[2749,2754,2759,2767,2771,2779,2784,2792,2797,2803,2808,2826,2831,2837,2843,2848,2866,2871,2877,2881,2899,2904,2910,2915,2938,2943,2949,2955,2960,2966,2971,2977,2982,2988,2993,3006,3011,3017,3023,3028,3041,3046,3051,3057,3061,3074,3078,3083,3089,3117,3122,3128,3146,3151,3156,3161,3166],{"type":28,"tag":29,"props":2750,"children":2751},{},[2752],{"type":33,"value":2753},"很多人搜 HTML 编辑器，其实脑子里想的不是同一种东西。",{"type":28,"tag":29,"props":2755,"children":2756},{},[2757],{"type":33,"value":2758},"有人想要的是：",{"type":28,"tag":36,"props":2760,"children":2761},{},[2762],{"type":28,"tag":40,"props":2763,"children":2764},{},[2765],{"type":33,"value":2766},"能直接写 HTML/CSS 代码的工具",{"type":28,"tag":29,"props":2768,"children":2769},{},[2770],{"type":33,"value":2758},{"type":28,"tag":36,"props":2772,"children":2773},{},[2774],{"type":28,"tag":40,"props":2775,"children":2776},{},[2777],{"type":33,"value":2778},"拖一拖就能把网页做出来的编辑器",{"type":28,"tag":29,"props":2780,"children":2781},{},[2782],{"type":33,"value":2783},"还有人要的是：",{"type":28,"tag":36,"props":2785,"children":2786},{},[2787],{"type":28,"tag":40,"props":2788,"children":2789},{},[2790],{"type":33,"value":2791},"能做页面、能预览、最好还能发布的网站编辑器",{"type":28,"tag":29,"props":2793,"children":2794},{},[2795],{"type":33,"value":2796},"如果你一开始就没分清这三类工具，后面很容易越找越乱。",{"type":28,"tag":119,"props":2798,"children":2800},{"id":2799},"先给结论先按任务选工具不要按名词选工具",[2801],{"type":33,"value":2802},"先给结论：先按任务选工具，不要按名词选工具",{"type":28,"tag":29,"props":2804,"children":2805},{},[2806],{"type":33,"value":2807},"对新手来说，最稳的判断方式不是记定义，而是先问自己：",{"type":28,"tag":929,"props":2809,"children":2810},{},[2811,2816,2821],{"type":28,"tag":40,"props":2812,"children":2813},{},[2814],{"type":33,"value":2815},"我是想学代码，还是想先把页面做出来",{"type":28,"tag":40,"props":2817,"children":2818},{},[2819],{"type":33,"value":2820},"我需要的是测试代码片段，还是制作完整网页",{"type":28,"tag":40,"props":2822,"children":2823},{},[2824],{"type":33,"value":2825},"我后面还要不要持续维护和发布",{"type":28,"tag":29,"props":2827,"children":2828},{},[2829],{"type":33,"value":2830},"只要这三件事想清楚，工具选择通常不会跑偏。",{"type":28,"tag":119,"props":2832,"children":2834},{"id":2833},"一三类工具的最直白区别",[2835],{"type":33,"value":2836},"一、三类工具的最直白区别",{"type":28,"tag":269,"props":2838,"children":2840},{"id":2839},"_1-代码型-html-编辑器",[2841],{"type":33,"value":2842},"1. 代码型 HTML 编辑器",{"type":28,"tag":29,"props":2844,"children":2845},{},[2846],{"type":33,"value":2847},"这类工具更适合：",{"type":28,"tag":36,"props":2849,"children":2850},{},[2851,2856,2861],{"type":28,"tag":40,"props":2852,"children":2853},{},[2854],{"type":33,"value":2855},"手写 HTML/CSS/JS",{"type":28,"tag":40,"props":2857,"children":2858},{},[2859],{"type":33,"value":2860},"学前端基础",{"type":28,"tag":40,"props":2862,"children":2863},{},[2864],{"type":33,"value":2865},"精细控制页面结构和样式",{"type":28,"tag":29,"props":2867,"children":2868},{},[2869],{"type":33,"value":2870},"优点是自由度高，缺点是上手门槛更高。",{"type":28,"tag":269,"props":2872,"children":2874},{"id":2873},"_2-可视化-html-编辑器",[2875],{"type":33,"value":2876},"2. 可视化 HTML 编辑器",{"type":28,"tag":29,"props":2878,"children":2879},{},[2880],{"type":33,"value":2847},{"type":28,"tag":36,"props":2882,"children":2883},{},[2884,2889,2894],{"type":28,"tag":40,"props":2885,"children":2886},{},[2887],{"type":33,"value":2888},"不想从零写代码",{"type":28,"tag":40,"props":2890,"children":2891},{},[2892],{"type":33,"value":2893},"想用拖拽和所见即所得方式搭页面",{"type":28,"tag":40,"props":2895,"children":2896},{},[2897],{"type":33,"value":2898},"希望更快得到可预览页面",{"type":28,"tag":29,"props":2900,"children":2901},{},[2902],{"type":33,"value":2903},"它更偏向“页面生产效率工具”。",{"type":28,"tag":269,"props":2905,"children":2907},{"id":2906},"_3-网页编辑器-builder",[2908],{"type":33,"value":2909},"3. 网页编辑器 / Builder",{"type":28,"tag":29,"props":2911,"children":2912},{},[2913],{"type":33,"value":2914},"这类工具通常更接近“做网站的工作台”，不仅仅是编辑，还可能包括：",{"type":28,"tag":36,"props":2916,"children":2917},{},[2918,2923,2928,2933],{"type":28,"tag":40,"props":2919,"children":2920},{},[2921],{"type":33,"value":2922},"模板",{"type":28,"tag":40,"props":2924,"children":2925},{},[2926],{"type":33,"value":2927},"页面结构",{"type":28,"tag":40,"props":2929,"children":2930},{},[2931],{"type":33,"value":2932},"预览",{"type":28,"tag":40,"props":2934,"children":2935},{},[2936],{"type":33,"value":2937},"发布或导出",{"type":28,"tag":29,"props":2939,"children":2940},{},[2941],{"type":33,"value":2942},"它更像把“做网页”整个流程串起来。",{"type":28,"tag":119,"props":2944,"children":2946},{"id":2945},"二新手最常见的-3-种需求对应怎么选",[2947],{"type":33,"value":2948},"二、新手最常见的 3 种需求，对应怎么选",{"type":28,"tag":269,"props":2950,"children":2952},{"id":2951},"_1-我想学-html-基础",[2953],{"type":33,"value":2954},"1. 我想学 HTML 基础",{"type":28,"tag":29,"props":2956,"children":2957},{},[2958],{"type":33,"value":2959},"优先选代码型 HTML 编辑器。因为你的目标是理解标签、结构和样式，不是跳过它们。",{"type":28,"tag":269,"props":2961,"children":2963},{"id":2962},"_2-我想尽快做出一个页面",[2964],{"type":33,"value":2965},"2. 我想尽快做出一个页面",{"type":28,"tag":29,"props":2967,"children":2968},{},[2969],{"type":33,"value":2970},"优先选可视化编辑器或网页编辑器。因为你的目标是交付，不是从零学习所有语法。",{"type":28,"tag":269,"props":2972,"children":2974},{"id":2973},"_3-我想做的网站后面还要持续维护",[2975],{"type":33,"value":2976},"3. 我想做的网站后面还要持续维护",{"type":28,"tag":29,"props":2978,"children":2979},{},[2980],{"type":33,"value":2981},"优先选支持模板、结构管理、预览、导出或发布链路更清晰的网页编辑器。",{"type":28,"tag":119,"props":2983,"children":2985},{"id":2984},"三为什么很多新手会选错",[2986],{"type":33,"value":2987},"三、为什么很多新手会选错",{"type":28,"tag":29,"props":2989,"children":2990},{},[2991],{"type":33,"value":2992},"最典型的误判是：",{"type":28,"tag":36,"props":2994,"children":2995},{},[2996,3001],{"type":28,"tag":40,"props":2997,"children":2998},{},[2999],{"type":33,"value":3000},"明明只是想快速做官网，却先去学习完整代码工具链",{"type":28,"tag":40,"props":3002,"children":3003},{},[3004],{"type":33,"value":3005},"明明想学前端基础，却直接跳进全可视化工具，后面一微调就卡住",{"type":28,"tag":29,"props":3007,"children":3008},{},[3009],{"type":33,"value":3010},"所以核心不是哪个工具“最好”，而是哪个工具和你当前阶段更匹配。",{"type":28,"tag":119,"props":3012,"children":3014},{"id":3013},"四一条最实用的选择路径",[3015],{"type":33,"value":3016},"四、一条最实用的选择路径",{"type":28,"tag":269,"props":3018,"children":3020},{"id":3019},"路线-a先做页面再补代码",[3021],{"type":33,"value":3022},"路线 A：先做页面，再补代码",{"type":28,"tag":29,"props":3024,"children":3025},{},[3026],{"type":33,"value":3027},"适合：",{"type":28,"tag":36,"props":3029,"children":3030},{},[3031,3036],{"type":28,"tag":40,"props":3032,"children":3033},{},[3034],{"type":33,"value":3035},"想先把官网、作品集、活动页做出来",{"type":28,"tag":40,"props":3037,"children":3038},{},[3039],{"type":33,"value":3040},"需要尽快看到结果的人",{"type":28,"tag":29,"props":3042,"children":3043},{},[3044],{"type":33,"value":3045},"推荐顺序：",{"type":28,"tag":29,"props":3047,"children":3048},{},[3049],{"type":33,"value":3050},"模板 / 可视化编辑器 -> 网页编辑器 -> 再补一点 HTML/CSS 基础",{"type":28,"tag":269,"props":3052,"children":3054},{"id":3053},"路线-b先学结构再做页面",[3055],{"type":33,"value":3056},"路线 B：先学结构，再做页面",{"type":28,"tag":29,"props":3058,"children":3059},{},[3060],{"type":33,"value":3027},{"type":28,"tag":36,"props":3062,"children":3063},{},[3064,3069],{"type":28,"tag":40,"props":3065,"children":3066},{},[3067],{"type":33,"value":3068},"明确想学前端",{"type":28,"tag":40,"props":3070,"children":3071},{},[3072],{"type":33,"value":3073},"不怕一开始上手慢一点",{"type":28,"tag":29,"props":3075,"children":3076},{},[3077],{"type":33,"value":3045},{"type":28,"tag":29,"props":3079,"children":3080},{},[3081],{"type":33,"value":3082},"代码型 HTML 编辑器 -> 基础页面 -> 再看更高效的页面工具",{"type":28,"tag":119,"props":3084,"children":3086},{"id":3085},"五选工具时最值得看的-5-个问题",[3087],{"type":33,"value":3088},"五、选工具时最值得看的 5 个问题",{"type":28,"tag":929,"props":3090,"children":3091},{},[3092,3097,3102,3107,3112],{"type":28,"tag":40,"props":3093,"children":3094},{},[3095],{"type":33,"value":3096},"是否符合你当前目标",{"type":28,"tag":40,"props":3098,"children":3099},{},[3100],{"type":33,"value":3101},"是否支持实时预览",{"type":28,"tag":40,"props":3103,"children":3104},{},[3105],{"type":33,"value":3106},"是否适合移动端页面检查",{"type":28,"tag":40,"props":3108,"children":3109},{},[3110],{"type":33,"value":3111},"是否方便后续修改和维护",{"type":28,"tag":40,"props":3113,"children":3114},{},[3115],{"type":33,"value":3116},"是否支持导出或发布",{"type":28,"tag":29,"props":3118,"children":3119},{},[3120],{"type":33,"value":3121},"这五个问题比单纯看“功能数量”更重要。",{"type":28,"tag":119,"props":3123,"children":3125},{"id":3124},"六一句最简单的判断法",[3126],{"type":33,"value":3127},"六、一句最简单的判断法",{"type":28,"tag":36,"props":3129,"children":3130},{},[3131,3136,3141],{"type":28,"tag":40,"props":3132,"children":3133},{},[3134],{"type":33,"value":3135},"想学代码：选 HTML 编辑器",{"type":28,"tag":40,"props":3137,"children":3138},{},[3139],{"type":33,"value":3140},"想快做页面：选可视化编辑器",{"type":28,"tag":40,"props":3142,"children":3143},{},[3144],{"type":33,"value":3145},"想做可维护网站：选网页编辑器 / Builder",{"type":28,"tag":29,"props":3147,"children":3148},{},[3149],{"type":33,"value":3150},"如果你现在同时想要这三件事，最稳的做法通常是：先用网页编辑器做出第一个页面，再反过来理解它背后的 HTML/CSS 结构。",{"type":28,"tag":119,"props":3152,"children":3154},{"id":3153},"结语",[3155],{"type":33,"value":3153},{"type":28,"tag":29,"props":3157,"children":3158},{},[3159],{"type":33,"value":3160},"HTML 编辑器、可视化编辑器、网页编辑器不是互相否定的关系，而是面向不同任务的入口。新手真正要避免的，不是“选错某个工具”，而是把学习代码、快速交付、持续维护这三种目标混在一起。只要先把目标拆开，你就会更容易选到当前阶段最合适的工具。",{"type":28,"tag":29,"props":3162,"children":3163},{},[3164],{"type":33,"value":3165},"继续阅读：",{"type":28,"tag":36,"props":3167,"children":3168},{},[3169,3178,3187],{"type":28,"tag":40,"props":3170,"children":3171},{},[3172],{"type":28,"tag":94,"props":3173,"children":3175},{"href":3174},"/about-html/online-html-editor-guide",[3176],{"type":33,"value":3177},"HTML 在线编辑器怎么用",{"type":28,"tag":40,"props":3179,"children":3180},{},[3181],{"type":28,"tag":94,"props":3182,"children":3184},{"href":3183},"/about-html/web-page-editor-vs-html-editor",[3185],{"type":33,"value":3186},"网页编辑器 vs HTML 编辑器",{"type":28,"tag":40,"props":3188,"children":3189},{},[3190],{"type":28,"tag":94,"props":3191,"children":3192},{"href":96},[3193],{"type":33,"value":99},{"title":7,"searchDepth":1141,"depth":1141,"links":3195},[3196,3197,3202,3207,3208,3212,3213,3214],{"id":2799,"depth":1144,"text":2802},{"id":2833,"depth":1144,"text":2836,"children":3198},[3199,3200,3201],{"id":2839,"depth":1141,"text":2842},{"id":2873,"depth":1141,"text":2876},{"id":2906,"depth":1141,"text":2909},{"id":2945,"depth":1144,"text":2948,"children":3203},[3204,3205,3206],{"id":2951,"depth":1141,"text":2954},{"id":2962,"depth":1141,"text":2965},{"id":2973,"depth":1141,"text":2976},{"id":2984,"depth":1144,"text":2987},{"id":3013,"depth":1144,"text":3016,"children":3209},[3210,3211],{"id":3019,"depth":1141,"text":3022},{"id":3053,"depth":1141,"text":3056},{"id":3085,"depth":1144,"text":3088},{"id":3124,"depth":1144,"text":3127},{"id":3153,"depth":1144,"text":3153},"content:about-html:html-editor-beginner-selection-guide.md","about-html/html-editor-beginner-selection-guide.md","about-html/html-editor-beginner-selection-guide",{"loc":2733},{"_path":3220,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":3221,"description":3222,"date":3223,"topic":5,"author":11,"tags":3224,"image":3228,"imageAlt":3229,"pexelsPhotoId":3230,"pexelsUrl":3231,"featured":6,"readingTime":3232,"body":3233,"_type":1174,"_id":3877,"_source":1176,"_file":3878,"_stem":3879,"_extension":1179},"/about-html/html-template-image-strategy-guide","HTML 模板的图片策略：清晰度、体积和统一风格怎么平衡","很多模板上线后既不清晰也不够快，问题往往出在图片策略。本文从封面图、内容图、缩略图、格式选择和风格统一出发，讲清楚模板站点该怎样处理图片。","2026-03-14",[3225,14,3226,3227,17],"html模板","网页性能","视觉一致性","/images/articles/html-template-image-strategy-guide-featured.jpg","桌面上摆放着相机与电脑屏幕，代表网站模板的图片策略与素材管理",831044,"https://www.pexels.com/photo/turned-on-laptop-computer-831044/",14,{"type":25,"children":3234,"toc":3865},[3235,3240,3253,3258,3291,3294,3300,3305,3323,3328,3334,3339,3344,3441,3446,3452,3457,3462,3480,3485,3491,3496,3501,3524,3529,3534,3557,3563,3568,3573,3586,3591,3597,3602,3625,3630,3635,3653,3659,3757,3763,3821,3825,3830,3834],{"type":28,"tag":29,"props":3236,"children":3237},{},[3238],{"type":33,"value":3239},"很多 HTML 模板第一眼看起来都不错，但一到真实上线就暴露出两个问题：",{"type":28,"tag":36,"props":3241,"children":3242},{},[3243,3248],{"type":28,"tag":40,"props":3244,"children":3245},{},[3246],{"type":33,"value":3247},"图片很清晰，但页面太慢",{"type":28,"tag":40,"props":3249,"children":3250},{},[3251],{"type":33,"value":3252},"页面够快，但图片风格很乱，看起来像拼起来的",{"type":28,"tag":29,"props":3254,"children":3255},{},[3256],{"type":33,"value":3257},"这说明图片不是一个“上传素材”的细节，而是一套需要事先设计的策略。",{"type":28,"tag":29,"props":3259,"children":3260},{},[3261,3263,3269,3270,3275,3276,3282,3283,3289],{"type":33,"value":3262},"如果你已经看过 ",{"type":28,"tag":94,"props":3264,"children":3266},{"href":3265},"/about-html/html-template-modification-playbook",[3267],{"type":33,"value":3268},"HTML 模板怎么改不崩",{"type":33,"value":101},{"type":28,"tag":94,"props":3271,"children":3272},{"href":1115},[3273],{"type":33,"value":3274},"网页编辑器里的图片处理工作流",{"type":33,"value":101},{"type":28,"tag":94,"props":3277,"children":3279},{"href":3278},"/about-html/html-template-responsive-bugs-fix",[3280],{"type":33,"value":3281},"HTML 模板响应式 bug 修复",{"type":33,"value":109},{"type":28,"tag":94,"props":3284,"children":3286},{"href":3285},"/topics/design/component-library-for-landing-page",[3287],{"type":33,"value":3288},"网页设计中的组件库思维",{"type":33,"value":3290},"，这篇会专门解决模板里的图片问题。",{"type":28,"tag":254,"props":3292,"children":3293},{},[],{"type":28,"tag":119,"props":3295,"children":3297},{"id":3296},"一图片策略要先回答-3-个问题",[3298],{"type":33,"value":3299},"一、图片策略要先回答 3 个问题",{"type":28,"tag":29,"props":3301,"children":3302},{},[3303],{"type":33,"value":3304},"在改模板前，先别急着替换素材，先把下面三个问题讲明白：",{"type":28,"tag":929,"props":3306,"children":3307},{},[3308,3313,3318],{"type":28,"tag":40,"props":3309,"children":3310},{},[3311],{"type":33,"value":3312},"这张图是负责转化，还是负责装饰",{"type":28,"tag":40,"props":3314,"children":3315},{},[3316],{"type":33,"value":3317},"它会出现在首屏，还是正文深处",{"type":28,"tag":40,"props":3319,"children":3320},{},[3321],{"type":33,"value":3322},"它需要强调品牌一致性，还是只要足够清楚",{"type":28,"tag":29,"props":3324,"children":3325},{},[3326],{"type":33,"value":3327},"这三个答案，会直接决定你该选什么尺寸、什么格式、什么压缩强度。",{"type":28,"tag":119,"props":3329,"children":3331},{"id":3330},"二不要把所有图片都当成同一种资源",[3332],{"type":33,"value":3333},"二、不要把所有图片都当成同一种资源",{"type":28,"tag":29,"props":3335,"children":3336},{},[3337],{"type":33,"value":3338},"模板里最常见的错误，就是把首屏大图、卡片缩略图、正文插图都按同一套方法处理。",{"type":28,"tag":29,"props":3340,"children":3341},{},[3342],{"type":33,"value":3343},"更合理的分法是：",{"type":28,"tag":126,"props":3345,"children":3346},{},[3347,3367],{"type":28,"tag":130,"props":3348,"children":3349},{},[3350],{"type":28,"tag":134,"props":3351,"children":3352},{},[3353,3357,3362],{"type":28,"tag":138,"props":3354,"children":3355},{},[3356],{"type":33,"value":287},{"type":28,"tag":138,"props":3358,"children":3359},{},[3360],{"type":33,"value":3361},"主要任务",{"type":28,"tag":138,"props":3363,"children":3364},{},[3365],{"type":33,"value":3366},"处理重点",{"type":28,"tag":154,"props":3368,"children":3369},{},[3370,3387,3405,3423],{"type":28,"tag":134,"props":3371,"children":3372},{},[3373,3378,3382],{"type":28,"tag":161,"props":3374,"children":3375},{},[3376],{"type":33,"value":3377},"首屏主图",{"type":28,"tag":161,"props":3379,"children":3380},{},[3381],{"type":33,"value":313},{"type":28,"tag":161,"props":3383,"children":3384},{},[3385],{"type":33,"value":3386},"清晰度优先，但要控制体积",{"type":28,"tag":134,"props":3388,"children":3389},{},[3390,3395,3400],{"type":28,"tag":161,"props":3391,"children":3392},{},[3393],{"type":33,"value":3394},"卡片缩略图",{"type":28,"tag":161,"props":3396,"children":3397},{},[3398],{"type":33,"value":3399},"提供识别与导览",{"type":28,"tag":161,"props":3401,"children":3402},{},[3403],{"type":33,"value":3404},"尺寸统一，便于列表稳定",{"type":28,"tag":134,"props":3406,"children":3407},{},[3408,3413,3418],{"type":28,"tag":161,"props":3409,"children":3410},{},[3411],{"type":33,"value":3412},"正文插图",{"type":28,"tag":161,"props":3414,"children":3415},{},[3416],{"type":33,"value":3417},"帮助解释内容",{"type":28,"tag":161,"props":3419,"children":3420},{},[3421],{"type":33,"value":3422},"语义清楚，不必过度精细",{"type":28,"tag":134,"props":3424,"children":3425},{},[3426,3431,3436],{"type":28,"tag":161,"props":3427,"children":3428},{},[3429],{"type":33,"value":3430},"装饰性背景图",{"type":28,"tag":161,"props":3432,"children":3433},{},[3434],{"type":33,"value":3435},"营造氛围",{"type":28,"tag":161,"props":3437,"children":3438},{},[3439],{"type":33,"value":3440},"尽量轻量，避免压住正文",{"type":28,"tag":29,"props":3442,"children":3443},{},[3444],{"type":33,"value":3445},"这样做最大的好处是，你不会为了追求“全站高清”把所有资源都做成超大图。",{"type":28,"tag":119,"props":3447,"children":3449},{"id":3448},"三清晰度和体积不是二选一而是优先级问题",[3450],{"type":33,"value":3451},"三、清晰度和体积不是二选一，而是优先级问题",{"type":28,"tag":29,"props":3453,"children":3454},{},[3455],{"type":33,"value":3456},"对多数模板站点来说，真正重要的是：用户在常见设备上看起来足够清楚，同时页面仍然加载顺畅。",{"type":28,"tag":29,"props":3458,"children":3459},{},[3460],{"type":33,"value":3461},"这意味着：",{"type":28,"tag":36,"props":3463,"children":3464},{},[3465,3470,3475],{"type":28,"tag":40,"props":3466,"children":3467},{},[3468],{"type":33,"value":3469},"首屏图可以稍大，但数量要少",{"type":28,"tag":40,"props":3471,"children":3472},{},[3473],{"type":33,"value":3474},"列表图应该统一尺寸，避免布局跳动",{"type":28,"tag":40,"props":3476,"children":3477},{},[3478],{"type":33,"value":3479},"装饰图应该尽量轻，不要和正文抢资源",{"type":28,"tag":29,"props":3481,"children":3482},{},[3483],{"type":33,"value":3484},"如果一张图只是为了衬托氛围，却比正文主图还重，那就是资源分配错了。",{"type":28,"tag":119,"props":3486,"children":3488},{"id":3487},"四图片风格不统一比体积超标更容易拉低成品感",[3489],{"type":33,"value":3490},"四、图片风格不统一，比体积超标更容易拉低“成品感”",{"type":28,"tag":29,"props":3492,"children":3493},{},[3494],{"type":33,"value":3495},"很多模板改造失败，不是因为没有好图，而是图片彼此完全不像同一个站点。",{"type":28,"tag":29,"props":3497,"children":3498},{},[3499],{"type":33,"value":3500},"常见混乱包括：",{"type":28,"tag":36,"props":3502,"children":3503},{},[3504,3509,3514,3519],{"type":28,"tag":40,"props":3505,"children":3506},{},[3507],{"type":33,"value":3508},"一部分是冷色商务风",{"type":28,"tag":40,"props":3510,"children":3511},{},[3512],{"type":33,"value":3513},"一部分是暖色生活风",{"type":28,"tag":40,"props":3515,"children":3516},{},[3517],{"type":33,"value":3518},"一部分是实拍，一部分是插画",{"type":28,"tag":40,"props":3520,"children":3521},{},[3522],{"type":33,"value":3523},"横图、竖图、近景、远景比例全乱",{"type":28,"tag":29,"props":3525,"children":3526},{},[3527],{"type":33,"value":3528},"这会让页面看起来像临时拼接，而不是经过设计。",{"type":28,"tag":29,"props":3530,"children":3531},{},[3532],{"type":33,"value":3533},"一个简单做法是先定义素材规则：",{"type":28,"tag":36,"props":3535,"children":3536},{},[3537,3542,3547,3552],{"type":28,"tag":40,"props":3538,"children":3539},{},[3540],{"type":33,"value":3541},"主色调范围",{"type":28,"tag":40,"props":3543,"children":3544},{},[3545],{"type":33,"value":3546},"构图偏好",{"type":28,"tag":40,"props":3548,"children":3549},{},[3550],{"type":33,"value":3551},"是否优先人物、界面、场景或产品",{"type":28,"tag":40,"props":3553,"children":3554},{},[3555],{"type":33,"value":3556},"缩略图统一比例",{"type":28,"tag":119,"props":3558,"children":3560},{"id":3559},"五首屏图片最该克制而不是最该炫耀",[3561],{"type":33,"value":3562},"五、首屏图片最该克制，而不是最该炫耀",{"type":28,"tag":29,"props":3564,"children":3565},{},[3566],{"type":33,"value":3567},"模板用户最容易犯的错，是把首屏做成“视觉展示区”，结果大图、叠层、视频、装饰线条全堆进去。",{"type":28,"tag":29,"props":3569,"children":3570},{},[3571],{"type":33,"value":3572},"首屏图片真正要完成的是两件事：",{"type":28,"tag":929,"props":3574,"children":3575},{},[3576,3581],{"type":28,"tag":40,"props":3577,"children":3578},{},[3579],{"type":33,"value":3580},"帮助用户快速理解产品或服务",{"type":28,"tag":40,"props":3582,"children":3583},{},[3584],{"type":33,"value":3585},"不拖垮首屏加载",{"type":28,"tag":29,"props":3587,"children":3588},{},[3589],{"type":33,"value":3590},"如果一张图不能支持这两件事，再漂亮也可能是负担。",{"type":28,"tag":119,"props":3592,"children":3594},{"id":3593},"六失败案例模板换成高质量素材后页面反而更差",[3595],{"type":33,"value":3596},"六、失败案例：模板换成高质量素材后，页面反而更差",{"type":28,"tag":29,"props":3598,"children":3599},{},[3600],{"type":33,"value":3601},"一个很常见的翻车场景是：",{"type":28,"tag":36,"props":3603,"children":3604},{},[3605,3610,3615,3620],{"type":28,"tag":40,"props":3606,"children":3607},{},[3608],{"type":33,"value":3609},"原模板图片一般，但页面加载还行",{"type":28,"tag":40,"props":3611,"children":3612},{},[3613],{"type":33,"value":3614},"替换成高质量商业图后，图片体积暴涨",{"type":28,"tag":40,"props":3616,"children":3617},{},[3618],{"type":33,"value":3619},"列表页和移动端明显变慢",{"type":28,"tag":40,"props":3621,"children":3622},{},[3623],{"type":33,"value":3624},"不同来源素材风格又不统一",{"type":28,"tag":29,"props":3626,"children":3627},{},[3628],{"type":33,"value":3629},"最后网站既慢，又不像一个完整品牌。",{"type":28,"tag":29,"props":3631,"children":3632},{},[3633],{"type":33,"value":3634},"根因通常不是“高质量图片错了”，而是缺少图片分层策略。解决方式是：",{"type":28,"tag":929,"props":3636,"children":3637},{},[3638,3643,3648],{"type":28,"tag":40,"props":3639,"children":3640},{},[3641],{"type":33,"value":3642},"先分类型",{"type":28,"tag":40,"props":3644,"children":3645},{},[3646],{"type":33,"value":3647},"再定尺寸和格式",{"type":28,"tag":40,"props":3649,"children":3650},{},[3651],{"type":33,"value":3652},"最后统一风格规则",{"type":28,"tag":119,"props":3654,"children":3656},{"id":3655},"七模板图片策略表",[3657],{"type":33,"value":3658},"七、模板图片策略表",{"type":28,"tag":126,"props":3660,"children":3661},{},[3662,3683],{"type":28,"tag":130,"props":3663,"children":3664},{},[3665],{"type":28,"tag":134,"props":3666,"children":3667},{},[3668,3673,3678],{"type":28,"tag":138,"props":3669,"children":3670},{},[3671],{"type":33,"value":3672},"决策项",{"type":28,"tag":138,"props":3674,"children":3675},{},[3676],{"type":33,"value":3677},"推荐做法",{"type":28,"tag":138,"props":3679,"children":3680},{},[3681],{"type":33,"value":3682},"不推荐做法",{"type":28,"tag":154,"props":3684,"children":3685},{},[3686,3703,3721,3739],{"type":28,"tag":134,"props":3687,"children":3688},{},[3689,3693,3698],{"type":28,"tag":161,"props":3690,"children":3691},{},[3692],{"type":33,"value":3377},{"type":28,"tag":161,"props":3694,"children":3695},{},[3696],{"type":33,"value":3697},"少量高质量图，服务主信息",{"type":28,"tag":161,"props":3699,"children":3700},{},[3701],{"type":33,"value":3702},"多张大图叠加",{"type":28,"tag":134,"props":3704,"children":3705},{},[3706,3711,3716],{"type":28,"tag":161,"props":3707,"children":3708},{},[3709],{"type":33,"value":3710},"列表缩略图",{"type":28,"tag":161,"props":3712,"children":3713},{},[3714],{"type":33,"value":3715},"统一比例与裁切方式",{"type":28,"tag":161,"props":3717,"children":3718},{},[3719],{"type":33,"value":3720},"每张图尺寸都不同",{"type":28,"tag":134,"props":3722,"children":3723},{},[3724,3729,3734],{"type":28,"tag":161,"props":3725,"children":3726},{},[3727],{"type":33,"value":3728},"装饰图",{"type":28,"tag":161,"props":3730,"children":3731},{},[3732],{"type":33,"value":3733},"轻量化，避免压住正文",{"type":28,"tag":161,"props":3735,"children":3736},{},[3737],{"type":33,"value":3738},"装饰图比正文图更重",{"type":28,"tag":134,"props":3740,"children":3741},{},[3742,3747,3752],{"type":28,"tag":161,"props":3743,"children":3744},{},[3745],{"type":33,"value":3746},"素材风格",{"type":28,"tag":161,"props":3748,"children":3749},{},[3750],{"type":33,"value":3751},"先设统一规则再选图",{"type":28,"tag":161,"props":3753,"children":3754},{},[3755],{"type":33,"value":3756},"每页临时找图",{"type":28,"tag":119,"props":3758,"children":3760},{"id":3759},"八图片策略检查清单",[3761],{"type":33,"value":3762},"八、图片策略检查清单",{"type":28,"tag":36,"props":3764,"children":3766},{"className":3765},[996],[3767,3776,3785,3794,3803,3812],{"type":28,"tag":40,"props":3768,"children":3770},{"className":3769},[1001],[3771,3774],{"type":28,"tag":1004,"props":3772,"children":3773},{"disabled":1006,"type":1007},[],{"type":33,"value":3775}," 是否区分了首屏图、缩略图、正文图和装饰图",{"type":28,"tag":40,"props":3777,"children":3779},{"className":3778},[1001],[3780,3783],{"type":28,"tag":1004,"props":3781,"children":3782},{"disabled":1006,"type":1007},[],{"type":33,"value":3784}," 首页图片数量是否已经足够克制",{"type":28,"tag":40,"props":3786,"children":3788},{"className":3787},[1001],[3789,3792],{"type":28,"tag":1004,"props":3790,"children":3791},{"disabled":1006,"type":1007},[],{"type":33,"value":3793}," 列表图是否统一尺寸与比例",{"type":28,"tag":40,"props":3795,"children":3797},{"className":3796},[1001],[3798,3801],{"type":28,"tag":1004,"props":3799,"children":3800},{"disabled":1006,"type":1007},[],{"type":33,"value":3802}," 是否建立了统一的图片风格规则",{"type":28,"tag":40,"props":3804,"children":3806},{"className":3805},[1001],[3807,3810],{"type":28,"tag":1004,"props":3808,"children":3809},{"disabled":1006,"type":1007},[],{"type":33,"value":3811}," 是否先判断图片用途，再决定体积和清晰度",{"type":28,"tag":40,"props":3813,"children":3815},{"className":3814},[1001],[3816,3819],{"type":28,"tag":1004,"props":3817,"children":3818},{"disabled":1006,"type":1007},[],{"type":33,"value":3820}," 是否避免让装饰性图片拖慢核心内容",{"type":28,"tag":119,"props":3822,"children":3823},{"id":3153},[3824],{"type":33,"value":3153},{"type":28,"tag":29,"props":3826,"children":3827},{},[3828],{"type":33,"value":3829},"HTML 模板的图片策略，本质上是在做资源分配。你要把清晰度、体积和风格统一这三件事同时纳入判断，模板改造后的页面才会既像一个完整产品，又不会因为素材失控而拖慢整站。",{"type":28,"tag":119,"props":3831,"children":3832},{"id":1104},[3833],{"type":33,"value":1104},{"type":28,"tag":36,"props":3835,"children":3836},{},[3837,3844,3851,3858],{"type":28,"tag":40,"props":3838,"children":3839},{},[3840],{"type":28,"tag":94,"props":3841,"children":3842},{"href":3265},[3843],{"type":33,"value":3268},{"type":28,"tag":40,"props":3845,"children":3846},{},[3847],{"type":28,"tag":94,"props":3848,"children":3849},{"href":1115},[3850],{"type":33,"value":3274},{"type":28,"tag":40,"props":3852,"children":3853},{},[3854],{"type":28,"tag":94,"props":3855,"children":3856},{"href":3278},[3857],{"type":33,"value":3281},{"type":28,"tag":40,"props":3859,"children":3860},{},[3861],{"type":28,"tag":94,"props":3862,"children":3863},{"href":3285},[3864],{"type":33,"value":3288},{"title":7,"searchDepth":1141,"depth":1141,"links":3866},[3867,3868,3869,3870,3871,3872,3873,3874,3875,3876],{"id":3296,"depth":1144,"text":3299},{"id":3330,"depth":1144,"text":3333},{"id":3448,"depth":1144,"text":3451},{"id":3487,"depth":1144,"text":3490},{"id":3559,"depth":1144,"text":3562},{"id":3593,"depth":1144,"text":3596},{"id":3655,"depth":1144,"text":3658},{"id":3759,"depth":1144,"text":3762},{"id":3153,"depth":1144,"text":3153},{"id":1104,"depth":1144,"text":1104},"content:about-html:html-template-image-strategy-guide.md","about-html/html-template-image-strategy-guide.md","about-html/html-template-image-strategy-guide",{"_path":104,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":3881,"description":3882,"date":10,"topic":5,"author":11,"tags":3883,"image":3887,"imageAlt":3888,"imageQuery":3889,"pexelsPhotoId":3890,"pexelsUrl":3891,"featured":6,"readingTime":3232,"body":3892,"_type":1174,"_id":6207,"_source":1176,"_file":6208,"_stem":6209,"_extension":1179},"网页编辑器生成 HTML 后怎么做代码审计：依赖、隐私与性能的上线前清单","很多人用网页编辑器把页面做出来后，直接导出上线，结果问题往往不在视觉，而在外链脚本、隐私暴露、资源冗余和 SEO 细节。本文给出一套可执行的 HTML 代码审计清单，帮助你把风险挡在上线前。",[13,3884,3885,16,3886],"HTML 审计","代码质量","隐私安全","/images/articles/web-editor-html-code-audit-checklist-featured.jpg","笔记本电脑旁的审计清单与文档，代表网页导出代码的上线前审查","developer audit checklist laptop",8962476,"https://www.pexels.com/photo/a-notebook-and-pen-near-the-laptop-and-documents-on-the-table-8962476/",{"type":25,"children":3893,"toc":6146},[3894,3899,3917,3922,3945,3950,3959,3986,3992,3997,4002,4119,4124,4132,4135,4141,4146,4151,4157,4162,4180,4186,4191,4222,4227,4232,4235,4241,4246,4252,4275,4280,4378,4383,4388,4393,4421,4426,4429,4435,4440,4445,4463,4468,4566,4572,4578,4583,4601,4607,4612,4630,4636,4641,4652,4655,4661,4666,4678,4683,4688,4697,4702,4800,4804,4822,4842,4845,4851,4856,4862,4895,4900,4906,4911,4917,4922,4940,4946,4951,4978,4981,4987,4992,5010,5016,5140,5145,5150,5173,5178,5181,5187,5192,5196,5214,5218,5223,5241,5245,5249,5277,5282,5305,5310,5318,5321,5327,5394,5397,5401,5406,5429,5434,5439,5443,5523,5526,5531,5536,5559,5590,5593,5599,5604,5627,5632,5638,5643,5670,5675,5680,5753,5758,5764,5769,5792,5797,5820,5825,5848,5854,5859,5890,5902,5908,5913,5936,5941,5964,5970,5975,5993,5998,6021,6027,6032,6037,6043,6110,6115],{"type":28,"tag":29,"props":3895,"children":3896},{},[3897],{"type":33,"value":3898},"很多人用网页编辑器做页面时，最关注的是：",{"type":28,"tag":36,"props":3900,"children":3901},{},[3902,3907,3912],{"type":28,"tag":40,"props":3903,"children":3904},{},[3905],{"type":33,"value":3906},"页面是不是已经排好了",{"type":28,"tag":40,"props":3908,"children":3909},{},[3910],{"type":33,"value":3911},"手机端看起来有没有问题",{"type":28,"tag":40,"props":3913,"children":3914},{},[3915],{"type":33,"value":3916},"导出之后能不能打开",{"type":28,"tag":29,"props":3918,"children":3919},{},[3920],{"type":33,"value":3921},"真正上线后最容易出事故的，往往不是这些，而是更底层的代码问题：",{"type":28,"tag":36,"props":3923,"children":3924},{},[3925,3930,3935,3940],{"type":28,"tag":40,"props":3926,"children":3927},{},[3928],{"type":33,"value":3929},"页面偷偷依赖了不必要的第三方脚本",{"type":28,"tag":40,"props":3931,"children":3932},{},[3933],{"type":33,"value":3934},"图片、字体和资源路径很乱",{"type":28,"tag":40,"props":3936,"children":3937},{},[3938],{"type":33,"value":3939},"导出的 HTML 带着编辑器残留属性",{"type":28,"tag":40,"props":3941,"children":3942},{},[3943],{"type":33,"value":3944},"隐私、SEO 和性能问题在发布前根本没人检查",{"type":28,"tag":29,"props":3946,"children":3947},{},[3948],{"type":33,"value":3949},"所以网页编辑器的正确打开方式不是“导出即上线”，而是：",{"type":28,"tag":3951,"props":3952,"children":3953},"blockquote",{},[3954],{"type":28,"tag":29,"props":3955,"children":3956},{},[3957],{"type":33,"value":3958},"先把页面做出来，再把导出的 HTML 当成一个要审计的交付物。",{"type":28,"tag":29,"props":3960,"children":3961},{},[3962,3964,3968,3969,3973,3974,3978,3979,3985],{"type":33,"value":3963},"如果你还在补网页编辑器和导出流程的基础，建议先看 ",{"type":28,"tag":94,"props":3965,"children":3966},{"href":96},[3967],{"type":33,"value":99},{"type":33,"value":101},{"type":28,"tag":94,"props":3970,"children":3971},{"href":2145},[3972],{"type":33,"value":2148},{"type":33,"value":101},{"type":28,"tag":94,"props":3975,"children":3976},{"href":112},[3977],{"type":33,"value":115},{"type":33,"value":109},{"type":28,"tag":94,"props":3980,"children":3982},{"href":3981},"/topics/practical-tips/free-website-security-checklist-domain-backup-export",[3983],{"type":33,"value":3984},"免费建站的安全清单",{"type":33,"value":117},{"type":28,"tag":119,"props":3987,"children":3989},{"id":3988},"先给结论网页编辑器生成-html-后至少要过-5-层审计",[3990],{"type":33,"value":3991},"先给结论：网页编辑器生成 HTML 后，至少要过 5 层审计",{"type":28,"tag":29,"props":3993,"children":3994},{},[3995],{"type":33,"value":3996},"很多团队做网页时，会把“能打开”误当成“可以上线”。",{"type":28,"tag":29,"props":3998,"children":3999},{},[4000],{"type":33,"value":4001},"但对导出的 HTML 来说，真正应该检查的是下面 5 层：",{"type":28,"tag":126,"props":4003,"children":4004},{},[4005,4026],{"type":28,"tag":130,"props":4006,"children":4007},{},[4008],{"type":28,"tag":134,"props":4009,"children":4010},{},[4011,4016,4021],{"type":28,"tag":138,"props":4012,"children":4013},{},[4014],{"type":33,"value":4015},"审计层",{"type":28,"tag":138,"props":4017,"children":4018},{},[4019],{"type":33,"value":4020},"要看什么",{"type":28,"tag":138,"props":4022,"children":4023},{},[4024],{"type":33,"value":4025},"最常见问题",{"type":28,"tag":154,"props":4027,"children":4028},{},[4029,4047,4065,4083,4101],{"type":28,"tag":134,"props":4030,"children":4031},{},[4032,4037,4042],{"type":28,"tag":161,"props":4033,"children":4034},{},[4035],{"type":33,"value":4036},"依赖审计",{"type":28,"tag":161,"props":4038,"children":4039},{},[4040],{"type":33,"value":4041},"外链脚本、字体、样式、图片来源",{"type":28,"tag":161,"props":4043,"children":4044},{},[4045],{"type":33,"value":4046},"平台私有资源、失效 CDN、重复库",{"type":28,"tag":134,"props":4048,"children":4049},{},[4050,4055,4060],{"type":28,"tag":161,"props":4051,"children":4052},{},[4053],{"type":33,"value":4054},"隐私审计",{"type":28,"tag":161,"props":4056,"children":4057},{},[4058],{"type":33,"value":4059},"表单、埋点、第三方脚本、敏感信息",{"type":28,"tag":161,"props":4061,"children":4062},{},[4063],{"type":33,"value":4064},"用户数据暴露、脚本过度采集",{"type":28,"tag":134,"props":4066,"children":4067},{},[4068,4073,4078],{"type":28,"tag":161,"props":4069,"children":4070},{},[4071],{"type":33,"value":4072},"性能审计",{"type":28,"tag":161,"props":4074,"children":4075},{},[4076],{"type":33,"value":4077},"图片、字体、脚本、首屏资源",{"type":28,"tag":161,"props":4079,"children":4080},{},[4081],{"type":33,"value":4082},"LCP 变差、主线程阻塞",{"type":28,"tag":134,"props":4084,"children":4085},{},[4086,4091,4096],{"type":28,"tag":161,"props":4087,"children":4088},{},[4089],{"type":33,"value":4090},"SEO 审计",{"type":28,"tag":161,"props":4092,"children":4093},{},[4094],{"type":33,"value":4095},"标题层级、meta、链接、语义化",{"type":28,"tag":161,"props":4097,"children":4098},{},[4099],{"type":33,"value":4100},"结构混乱、抓取信号不足",{"type":28,"tag":134,"props":4102,"children":4103},{},[4104,4109,4114],{"type":28,"tag":161,"props":4105,"children":4106},{},[4107],{"type":33,"value":4108},"可维护性审计",{"type":28,"tag":161,"props":4110,"children":4111},{},[4112],{"type":33,"value":4113},"HTML 结构、类名、资源目录、残留属性",{"type":28,"tag":161,"props":4115,"children":4116},{},[4117],{"type":33,"value":4118},"后续没人敢改、迁移困难",{"type":28,"tag":29,"props":4120,"children":4121},{},[4122],{"type":33,"value":4123},"一句话理解：",{"type":28,"tag":29,"props":4125,"children":4126},{},[4127],{"type":28,"tag":735,"props":4128,"children":4129},{},[4130],{"type":33,"value":4131},"网页编辑器把页面做出来，只解决了“内容能摆上去”；代码审计解决的是“这个页面能不能稳定活下去”。",{"type":28,"tag":254,"props":4133,"children":4134},{},[],{"type":28,"tag":119,"props":4136,"children":4138},{"id":4137},"一为什么网页编辑器导出后的-html-更需要审计",[4139],{"type":33,"value":4140},"一、为什么网页编辑器导出后的 HTML 更需要审计",{"type":28,"tag":29,"props":4142,"children":4143},{},[4144],{"type":33,"value":4145},"自己手写页面时，很多问题你在写的过程中就能感觉到；网页编辑器则不同，它会帮你自动生成大量结构和资源引用。",{"type":28,"tag":29,"props":4147,"children":4148},{},[4149],{"type":33,"value":4150},"这带来两个结果：",{"type":28,"tag":269,"props":4152,"children":4154},{"id":4153},"_1-交付更快",[4155],{"type":33,"value":4156},"1. 交付更快",{"type":28,"tag":29,"props":4158,"children":4159},{},[4160],{"type":33,"value":4161},"你能很快得到一个：",{"type":28,"tag":36,"props":4163,"children":4164},{},[4165,4170,4175],{"type":28,"tag":40,"props":4166,"children":4167},{},[4168],{"type":33,"value":4169},"有结构的页面",{"type":28,"tag":40,"props":4171,"children":4172},{},[4173],{"type":33,"value":4174},"可点击的导航",{"type":28,"tag":40,"props":4176,"children":4177},{},[4178],{"type":33,"value":4179},"能预览的样式和图片",{"type":28,"tag":269,"props":4181,"children":4183},{"id":4182},"_2-风险更隐蔽",[4184],{"type":33,"value":4185},"2. 风险更隐蔽",{"type":28,"tag":29,"props":4187,"children":4188},{},[4189],{"type":33,"value":4190},"因为很多问题会被藏在生成结果里，例如：",{"type":28,"tag":36,"props":4192,"children":4193},{},[4194,4199,4204,4209],{"type":28,"tag":40,"props":4195,"children":4196},{},[4197],{"type":33,"value":4198},"HTML 层级很深，但预览时看不出来",{"type":28,"tag":40,"props":4200,"children":4201},{},[4202],{"type":33,"value":4203},"第三方脚本被编辑器自动注入",{"type":28,"tag":40,"props":4205,"children":4206},{},[4207],{"type":33,"value":4208},"图片路径依赖平台地址，本地没问题，上线后失效",{"type":28,"tag":40,"props":4210,"children":4211},{},[4212,4214,4220],{"type":33,"value":4213},"一些 ",{"type":28,"tag":438,"props":4215,"children":4217},{"className":4216},[],[4218],{"type":33,"value":4219},"data-*",{"type":33,"value":4221}," 属性和编辑器特定标记会被原样导出",{"type":28,"tag":29,"props":4223,"children":4224},{},[4225],{"type":33,"value":4226},"所以这类页面最怕的是：",{"type":28,"tag":29,"props":4228,"children":4229},{},[4230],{"type":33,"value":4231},"“预览通过了，于是默认代码也没问题。”",{"type":28,"tag":254,"props":4233,"children":4234},{},[],{"type":28,"tag":119,"props":4236,"children":4238},{"id":4237},"二第一层依赖审计先搞清这个页面到底依赖了谁",[4239],{"type":33,"value":4240},"二、第一层：依赖审计，先搞清这个页面到底依赖了谁",{"type":28,"tag":29,"props":4242,"children":4243},{},[4244],{"type":33,"value":4245},"导出的 HTML 在上线前，第一步不是改文案，而是先看依赖边界。",{"type":28,"tag":269,"props":4247,"children":4249},{"id":4248},"需要盘点的-4-类依赖",[4250],{"type":33,"value":4251},"需要盘点的 4 类依赖",{"type":28,"tag":929,"props":4253,"children":4254},{},[4255,4260,4265,4270],{"type":28,"tag":40,"props":4256,"children":4257},{},[4258],{"type":33,"value":4259},"CSS 文件",{"type":28,"tag":40,"props":4261,"children":4262},{},[4263],{"type":33,"value":4264},"JavaScript 文件",{"type":28,"tag":40,"props":4266,"children":4267},{},[4268],{"type":33,"value":4269},"图片、字体、图标资源",{"type":28,"tag":40,"props":4271,"children":4272},{},[4273],{"type":33,"value":4274},"外部 CDN 与第三方服务",{"type":28,"tag":269,"props":4276,"children":4278},{"id":4277},"依赖审计表",[4279],{"type":33,"value":4277},{"type":28,"tag":126,"props":4281,"children":4282},{},[4283,4304],{"type":28,"tag":130,"props":4284,"children":4285},{},[4286],{"type":28,"tag":134,"props":4287,"children":4288},{},[4289,4294,4299],{"type":28,"tag":138,"props":4290,"children":4291},{},[4292],{"type":33,"value":4293},"依赖类型",{"type":28,"tag":138,"props":4295,"children":4296},{},[4297],{"type":33,"value":4298},"应该确认什么",{"type":28,"tag":138,"props":4300,"children":4301},{},[4302],{"type":33,"value":4303},"常见翻车",{"type":28,"tag":154,"props":4305,"children":4306},{},[4307,4324,4342,4360],{"type":28,"tag":134,"props":4308,"children":4309},{},[4310,4314,4319],{"type":28,"tag":161,"props":4311,"children":4312},{},[4313],{"type":33,"value":1280},{"type":28,"tag":161,"props":4315,"children":4316},{},[4317],{"type":33,"value":4318},"是否有重复样式库、是否依赖外部地址",{"type":28,"tag":161,"props":4320,"children":4321},{},[4322],{"type":33,"value":4323},"同时加载两套 UI 样式",{"type":28,"tag":134,"props":4325,"children":4326},{},[4327,4332,4337],{"type":28,"tag":161,"props":4328,"children":4329},{},[4330],{"type":33,"value":4331},"JS",{"type":28,"tag":161,"props":4333,"children":4334},{},[4335],{"type":33,"value":4336},"是否真的需要、是否阻塞主流程",{"type":28,"tag":161,"props":4338,"children":4339},{},[4340],{"type":33,"value":4341},"加了统计又加客服又加热图",{"type":28,"tag":134,"props":4343,"children":4344},{},[4345,4350,4355],{"type":28,"tag":161,"props":4346,"children":4347},{},[4348],{"type":33,"value":4349},"图片/字体",{"type":28,"tag":161,"props":4351,"children":4352},{},[4353],{"type":33,"value":4354},"是否为可控资源、是否能一起迁移",{"type":28,"tag":161,"props":4356,"children":4357},{},[4358],{"type":33,"value":4359},"换环境后资源 404",{"type":28,"tag":134,"props":4361,"children":4362},{},[4363,4368,4373],{"type":28,"tag":161,"props":4364,"children":4365},{},[4366],{"type":33,"value":4367},"CDN",{"type":28,"tag":161,"props":4369,"children":4370},{},[4371],{"type":33,"value":4372},"是否稳定、是否可替换、是否受平台限制",{"type":28,"tag":161,"props":4374,"children":4375},{},[4376],{"type":33,"value":4377},"平台私有资源一失效全站错乱",{"type":28,"tag":269,"props":4379,"children":4381},{"id":4380},"一个简单判断标准",[4382],{"type":33,"value":4380},{"type":28,"tag":29,"props":4384,"children":4385},{},[4386],{"type":33,"value":4387},"如果你不知道某个脚本是干嘛的，就不要默认它应该保留。",{"type":28,"tag":29,"props":4389,"children":4390},{},[4391],{"type":33,"value":4392},"尤其是这些资源最值得优先检查：",{"type":28,"tag":36,"props":4394,"children":4395},{},[4396,4401,4406,4411,4416],{"type":28,"tag":40,"props":4397,"children":4398},{},[4399],{"type":33,"value":4400},"第三方统计脚本",{"type":28,"tag":40,"props":4402,"children":4403},{},[4404],{"type":33,"value":4405},"客服与聊天插件",{"type":28,"tag":40,"props":4407,"children":4408},{},[4409],{"type":33,"value":4410},"编辑器运行时残留脚本",{"type":28,"tag":40,"props":4412,"children":4413},{},[4414],{"type":33,"value":4415},"外部字体服务",{"type":28,"tag":40,"props":4417,"children":4418},{},[4419],{"type":33,"value":4420},"图标库 CDN",{"type":28,"tag":29,"props":4422,"children":4423},{},[4424],{"type":33,"value":4425},"依赖清单不清楚，后面的性能、隐私和迁移都会出问题。",{"type":28,"tag":254,"props":4427,"children":4428},{},[],{"type":28,"tag":119,"props":4430,"children":4432},{"id":4431},"三第二层隐私审计重点不是有没有表单而是数据被谁拿走了",[4433],{"type":33,"value":4434},"三、第二层：隐私审计，重点不是“有没有表单”，而是“数据被谁拿走了”",{"type":28,"tag":29,"props":4436,"children":4437},{},[4438],{"type":33,"value":4439},"网页编辑器生成的页面，最容易被忽视的一层就是隐私。",{"type":28,"tag":29,"props":4441,"children":4442},{},[4443],{"type":33,"value":4444},"很多团队只要页面能提交表单，就觉得功能已经完整；但真正应该问的是：",{"type":28,"tag":36,"props":4446,"children":4447},{},[4448,4453,4458],{"type":28,"tag":40,"props":4449,"children":4450},{},[4451],{"type":33,"value":4452},"用户数据被提交到哪里",{"type":28,"tag":40,"props":4454,"children":4455},{},[4456],{"type":33,"value":4457},"有没有第三方脚本同时读取页面行为",{"type":28,"tag":40,"props":4459,"children":4460},{},[4461],{"type":33,"value":4462},"页面里是否暴露了邮箱、手机号、内链参数或内部接口",{"type":28,"tag":269,"props":4464,"children":4466},{"id":4465},"隐私审计重点表",[4467],{"type":33,"value":4465},{"type":28,"tag":126,"props":4469,"children":4470},{},[4471,4491],{"type":28,"tag":130,"props":4472,"children":4473},{},[4474],{"type":28,"tag":134,"props":4475,"children":4476},{},[4477,4482,4486],{"type":28,"tag":138,"props":4478,"children":4479},{},[4480],{"type":33,"value":4481},"场景",{"type":28,"tag":138,"props":4483,"children":4484},{},[4485],{"type":33,"value":802},{"type":28,"tag":138,"props":4487,"children":4488},{},[4489],{"type":33,"value":4490},"风险",{"type":28,"tag":154,"props":4492,"children":4493},{},[4494,4512,4530,4548],{"type":28,"tag":134,"props":4495,"children":4496},{},[4497,4502,4507],{"type":28,"tag":161,"props":4498,"children":4499},{},[4500],{"type":33,"value":4501},"表单",{"type":28,"tag":161,"props":4503,"children":4504},{},[4505],{"type":33,"value":4506},"提交地址、字段内容、失败兜底",{"type":28,"tag":161,"props":4508,"children":4509},{},[4510],{"type":33,"value":4511},"线索丢失、敏感信息裸传",{"type":28,"tag":134,"props":4513,"children":4514},{},[4515,4520,4525],{"type":28,"tag":161,"props":4516,"children":4517},{},[4518],{"type":33,"value":4519},"埋点",{"type":28,"tag":161,"props":4521,"children":4522},{},[4523],{"type":33,"value":4524},"是否采集过多字段或用户输入",{"type":28,"tag":161,"props":4526,"children":4527},{},[4528],{"type":33,"value":4529},"合规风险、隐私暴露",{"type":28,"tag":134,"props":4531,"children":4532},{},[4533,4538,4543],{"type":28,"tag":161,"props":4534,"children":4535},{},[4536],{"type":33,"value":4537},"第三方脚本",{"type":28,"tag":161,"props":4539,"children":4540},{},[4541],{"type":33,"value":4542},"是否读取输入框、行为或 cookie",{"type":28,"tag":161,"props":4544,"children":4545},{},[4546],{"type":33,"value":4547},"过度跟踪",{"type":28,"tag":134,"props":4549,"children":4550},{},[4551,4556,4561],{"type":28,"tag":161,"props":4552,"children":4553},{},[4554],{"type":33,"value":4555},"页面源码",{"type":28,"tag":161,"props":4557,"children":4558},{},[4559],{"type":33,"value":4560},"是否写死邮箱、内部地址、测试 token",{"type":28,"tag":161,"props":4562,"children":4563},{},[4564],{"type":33,"value":4565},"信息泄露",{"type":28,"tag":269,"props":4567,"children":4569},{"id":4568},"尤其要警惕这-3-类问题",[4570],{"type":33,"value":4571},"尤其要警惕这 3 类问题",{"type":28,"tag":622,"props":4573,"children":4575},{"id":4574},"_1-测试环境残留",[4576],{"type":33,"value":4577},"1. 测试环境残留",{"type":28,"tag":29,"props":4579,"children":4580},{},[4581],{"type":33,"value":4582},"比如源码里还留着：",{"type":28,"tag":36,"props":4584,"children":4585},{},[4586,4591,4596],{"type":28,"tag":40,"props":4587,"children":4588},{},[4589],{"type":33,"value":4590},"测试接口地址",{"type":28,"tag":40,"props":4592,"children":4593},{},[4594],{"type":33,"value":4595},"临时邮箱",{"type":28,"tag":40,"props":4597,"children":4598},{},[4599],{"type":33,"value":4600},"内部联调链接",{"type":28,"tag":622,"props":4602,"children":4604},{"id":4603},"_2-第三方脚本过度采集",[4605],{"type":33,"value":4606},"2. 第三方脚本过度采集",{"type":28,"tag":29,"props":4608,"children":4609},{},[4610],{"type":33,"value":4611},"很多热图、客服、弹窗、表单服务并不是“只做展示”，它们可能还会记录：",{"type":28,"tag":36,"props":4613,"children":4614},{},[4615,4620,4625],{"type":28,"tag":40,"props":4616,"children":4617},{},[4618],{"type":33,"value":4619},"页面行为",{"type":28,"tag":40,"props":4621,"children":4622},{},[4623],{"type":33,"value":4624},"点击位置",{"type":28,"tag":40,"props":4626,"children":4627},{},[4628],{"type":33,"value":4629},"表单输入过程",{"type":28,"tag":622,"props":4631,"children":4633},{"id":4632},"_3-联系方式和政策页不一致",[4634],{"type":33,"value":4635},"3. 联系方式和政策页不一致",{"type":28,"tag":29,"props":4637,"children":4638},{},[4639],{"type":33,"value":4640},"如果正文、页脚、隐私政策里的联系方式都不一样，不只是体验差，也会增加信任与合规风险。",{"type":28,"tag":29,"props":4642,"children":4643},{},[4644,4646,4650],{"type":33,"value":4645},"这部分可以和 ",{"type":28,"tag":94,"props":4647,"children":4648},{"href":3981},[4649],{"type":33,"value":3984},{"type":33,"value":4651}," 一起看，会更容易建立完整底线。",{"type":28,"tag":254,"props":4653,"children":4654},{},[],{"type":28,"tag":119,"props":4656,"children":4658},{"id":4657},"四第三层性能审计网页编辑器页面最常死在图片和脚本上",[4659],{"type":33,"value":4660},"四、第三层：性能审计，网页编辑器页面最常死在图片和脚本上",{"type":28,"tag":29,"props":4662,"children":4663},{},[4664],{"type":33,"value":4665},"对大多数网页编辑器导出页来说，性能问题 80% 都集中在两类资源：",{"type":28,"tag":36,"props":4667,"children":4668},{},[4669,4674],{"type":28,"tag":40,"props":4670,"children":4671},{},[4672],{"type":33,"value":4673},"图片",{"type":28,"tag":40,"props":4675,"children":4676},{},[4677],{"type":33,"value":4537},{"type":28,"tag":269,"props":4679,"children":4681},{"id":4680},"性能审计顺序",[4682],{"type":33,"value":4680},{"type":28,"tag":29,"props":4684,"children":4685},{},[4686],{"type":33,"value":4687},"建议按这个顺序查：",{"type":28,"tag":431,"props":4689,"children":4692},{"className":4690,"code":4691,"language":33,"meta":7},[434],"先看首屏主图\n  -> 再看非首屏图片是否懒加载\n  -> 再看字体与图标资源\n  -> 最后看第三方脚本是否阻塞\n",[4693],{"type":28,"tag":438,"props":4694,"children":4695},{"__ignoreMap":7},[4696],{"type":33,"value":4691},{"type":28,"tag":269,"props":4698,"children":4700},{"id":4699},"最容易出问题的地方",[4701],{"type":33,"value":4699},{"type":28,"tag":126,"props":4703,"children":4704},{},[4705,4726],{"type":28,"tag":130,"props":4706,"children":4707},{},[4708],{"type":28,"tag":134,"props":4709,"children":4710},{},[4711,4716,4721],{"type":28,"tag":138,"props":4712,"children":4713},{},[4714],{"type":33,"value":4715},"项目",{"type":28,"tag":138,"props":4717,"children":4718},{},[4719],{"type":33,"value":4720},"问题表现",{"type":28,"tag":138,"props":4722,"children":4723},{},[4724],{"type":33,"value":4725},"为什么危险",{"type":28,"tag":154,"props":4727,"children":4728},{},[4729,4747,4765,4783],{"type":28,"tag":134,"props":4730,"children":4731},{},[4732,4737,4742],{"type":28,"tag":161,"props":4733,"children":4734},{},[4735],{"type":33,"value":4736},"首屏图片",{"type":28,"tag":161,"props":4738,"children":4739},{},[4740],{"type":33,"value":4741},"大图未压缩、尺寸不匹配",{"type":28,"tag":161,"props":4743,"children":4744},{},[4745],{"type":33,"value":4746},"直接拖慢 LCP",{"type":28,"tag":134,"props":4748,"children":4749},{},[4750,4755,4760],{"type":28,"tag":161,"props":4751,"children":4752},{},[4753],{"type":33,"value":4754},"非首屏图片",{"type":28,"tag":161,"props":4756,"children":4757},{},[4758],{"type":33,"value":4759},"全部首屏加载",{"type":28,"tag":161,"props":4761,"children":4762},{},[4763],{"type":33,"value":4764},"浪费带宽与解析时间",{"type":28,"tag":134,"props":4766,"children":4767},{},[4768,4773,4778],{"type":28,"tag":161,"props":4769,"children":4770},{},[4771],{"type":33,"value":4772},"字体",{"type":28,"tag":161,"props":4774,"children":4775},{},[4776],{"type":33,"value":4777},"字重太多、外链慢",{"type":28,"tag":161,"props":4779,"children":4780},{},[4781],{"type":33,"value":4782},"首屏闪动、渲染延迟",{"type":28,"tag":134,"props":4784,"children":4785},{},[4786,4790,4795],{"type":28,"tag":161,"props":4787,"children":4788},{},[4789],{"type":33,"value":4537},{"type":28,"tag":161,"props":4791,"children":4792},{},[4793],{"type":33,"value":4794},"首屏同步执行",{"type":28,"tag":161,"props":4796,"children":4797},{},[4798],{"type":33,"value":4799},"抢主线程、阻塞交互",{"type":28,"tag":269,"props":4801,"children":4802},{"id":728},[4803],{"type":33,"value":728},{"type":28,"tag":36,"props":4805,"children":4806},{},[4807,4812,4817],{"type":28,"tag":40,"props":4808,"children":4809},{},[4810],{"type":33,"value":4811},"首屏关键图不要误用懒加载",{"type":28,"tag":40,"props":4813,"children":4814},{},[4815],{"type":33,"value":4816},"非首屏图应尽量延后加载",{"type":28,"tag":40,"props":4818,"children":4819},{},[4820],{"type":33,"value":4821},"第三方脚本默认按“非关键资源”对待",{"type":28,"tag":29,"props":4823,"children":4824},{},[4825,4827,4831,4832,4836,4837,4841],{"type":33,"value":4826},"如果页面用于投放或 SEO，这部分一定要结合 ",{"type":28,"tag":94,"props":4828,"children":4829},{"href":752},[4830],{"type":33,"value":755},{"type":33,"value":101},{"type":28,"tag":94,"props":4833,"children":4834},{"href":112},[4835],{"type":33,"value":115},{"type":33,"value":109},{"type":28,"tag":94,"props":4838,"children":4839},{"href":759},[4840],{"type":33,"value":762},{"type":33,"value":764},{"type":28,"tag":254,"props":4843,"children":4844},{},[],{"type":28,"tag":119,"props":4846,"children":4848},{"id":4847},"五第四层seo-审计导出的页面能看不等于搜索能理解",[4849],{"type":33,"value":4850},"五、第四层：SEO 审计，导出的页面能看，不等于搜索能理解",{"type":28,"tag":29,"props":4852,"children":4853},{},[4854],{"type":33,"value":4855},"很多网页编辑器页面预览很好看，但 SEO 信号很弱。",{"type":28,"tag":269,"props":4857,"children":4859},{"id":4858},"seo-审计最低检查项",[4860],{"type":33,"value":4861},"SEO 审计最低检查项",{"type":28,"tag":36,"props":4863,"children":4864},{},[4865,4870,4875,4880,4885,4890],{"type":28,"tag":40,"props":4866,"children":4867},{},[4868],{"type":33,"value":4869},"是否只有一个明确的 H1",{"type":28,"tag":40,"props":4871,"children":4872},{},[4873],{"type":33,"value":4874},"Title 和 Description 是否可控",{"type":28,"tag":40,"props":4876,"children":4877},{},[4878],{"type":33,"value":4879},"页面层级是否用对 H2/H3",{"type":28,"tag":40,"props":4881,"children":4882},{},[4883],{"type":33,"value":4884},"图片是否有 alt",{"type":28,"tag":40,"props":4886,"children":4887},{},[4888],{"type":33,"value":4889},"链接是否清晰、可抓取",{"type":28,"tag":40,"props":4891,"children":4892},{},[4893],{"type":33,"value":4894},"是否存在明显的语义化缺失",{"type":28,"tag":269,"props":4896,"children":4898},{"id":4897},"典型问题",[4899],{"type":33,"value":4897},{"type":28,"tag":622,"props":4901,"children":4903},{"id":4902},"_1-所有标题都用-div-或-span-模拟",[4904],{"type":33,"value":4905},"1. 所有标题都用 div 或 span 模拟",{"type":28,"tag":29,"props":4907,"children":4908},{},[4909],{"type":33,"value":4910},"视觉上看不出问题，但搜索引擎和可访问性工具读起来很差。",{"type":28,"tag":622,"props":4912,"children":4914},{"id":4913},"_2-元信息靠平台默认值",[4915],{"type":33,"value":4916},"2. 元信息靠平台默认值",{"type":28,"tag":29,"props":4918,"children":4919},{},[4920],{"type":33,"value":4921},"导出后如果不重新确认：",{"type":28,"tag":36,"props":4923,"children":4924},{},[4925,4930,4935],{"type":28,"tag":40,"props":4926,"children":4927},{},[4928],{"type":33,"value":4929},"Title 可能是模板默认标题",{"type":28,"tag":40,"props":4931,"children":4932},{},[4933],{"type":33,"value":4934},"Description 可能为空",{"type":28,"tag":40,"props":4936,"children":4937},{},[4938],{"type":33,"value":4939},"canonical 可能不存在",{"type":28,"tag":622,"props":4941,"children":4943},{"id":4942},"_3-页面块很多但信息结构不清",[4944],{"type":33,"value":4945},"3. 页面块很多，但信息结构不清",{"type":28,"tag":29,"props":4947,"children":4948},{},[4949],{"type":33,"value":4950},"用户能看懂，不代表搜索引擎能快速理解页面主意图。",{"type":28,"tag":29,"props":4952,"children":4953},{},[4954,4956,4962,4963,4969,4970,4976],{"type":33,"value":4955},"这部分建议结合 ",{"type":28,"tag":94,"props":4957,"children":4959},{"href":4958},"/about-html/semantic-html-a11y-for-seo",[4960],{"type":33,"value":4961},"语义化 HTML 与可访问性指南",{"type":33,"value":101},{"type":28,"tag":94,"props":4964,"children":4966},{"href":4965},"/topics/seo/title-description-optimization-guide",[4967],{"type":33,"value":4968},"Title 与 Description 优化指南",{"type":33,"value":109},{"type":28,"tag":94,"props":4971,"children":4973},{"href":4972},"/topics/practical-tips/website-prelaunch-checklist-seo-performance",[4974],{"type":33,"value":4975},"网站上线前检查清单",{"type":33,"value":4977}," 一起看。",{"type":28,"tag":254,"props":4979,"children":4980},{},[],{"type":28,"tag":119,"props":4982,"children":4984},{"id":4983},"六第五层可维护性审计不然这页一上线就进入没人敢动的状态",[4985],{"type":33,"value":4986},"六、第五层：可维护性审计，不然这页一上线就进入“没人敢动”的状态",{"type":28,"tag":29,"props":4988,"children":4989},{},[4990],{"type":33,"value":4991},"很多页面不是不能上线，而是上线后几周就进入一种很糟糕的状态：",{"type":28,"tag":36,"props":4993,"children":4994},{},[4995,5000,5005],{"type":28,"tag":40,"props":4996,"children":4997},{},[4998],{"type":33,"value":4999},"小改动都怕出事",{"type":28,"tag":40,"props":5001,"children":5002},{},[5003],{"type":33,"value":5004},"没人知道类名和区块的关系",{"type":28,"tag":40,"props":5006,"children":5007},{},[5008],{"type":33,"value":5009},"换图片、换文案、加新模块都要试错",{"type":28,"tag":269,"props":5011,"children":5013},{"id":5012},"可维护性最该看的-5-个点",[5014],{"type":33,"value":5015},"可维护性最该看的 5 个点",{"type":28,"tag":126,"props":5017,"children":5018},{},[5019,5040],{"type":28,"tag":130,"props":5020,"children":5021},{},[5022],{"type":28,"tag":134,"props":5023,"children":5024},{},[5025,5030,5035],{"type":28,"tag":138,"props":5026,"children":5027},{},[5028],{"type":33,"value":5029},"检查项",{"type":28,"tag":138,"props":5031,"children":5032},{},[5033],{"type":33,"value":5034},"好的状态",{"type":28,"tag":138,"props":5036,"children":5037},{},[5038],{"type":33,"value":5039},"差的状态",{"type":28,"tag":154,"props":5041,"children":5042},{},[5043,5061,5079,5097,5122],{"type":28,"tag":134,"props":5044,"children":5045},{},[5046,5051,5056],{"type":28,"tag":161,"props":5047,"children":5048},{},[5049],{"type":33,"value":5050},"HTML 层级",{"type":28,"tag":161,"props":5052,"children":5053},{},[5054],{"type":33,"value":5055},"结构清楚，嵌套适度",{"type":28,"tag":161,"props":5057,"children":5058},{},[5059],{"type":33,"value":5060},"嵌套过深，语义混乱",{"type":28,"tag":134,"props":5062,"children":5063},{},[5064,5069,5074],{"type":28,"tag":161,"props":5065,"children":5066},{},[5067],{"type":33,"value":5068},"类名",{"type":28,"tag":161,"props":5070,"children":5071},{},[5072],{"type":33,"value":5073},"有一定规律",{"type":28,"tag":161,"props":5075,"children":5076},{},[5077],{"type":33,"value":5078},"随机字符串或重复命名",{"type":28,"tag":134,"props":5080,"children":5081},{},[5082,5087,5092],{"type":28,"tag":161,"props":5083,"children":5084},{},[5085],{"type":33,"value":5086},"资源目录",{"type":28,"tag":161,"props":5088,"children":5089},{},[5090],{"type":33,"value":5091},"图片、字体、脚本分组清楚",{"type":28,"tag":161,"props":5093,"children":5094},{},[5095],{"type":33,"value":5096},"散落各处，难以迁移",{"type":28,"tag":134,"props":5098,"children":5099},{},[5100,5105,5117],{"type":28,"tag":161,"props":5101,"children":5102},{},[5103],{"type":33,"value":5104},"编辑器残留",{"type":28,"tag":161,"props":5106,"children":5107},{},[5108,5110,5115],{"type":33,"value":5109},"已移除无关 ",{"type":28,"tag":438,"props":5111,"children":5113},{"className":5112},[],[5114],{"type":33,"value":4219},{"type":33,"value":5116}," 标记",{"type":28,"tag":161,"props":5118,"children":5119},{},[5120],{"type":33,"value":5121},"充满编辑器专属属性",{"type":28,"tag":134,"props":5123,"children":5124},{},[5125,5130,5135],{"type":28,"tag":161,"props":5126,"children":5127},{},[5128],{"type":33,"value":5129},"页面区块",{"type":28,"tag":161,"props":5131,"children":5132},{},[5133],{"type":33,"value":5134},"能看出 Hero、FAQ、CTA 等结构",{"type":28,"tag":161,"props":5136,"children":5137},{},[5138],{"type":33,"value":5139},"全部堆成匿名块",{"type":28,"tag":269,"props":5141,"children":5143},{"id":5142},"一个简单判断法",[5144],{"type":33,"value":5142},{"type":28,"tag":29,"props":5146,"children":5147},{},[5148],{"type":33,"value":5149},"把导出的 HTML 交给一个没参与制作的人，看他能不能在 10 分钟内找到：",{"type":28,"tag":36,"props":5151,"children":5152},{},[5153,5158,5163,5168],{"type":28,"tag":40,"props":5154,"children":5155},{},[5156],{"type":33,"value":5157},"主标题",{"type":28,"tag":40,"props":5159,"children":5160},{},[5161],{"type":33,"value":5162},"主 CTA",{"type":28,"tag":40,"props":5164,"children":5165},{},[5166],{"type":33,"value":5167},"表单位置",{"type":28,"tag":40,"props":5169,"children":5170},{},[5171],{"type":33,"value":5172},"页脚联系方式",{"type":28,"tag":29,"props":5174,"children":5175},{},[5176],{"type":33,"value":5177},"如果都很难找到，说明页面结构不只是“代码不优雅”，而是后续维护成本会持续升高。",{"type":28,"tag":254,"props":5179,"children":5180},{},[],{"type":28,"tag":119,"props":5182,"children":5184},{"id":5183},"七失败案例导出页上线后首屏慢表单数据又被第三方脚本读取",[5185],{"type":33,"value":5186},"七、失败案例：导出页上线后首屏慢、表单数据又被第三方脚本读取",{"type":28,"tag":29,"props":5188,"children":5189},{},[5190],{"type":33,"value":5191},"这是网页编辑器项目里很典型的一类事故。",{"type":28,"tag":269,"props":5193,"children":5194},{"id":897},[5195],{"type":33,"value":897},{"type":28,"tag":36,"props":5197,"children":5198},{},[5199,5204,5209],{"type":28,"tag":40,"props":5200,"children":5201},{},[5202],{"type":33,"value":5203},"页面上线后首屏明显变慢",{"type":28,"tag":40,"props":5205,"children":5206},{},[5207],{"type":33,"value":5208},"用户点击和输入被多个第三方脚本监听",{"type":28,"tag":40,"props":5210,"children":5211},{},[5212],{"type":33,"value":5213},"表单提交能用，但团队不确定数据是否被过度采集",{"type":28,"tag":269,"props":5215,"children":5216},{"id":920},[5217],{"type":33,"value":920},{"type":28,"tag":29,"props":5219,"children":5220},{},[5221],{"type":33,"value":5222},"事后回看，问题通常出在三处：",{"type":28,"tag":929,"props":5224,"children":5225},{},[5226,5231,5236],{"type":28,"tag":40,"props":5227,"children":5228},{},[5229],{"type":33,"value":5230},"导出时保留了不必要的统计与聊天脚本",{"type":28,"tag":40,"props":5232,"children":5233},{},[5234],{"type":33,"value":5235},"首屏主图没有压缩，且尺寸远超实际展示需求",{"type":28,"tag":40,"props":5237,"children":5238},{},[5239],{"type":33,"value":5240},"上线前没有做依赖和隐私审计，只做了视觉走查",{"type":28,"tag":269,"props":5242,"children":5243},{"id":949},[5244],{"type":33,"value":949},{"type":28,"tag":29,"props":5246,"children":5247},{},[5248],{"type":33,"value":956},{"type":28,"tag":929,"props":5250,"children":5251},{},[5252,5257,5262,5267,5272],{"type":28,"tag":40,"props":5253,"children":5254},{},[5255],{"type":33,"value":5256},"列出导出页依赖的全部外链脚本",{"type":28,"tag":40,"props":5258,"children":5259},{},[5260],{"type":33,"value":5261},"删除非关键脚本，保留最小必要集合",{"type":28,"tag":40,"props":5263,"children":5264},{},[5265],{"type":33,"value":5266},"压缩首屏图并确认尺寸策略",{"type":28,"tag":40,"props":5268,"children":5269},{},[5270],{"type":33,"value":5271},"检查表单字段、埋点与隐私说明是否一致",{"type":28,"tag":40,"props":5273,"children":5274},{},[5275],{"type":33,"value":5276},"再做一次页面级性能与 SEO 检查",{"type":28,"tag":269,"props":5278,"children":5280},{"id":5279},"回归要点",[5281],{"type":33,"value":5279},{"type":28,"tag":36,"props":5283,"children":5284},{},[5285,5290,5295,5300],{"type":28,"tag":40,"props":5286,"children":5287},{},[5288],{"type":33,"value":5289},"页面首屏是否恢复在可接受范围",{"type":28,"tag":40,"props":5291,"children":5292},{},[5293],{"type":33,"value":5294},"非必要第三方脚本是否已被移除",{"type":28,"tag":40,"props":5296,"children":5297},{},[5298],{"type":33,"value":5299},"表单链路是否仍然正常",{"type":28,"tag":40,"props":5301,"children":5302},{},[5303],{"type":33,"value":5304},"隐私政策与联系方式是否保持一致",{"type":28,"tag":29,"props":5306,"children":5307},{},[5308],{"type":33,"value":5309},"这类事故最说明一个事实：",{"type":28,"tag":29,"props":5311,"children":5312},{},[5313],{"type":28,"tag":735,"props":5314,"children":5315},{},[5316],{"type":33,"value":5317},"网页编辑器的问题往往不是“做不出来”，而是“做出来以后没人替它做工程审计”。",{"type":28,"tag":254,"props":5319,"children":5320},{},[],{"type":28,"tag":119,"props":5322,"children":5324},{"id":5323},"八你可以直接照做的导出页审计-checklist",[5325],{"type":33,"value":5326},"八、你可以直接照做的导出页审计 Checklist",{"type":28,"tag":36,"props":5328,"children":5330},{"className":5329},[996],[5331,5340,5349,5358,5367,5376,5385],{"type":28,"tag":40,"props":5332,"children":5334},{"className":5333},[1001],[5335,5338],{"type":28,"tag":1004,"props":5336,"children":5337},{"disabled":1006,"type":1007},[],{"type":33,"value":5339}," 已列出全部 CSS、JS、图片、字体和 CDN 依赖",{"type":28,"tag":40,"props":5341,"children":5343},{"className":5342},[1001],[5344,5347],{"type":28,"tag":1004,"props":5345,"children":5346},{"disabled":1006,"type":1007},[],{"type":33,"value":5348}," 不清楚用途的第三方脚本已被核实或移除",{"type":28,"tag":40,"props":5350,"children":5352},{"className":5351},[1001],[5353,5356],{"type":28,"tag":1004,"props":5354,"children":5355},{"disabled":1006,"type":1007},[],{"type":33,"value":5357}," 表单、埋点和隐私相关字段已确认无过度采集",{"type":28,"tag":40,"props":5359,"children":5361},{"className":5360},[1001],[5362,5365],{"type":28,"tag":1004,"props":5363,"children":5364},{"disabled":1006,"type":1007},[],{"type":33,"value":5366}," 首屏图片、非首屏图片和字体资源已做性能检查",{"type":28,"tag":40,"props":5368,"children":5370},{"className":5369},[1001],[5371,5374],{"type":28,"tag":1004,"props":5372,"children":5373},{"disabled":1006,"type":1007},[],{"type":33,"value":5375}," 页面标题层级、meta、alt 和链接结构已完成 SEO 审计",{"type":28,"tag":40,"props":5377,"children":5379},{"className":5378},[1001],[5380,5383],{"type":28,"tag":1004,"props":5381,"children":5382},{"disabled":1006,"type":1007},[],{"type":33,"value":5384}," 编辑器残留属性、冗余结构和资源目录已做可维护性检查",{"type":28,"tag":40,"props":5386,"children":5388},{"className":5387},[1001],[5389,5392],{"type":28,"tag":1004,"props":5390,"children":5391},{"disabled":1006,"type":1007},[],{"type":33,"value":5393}," 上线前至少做过一次“依赖 + 隐私 + 性能 + SEO”的完整走查",{"type":28,"tag":254,"props":5395,"children":5396},{},[],{"type":28,"tag":119,"props":5398,"children":5399},{"id":1061},[5400],{"type":33,"value":1061},{"type":28,"tag":29,"props":5402,"children":5403},{},[5404],{"type":33,"value":5405},"网页编辑器真正难的从来不是把页面拖出来，而是让这个页面在上线后仍然：",{"type":28,"tag":929,"props":5407,"children":5408},{},[5409,5414,5419,5424],{"type":28,"tag":40,"props":5410,"children":5411},{},[5412],{"type":33,"value":5413},"能跑",{"type":28,"tag":40,"props":5415,"children":5416},{},[5417],{"type":33,"value":5418},"能被搜到",{"type":28,"tag":40,"props":5420,"children":5421},{},[5422],{"type":33,"value":5423},"能改",{"type":28,"tag":40,"props":5425,"children":5426},{},[5427],{"type":33,"value":5428},"不泄露不必要的信息",{"type":28,"tag":29,"props":5430,"children":5431},{},[5432],{"type":33,"value":5433},"所以导出后的 HTML 最好不要被当成“最终产物”，而应该被当成“待审计的交付件”。",{"type":28,"tag":29,"props":5435,"children":5436},{},[5437],{"type":33,"value":5438},"只要把依赖、隐私、性能、SEO 和可维护性这 5 层过一遍，很多上线后的低级事故都能提前挡住。",{"type":28,"tag":119,"props":5440,"children":5441},{"id":1104},[5442],{"type":33,"value":1104},{"type":28,"tag":36,"props":5444,"children":5445},{},[5446,5453,5460,5467,5474,5481],{"type":28,"tag":40,"props":5447,"children":5448},{},[5449],{"type":28,"tag":94,"props":5450,"children":5451},{"href":96},[5452],{"type":33,"value":99},{"type":28,"tag":40,"props":5454,"children":5455},{},[5456],{"type":28,"tag":94,"props":5457,"children":5458},{"href":2145},[5459],{"type":33,"value":2148},{"type":28,"tag":40,"props":5461,"children":5462},{},[5463],{"type":28,"tag":94,"props":5464,"children":5465},{"href":4958},[5466],{"type":33,"value":4961},{"type":28,"tag":40,"props":5468,"children":5469},{},[5470],{"type":28,"tag":94,"props":5471,"children":5472},{"href":112},[5473],{"type":33,"value":115},{"type":28,"tag":40,"props":5475,"children":5476},{},[5477],{"type":28,"tag":94,"props":5478,"children":5479},{"href":759},[5480],{"type":33,"value":762},{"type":28,"tag":40,"props":5482,"children":5483},{},[5484,5488,5490],{"type":28,"tag":94,"props":5485,"children":5486},{"href":3981},[5487],{"type":33,"value":3984},{"type":33,"value":5489},"---\ntitle: \"网页编辑器导出 HTML 后怎么审计：依赖、隐私、性能与结构的完整清单\"\ndescription: \"网页编辑器导出的 HTML 不是能打开就算完成，真正要检查的是外链依赖、隐私风险、结构质量和发布可控性。本文给出一套导出后必须做的代码审计流程。\"\ndate: 2026-03-11\ntopic: about-html\nauthor: HTMLPAGE 团队\ntags:\n",{"type":28,"tag":36,"props":5491,"children":5492},{},[5493,5497,5501,5506,5510],{"type":28,"tag":40,"props":5494,"children":5495},{},[5496],{"type":33,"value":13},{"type":28,"tag":40,"props":5498,"children":5499},{},[5500],{"type":33,"value":3884},{"type":28,"tag":40,"props":5502,"children":5503},{},[5504],{"type":33,"value":5505},"导出代码",{"type":28,"tag":40,"props":5507,"children":5508},{},[5509],{"type":33,"value":3886},{"type":28,"tag":40,"props":5511,"children":5512},{},[5513,5515,5521],{"type":33,"value":5514},"性能优化\nimage: \"/images/articles/web-editor-html-code-audit-checklist-featured.jpg\"\nimageAlt: \"桌面上摆着笔记本和文件清单，代表网页导出代码的审计检查工作\"\npexelsPhotoId: 8962476\npexelsUrl: \"",{"type":28,"tag":94,"props":5516,"children":5519},{"href":3891,"rel":5517},[5518],"nofollow",[5520],{"type":33,"value":3891},{"type":33,"value":5522},"\"\nfeatured: false\nreadingTime: 16",{"type":28,"tag":254,"props":5524,"children":5525},{},[],{"type":28,"tag":29,"props":5527,"children":5528},{},[5529],{"type":33,"value":5530},"网页编辑器的价值，在于让页面更快成形；但导出 HTML 之后，真正决定它能不能上线的，是审计。",{"type":28,"tag":29,"props":5532,"children":5533},{},[5534],{"type":33,"value":5535},"如果你跳过这一步，最容易出现的问题不是“页面打不开”，而是：",{"type":28,"tag":36,"props":5537,"children":5538},{},[5539,5544,5549,5554],{"type":28,"tag":40,"props":5540,"children":5541},{},[5542],{"type":33,"value":5543},"带着未知外链资源上线",{"type":28,"tag":40,"props":5545,"children":5546},{},[5547],{"type":33,"value":5548},"埋进不必要的统计或第三方脚本",{"type":28,"tag":40,"props":5550,"children":5551},{},[5552],{"type":33,"value":5553},"图片、字体、脚本顺序拖慢首屏",{"type":28,"tag":40,"props":5555,"children":5556},{},[5557],{"type":33,"value":5558},"结构混乱，后续很难二次开发",{"type":28,"tag":29,"props":5560,"children":5561},{},[5562,5564,5570,5571,5577,5578,5582,5583,5589],{"type":33,"value":5563},"建议配合阅读 ",{"type":28,"tag":94,"props":5565,"children":5567},{"href":5566},"/about-html/visual-editor-output-quality-audit",[5568],{"type":33,"value":5569},"可视化编辑器输出质量审计",{"type":33,"value":101},{"type":28,"tag":94,"props":5572,"children":5574},{"href":5573},"/about-html/html-formatting-validation-playbook",[5575],{"type":33,"value":5576},"HTML 格式化与校验清单",{"type":33,"value":101},{"type":28,"tag":94,"props":5579,"children":5580},{"href":1115},[5581],{"type":33,"value":3274},{"type":33,"value":109},{"type":28,"tag":94,"props":5584,"children":5586},{"href":5585},"/topics/security-hardening-best-practices",[5587],{"type":33,"value":5588},"安全加固最佳实践",{"type":33,"value":117},{"type":28,"tag":254,"props":5591,"children":5592},{},[],{"type":28,"tag":119,"props":5594,"children":5596},{"id":5595},"先给结论导出-html-至少要过-4-道门",[5597],{"type":33,"value":5598},"先给结论：导出 HTML 至少要过 4 道门",{"type":28,"tag":29,"props":5600,"children":5601},{},[5602],{"type":33,"value":5603},"一份准备上线的导出代码，至少要完成下面四类检查：",{"type":28,"tag":929,"props":5605,"children":5606},{},[5607,5612,5617,5622],{"type":28,"tag":40,"props":5608,"children":5609},{},[5610],{"type":33,"value":5611},"依赖清单",{"type":28,"tag":40,"props":5613,"children":5614},{},[5615],{"type":33,"value":5616},"隐私与外链审计",{"type":28,"tag":40,"props":5618,"children":5619},{},[5620],{"type":33,"value":5621},"结构与语义审计",{"type":28,"tag":40,"props":5623,"children":5624},{},[5625],{"type":33,"value":5626},"性能与发布审计",{"type":28,"tag":29,"props":5628,"children":5629},{},[5630],{"type":33,"value":5631},"只有这四项都过线，导出结果才算“可交付”，否则它只是“可预览”。",{"type":28,"tag":119,"props":5633,"children":5635},{"id":5634},"一依赖清单先搞清楚页面到底依赖了什么",[5636],{"type":33,"value":5637},"一、依赖清单：先搞清楚页面到底依赖了什么",{"type":28,"tag":29,"props":5639,"children":5640},{},[5641],{"type":33,"value":5642},"很多网页编辑器会在导出时自动带上：",{"type":28,"tag":36,"props":5644,"children":5645},{},[5646,5651,5656,5661,5666],{"type":28,"tag":40,"props":5647,"children":5648},{},[5649],{"type":33,"value":5650},"字体 CDN",{"type":28,"tag":40,"props":5652,"children":5653},{},[5654],{"type":33,"value":5655},"图标库",{"type":28,"tag":40,"props":5657,"children":5658},{},[5659],{"type":33,"value":5660},"动画库",{"type":28,"tag":40,"props":5662,"children":5663},{},[5664],{"type":33,"value":5665},"轮播插件",{"type":28,"tag":40,"props":5667,"children":5668},{},[5669],{"type":33,"value":4400},{"type":28,"tag":29,"props":5671,"children":5672},{},[5673],{"type":33,"value":5674},"最危险的地方在于：这些依赖经常不是你显式加的，而是模板或编辑器默认带出来的。",{"type":28,"tag":269,"props":5676,"children":5678},{"id":5677},"第一轮就该拉出来的清单",[5679],{"type":33,"value":5677},{"type":28,"tag":126,"props":5681,"children":5682},{},[5683,5698],{"type":28,"tag":130,"props":5684,"children":5685},{},[5686],{"type":28,"tag":134,"props":5687,"children":5688},{},[5689,5693],{"type":28,"tag":138,"props":5690,"children":5691},{},[5692],{"type":33,"value":5029},{"type":28,"tag":138,"props":5694,"children":5695},{},[5696],{"type":33,"value":5697},"为什么重要",{"type":28,"tag":154,"props":5699,"children":5700},{},[5701,5714,5727,5740],{"type":28,"tag":134,"props":5702,"children":5703},{},[5704,5709],{"type":28,"tag":161,"props":5705,"children":5706},{},[5707],{"type":33,"value":5708},"CSS 来源",{"type":28,"tag":161,"props":5710,"children":5711},{},[5712],{"type":33,"value":5713},"防止未知样式污染或失联",{"type":28,"tag":134,"props":5715,"children":5716},{},[5717,5722],{"type":28,"tag":161,"props":5718,"children":5719},{},[5720],{"type":33,"value":5721},"JS 来源",{"type":28,"tag":161,"props":5723,"children":5724},{},[5725],{"type":33,"value":5726},"防止不必要脚本拖慢首屏",{"type":28,"tag":134,"props":5728,"children":5729},{},[5730,5735],{"type":28,"tag":161,"props":5731,"children":5732},{},[5733],{"type":33,"value":5734},"字体来源",{"type":28,"tag":161,"props":5736,"children":5737},{},[5738],{"type":33,"value":5739},"防止外部字体阻塞与隐私风险",{"type":28,"tag":134,"props":5741,"children":5742},{},[5743,5748],{"type":28,"tag":161,"props":5744,"children":5745},{},[5746],{"type":33,"value":5747},"图片与媒体来源",{"type":28,"tag":161,"props":5749,"children":5750},{},[5751],{"type":33,"value":5752},"防止热链和资源失控",{"type":28,"tag":29,"props":5754,"children":5755},{},[5756],{"type":33,"value":5757},"没有这张清单，你就不知道页面上线后究竟依赖了多少外部服务。",{"type":28,"tag":119,"props":5759,"children":5761},{"id":5760},"二隐私与外链审计这一步最容易被忽略",[5762],{"type":33,"value":5763},"二、隐私与外链审计：这一步最容易被忽略",{"type":28,"tag":29,"props":5765,"children":5766},{},[5767],{"type":33,"value":5768},"很多导出页面会残留：",{"type":28,"tag":36,"props":5770,"children":5771},{},[5772,5777,5782,5787],{"type":28,"tag":40,"props":5773,"children":5774},{},[5775],{"type":33,"value":5776},"模板作者的演示链接",{"type":28,"tag":40,"props":5778,"children":5779},{},[5780],{"type":33,"value":5781},"第三方统计像素",{"type":28,"tag":40,"props":5783,"children":5784},{},[5785],{"type":33,"value":5786},"热链图片",{"type":28,"tag":40,"props":5788,"children":5789},{},[5790],{"type":33,"value":5791},"外部字体或脚本源",{"type":28,"tag":29,"props":5793,"children":5794},{},[5795],{"type":33,"value":5796},"这些内容短期内可能不影响展示，但长期有四种风险：",{"type":28,"tag":929,"props":5798,"children":5799},{},[5800,5805,5810,5815],{"type":28,"tag":40,"props":5801,"children":5802},{},[5803],{"type":33,"value":5804},"资源被对方撤掉",{"type":28,"tag":40,"props":5806,"children":5807},{},[5808],{"type":33,"value":5809},"用户数据被第三方带走",{"type":28,"tag":40,"props":5811,"children":5812},{},[5813],{"type":33,"value":5814},"页面加载变慢",{"type":28,"tag":40,"props":5816,"children":5817},{},[5818],{"type":33,"value":5819},"合规风险上升",{"type":28,"tag":269,"props":5821,"children":5823},{"id":5822},"审计顺序建议",[5824],{"type":33,"value":5822},{"type":28,"tag":929,"props":5826,"children":5827},{},[5828,5833,5838,5843],{"type":28,"tag":40,"props":5829,"children":5830},{},[5831],{"type":33,"value":5832},"先查所有外链域名",{"type":28,"tag":40,"props":5834,"children":5835},{},[5836],{"type":33,"value":5837},"再查脚本是否真正需要",{"type":28,"tag":40,"props":5839,"children":5840},{},[5841],{"type":33,"value":5842},"再把能本地化的资源本地化",{"type":28,"tag":40,"props":5844,"children":5845},{},[5846],{"type":33,"value":5847},"最后确认隐私政策与统计说明是否匹配",{"type":28,"tag":119,"props":5849,"children":5851},{"id":5850},"三结构审计判断这份代码能不能被人继续维护",[5852],{"type":33,"value":5853},"三、结构审计：判断这份代码能不能被人继续维护",{"type":28,"tag":29,"props":5855,"children":5856},{},[5857],{"type":33,"value":5858},"判断导出 HTML 的结构质量，重点看：",{"type":28,"tag":36,"props":5860,"children":5861},{},[5862,5875,5880,5885],{"type":28,"tag":40,"props":5863,"children":5864},{},[5865,5867,5873],{"type":33,"value":5866},"是否全是 ",{"type":28,"tag":438,"props":5868,"children":5870},{"className":5869},[],[5871],{"type":33,"value":5872},"div",{"type":33,"value":5874}," 套娃",{"type":28,"tag":40,"props":5876,"children":5877},{},[5878],{"type":33,"value":5879},"是否有明确的主内容区域",{"type":28,"tag":40,"props":5881,"children":5882},{},[5883],{"type":33,"value":5884},"标题层级是否连续",{"type":28,"tag":40,"props":5886,"children":5887},{},[5888],{"type":33,"value":5889},"表单、按钮、链接是否使用正确语义",{"type":28,"tag":29,"props":5891,"children":5892},{},[5893,5895,5900],{"type":33,"value":5894},"这一步和 ",{"type":28,"tag":94,"props":5896,"children":5897},{"href":4958},[5898],{"type":33,"value":5899},"语义化 HTML 与可访问性",{"type":33,"value":5901}," 是连在一起的。结构混乱不仅影响 SEO，也会让任何二次开发成本迅速升高。",{"type":28,"tag":119,"props":5903,"children":5905},{"id":5904},"四性能审计不要把编辑器演示环境的能跑当成线上性能",[5906],{"type":33,"value":5907},"四、性能审计：不要把编辑器演示环境的“能跑”当成线上性能",{"type":28,"tag":29,"props":5909,"children":5910},{},[5911],{"type":33,"value":5912},"导出页面经常存在这些问题：",{"type":28,"tag":36,"props":5914,"children":5915},{},[5916,5921,5926,5931],{"type":28,"tag":40,"props":5917,"children":5918},{},[5919],{"type":33,"value":5920},"图片体积过大",{"type":28,"tag":40,"props":5922,"children":5923},{},[5924],{"type":33,"value":5925},"首屏引入过多 JS",{"type":28,"tag":40,"props":5927,"children":5928},{},[5929],{"type":33,"value":5930},"多个库重复做同一件事",{"type":28,"tag":40,"props":5932,"children":5933},{},[5934],{"type":33,"value":5935},"字体和样式阻塞关键渲染",{"type":28,"tag":269,"props":5937,"children":5939},{"id":5938},"最低性能审计要求",[5940],{"type":33,"value":5938},{"type":28,"tag":36,"props":5942,"children":5943},{},[5944,5949,5954,5959],{"type":28,"tag":40,"props":5945,"children":5946},{},[5947],{"type":33,"value":5948},"首屏关键图片压缩并预留尺寸",{"type":28,"tag":40,"props":5950,"children":5951},{},[5952],{"type":33,"value":5953},"非必要脚本延后加载",{"type":28,"tag":40,"props":5955,"children":5956},{},[5957],{"type":33,"value":5958},"删除未使用的动画与轮播资源",{"type":28,"tag":40,"props":5960,"children":5961},{},[5962],{"type":33,"value":5963},"控制外部请求数量",{"type":28,"tag":119,"props":5965,"children":5967},{"id":5966},"五上线与回滚别等上线之后才知道资源路径有问题",[5968],{"type":33,"value":5969},"五、上线与回滚：别等上线之后才知道资源路径有问题",{"type":28,"tag":29,"props":5971,"children":5972},{},[5973],{"type":33,"value":5974},"导出代码常见的发布风险包括：",{"type":28,"tag":36,"props":5976,"children":5977},{},[5978,5983,5988],{"type":28,"tag":40,"props":5979,"children":5980},{},[5981],{"type":33,"value":5982},"本地相对路径上线后失效",{"type":28,"tag":40,"props":5984,"children":5985},{},[5986],{"type":33,"value":5987},"测试环境可用、正式环境 404",{"type":28,"tag":40,"props":5989,"children":5990},{},[5991],{"type":33,"value":5992},"CDN 缓存导致旧资源未清",{"type":28,"tag":29,"props":5994,"children":5995},{},[5996],{"type":33,"value":5997},"所以审计完成后，至少要在预发布环境验证：",{"type":28,"tag":36,"props":5999,"children":6000},{},[6001,6006,6011,6016],{"type":28,"tag":40,"props":6002,"children":6003},{},[6004],{"type":33,"value":6005},"所有静态资源都能正常加载",{"type":28,"tag":40,"props":6007,"children":6008},{},[6009],{"type":33,"value":6010},"表单与按钮交互有效",{"type":28,"tag":40,"props":6012,"children":6013},{},[6014],{"type":33,"value":6015},"控制台无明显错误",{"type":28,"tag":40,"props":6017,"children":6018},{},[6019],{"type":33,"value":6020},"回滚版本可用",{"type":28,"tag":119,"props":6022,"children":6024},{"id":6023},"一个典型失败案例页面导出来了第二天图片全挂了",[6025],{"type":33,"value":6026},"一个典型失败案例：页面导出来了，第二天图片全挂了",{"type":28,"tag":29,"props":6028,"children":6029},{},[6030],{"type":33,"value":6031},"原因往往不是图片本身，而是用了模板演示站的热链地址。发布当天能显示，几天后资源被限流或删除，页面就会大面积失真。",{"type":28,"tag":29,"props":6033,"children":6034},{},[6035],{"type":33,"value":6036},"根本解决方式不是“换几张图”，而是导出后统一做资源归档和本地化处理。",{"type":28,"tag":119,"props":6038,"children":6040},{"id":6039},"html-导出审计清单",[6041],{"type":33,"value":6042},"HTML 导出审计清单",{"type":28,"tag":36,"props":6044,"children":6046},{"className":6045},[996],[6047,6056,6065,6074,6083,6092,6101],{"type":28,"tag":40,"props":6048,"children":6050},{"className":6049},[1001],[6051,6054],{"type":28,"tag":1004,"props":6052,"children":6053},{"disabled":1006,"type":1007},[],{"type":33,"value":6055}," 是否列出全部外部 CSS、JS、字体和图片来源",{"type":28,"tag":40,"props":6057,"children":6059},{"className":6058},[1001],[6060,6063],{"type":28,"tag":1004,"props":6061,"children":6062},{"disabled":1006,"type":1007},[],{"type":33,"value":6064}," 是否清理了无关统计、演示脚本与模板残留链接",{"type":28,"tag":40,"props":6066,"children":6068},{"className":6067},[1001],[6069,6072],{"type":28,"tag":1004,"props":6070,"children":6071},{"disabled":1006,"type":1007},[],{"type":33,"value":6073}," 是否检查了结构语义与标题层级",{"type":28,"tag":40,"props":6075,"children":6077},{"className":6076},[1001],[6078,6081],{"type":28,"tag":1004,"props":6079,"children":6080},{"disabled":1006,"type":1007},[],{"type":33,"value":6082}," 是否压缩并本地化关键图片与字体资源",{"type":28,"tag":40,"props":6084,"children":6086},{"className":6085},[1001],[6087,6090],{"type":28,"tag":1004,"props":6088,"children":6089},{"disabled":1006,"type":1007},[],{"type":33,"value":6091}," 是否确认资源路径在预发布环境可用",{"type":28,"tag":40,"props":6093,"children":6095},{"className":6094},[1001],[6096,6099],{"type":28,"tag":1004,"props":6097,"children":6098},{"disabled":1006,"type":1007},[],{"type":33,"value":6100}," 是否验证表单、按钮和导航交互正常",{"type":28,"tag":40,"props":6102,"children":6104},{"className":6103},[1001],[6105,6108],{"type":28,"tag":1004,"props":6106,"children":6107},{"disabled":1006,"type":1007},[],{"type":33,"value":6109}," 是否准备了回滚版本和旧资源保留策略",{"type":28,"tag":119,"props":6111,"children":6113},{"id":6112},"延伸阅读-1",[6114],{"type":33,"value":1104},{"type":28,"tag":36,"props":6116,"children":6117},{},[6118,6125,6132,6139],{"type":28,"tag":40,"props":6119,"children":6120},{},[6121],{"type":28,"tag":94,"props":6122,"children":6123},{"href":5566},[6124],{"type":33,"value":5569},{"type":28,"tag":40,"props":6126,"children":6127},{},[6128],{"type":28,"tag":94,"props":6129,"children":6130},{"href":5573},[6131],{"type":33,"value":5576},{"type":28,"tag":40,"props":6133,"children":6134},{},[6135],{"type":28,"tag":94,"props":6136,"children":6137},{"href":1115},[6138],{"type":33,"value":3274},{"type":28,"tag":40,"props":6140,"children":6141},{},[6142],{"type":28,"tag":94,"props":6143,"children":6144},{"href":5585},[6145],{"type":33,"value":5588},{"title":7,"searchDepth":1141,"depth":1141,"links":6147},[6148,6149,6153,6158,6166,6171,6179,6183,6189,6190,6191,6192,6193,6196,6199,6200,6203,6204,6205,6206],{"id":3988,"depth":1144,"text":3991},{"id":4137,"depth":1144,"text":4140,"children":6150},[6151,6152],{"id":4153,"depth":1141,"text":4156},{"id":4182,"depth":1141,"text":4185},{"id":4237,"depth":1144,"text":4240,"children":6154},[6155,6156,6157],{"id":4248,"depth":1141,"text":4251},{"id":4277,"depth":1141,"text":4277},{"id":4380,"depth":1141,"text":4380},{"id":4431,"depth":1144,"text":4434,"children":6159},[6160,6161],{"id":4465,"depth":1141,"text":4465},{"id":4568,"depth":1141,"text":4571,"children":6162},[6163,6164,6165],{"id":4574,"depth":1158,"text":4577},{"id":4603,"depth":1158,"text":4606},{"id":4632,"depth":1158,"text":4635},{"id":4657,"depth":1144,"text":4660,"children":6167},[6168,6169,6170],{"id":4680,"depth":1141,"text":4680},{"id":4699,"depth":1141,"text":4699},{"id":728,"depth":1141,"text":728},{"id":4847,"depth":1144,"text":4850,"children":6172},[6173,6174],{"id":4858,"depth":1141,"text":4861},{"id":4897,"depth":1141,"text":4897,"children":6175},[6176,6177,6178],{"id":4902,"depth":1158,"text":4905},{"id":4913,"depth":1158,"text":4916},{"id":4942,"depth":1158,"text":4945},{"id":4983,"depth":1144,"text":4986,"children":6180},[6181,6182],{"id":5012,"depth":1141,"text":5015},{"id":5142,"depth":1141,"text":5142},{"id":5183,"depth":1144,"text":5186,"children":6184},[6185,6186,6187,6188],{"id":897,"depth":1141,"text":897},{"id":920,"depth":1141,"text":920},{"id":949,"depth":1141,"text":949},{"id":5279,"depth":1141,"text":5279},{"id":5323,"depth":1144,"text":5326},{"id":1061,"depth":1144,"text":1061},{"id":1104,"depth":1144,"text":1104},{"id":5595,"depth":1144,"text":5598},{"id":5634,"depth":1144,"text":5637,"children":6194},[6195],{"id":5677,"depth":1141,"text":5677},{"id":5760,"depth":1144,"text":5763,"children":6197},[6198],{"id":5822,"depth":1141,"text":5822},{"id":5850,"depth":1144,"text":5853},{"id":5904,"depth":1144,"text":5907,"children":6201},[6202],{"id":5938,"depth":1141,"text":5938},{"id":5966,"depth":1144,"text":5969},{"id":6023,"depth":1144,"text":6026},{"id":6039,"depth":1144,"text":6042},{"id":6112,"depth":1144,"text":1104},"content:about-html:web-editor-html-code-audit-checklist.md","about-html/web-editor-html-code-audit-checklist.md","about-html/web-editor-html-code-audit-checklist",1778637700309]