Tại sao các trang web không hiển thị ngay lập tức văn bản của họ?

Nếu bạn có xu hướng xem cửa sổ trình duyệt bằng mắt đại bàng, bạn có thể nhận thấy rằng các trang thường tải hình ảnh và bố cục của chúng trước khi tải văn bản của chúng - kiểu tải ngược lại chính xác mà chúng tôi đã trải qua trong những năm 1990. Chuyện gì đang xảy ra vậy?

Phiên hỏi và trả lời hôm nay đến với chúng tôi nhờ sự hỗ trợ của SuperUser - một phân ngành của Stack Exchange, một nhóm các trang web Hỏi & Đáp do cộng đồng điều khiển.

Câu hỏi

Độc giả của SuperUser Laurent rất tò mò về lý do tại sao các trang chính xác dường như tải các yếu tố hoàn toàn khác so với trước đây. Anh ấy viết:

Tôi đã nhận thấy rằng gần đây nhiều trang web chậm hiển thị văn bản của họ. Thông thường, hình nền, hình ảnh sẽ được tải, nhưng không có văn bản. Sau một thời gian, văn bản bắt đầu xuất hiện ở đây và ở đó (không phải lúc nào cũng là tất cả của nó cùng một lúc).

Về cơ bản, nó hoạt động ngược lại như trước đây, khi văn bản được hiển thị đầu tiên, sau đó các hình ảnh và phần còn lại được tải sau đó. Công nghệ mới nào đang tạo ra vấn đề này? Bất kỳ ý tưởng?

Lưu ý rằng tôi đang kết nối chậm, có thể làm nổi bật vấn đề.

Xem [ở trên] để biết ví dụ - mọi thứ đã được tải nhưng phải mất thêm vài giây trước khi văn bản cuối cùng được hiển thị.

Vì vậy, những gì cho? Laurent và nhiều người trong chúng ta nhớ về thời điểm văn bản được tải trước và mọi thứ khác - trang trí GIF động, hình nền lát gạch và tất cả các tạo tác khác của trình duyệt web cuối thập niên 90 - xuất hiện sau đó. Điều gì gây ra tình trạng hiện tại của các yếu tố thiết kế đầu tiên, văn bản sau?

Câu trả lời

Người đóng góp cho SuperUser Daniel Andersson đưa ra một câu trả lời chi tiết tuyệt vời, đi thẳng đến tận cùng của bí ẩn tại sao các phông chữ-tải-cuối-tải:

Một lý do là các nhà thiết kế web hiện nay thích sử dụng phông chữ web (thường ở định dạng WOFF), ví dụ: thông qua các phông chữ của Google.

Trước đây, các phông chữ duy nhất có thể được hiển thị trên một trang web là những phông chữ mà người dùng đã cài đặt cục bộ. Vì ví dụ Người dùng Mac và Windows không nhất thiết phải có cùng một phông chữ, các nhà thiết kế luôn xác định các quy tắc theo bản năng là
họ phông chữ: Arial, Helvetica, sans-serif; 
trong đó, nếu phông chữ đầu tiên không được tìm thấy trên hệ thống, trình duyệt sẽ tìm kiếm phông thứ hai và cuối cùng là phông chữ dự phòng.

Bây giờ, người ta có thể cung cấp một URL phông chữ dưới dạng quy tắc CSS để khiến trình duyệt tải xuống một phông chữ, như sau:
@import url (http://fonts.googleapis.com/css?family=Droid+Serif:400,700); 
và sau đó tải phông chữ cho một yếu tố cụ thể bằng ví dụ:
họ phông chữ: 'Droid Serif', sans-serif; 
Điều này rất phổ biến để có thể sử dụng phông chữ tùy chỉnh, nhưng nó cũng dẫn đến một vấn đề là không có văn bản nào được hiển thị cho đến khi tài nguyên được trình duyệt tải, bao gồm thời gian tải xuống, thời gian tải phông chữ và thời gian kết xuất. Tôi hy vọng rằng đây là hiện vật mà bạn đang trải nghiệm.

Ví dụ: một trong những tờ báo quốc gia của tôi, Dagens Nyheter, sử dụng phông chữ web cho tiêu đề của họ, nhưng không phải là khách hàng tiềm năng của họ, vì vậy khi trang web đó được tải, tôi thường thấy các khách hàng tiềm năng trước và nửa giây sau tất cả các khoảng trống ở trên được điền với các tiêu đề (ít nhất là đúng trên Chrome và Opera. Không thử những thứ khác).

(Ngoài ra, các nhà thiết kế đã rắc JavaScript hoàn toàn ở mọi nơi trong những ngày này, vì vậy có thể ai đó đang cố gắng làm điều gì đó thông minh với văn bản, đó là lý do tại sao nó bị trì hoãn. Tuy nhiên, điều đó sẽ rất cụ thể đối với văn bản bị trì hoãn trong những điều này lần này là vấn đề phông chữ web được mô tả ở trên, tôi tin.)

Thêm vào:

Câu trả lời này đã trở nên rất khích lệ, mặc dù tôi không đi sâu vào chi tiết, hoặc có lẽ bởi vì điều này. Đã có nhiều bình luận trong chuỗi câu hỏi, vì vậy tôi sẽ cố gắng mở rộng một chút [Lành]

Hiện tượng này rõ ràng được gọi là Flash flash của nội dung chưa được chỉnh sửa, nói chung, và Flash flash của văn bản chưa được chỉnh sửa nói riêng. Tìm kiếm FOUC của FASHC.

Tôi có thể đề xuất bài đăng của nhà thiết kế web Paul Irish trên FOUT liên quan đến phông chữ web.

Điều người ta có thể lưu ý là các trình duyệt khác nhau xử lý việc này khác nhau. Tôi đã viết ở trên rằng tôi đã thử nghiệm Opera và Chrome, cả hai đều cư xử tương tự nhau. Tất cả những người dựa trên WebKit (Chrome, Safari, v.v.) chọn để tránh TÌM không phải kết xuất văn bản phông chữ web bằng phông chữ dự phòng trong thời gian tải phông chữ web. Thậm chí nếu phông chữ web được lưu trữ, ở đó sẽ là một sự chậm trễ kết xuất. Có rất nhiều ý kiến trong chủ đề câu hỏi này nói khác đi và thật sai lầm khi các phông chữ được lưu trong bộ nhớ cache hoạt động như thế này, nhưng ví dụ: từ liên kết trên:

Trong trường hợp nào bạn sẽ nhận được một KHÔNG

Sẽ: Tải xuống và hiển thị một ttf / otf / woff từ xa

Sẽ: Hiển thị một ttf / otf / woff được lưu trữ

Sẽ: Tải xuống và hiển thị dữ liệu-uri ttf / otf / woff

Sẽ: Hiển thị dữ liệu được lưu trong bộ nhớ cache-uri ttf / otf / woff

Sẽ không: Hiển thị một phông chữ đã được cài đặt và đặt tên trong ngăn xếp phông chữ truyền thống của bạn

Sẽ không: Hiển thị phông chữ được cài đặt và đặt tên bằng vị trí local ()

Vì Chrome chờ cho đến khi hết rủi ro FOUT trước khi kết xuất, điều này sẽ gây ra sự chậm trễ. Mà mức độ hiệu ứng có thể nhìn thấy (đặc biệt là khi tải từ bộ đệm) dường như phụ thuộc vào những thứ khác, lượng văn bản cần được hiển thị và có lẽ các yếu tố khác, nhưng bộ đệm không loại bỏ hoàn toàn hiệu ứng.

Ailen cũng có một số cập nhật liên quan đến hành vi của trình duyệt kể từ 2011-04-14 ở cuối bài:

Firefox (kể từ Chung kết FFb11 và FF4) không còn có! Wooohoo! Http: //ormszil.la/499292 Về cơ bản văn bản là vô hình trong 3 giây, và sau đó nó mang lại phông chữ dự phòng. Webfont có thể sẽ tải trong vòng ba giây mặc dù

IE9 hỗ trợ WOFF và TTF và OTF (mặc dù nó yêu cầu một thứ bitet nhúng - chủ yếu là moot nếu bạn sử dụng WOFF). TUY NHIÊN!!! IE9 có một KHÔNG. :

Webkit có một bản vá đang chờ hạ cánh để hiển thị văn bản dự phòng sau 0,5 giây. Vì vậy, hành vi tương tự như FF nhưng 0,5 giây thay vì 3 giây.

Nếu đây là một câu hỏi dành cho các nhà thiết kế, người ta có thể đi vào các cách để tránh các loại vấn đề như trình tải web, nhưng đó sẽ là một câu hỏi khác Liên kết Paul Ailen đi sâu vào chi tiết hơn về vấn đề này.

Có một cái gì đó để thêm vào lời giải thích? Tắt âm thanh trong các ý kiến. Bạn muốn đọc thêm câu trả lời từ những người dùng Stack Exchange am hiểu công nghệ khác? Kiểm tra chủ đề thảo luận đầy đủ ở đây.