问题标签 [reflow]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - 如果元素的位置是绝对的,浏览器的渲染是否会重排?
如果我有一个具有绝对位置的元素并且我将其更改为左侧并且顶部位置将重排到它的父子级?如果他们自己的孩子不受影响,因为他们也被左轴和上轴绝对定位,那么他们自己的孩子呢?
如果我改变了一个元素的宽度/高度,但在父级和它的子级中并不重要?
c++ - 是否有用于 80 列格式化文本输出的库/方法?
这就是我要找的东西。
我想找到一个格式化输出文本的库或方法,使其在 80 列(或用户可配置)处自动换行,并允许用户定义缩进。
我知道我可以创建一个,但我怀疑已经有一个可用的库可以做到这一点。我搜索了一下,找到了 iomanip 的页面——这给了我创建自己的想法。
我已经通过 boost 库进行了粗略的搜索,但我并没有真正找到任何完全匹配的东西。
browser - 寻找浏览器回流基准
我从事嵌入式 Opera 实现,并想测试实际性能。我已经完成了 sunspider js 基准测试,现在想知道 html/css 的性能。
有没有什么好的 Opera 回流基准?
vim - 用 vim 重排注释块
我正在清理别人的代码并使用 vim。我想重新排列评论,以便它们的格式一致。
例如:
会成为:
因此,一个可以轻松取消注释代码、重排段落然后重新注释代码并保留缩进的工作流程。如果有一个现有的插件可以做到这一点,那就太好了。
javascript - 结合 documentfragment 和 replacechild 以最小化回流
我正在制作一个不使用画布的 javascript 游戏,并且我希望屏幕每个周期只重排一次,以提高速度。有没有办法让 documentFragment 替换命名元素?
编辑: javascript 指南建议 replaceChild( ) 可以与 documentFragment 一起使用,但该示例似乎暗示了多次重排:
html - 文本转换:大写导致 Chrome 上的布局错误
我遇到了一个奇怪的布局错误,当 an嵌套在元素中时,它似乎是由text-transform
CSS 属性触发的。我也在 Safari (5.1.2) 上看到了这个问题,但是这个最小的测试用例只在 Chrome (17.0.963.56) 上触发。inline-block
block
特别有趣的一点是,打开开发人员工具并将其保留在 Elements 选项卡上会触发正确的布局。我最好的猜测是 CSS 规则和 DOM 结构的结合导致 webkit 引擎错过了执行页面的重排。
这是两个屏幕截图,显示了它在 Chrome 上呈现的两种方式,具体取决于是否text-transform
删除了规则或div
元素。
我想使用该text-transform
属性,但我想知道这是否是一个已知错误以及我能做些什么来确保我不会触发该行为。即使能够显式触发回流事件也可能已经足够了。
javascript - 在不同的 DOM 元素中组合/批处理多个 CSS 更新以减少重排/重绘?
背景:
我有一个 HTML 页面,它使用 WebGL 画布来显示一些 3D 内容。Overlayed 是<div>
由内联 CSS 放置的多个,具有和position: absolute
的相关尺寸。top
left
问题:
当我更新 3D 内容的视图时(例如,稍微旋转所有内容),我还需要移动所有覆盖的内容<div>
,以便它们似乎停留在 3D 空间中的同一位置。
如何更新网页,以便只发生一次重绘?
当我第一次重绘 WebGL 然后迭代n <div>
时,我会得到每帧n +1 次重绘。在应该获得至少 30 fps 的动画期间,这不是很好......
注意:
我也知道其他问题,例如:
有没有办法批量应用多个 CSS 样式以避免多次重排?- 但这谈到了在一个元素中组合多个 CSS 参数(我在这里已经使用了从 2 n +1 到n +1 ...)
在单个重绘/重排中进行多个 DOM 更新?- 但我不确定这是否有帮助,因为我想我也会有n +1 重绘......
PS: jQuery 是允许的,因为它已经在那个项目中使用了。
css - CSS / JS 用于单选按钮选择器的图像网格替代方案?
是否有任何 CSS 工具包可以让您重现单选按钮功能,但使用以网格布局的照片/图像?例如,汽车租赁网站上的汽车模型网格,用户需要通过单击汽车图片为其租赁应用程序选择首选汽车。
这类似于 HTML 选择菜单小部件,除了:
- 布局是一个网格,而不是一行项目(即需要换行)。
- 当前选定的项目是持久的并且始终可见,可选择带有复选标记(或其他基于图标的指示器以显示选择)
- 如果在浏览器调整大小时网格能够智能地布局(重新计算行和列),那就太好了。
- 可以选择在单选(单选按钮)和多选(复选框按钮)模式之间进行选择也很好。
我认为这很简单,但我很难找到这样的东西。JQuery UI 按钮功能很接近,但(我认为)不提供以图像为中心的按钮或重排网格。
javascript - HTML 表格过滤和重排
我有一个非常大的 900 多行的 html 表。我通过循环遍历行并根据过滤器的值隐藏/显示行来启用过滤。
这就是问题所在。当我隐藏/显示 500 多行时,当浏览器忙于回流时,页面变得完全没有响应。我曾尝试在过滤、克隆表格然后替换表格等之前隐藏表格。但无响应仍然是一个问题,因为它阻止了我在浏览器重绘时获得“动画”加载图像。
分页不是一种选择,懒惰滚动也不是。
这是循环:
browser - Raphael.js——脚本看起来很轻,但执行很重——为什么?
我在 Windows XP 上使用 Raphael 2.01、Firefox 12.0。
我尝试过连续的对象运动(不是补间动画)。我认为我的脚本负载很轻,但是 PC 冷却风扇的声音会很大!
我想知道原因和解决方法。
(脚步)
我在文档上设置了几个圆形对象(5 到 10)。
他们继续前进。当它们接触到文档的边缘时,它们会返回(向相反方向移动),但它们的运动会减慢。
当我在 Google Chrome 的任务管理器中检查 PC 的负载时,内存使用量变得越来越大(40MB ===> 150MB ===> ... )
(脚本)
*对不起。当我将代码粘贴到“jsfiddle”时,会出现圆形对象但它们不会运行。