修改时,哪些DOM元素属性会导致浏览器执行回流操作
Which DOM element properties can cause the browser to perform a reflow operation when modified?
以下哪些DOM元素属性会导致浏览器执行回流操作?
innerHTML
offsetParent
style
scrollTop
简而言之,任何导致元素改变大小或移动的属性都会导致回流,因为大小或位置的改变会影响其他元素。浏览器会尽可能高效地识别可能需要回流的内容,但每个浏览器都有不同的方法。
不会影响元素大小或位置的属性(如背景色)不应触发回流,尽管不能保证每个浏览器都足够智能,可以实现这一点。
在您的列表中:
innerHTML
更改对象的HTML,这肯定会影响大小和位置,并将触发至少部分回流。
在我看来,offsetParent
是一个只读属性,不是你直接设置的,所以如果没有安排,读取它不应该导致回流。
style
是许多属性的网关,包括height
和width
,这显然会导致至少部分回流。
scrollTop
不需要引起回流,因为布局通常不会改变,只是一个元素(及其子元素)的滚动位置。布局应该保持不变,只需要重新喷漆。
可能还值得一提的是,大多数导致回流的特性不会立即导致回流,而是会在未来短时间内安排回流。这样,如果一些javascript运行更改了一系列不同的属性,每个属性都需要回流,浏览器就不会进行N次回流,而是安排回流,等待当前执行的javascript线程完成,然后只执行一次所需的任何回流。有些属性在读取时会导致所有挂起的回流立即完成,因为如果不立即完成回流,这些属性的值可能不准确。您可以在前面的文章中了解到这一点:在javascript-DOM操作
这取决于情况。
innerHTML
只会在设置更改DOM时触发回流offsetParent
不应该做任何事情,获取它可能会刷新渲染树队列style
可能会在设置它(或它的属性)或链接这些操作时触发回流和重新绘制。某些属性(如color
)应该只触发重新绘制scrollTop
将在设置时触发重新绘制,获取它可能会刷新队列
奇怪的是,我确信所有这些都会导致回流&甚至重新喷漆。
下面是一篇关于这一切的文章:回流&重新打印
相关文章:
- 在Windows 10中自动执行例行程序(主要与浏览器交互)
- 我想用Javascript网站在开放的Chrome浏览器上执行功能
- Chrome浏览器“;挂起”;同时在循环中执行AJAX请求
- 片段uri's未在浏览器上执行
- 适用于多种浏览器的Selenium-需要能够执行javascript的webDriver
- 从浏览器访问页面时执行js函数's后退按钮
- 如何在关闭浏览器的同时执行php函数
- 如何在浏览器中执行对比度拉伸/规范化
- 如何在Javascript执行后防止浏览器锁定
- 基于浏览器窗口大小的条件 JavaScript 执行
- AJAX 调用在获得响应并成功执行时会冻结浏览器一段时间
- 为什么未执行的评估对某些浏览器中的行为有影响
- 修改时,哪些DOM元素属性会导致浏览器执行回流操作
- 从浏览器执行.EXE文件
- Rails 4 - 强制浏览器执行javascript响应而不是显示文本
- 如何在浏览器执行javascript后获得HTML代码
- google-chrome(浏览器)执行方法调用,其结果从未使用(对于RuntimeTest)
- 直接从浏览器执行JavaScript文件
- Node.js不从浏览器执行DB函数
- 如何防止浏览器执行一些JavaScript时,用户单击后退按钮