深圳平台网站建设外包,新闻发布会策划流程,做网站可以用哪些软件,wordpress首页弹出公告你将了解到#xff1a; 什么是回流
什么是重绘
回流何时发生
重绘何时发生
如何避免回流和重绘
复制代码带着上面的问题#xff0c;我们一探究竟 什么是回流 回流#xff1a;英文是reflow 当render tree中的一部分(或全部)#xff0c;因为元素的规模尺寸、布局、隐藏等改变…你将了解到 什么是回流
什么是重绘
回流何时发生
重绘何时发生
如何避免回流和重绘
复制代码带着上面的问题我们一探究竟 什么是回流 回流英文是reflow 当render tree中的一部分(或全部)因为元素的规模尺寸、布局、隐藏等改变
而需要重新构建这就是回流(reflow)
复制代码每个页面至少回流一次即页面首次加载回流时浏览器会使渲染树中受到影响的部分失效并重新构造这部分渲染树回流完成后浏览器会重新绘制受影响的部分是重绘过程什么是重绘 重绘英文是repaints 当render tree中的一些元素需要更新属性而这些属性只是影响元素的外
观、风格而不影响布局(例如background-color)则称为重绘(repaints)
复制代码特点回流必将引起重绘重绘不一定引起回流 回流比重绘的代价更高 回流何时发生 当页面布局和几何属性改变时就需要回流 下述情况会发生浏览器回流 1添加或者删除可见的DOM元素
2元素位置改变
3元素尺寸改变——边距、填充、边框、宽度和高度
4内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变
5页面渲染初始化
6浏览器窗口尺寸改变——resize事件发生时
复制代码let box document.getElementById(box).style;
box.padding 2px; // 回流重绘
box.border 1px solid red; // 再一次 回流重绘
box.fontSize 14px; // 回流重绘
document.getElementById(box).appendChild(document.createTextNode(abc!));
复制代码重绘何时发生 元素的属性或者样式发生变化。 let box document.getElementById(box).style;
box.color red; // 重绘
box.backgroud-color blue; // 重绘
document.getElementById(box).appendChild(document.createTextNode(abc!));
复制代码因回流的开销较大如果每个操作都去回流重绘的话浏览器可能就会受不了。所以很多浏览器都会优化这些操作。 多次的回流、重绘变成一次回流重绘: 浏览器会维护1个队列把所有会引起回流、重绘的操作放入这个队列等
队列中的操作到了一定的数量或者到了一定的时间间隔浏览器就会flush
队列进行一个批处理。
复制代码但是有时上面的方法会失效原因是 有些情况当请求向浏览器请求一些style信息的时候就会让浏览器强制flush队列比如1offsetTop, offsetLeft, offsetWidth, offsetHeight
2 scrollTop/Left/Width/Height
3clientTop/Left/Width/Height
4width,height
5请求了getComputedStyle(), 或者 IE的 currentStyle
复制代码当你请求上面的一些属性的时候浏览器为了给你最精确的值需要flush队列因为队列中可能会有影响到这些值的操作。即使你获取元素的布局和样式信息跟最近发生或改变的布局信息无关浏览器都会强行刷新渲染队列。 这样以来浏览器的优化就显得力不从心所以我们需要一些方法尽可能的避免或减少浏览器的回流、重绘 如何避免、减少回流和重绘 减少对render tree的操作【合并多次多DOM和样式的修改】减少对一些style信息的请求尽量利用好浏览器的优化策略1添加css样式而不是利用js控制样式
2让要操作的元素进行“离线处理”处理完后一起更新当用DocumentFragment进行缓存操作引发一次回流和重绘使用display:none技术只引发两次回流和重绘使用cloneNode(true or false)和replaceChild技术引发一次回流和重绘
3直接改变className如果动态改变样式则使用cssText考虑没有优化的浏览器// badelem.style.left x px;elem.style.top y px;// goodelem.style.cssText ;left: x px;top: y px;;
4不要经常访问会引起浏览器flush队列的属性如果你确实要访问利用缓存// badfor (var i 0; i len; i) {el.style.left el.offsetLeft x px;el.style.top el.offsetTop y px;}// goodvar x el.offsetLeft,y el.offsetTop;for (var i 0; i len; i) {x 10;y 10;el.style x px;el.style y px;}
5让元素脱离动画流减少回流的Render Tree的规模$(#block1).animate({left:50});$(#block2).animate({marginLeft:50});
6将需要多次重排的元素position属性设为absolute或fixed这样此元素就脱离了文档流它的变化不会影响到其他元素。例如有动画效果的元素就最好设置为绝对定位
7避免使用table布局尽量不要使用表格布局如果没有定宽表格一列的宽度由最宽的一列决定那么很可能在最后一行的宽度超出之前的列宽引起整体回流造成table可能需要多次计算才能确定好其在渲染树中节点的属性通常要花3倍于同等元素的时间。
8尽量将需要改变DOM的操作一次完成let box document.getElementById(box).style;// badbox.color red; // 重绘box.size 14px; // 回流、重绘// goodbox.bord 1px solid red
9尽可能在DOM树的最末端改变class尽可能在DOM树的里面改变class可以限制回流的范围
10IE中避免使用JavaScript表达式
复制代码参考资料 前端进阶二重绘和回流重绘与回流页面的重绘与回流以及如何优化转载于:https://juejin.im/post/5c87bd375188257e3e47fdc5
