web页面的重构和回流【转载】
在了解什么是重构和回流之前，我们应该先看看浏览器是怎么渲染的？浏览器的渲染过程;什么是重构和回流;什么操作会引起重绘、回流;浏览器对回流的优化;如何减少回流、重绘
浏览器的渲染过程：
什么是重构和回流
什么操作会引起重绘、回流
-
添加、删除元素(回流+重绘)
-
隐藏元素，display:none(回流+重绘)，visibility:hidden(只重绘，不回流)
-
移动元素，比如改变top,left(jquery的animate方法就是,改变top,left不一定会影响回- 流)，或者移动元素到另外1个父元素中。(重绘+回流)
-
对style的操作(对不同的属性操作，影响不一样。比如，元素尺寸改变——边距、填充、边框、宽度和高度，内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变；)
-
还有一种是用户的操作，比如改变浏览器大小，改变浏览器的字体大小等(回流+重绘)
-
浏览器对回流的优化
-
offsetTop, offsetLeft, offsetWidth, offsetHeight
-
scrollTop/Left/Width/Height
-
clientTop/Left/Width/Height
-
width,height
-
请求了getComputedStyle(), 或者 IE的 currentStyle
如何减少回流、重绘
-
使用DocumentFragment进行缓存操作,引发一次回流和重绘；
-
使用display:none技术，只引发两次回流和重绘；
-
使用cloneNode(true or false) 和 replaceChild 技术，引发一次回流和重绘；
来源：https://segmentfault.com/a/1190000014050350
作者：青灯油纸
原创声明
本站部分文章基于互联网的整理，我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
服务热线 19970861797
