网站建设制作合同模板,ps个人网站的首页界面,正邦 网站建设,厦门网站建设680重绘#xff08;Repaint#xff09;
当页面中元素样式的改变并不影响它在文档流中的位置时#xff08;例如改变颜色、阴影等#xff09;#xff0c;浏览器会进行重绘#xff0c;即重新绘制元素的外观。
回流#xff08;Reflow#xff09;
当元素的大小、位置、隐藏等…重绘Repaint
当页面中元素样式的改变并不影响它在文档流中的位置时例如改变颜色、阴影等浏览器会进行重绘即重新绘制元素的外观。
回流Reflow
当元素的大小、位置、隐藏等改变时浏览器需要重新计算元素的几何信息并重新渲染页面这个过程称为回流。会影响当前元素、祖先元素和后代元素。
性能影响
回流比重绘的代价要高。回流的过程比重绘复杂因为它涉及到更多的计算。回流必将引发重绘而重绘不一定会引发回流。
触发条件
添加或删除可见的DOM元素元素尺寸改变内容变化例如用户在input框中输入文字页面渲染初始化浏览器窗口尺寸改变 —— 触发重排(回流)。
如何减少重绘和回流
使用transform替代top。使用visibility替换display: none —— 因为前者只会触发重绘后者会触发回流重排。不要使用table布局因为可能很小的一个小改动会导致整个table的重新布局。避免在循环中对DOM进行频繁操作可以使用documentFragment进行批量操作。避免频繁地读取会引发回流/重绘的属性如果需要多次使用可以用变量缓存起来。
代码示例
回流
HTML
div idcontainerpSome text here.../p
/divJavaScript
let container document.getElementById(container);// 这里会触发回流因为改变了元素的几何属性
container.style.padding 20px;// 这又触发了一次回流
container.style.borderWidth 5px;为了减少回流可以合并多次改变样式的操作使用cssText合并成一次操作
container.style.cssText padding: 20px; border-width: 5px;;或者使用CSS类
.custom-style {padding: 20px;border-width: 5px;
}container.classList.add(custom-style);重绘
CSS:
headstyle.box {width: 100px;height: 100px;background-color: blue;}/style
/head
bodydiv classbox/div
/bodyJavaScript:
document.querySelector(.box).style.backgroundColor red;这段代码改变了盒子的外观而没有改变它的布局因此仅仅会导致重绘。
减少重绘和回流
1.使用cssText或者CSS类代替多次DOM操作
2. 使用fragment或clone
当需要对DOM进行大量修改时最好的做法是使用DocumentFragment或者是clone一个元素在副本上进行所有操作然后再把它放回文档中。
let list document.getElementById(list),frag document.createDocumentFragment(),items [Item 1, Item 2, Item 3];// 使用DocumentFragment作操作
items.forEach(item {let li document.createElement(li);li.textContent item;frag.appendChild(li);
});// 把DocumentFragment一次性添加到DOM中减少页面回流
list.appendChild(frag);这样做的好处在于减少了页面的回流次数不是每添加一个列表项就回流一次而是所有项都准备好之后才触发一次回流。
