למה דפי אינטרנט מיד להציג את הטקסט שלהם?

אם אתה נוטה לצפות בחלונית הדפדפן עם עין נשר, ייתכן שהבחנת שדפים מעמיסים תכופות את התמונות ואת הפריסה שלהם לפני טעינת הטקסט - תבנית הטעינה ההפוכה המדויקת שחווינו במהלך שנות ה -90. מה קורה?

מפגש השאלות והתשובות של היום מגיע אלינו באדיבות SuperUser - חלוקה מחודשת של Stack Exchange, קיבוץ מונחה על ידי הקהילה של אתרי אינטרנט של Q & A.

השאלה

SuperUser הקורא לורן הוא מאוד סקרן לגבי למה בדיוק דפים נראה לטעון אלמנטים אחרת לגמרי מאשר הם עשו פעם. הוא כותב:

שמתי לב כי לאחרונה אתרים רבים איטיים להציג את הטקסט שלהם. בדרך כלל, את הרקע, תמונות וכן הלאה הולכים להיות נטען, אבל לא טקסט. לאחר זמן מה הטקסט מתחיל להופיע כאן ושם (לא תמיד את כל זה באותו זמן).

זה בעצם עובד ההפך כפי שהיה פעם, כאשר הטקסט הוצג הראשון, ולאחר מכן את התמונות ואת השאר היה טוען לאחר מכן. איזו טכנולוגיה חדשה יוצרת בעיה זו? רעיון כלשהו?

שים לב שאני על חיבור איטי, אשר כנראה מדגיש את הבעיה.

ראה [למעלה] לדוגמה - הכל טעון אבל זה לוקח עוד כמה שניות לפני הטקסט מוצג סוף סוף.

אז מה נותן? לורן, ורבים מאיתנו, זוכר את הזמן שבו הטקסט נטען הראשון וכל השאר - GIF אנימציה אנימציה, רקע רעפים, וכל שאר artifacts של סוף שנות ה -90 גלישה באינטרנט - הגיע מאוחר יותר. מה גורם למצב הנוכחי של אלמנטים עיצוב הראשון, טקסט מאוחר יותר?

התשובה

תורם SuperUser דניאל אנדרסון מציע תשובה מפורטת להפליא שמגיע ישר לתחתית המסתורין של "

אחת הסיבות לכך היא שמעצבי אתרים כיום אוהבים להשתמש בגופני אינטרנט (בדרך כלל בפורמט WOFF), למשל. באמצעות גופני אינטרנט של Google.

בעבר, הגופנים היחידים שניתן היה להציג באתר היו אלה שהמשתמש הותקן באופן מקומי. מאז למשל משתמשי מקינטוש ו- Windows לא בהכרח יש את הגופנים אותו, מעצבים אינסטינקטיבית תמיד מוגדרים כללים

משפחת גופן: אריאל, הלויטיקה, סאנס-סריף; 

שם, אם הגופן הראשון לא נמצא על המערכת, הדפדפן יחפש את השני, ולבסוף חזרה "sans-serif" גופן.

עכשיו, ניתן לתת כתובת אתר של גופן בתור כלל CSS כדי לקבל את הדפדפן כדי להוריד גופן, ככזה:

כתובת אתר של @import (http://fonts.googleapis.com/css?family=Droid+Serif: 400,700); 

ולאחר מכן לטעון את הגופן עבור אלמנט מסוים על ידי למשל:

משפחת גופן: 'Droid Serif', sans-serif; 

זה מאוד פופולרי כדי להיות מסוגל להשתמש גופנים מותאמים אישית, אבל זה גם מוביל לבעיה כי לא מוצג טקסט עד המשאב נטען על ידי הדפדפן, הכולל את זמן ההורדה, זמן הטעינה גופן זמן לדקלם. אני מניח שזה הוא artifact כי אתה חווה.

לדוגמה, אחד העיתונים הלאומיים שלי, Dagens Nyheter, משתמש בגופני אינטרנט לכותרות שלהם, אך לא בפניות שלהם, ולכן כאשר האתר נטען אני בדרך כלל רואה את הפניות הראשונות, ואחרי חצי שנייה כל השטחים הריקים שמעליהם מאוכלסים עם כותרות (זה נכון ב- Chrome וב- Opera, לפחות לא ניסית אחרים).

(כמו כן, מעצבים מפזרים את ג'אווהסקרט לחלוטין בכל מקום בימים אלה, אז אולי מישהו מנסה לעשות משהו חכם עם הטקסט, ולכן הוא מתעכב, זה יהיה מאוד ספציפי לאתר, אם כי: הנטייה הכללית לטקסט להתעכב אלה פעמים הוא סוג הגופנים באינטרנט שתואר לעיל, אני מאמין.)

בנוסף:

תשובה זו נעשתה מקופחת מאוד, אם כי לא נכנסתי לפרטים רבים, או אולי כי של זה. היו תגובות רבות בחוט השאלה, אז אני אנסה להרחיב קצת [...]

התופעה מוכרת, ככל הנראה, "הבזק של תוכן בלתי מנוצל" בכלל, ו"הבזק של טקסט לא מנוסח "בפרט. מחפש "FOUC" ו "FOUT" נותן מידע נוסף.

אני יכול להמליץ ​​על פוסט האינטרנט של פול איריש על FOUT בקשר עם גופני אינטרנט.

מה אפשר לציין הוא כי דפדפנים שונים להתמודד עם זה אחרת. כתבתי למעלה כי בדקתי את Opera ו- Chrome, שגם הם התנהגו בצורה דומה. כל אלה מבוססי WebKit (כרום, ספארי, וכו ') לבחור להימנע FOUT ידי לא עיבוד טקסט גופן אינטרנט עם גופן downback במהלך תקופת הטעינה באינטרנט. אפילו אם גופן האינטרנט הוא במטמון, שם רצון להיות עיכוב לדקלם. יש הרבה הערות בנושא זה פתיל אומר אחרת וכי הוא שטוח שגוי כי גופנים במטמון מתנהגים ככה, אבל למשל מהקישור לעיל:

באילו מקרים תקבל FOUT

• Will you הורדה והצגה של ttf מרוחק / otf / woff
• Will you הצגת קובץ ttf / otf / woff בקובץ שמור
• Will you הורדה והצגה של נתוני ttf / otf / woff
• Will you הצגת מטמון נתונים / ttf / otf / woff
• לא יהיה: מציג גופן שכבר מותקן ושמו בערימת הגופן המסורתית שלך
• לא יהיה: הצגת גופן המותקן ונקרא באמצעות המיקום המקומי ()

מכיוון ש- Chrome מחכה עד שהסיכון של FOUT ייעלם לפני העיבוד, הדבר יביא לעיכוב. לאיזה היקף האפקט גלוי (במיוחד בעת טעינה מהמטמון) נראה תלוי בין היתר בכמות הטקסט שצריך להיות נתון ואולי גורמים אחרים, אבל במטמון לא להסיר לחלוטין את האפקט.

אירית יש גם כמה עדכונים לגבי התנהגות הדפדפן כמו של 2011-04-14 בתחתית ההודעה:

• אתר (החל FFb11 ו FF4 סופי) אין עוד FOUT! ביסודו של דבר הטקסט הוא בלתי נראה במשך 3 שניות, ואז זה מביא בחזרה את הגופן חזרה. Webfont כנראה לטעון בתוך שלוש שניות אלה ... אבל אני מקווה ...
• IE9 תומך WOFF ו TTF ו OTF (אם כי זה דורש הטבעה bitset דבר - בעיקר לשגות אם אתה משתמש WOFF). למרות זאת!!! IE9 יש FOUT. You
• Webkit יש תיקון מחכה לנחות כדי להציג טקסט חזרה לאחר 0.5 שניות. אז אותה התנהגות כמו FF אבל 0.5s במקום 3s.

אם זה היה שאלה שמטרתה מעצבים, אפשר ללכת בדרכים כדי למנוע בעיות מסוג זה, כגון webfontloader, אבל זו תהיה שאלה אחרת. הקישור פול אירי נכנס לפרטים נוספים בעניין זה.

יש לך משהו להוסיף להסבר? נשמע את ההערות. רוצה לקרוא תשובות נוספות ממשתמשים אחרים בעלי ידע טכנולוגי מתמצא? בדוק את נושא הדיון המלא כאן.