提升渲染帧率：HTML与CSS协作中的布局陷阱规避-html教程-PHP中文网

帧率掉至40–50 fps主因是html/css触发频繁layout与paint：display:table/float引发同步布局，contain失效需满足宽高硬性条件，table-layout:fixed须配且禁用filter防cpu渲染降级。

提升渲染帧率：html与css协作中的布局陷阱规避

直接说结论：帧率掉到 40–50 FPS，八成不是 GPU 没力，而是 HTML 结构或 CSS 声明在反复触发 layout 和 paint——尤其当元素尺寸不可控、嵌套过深、或用了 display: table/float 这类老式布局时。

为什么 `display: table` 和 `float` 会卡主线程

这两类声明会让浏览器进入“同步布局模式”：每次 DOM 变动（哪怕只是光标闪一下）、样式变更（比如 hover 改个 background-color），浏览器都得重新计算整个表格结构或浮动流，无法跳过。现代渲染引擎对它们没有合成层优化路径，transform 和 opacity 也救不了。

避免在循环中动态插入含 display: table 的容器，改用 display: grid 或 display: flex
float 已被 Flex/Grid 全面替代；若必须兼容旧代码，至少给父容器加 overflow: hidden 防止浮动塌陷引发重排
检查 DevTools 的 Layers 面板：如果看到大量小尺寸、无规律的合成层，基本是 float + position: relative 组合滥用导致

`contain: layout paint` 失效的三个常见原因

这个属性本意是锁死重绘边界，但浏览器会静默忽略它，除非满足硬性条件——不是写上就生效。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

容器没设显式宽高：height: auto、min-height: min-content、height: fit-content 全部无效；必须写死 min-height 和 max-height（如 min-height: 200px; max-height: 600px;）
父级有 content-visibility: auto，又在同个元素上加 contain: size，二者冲突，contain-intrinsic-size 直接失效
用 JS 动态插入子节点后立刻读取 offsetHeight，触发强制 layout，此时 contain 的隔离逻辑会被中断

表格编辑器卡顿？`table-layout: fixed` 不是加了就行

只写 table-layout: fixed 却没配 <col>，等于没开——浏览器仍按 auto 模式扫描全部单元格内容算列宽，千行表格能卡住主线程 100ms+。

必须在 <table> 标签上内联写 <code>style="table-layout: fixed; width: 100%;"，防被第三方 reset 覆盖
<col> 要插在 <table> 开头、<code><thead> 之前，且仅允许一列设 <code>width: auto；多列 auto 会让 fixed 失效
加载大数据量时，禁用 innerHTML = hugeString，改用 DocumentFragment 分批 append，每批不超过 50 行

最易被忽略的一点：动画元素只要带 filter（哪怕只是 drop-shadow(0 2px 4px rgba(0,0,0,0.1))），GPU 合成层就自动降级为 CPU 渲染，帧时间会突然从 16ms 拉长到 40ms+，但控制台不会报错，只能靠 Performance 面板查“Raster”阶段耗时是否异常升高。