display-none
The display property tells browser if the element should be displayed or not.
When the display property is set as none, it tells browser not to display the element.
When you do that, the element won’t exist in the display area at all.
The space won’t be allocated and other elements will be shifted in the place for that element.
display:none behaves like the element is not there and displays the rest of the page. That is called destroying the rendering state of the element.
visibility: hidden
The visibility property tells browser if the element should be visible or not.
When the visibility property is set as hidden, the element takes its place in the view but it’s just not visible on the screen.
Basically, visibility: hidden hides the elements but keep the element’s rendering state.
You can also click on the element if it’s a link even if the visibility is hidden.
You can update the rendering state of the element while it’s hidden.
Example
A mixed solution for better rendering
content-visibility: hidden is a better solution if you’re looking for a solution to improve a page speed by hiding elements temporarily.
content-visibility: hidden hides the element but keeps the rendering state. So, even if you make changes, the changes will be applied when the element is shown again.
content-visibility differences display hidden page speed render visibility
