Представьте себе картину.
У вас есть белый фон, и вы начинаете рисовать яблоко с большим количеством деталей в течение одного часа, а затем полностью покрываете его другим слоем белой краски.Это visibility.
display:none - все равно что не рисовать его с самого начала.Конечно, это быстрее при первой загрузке.
Есть недостатки, когда вы используете display:none, однако: когда вы переключаете его обратно на block (или inline и т. Д.), Вам придется начать рисоватьрисуя, но используя видимость, браузер просто царапает последний слой краски, и он вернулся.Так что visibility в этом случае быстрее.
Но помните одну вещь, когда вы используете visibility:hidden, элемент сохраняет свою позицию в потоке, поэтому элементы вокруг него не сдвигаются .
Если вы хотите получить техническое объяснение, проверьте Доклад Дэвида Барона .