display:none和visibility:hidden的区别 // 1、空间占据display:none;// 隐藏的元素不占文档流visibility:hidden;// 隐藏的元素空间存在(占茅坑、不拉屎)// 2、回流和重绘(reflow/repaint)display:none;// 隐藏参数回流和重绘visibility:hidden;// 无回流和重绘// 3、株连九族display:none;// 其内的标签元素全部隐藏、无论如何挣扎都无济于事visibility:hidden;// 其元素若添加visibility:visible;则会显示出来
height:0;overflow:hidden; overflow:hidden;// 溢出隐藏//若父级被添加了position属性、子级内添加了绝对定位、则不会被隐藏//火星人在地球触发了法律，如果火星人的老爸在这法律之外，则这个火星人啥事没有；否则，坐牢！
position:absolute;top:-999em;// 不占空间、无法点击position:relative;top:-999em;// 占内存、无法点击position:absolute;visibility:hidden;// 不占空间、无法点击opacity:0;filter:alpha(opacity=0);// 占内存、可以点击
那些原因引起浏览器的回流 改变字体大小
样式表改动
dom操作
css伪类
元素内容变化、尤其是输入控件
调整窗口大小( resize )
width、clientwidth(内容可视区大小)、offsetwidth(border+clientwidth)、scrolltop/scrollheight(元素内容高度/包括溢出内容)
会使浏览器将渐进回流队列flush、立即执行回流
如何减少页面回流
避免逐项更改样式、最好一次性更改style属性csstext、或者定义class一次性添加classname
避免循环操作dom、创建一个documentfragment或div在上面应用所有dom操作、最后在添加到指定的元素中
也可以在一个display:none;的元素上进行操作、因为display:none;上的dom操作不会引发回流(reflow)和重绘(repaints)
避免循环读取offsetleft等属性、在循环之前把他们存储起来
进行复杂动画的元素运动时、使用绝对定位、使其脱离文档流。
否则会引起父元素以及后续元素大量的回流