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

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

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

คำถาม

ตัวอ่าน SuperUser Laurent สงสัยมากว่าทำไมหน้าดูเหมือนจะโหลดองค์ประกอบที่แตกต่างจากที่พวกเขาทำครั้งเดียว เขาเขียน:

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

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

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

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

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

คำตอบ

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

เหตุผลหนึ่งคือผู้ออกแบบเว็บทุกวันนี้ต้องการใช้แบบอักษรบนเว็บ (ปกติจะอยู่ในรูปแบบ WOFF) เช่น ผ่านแบบอักษร Google เว็บ.

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

ครอบครัวแบบอักษร: Arial, Helvetica, sans-serif; 

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

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

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

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

font-family: 'Droid Serif', sans-serif; 

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

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

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

นอกจากนี้:

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

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

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

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

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

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

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

Irish ยังมีการอัปเดตบางอย่างเกี่ยวกับพฤติกรรมของเบราว์เซอร์ ณ วันที่ 2011-04-14 ที่ด้านล่างของโพสต์:

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

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

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