1、浏览器渲染机制
2、回流 （refolw）
节点的几何属性或者布局发生改变被称为回流，一个元素的回流可能会导致了其所有子元素以及DOM中紧随其后的节点、祖先节点元素的随后的回流，所以一个节点的回流会引起页面某个部分甚至整个页面的回流。
3、重绘（repaint）
节点的样式改变且不影响布局的，比如color，visibility等，称为重绘。
重绘不一定回流，回流一定重绘。
4、 浏览器优化
5、减少回流和重绘
5.1、批量修改DOM或者样式
const el = document.getElementById('test'); el.style.padding = '5px'; el.style.borderLeft = '1px'; el.style.borderRight = '2px'; //可以优化为使用cssText或者class统一添加 const el = document.getElementById('test'); el.style.cssText += 'border-left: 1px; border-right: 2px; padding: 5px;'; //或者 const el = document.getElementById('test'); el.className += ' active';function appendDataToElement(appendToElement, data) { let li; for (let i = 0; i < data.length; i++) { li = document.createElement('li'); li.textContent = 'text'; appendToElement.appendChild(li); } } const ul = document.getElementById('list'); appendDataToElement(ul, data);const ul = document.getElementById('list'); const fragment = document.createDocumentFragment(); appendDataToElement(fragment, data); ul.appendChild(fragment);function appendDataToElement(appendToElement, data) { let li; for (let i = 0; i < data.length; i++) { li = document.createElement('li'); li.textContent = 'text'; appendToElement.appendChild(li); } } const ul = document.getElementById('list'); ul.style.display = 'none'; appendDataToElement(ul, data); ul.style.display = 'block';5.2、避免触发同步UI渲染
function initP() { for (let i = 0; i < paragraphs.length; i++) { paragraphs[i].style.width = box.offsetWidth + 'px'; } }这段代码看上去是没有什么问题，可是其实会造成很大的性能问题。在每次循环的时候，都读取了box的一个offsetWidth属性值，然后利用它来更新p标签的width属性。这就导致了每一次循环的时候，浏览器都必须先使上一次循环中的样式更新操作生效，才能响应本次循环的样式读取操作。每一次循环都会强制浏览器刷新队列。我们可以优化为:
const width = box.offsetWidth; function initP() { for (let i = 0; i < paragraphs.length; i++) { paragraphs[i].style.width = width + 'px'; } }5.3、对于复杂动画效果,使用绝对定位让其脱离文档流
例子中在未优化前，元素未绝对定位，依靠margin的变化进行动画，引起大量的回流，而当使用了绝对定位，明显感觉FPS稳定在每秒60次，也就是16.6ms一次。
5.4、css3硬件加速（GPU加速）
- 使用css3硬件加速，可以让transform、opacity、filters这些动画不会引起回流重绘 。
- 对于动画的其它属性，比如background-color这些，还是会引起回流重绘的，不过它还是可以提升这些动画的性能
如何使用
常见的触发硬件加速的css属性：transformopacityfiltersWill-change
效果
我们可以先看个例子。我通过使用chrome的Performance捕获了动画一段时间里的回流重绘情况，实际结果如下图：
转载于:https://www.cnblogs.com/chenlei987/p/11447484.html
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/233263.html原文链接：https://javaforall.net
