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

תוכן ללא הכנסה

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

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

השאלה

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

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

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

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

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

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

התשובה

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

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

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

משפחת גופנים: Arial, Helvetica, sans-serif;

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

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

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

ואז טען את הגופן עבור אלמנט ספציפי על ידי למשל:

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

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

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

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

חיבור:

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

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

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

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

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

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

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

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

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

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

---

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