主内容必须写在HTML结构最前面，这是实现内容优先加载的唯一不可妥协规则；无论CSS如何调整视觉顺序，DOM顺序决定加载、SEO和无障碍访问优先级。
双栏布局要实现内容优先加载，核心不是选什么 CSS 技术，而是把主内容对应的 HTML 元素写在 DOM 最前面——浏览器按顺序解析、下载、渲染，谁在前谁先加载。
主内容必须写在 HTML 结构最前面
这是所有方案的前提，也是唯一不可妥协的规则。哪怕你用 grid 或 flex 把视觉顺序调得再漂亮，如果 <main></main> 写在 <aside></aside> 后面，搜索引擎、读屏器、弱网用户看到的永远是次要信息。
- 正确结构：
<main>这里是正文</main><aside>这是侧边栏</aside> - 错误结构：
<aside>侧边栏</aside><main>正文</main>（即使 CSS 让main显示在左/上，加载顺序也不变） - 别依赖 JS 动态插入主内容：弱网下 JS 加载慢，
main可能几秒后才出现，首屏就是白屏或骨架屏 - 如果用 SSR 或静态生成，确保输出的 HTML 字符串里
main真的排第一，而不是模板里写在后面、靠order或grid-area挪上去
用 grid-template-areas 做视觉重排最稳
它能把 DOM 顺序和视觉顺序彻底解耦，不依赖 order、不触发重排抖动，兼容性也够（Chrome 57+/Firefox 52+/Safari 10.1+）。
- 父容器必须声明：
display: grid和grid-template-columns: 240px 1fr（左栏固定，右栏自适应） -
grid-template-areas每行引号内单词数要一致，拼写必须和子元素的grid-area值**完全一致**，比如："sidebar main"对应grid-area: sidebar和grid-area: main - 中间栏（主内容）设
grid-area: main，哪怕它在 HTML 里写在第一行，也能靠grid-template-areas: "sidebar main"让它显示在右边 - 小屏响应式只需改
grid-template-areas: "main" "sidebar"，不用动 HTML 结构
Flex 实现时 order 值极易出错
看似简单，但 order 是全局排序值，嵌套、动态插入、旧版 Safari 都可能让它失效。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
-
main必须设order: -1（最小值），aside设order: 1，不能都用0 - 父容器若设了
flex-direction: column，order就按垂直方向排，三栏直接变上下堆叠 - 所有子项必须显式设
flex-basis，比如flex: 0 0 240px，只写width: 240px在某些浏览器里会被忽略 - Safari 13.1 之前对
order计算有偏差，需加-webkit-order兼容
绝对定位 / 浮动方案现在只剩维护价值
它们能实现视觉效果，但加载优先级完全靠 HTML 顺序硬控，且易塌陷、难响应、无语义。
- 浮动方案中，
main必须写在aside后面才能“挤进中间”，这直接违背优先加载原则——所以实际只能用绝对定位 +margin撑空间，但主内容仍得写最前 - 绝对定位的
aside脱离文档流，main的margin-left必须精确匹配左栏宽度，否则小屏下会重叠或留白 - IE10 及以下不支持
flex和grid，但这类环境现在基本只出现在国产浏览器的 IE 内核模式里，新项目无需主动兼容
真正容易被忽略的是：DOM 顺序一旦写错，所有 CSS 重排都救不回加载优先级。很多人花半天调 grid-area，却没检查 HTML 里 main 是不是真在第一行——打开浏览器源码视图，Ctrl+F 搜 <main>，确认它出现在任何 <code><aside> 或 <code><nav> 之前，这事才算落地。</nav>
