使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

直接改html结构本身不触发重排，但深层嵌套（如文本）、非法嵌套（如hello生成冗余节点）、ui框架wrapper及布局会显著放大重排影响范围，因浏览器需沿祖先链逐层回溯计算，导致局部变更扩散至整棵子树甚至body级重排。

直接改 HTML 结构本身不会触发重排，但结构设计决定了后续 JS 操作和 CSS 变更的重排代价——多数卡顿不是出在“改了什么”，而是“在哪改、怎么改”。

哪些 HTML 嵌套会放大重排影响范围

浏览器计算 offsetTop 或响应子元素变更时，必须沿祖先链逐层回溯。每多一层无意义 div，就多一次布局上下文检查和继承链推导。

• <div><div><div><p>文本</p></div></div></div> 应简化为 <p>文本</p>，除非语义或样式强依赖嵌套
• 警惕 UI 框架自动生成的 wrapper，比如 <div data-v-xxx>，用 DevTools 的 Layers 面板观察是否形成碎片化渲染子树 <li> <code>display: contents 可让父容器“消失”在渲染树中，子元素直接受外层 flex/grid 控制（Safari 15.4+、Chrome 56+ 支持，IE 不支持）
• 非法嵌套如 <p></p> <div>hello</div> 会被浏览器自动拆解，生成冗余空 <p></p> 节点，拉长祖先链，导致重排扩散到 body

table 布局为什么是重排黑洞

table 及其 display: table-cell 等相关值无法局部优化：一个单元格内容变长，可能迫使整行甚至整表重新计算列宽、对齐和换行。

• 用 flex 或 grid 替代表格布局，二者支持独立轴向伸缩，重排影响可控
• 若必须兼容老系统且用 table，所有 td 必须设固定 width 和 white-space: nowrap，否则内容撑开会连锁触发重排
• 避免在 table 内部动态插入/删除 tr 或 td —— 这类操作几乎必然触发全表重排
• table-layout: fixed 仅在显式声明 <col> 或所有 td 有固定宽时生效；未包裹 <tbody> 会导致浏览器补全匿名对象，破坏列宽锁定 <h3>如何用 <code>contain 截断重排传播链

  contain: layout paint style 是 HTML 层面最直接的“划界”手段，告诉浏览器：“这个区域内部的变化，别往上影响，也别让外面干扰它。”

  • 给卡片容器加 style="contain: layout paint;"，即使内部 JS 动态改高宽，也不会导致 header 或 body 重排
  • 慎用 contain: strict：它会禁用部分继承和查询，例如 getComputedStyle() 对某些属性返回空值
  • 兼容性需确认：Chrome 56+、Firefox 69+、Safari 15.4+ 支持；Edge 已随 Chromium 统一
  • 不要全局加：每个 contain 都会创建独立渲染子树，大量使用反而增加内存开销和纹理上传耗时

  为什么 class 切换比内联 style 更高效

  内联样式（el.style.color = 'red'）会覆盖 CSSOM 中的 cascade 规则，迫使浏览器重新解析整个样式继承链；而 class 切换只触发动态类匹配，不打断样式计算流程。

  • 批量样式变更优先用 element.classList.add('active')，而非反复赋值 element.style.cssText
  • 避免在循环里写 el.style.left = x + 'px' 再读 el.offsetLeft —— 每轮都逼浏览器同步重排一次
  • 需要动态计算尺寸时，坚持“读-写分离”：先把所有 offsetWidth、getBoundingClientRect() 集中读完，再统一写样式
  • 动画场景下，把读操作放在 requestAnimationFrame 开头，写操作放结尾，对齐浏览器刷新节奏

  真正难处理的不是单次重排，而是结构导致的重排扩散——比如一个 section 下塞了 80 个子元素，又没用 contain 隔离，滚动时哪怕只改其中一项的 transform，也可能因祖先链过深被拖进主线程 layout 阶段。