เหตุใดหน้าเว็บจึงไม่แสดงข้อความทันที

เนื้อหาที่ไม่ถูกแคช

หากคุณมีแนวโน้มที่จะดูบานหน้าต่างเบราว์เซอร์ด้วยตานกอินทรีคุณอาจสังเกตเห็นว่าหน้าเว็บมักโหลดรูปภาพและการจัดวางก่อนที่จะโหลดข้อความซึ่งเป็นรูปแบบการโหลดที่ตรงกันข้ามกับที่เราพบในช่วงปี 1990 เกิดอะไรขึ้น?

เซสชันคำถามและคำตอบของวันนี้มาถึงเราโดยได้รับความอนุเคราะห์จาก SuperUser ซึ่งเป็นแผนกย่อยของ Stack Exchange ซึ่งเป็นการรวมกลุ่มเว็บไซต์ถาม & ตอบโดยชุมชน

คำถาม

ผู้อ่าน SuperUser Laurent สงสัยมากว่าเหตุใดหน้าเว็บจึงโหลดองค์ประกอบต่างไปจากเดิมอย่างสิ้นเชิง เขาเขียน:

ฉันสังเกตเห็นว่าเมื่อเร็ว ๆ นี้เว็บไซต์จำนวนมากแสดงข้อความช้า โดยปกติพื้นหลังรูปภาพและอื่น ๆ จะถูกโหลด แต่ไม่มีข้อความ หลังจากนั้นสักครู่ข้อความจะเริ่มปรากฏที่นี่และที่นั่น (ไม่ใช่ทั้งหมดในเวลาเดียวกัน)

โดยทั่วไปแล้วจะทำงานตรงกันข้ามกับที่เคยเมื่อข้อความถูกแสดงก่อนจากนั้นรูปภาพและส่วนที่เหลือจะโหลดในภายหลัง เทคโนโลยีใหม่ใดที่สร้างประเด็นนี้ ความคิดใด ๆ ?

โปรดทราบว่าฉันมีการเชื่อมต่อที่ช้าซึ่งอาจทำให้เกิดปัญหาขึ้น

ดูตัวอย่าง [above] - ทุกอย่างโหลดแล้ว แต่ต้องใช้เวลาอีกสองสามวินาทีก่อนที่ข้อความจะปรากฏในที่สุด

ให้อะไร? Laurent และพวกเราหลายคนจำช่วงเวลาที่ข้อความโหลดขึ้นมาก่อนและอย่างอื่นอย่างอื่นเช่น GIF แบบเคลื่อนไหวพื้นหลังแบบกระเบื้องและสิ่งประดิษฐ์อื่น ๆ ทั้งหมดของการท่องเว็บในช่วงปลายยุค 90 ที่มาในภายหลัง อะไรเป็นสาเหตุของสถานการณ์ปัจจุบันขององค์ประกอบการออกแบบก่อนข้อความในภายหลัง

คำตอบ

ผู้สนับสนุน SuperUser Daniel Andersson เสนอคำตอบที่มีรายละเอียดอย่างน่าอัศจรรย์ซึ่งจะอยู่ด้านล่างสุดของความลึกลับที่โหลดทำไม:

เหตุผลหนึ่งคือในปัจจุบันนักออกแบบเว็บไซต์ชอบใช้แบบอักษรของเว็บ WOFF รูปแบบ) เช่น ผ่าน แบบอักษร Google Web .

ก่อนหน้านี้ฟอนต์เดียวที่สามารถแสดงบนไซต์คือฟอนต์ที่ผู้ใช้ติดตั้งไว้ในเครื่อง ตั้งแต่เช่น ผู้ใช้ Mac และ Windows ไม่จำเป็นต้องมีแบบอักษรเหมือนกันนักออกแบบมักจะกำหนดกฎตามสัญชาตญาณว่า

แบบอักษรตระกูล: Arial, Helvetica, sans-serif;

โดยที่หากไม่พบแบบอักษรแรกในระบบเบราว์เซอร์จะมองหาแบบอักษรที่สองและสุดท้ายคือแบบอักษร "sans-serif" สำรอง

ตอนนี้เราสามารถให้ URL แบบอักษรเป็นกฎ CSS เพื่อให้เบราว์เซอร์ดาวน์โหลดแบบอักษรได้ดังนี้:

@import url (http://fonts.googleapis.com/css?family=Droid+Serif:400,700);

จากนั้นโหลดแบบอักษรสำหรับองค์ประกอบเฉพาะโดยเช่น:

แบบอักษรตระกูล: 'Droid Serif', sans-serif;

สิ่งนี้ได้รับความนิยมอย่างมากในการใช้ฟอนต์ที่กำหนดเอง แต่ยังนำไปสู่ปัญหาที่ไม่มีการแสดงข้อความจนกว่าเบราว์เซอร์จะโหลดทรัพยากรซึ่งรวมถึงเวลาในการดาวน์โหลดเวลาในการโหลดแบบอักษรและเวลาในการแสดงผล ฉันคาดหวังว่านี่คือสิ่งประดิษฐ์ที่คุณกำลังประสบอยู่

ดังตัวอย่างหนึ่งในหนังสือพิมพ์ระดับชาติของฉัน ข่าววันนี้ ใช้แบบอักษรของเว็บสำหรับพาดหัวข่าว แต่ไม่ใช่โอกาสในการขายดังนั้นเมื่อโหลดไซต์นั้นฉันมักจะเห็นโอกาสในการขายก่อนและครึ่งวินาทีต่อมาช่องว่างทั้งหมดด้านบนจะเต็มไปด้วยบรรทัดแรก (ซึ่งเป็นจริงใน Chrome และ Opera ที่ น้อย. ยังไม่ได้ลองคนอื่น).

(นอกจากนี้นักออกแบบยังโรย JavaScript ทุกหนทุกแห่งในทุกวันนี้ดังนั้นอาจมีคนพยายามทำบางสิ่งที่ชาญฉลาดกับข้อความซึ่งเป็นสาเหตุที่ทำให้ข้อความล่าช้านั่นอาจเป็นเรื่องเฉพาะไซต์มาก: แนวโน้มทั่วไปที่ข้อความจะล่าช้า ฉันเชื่อว่าครั้งเป็นปัญหาแบบอักษรของเว็บที่อธิบายไว้ข้างต้น)

ส่วนที่เพิ่มเข้าไป:

คำตอบนี้ได้รับการโหวตมากขึ้นแม้ว่าฉันจะไม่ได้ลงรายละเอียดมากนักหรือบางที เพราะ ของสิ่งนี้ มีความคิดเห็นมากมายในชุดคำถามดังนั้นฉันจะพยายามขยาย […] เล็กน้อย

เห็นได้ชัดว่าปรากฏการณ์นี้เรียกว่า "แฟลชของเนื้อหาที่ไม่มีการจัดเรียง" โดยทั่วไปและโดยเฉพาะอย่างยิ่ง "แฟลชของข้อความที่ไม่มีการจัดเรียง" การค้นหา“ FOUC” และ“ FOUT” จะให้ข้อมูลเพิ่มเติม

ฉันสามารถแนะนำ โพสต์ของ Paul Irish นักออกแบบเว็บไซต์เกี่ยวกับ FOUT เกี่ยวกับแบบอักษรของเว็บ .

สิ่งที่สังเกตได้ก็คือเบราว์เซอร์ต่างๆจัดการสิ่งนี้แตกต่างกัน ฉันเขียนไว้ข้างต้นว่าฉันได้ทดสอบ Opera และ Chrome ซึ่งทั้งคู่มีพฤติกรรมคล้ายกัน คนที่ใช้ WebKit ทั้งหมด (Chrome, Safari ฯลฯ ) เลือกที่จะหลีกเลี่ยง FOUT by ไม่ การแสดงข้อความแบบอักษรของเว็บด้วยแบบอักษรสำรองในระหว่างช่วงเวลาการโหลดแบบอักษรบนเว็บ แม้ว่า แบบอักษรของเว็บถูกแคชไว้ที่นั่น จะ ล่าช้าในการแสดงผล . มีความคิดเห็นมากมายในเธรดคำถามนี้ที่พูดเป็นอย่างอื่นและมันก็ไม่ถูกต้องที่ฟอนต์แคชจะทำงานเช่นนี้ แต่เช่น จากลิงค์ด้านบน:

คุณจะได้รับ FOUT ในกรณีใดบ้าง

• จะ: การดาวน์โหลดและแสดง ttf / otf / woff ระยะไกล
• จะ: แสดง ttf / otf / woff ที่แคชไว้
• จะ: การดาวน์โหลดและแสดง data-uri ttf / otf / woff
• จะ: การแสดงข้อมูลแคช - uri ttf / otf / woff
• จะไม่: แสดงแบบอักษรที่ติดตั้งและตั้งชื่อไว้แล้วในกองแบบอักษรดั้งเดิมของคุณ
• จะไม่: แสดงฟอนต์ที่ติดตั้งและตั้งชื่อโดยใช้ตำแหน่ง local ()

เนื่องจาก Chrome รอจนกว่าความเสี่ยงทั้งสี่จะหมดไปก่อนที่จะแสดงผลจึงทำให้เกิดความล่าช้า ซึ่ง ขอบเขต เอฟเฟกต์สามารถมองเห็นได้ (โดยเฉพาะเมื่อโหลดจากแคช) ดูเหมือนว่าจะขึ้นอยู่กับสิ่งอื่น ๆ จำนวนข้อความที่ต้องแสดงผลและอาจเป็นปัจจัยอื่น ๆ แต่การแคชไม่ได้ทำให้เอฟเฟกต์หมดไป

นอกจากนี้ไอริชยังมีการอัปเดตเกี่ยวกับพฤติกรรมของเบราว์เซอร์ในปี 2554–04–14 ที่ด้านล่างของโพสต์

• Firefox (ณ FFb11 และ FF4 Final) ไม่มี FOUT อีกต่อไป! วู้ฮู้! http://bugzil.la/499292 โดยทั่วไปข้อความจะมองไม่เห็นเป็นเวลา 3 วินาทีจากนั้นจะนำแบบอักษรสำรองกลับมา แบบอักษรอาจจะโหลดภายในสามวินาทีนั้นแม้ว่า ... หวังว่า ..
• IE9 รองรับ WOFF และ TTF และ OTF (แม้ว่าจะต้องใช้ไฟล์ บิตฝัง ตั้งสิ่ง - ส่วนใหญ่สงสัยถ้าคุณใช้ WOFF) ยังไง !!! IE9 มี FOUT :(
• Webkit มี แพทช์รอที่จะลงจอด เพื่อแสดงข้อความสำรองหลังจาก 0.5 วินาที พฤติกรรมเช่นเดียวกับ FF แต่ 0.5 วินาทีแทนที่จะเป็น 3 วินาที

หากนี่เป็นคำถามที่มุ่งเป้าไปที่นักออกแบบเราสามารถหาวิธีหลีกเลี่ยงปัญหาประเภทนี้ได้เช่น webfontloader แต่นั่นคงเป็นอีกคำถามหนึ่ง ลิงก์ของ Paul Irish ให้รายละเอียดเพิ่มเติมเกี่ยวกับเรื่องนี้

---

มีสิ่งที่จะเพิ่มคำอธิบาย? ปิดเสียงในความคิดเห็น ต้องการอ่านคำตอบเพิ่มเติมจากผู้ใช้ Stack Exchange ที่เชี่ยวชาญด้านเทคโนโลยีคนอื่น ๆ หรือไม่? ดูกระทู้สนทนาฉบับเต็มได้ที่นี่ .