You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
批量读写DOM(通过 FastDOM or a virtual DOM)。在每帧的开始读取会引发布局属性的值(例如会频繁多次调用的 requestAnimationFrame,scroll 回调函数等之前就读取好),当这些属性的值在最终布局后依然不变。(举个例子:当父元素宽度为100px,for 循环修改所有的子元素宽度为父元素的一半,由于在修改每个子元素的过程中,仍然取父元素的一半 50px,这个时候就应该在 for 之前读取。如果在 for 循环之中读取,由于你修改了子元素的属性,浏览器无法确定对父元素有没有影响,只能强制重排一次来确定(仍然是 50px )。特别是在循环次数比较多的场景,性能会极差。)
(PS:Timeline 在最新的版本中已改成 Performance) Timeline trace of The Guardian. Outbrain is forcing layout repeatedly, probably in a loop.
什么导致强制布局/重排
原文链接
英文原文:What forces layout / reflow
以下所有属性或方法,当在 JS 中读写或调用,都将触发浏览器同步计算样式或布局。也被叫做重排或布局抖动,这通常是页面性能瓶颈。
元素
盒模型
elem.offsetLeft
,elem.offsetTop
,elem.offsetWidth
,elem.offsetHeight
,elem.offsetParent
elem.clientLeft
,elem.clientTop
,elem.clientWidth
,elem.clientHeight
elem.getClientRects()
,elem.getBoundingClientRect()
滚动
elem.scrollBy()
,elem.scrollTo()
elem.scrollIntoView()
,elem.scrollIntoViewIfNeeded()
elem.scrollWidth
,elem.scrollHeight
elem.scrollLeft
,elem.scrollTop
聚焦
elem.focus()
会造成两次强制布局 (source&l=2923)其他
elem.computedRole
,elem.computedName
elem.innerText
(source&l=3440))getComputedStyle
window.getComputedStyle()
典型的会造成强制计算样式window.getComputedStyle()
以下情况将会导致强制布局:min-width
,min-height
,max-width
,max-height
,width
,height
aspect-ratio
,min-aspect-ratio
,max-aspect-ratio
device-pixel-ratio
,resolution
,orientation
,min-device-pixel-ratio
,max-device-pixel-ratio
height
,width
top
,right
,bottom
,left
margin
[-top
,-right
,-bottom
,-left
, 或简写] 仅当 margin 是固定值.padding
[-top
,-right
,-bottom
,-left
,或简写] 仅当 padding 是固定值.transform
,transform-origin
,perspective-origin
translate
,rotate
,scale
grid
,grid-template
,grid-template-columns
,grid-template-rows
perspective-origin
motion-path
,motion-offset
,motion-rotation
,x
,y
,rx
,ry
window
window.scrollX
,window.scrollY
window.innerHeight
,window.innerWidth
window.getMatchedCSSRules()
only forces styleForms
inputElem.focus()
inputElem.select()
,textareaElem.select()
Mouse events
mouseEvt.layerX
,mouseEvt.layerY
,mouseEvt.offsetX
,mouseEvt.offsetY
(source)document
doc.scrollingElement
仅强制计算样式Range
range.getClientRects()
,range.getBoundingClientRect()
SVG
内容可编辑 contenteditable
附录 *Appendix
(PS:Timeline 在最新的版本中已改成 Performance) Timeline trace of The Guardian. Outbrain is forcing layout repeatedly, probably in a loop.
跨浏览器 Cross-browser
updateLayoutIgnorePendingStylesheets
- GitHub search - WebKit/WebKitFrameNeedsReflow
- mozilla-central search浏览 Chromium 源代码
UpdateStyleAndLayoutIgnorePendingStylesheets
- Chromium Code SearchUpdateStyleAndLayoutTreeIgnorePendingStylesheets
- Chromium Code SearchCSS Triggers
CSS Triggers 是一个重要的资源网站,描述了哪些样式改变会引发渲染管道哪些周期会被执行。以上讲的 JS 操作导致强制重排都会引发渲染管道中的布局、绘制、合成三者同步执行。
更多有关强制布局的文章 More on forced layout
2018.02 修改:代码搜索链接,部分相关元素属性。
The text was updated successfully, but these errors were encountered: