css display：none和visibility：hidden的区别

共同点：都是页面隐藏元素的方法

区别

1.display: none：在页面上不占用位置，visibility：hidden：占用位置

2.这两个属性都会产生重绘，但是display：none这个属性还会产生一次回流

原理：

浏览器的渲染机制，每一个浏览器的渲染机制有可能都是不同的，但是共同点是有的，当我们在页面上输入一个URL的时候，浏览器会向服务器（本地）发送一个网络请求，我可以打开控制台去找Performance-Event Lop-Send Request，这个Send Request就是发送请求

拿到返回的内容之后，进行HTML解析，主要解析js，dom，css三个部分

浏览器如何解析dom，css？

分别解析dom树和css树，然后将两者合并成为Render tree

然后将合并好的Render tree进行布局（定位，确定元素在页面上的位置），绘制（通过计算机的显卡将Render tree显示在页面上），合并（）

然后再回过头来看display: none：在页面上不占用位置的原因，虽然dom解析器将元素进行了解析，但是css解析器也将该元素的css属性进行了解析，没有将该元素合并进Render tree。

这样就引出了重绘和回流的问题

这两个属性都会产生重绘，但是display：none这个属性还会产生一次回流，产生回流一定会产生重绘！！

产生回流的情况：改变元素的位置（left，top...）,显示隐藏元素

产生重绘的情况：样式改变，字体大小等