The difference between Display:none and Visibility:hidden []

Display:none and Visibility:hidden are all features that hide an element on a webpage, but they differ, and I find that using the Visibility:hidden property makes the object invisible. However, the object's space in the Web page does not change (invisible but can be found), which is equal to leaving a blank area, and the Display:none property will make the object completely disappear (can't see or touch).
"Such an explanation.
But I didn't think it was enough, so I thought about one of his loading problems.
There is a property display:none, is the structure loaded at the same time when the page is loaded? Or is it when he becomes a display:block, when it is loaded?
have attribute Visibility:hidden; structure when loading a page, will it load at the same time?   Or when he becomes a visibility:visible; When it is loaded?

The personal view is that:
Display: When his value becomes a block, its structure will be loaded in.
and visibility will load the page at the same time it has loaded it in, because his value is hidden, it occupies the space.

The difference between Display:none and Visibility:hidden []