Nếu tôi có nhiều DOM trên trang và tôi đặt tất cả để hiển thị: không, trình duyệt vẫn phản ứng nhanh (di chuyển nhanh, trang cảm thấy linh hoạt).Rất nhiều DOM. Ẩn vs hiển thị không có
Tuy nhiên, nếu tôi hiển thị: ẩn các phần tử, trình duyệt chậm như thể chúng được vẽ trên màn hình.
Ai đó có thể giải thích chi tiết, tại sao lại xảy ra trường hợp này?
Vâng theo một cách, họ được rút ra (nhưng không thực sự): Trình duyệt giữ không gian cho họ, vì vậy nó phải xem xét các mục khi đặt ra những cái nhìn thấy được.
Hộp là vô hình (hoàn toàn minh bạch, không có gì được rút ra), nhưng vẫn ảnh hưởng đến bố trí. Hậu duệ của phần tử sẽ hiển thị nếu chúng có khả năng hiển thị: hiển thị (điều này không hoạt động trong IE lên phiên bản 7).
Nếu bạn chỉ định display: none thay vào đó, trình duyệt chỉ quan tâm và bố cục những thứ hiển thị. Nó không cần phải đưa những người khác vào tài khoản cả.
Tùy thuộc vào tỷ lệ hiển thị/vô hình và số lượng thành phần, điều này có thể tạo sự khác biệt.
Giải thích tiếng Anh đơn giản nhất chưa. – jball
Với visibility:hidden tất cả đều được vẽ trên màn hình nhưng người dùng không thể nhìn thấy chúng. Thay vào đó, với display:none, chúng không được vẽ
Tôi sẽ làm rõ, vì 'hiển thị: ẩn' chúng được hiển thị trong bố cục nhưng ** không được vẽ trên màn hình. – jball
"trình duyệt chậm như thể chúng được vẽ trên màn hình".
Tôi nghĩ điều này rất chậm vì thẻ vẫn được hiển thị nhưng không hiển thị trên màn hình.
Check-out this
Với visibility: hidden kích thước của chúng phải được tính toán sao cho dung lượng phù hợp có thể được đặt trước cho chúng. Họ đang có hiệu quả, vẫn còn rút ra.
Vì display: none thực sự xóa các phần tử khỏi DOM. visibility: hidden chỉ làm cho chúng vô hình, nhưng chúng vẫn ở đó.
Bạn có thể nhận thấy sự khác biệt vì các trường nhập biểu mẫu có display: none sẽ không được bao gồm trong biểu mẫu khi bạn gửi; các trường nhập chỉ có số visibility: hidden sẽ vẫn ở đó. Vâng, ít nhất, đó là kinh nghiệm của tôi - các trình duyệt khác có thể hoạt động khác nhau.
Kiểu không được ảnh hưởng đến DOM. Hành vi được mô tả ở đây mâu thuẫn với phần "17.13.2 Điều khiển thành công" trong thông số kỹ thuật HTML 4.01. – CurtainDog
display: none; không loại bỏ hoặc dù sao cũng ảnh hưởng đến biểu diễn DOM của một phần tử. – csuwldcat
Tôi đã xác minh rằng đối với một số trình duyệt, thiết lập 'display: none' động * làm * loại bỏ các phần tử khỏi DOM, bất kể spec đó nói gì. Đó rõ ràng là một tối ưu hóa hiệu suất. Tôi đã thấy nó ít nhất trong Safari 6.2.2. Upvote cha mẹ. – Yitz
Sử dụng display:none, trình duyệt không khởi tạo các thành phần này cũng như không hiển thị nội dung. Đây không phải là trường hợp khi sử dụng visibility:hidden, khởi tạo các phần tử này nhưng chỉ ẩn chúng.
Hãy tưởng tượng một bức tranh.
Bạn có nền màu trắng và bắt đầu vẽ một quả táo với nhiều chi tiết trong một giờ và sau đó bạn hoàn toàn phủ nó bằng một lớp sơn màu trắng khác. Đó là visibility.
display:none cũng giống như không vẽ nó ngay từ đầu. Tất nhiên nó nhanh hơn trên lần tải đầu tiên.
Mặc dù vậy, khi bạn đang chuyển đổi thành block trở lại. Vì vậy, visibility sẽ nhanh hơn trong trường hợp này.
Nhưng hãy nhớ một điều khi bạn đang sử dụng visibility:hidden phần tử giữ nguyên vị trí của nó trong luồng để các yếu tố xung quanh nó sẽ không nhúc nhích.
Nếu bạn muốn xem giải thích kỹ thuật David Baron's talk.
Điều này khá thú vị. Vì vậy, trong bản chất visibility: hidden là về mặt kỹ thuật giống như opacity: 0?
Tôi không phải là nhà sản xuất trình duyệt, nhưng sẽ không đạt được hiệu suất lớn nếu các yếu tố có ẩn hiển thị không được hiển thị hoặc vẽ nhưng thay vào đó được vẽ làm hình vuông trong suốt với kích thước của phần tử? Ít nhất trong các tình huống mà các kích thước đã được biết đến.
có thể trùng lặp của [Độ mờ đục: 0 có cùng tác dụng như khả năng hiển thị: ẩn] (http://stackoverflow.com/questions/272360/does-opacity0-have-exactly-the-same-effect-as- khả năng hiển thị) – givanse