浏览器工作原理

浏览器重绘(repaint)重排(reflow)与优化[浏览器机制]
https://juejin.im/post/5c15f797f265da61141c7f86

常见引起重排属性和方法
任何会改变元素几何信息(元素的位置和尺寸大小)的操作，都会触发重排，下面列一些栗子：

添加或者删除可见的DOM元素；
元素尺寸改变——边距、填充、边框、宽度和高度
内容变化，比如用户在input框中输入文字
浏览器窗口尺寸改变——resize事件发生时
计算 offsetWidth 和 offsetHeight 属性 【特别注意】
设置 style 属性的值

常见的引起重绘的属性:
color
border-style
visibility
background
text-decoration
background-image
background-position
background-repeat
outline-color
outline
outline-style
border-radius
outline-width
box-shadow
background-size

触发重排一定触发重绘制
触发重绘不一定触发重排

当我们修改了元素的几何属性，导致浏览器触发重排或重绘时。它会把该操作放进渲染队列，等到队列中的操作到了一定的数量或者到了一定的时间间隔时，浏览器就会批量执行这些操作。

强制刷新队列的style样式请求：
offsetTop, offsetLeft, offsetWidth, offsetHeight
scrollTop, scrollLeft, scrollWidth, scrollHeight
clientTop, clientLeft, clientWidth, clientHeight
getComputedStyle(), 或者 IE的 currentStyle

参考：
作者：OBKoro1
掘金链接：https://juejin.im/post/5c15f797f265da61141c7f86

另一篇阮一峰的文章：https://www.ruanyifeng.com/blog/2015/09/web-page-performance-in-depth.html

里边有个描述有问题：
第七条，只在必要的时候，才将元素的display属性为可见，因为不可见的元素不影响重排和重绘。另外，visibility : hidden的元素只对重绘有影响，不影响重排。
我认为visibility:hidden的元素 改变其影响重排的样式时会触发重排进而触发重绘的。改变只影响重绘的样式，应该不会重排。