از کروم ۸۳ به بعد، میتوان با ترکیب دو ویژگی link rel="preload" و font-display: optional، مشکلات مربوط به طرحبندی (layout jank) را به طور کامل برطرف کرد.
با بهینهسازی چرخههای رندر، کروم ۸۳ تغییر طرحبندی هنگام پیشبارگذاری فونتهای اختیاری را از بین میبرد. ترکیب <link rel="preload"> با font-display: optional موثرترین راه برای تضمین عدم تغییر طرحبندی هنگام رندر فونتهای سفارشی است.
سازگاری با مرورگرها
برای اطلاعات بهروز در مورد پشتیبانی بین مرورگرها، دادههای MDN را بررسی کنید:
رندر فونت
تغییر طرحبندی یا تغییر طرحبندی زمانی اتفاق میافتد که یک منبع در یک صفحه وب به صورت پویا تغییر کند و منجر به "تغییر" محتوا شود. دریافت و رندر فونتهای وب میتواند مستقیماً باعث تغییر طرحبندی به یکی از دو روش زیر شود:
- یک فونت جایگزین با یک فونت جدید جایگزین میشود ("فلش متن بدون استایل")
- متن «نامرئی» تا زمانی که فونت جدیدی در صفحه رندر شود، نمایش داده میشود («بارش ناگهانی متن نامرئی»)
ویژگی font-display در CSS راهی برای تغییر رفتار رندر فونتهای سفارشی از طریق طیف وسیعی از مقادیر پشتیبانیشده مختلف ( auto ، block ، swap ، fallback و optional ) ارائه میدهد. انتخاب مقدار مورد استفاده بستگی به رفتار ترجیحی برای فونتهای بارگذاریشده بهصورت ناهمگام دارد. با این حال، هر یک از این مقادیر پشتیبانیشده میتوانند طرحبندی مجدد را به یکی از دو روش ذکر شده در بالا، تا به حال، آغاز کنند!
فونتهای اختیاری
ویژگی font-display از یک جدول زمانی با سه دوره زمانی برای مدیریت فونتهایی که قبل از رندر شدن باید دانلود شوند، استفاده میکند:
- بلوک: متن «نامرئی» را نمایش میدهد، اما به محض اتمام بارگذاری، به فونت وب تغییر میکند.
- تعویض: متن را با استفاده از یک فونت سیستم جایگزین رندر کنید، اما به محض اتمام بارگذاری، به فونت وب تغییر دهید.
- شکست: متن را با استفاده از یک فونت سیستم جایگزین رندر کنید.
پیش از این، فونتهایی که با font-display: optional مشخص میشدند، دوره بلوک ۱۰۰ میلیثانیهای داشتند و دوره تعویض نداشتند. این بدان معناست که متن "نامرئی" قبل از تغییر به یک فونت جایگزین، خیلی کوتاه نمایش داده میشود. اگر فونت در عرض ۱۰۰ میلیثانیه دانلود نشود، از فونت جایگزین استفاده میشود و هیچ تعویضی رخ نمیدهد.
font-display: optional در کروم هنگام دانلود فونت پس از دوره بلوک ۱۰۰ میلیثانیهایبا این حال، در صورتی که فونت قبل از اتمام دوره بلوک ۱۰۰ میلیثانیهای دانلود شود، فونت سفارشی رندر شده و در صفحه استفاده میشود.
font-display: optional در کروم هنگام دانلود فونت قبل از دوره بلوک ۱۰۰ میلیثانیهایکروم در هر دو مورد، صرف نظر از اینکه از فونت جایگزین استفاده شده باشد یا فونت سفارشی به موقع بارگذاری شود، صفحه را دو بار رندر مجدد میکند. این باعث ایجاد کمی لرزش در متن نامرئی میشود و در مواردی که فونت جدیدی رندر میشود، باعث ایجاد اختلال در طرحبندی میشود که بخشی از محتوای صفحه را جابجا میکند. این اتفاق حتی اگر فونت در حافظه پنهان دیسک مرورگر ذخیره شده باشد و بتواند قبل از اتمام دوره بلوک بارگذاری شود، رخ میدهد.
بهینهسازیهایی در کروم ۸۳ اعمال شده است تا اولین چرخه رندر برای فونتهای اختیاری که با <link rel="preload'> از قبل بارگذاری شدهاند، به طور کامل حذف شود. در عوض، رندر تا زمانی که فونت سفارشی بارگیری شود یا مدت زمان مشخصی بگذرد، مسدود میشود. این دوره زمانی در حال حاضر ۱۰۰ میلیثانیه تنظیم شده است، اما ممکن است در آینده نزدیک برای بهینهسازی عملکرد تغییر کند.
font-display: optional در کروم هنگام بارگیری اولیه فونتها و دانلود فونت پس از دوره بلوک ۱۰۰ میلیثانیهای (بدون نمایش متن نامرئی) 
font-display: optional در کروم هنگام بارگیری اولیه فونتها و دانلود فونت قبل از دوره بلوک ۱۰۰ میلیثانیهای (بدون نمایش متن نامرئی)پیش بارگذاری فونتهای اختیاری در کروم، احتمال بهم ریختگی طرحبندی و نمایش سریع متن بدون استایل را از بین میبرد. این با رفتار مورد نیاز مشخص شده در ماژول فونتهای CSS سطح ۴ مطابقت دارد، که در آن فونتهای اختیاری هرگز نباید باعث طرحبندی مجدد شوند و مرورگرها میتوانند رندر را برای مدت زمان مناسبی به تأخیر بیندازند.
اگرچه پیشبارگذاری یک فونت اختیاری ضروری نیست، اما احتمال بارگذاری آن قبل از اولین چرخه رندر را تا حد زیادی افزایش میدهد، به خصوص اگر هنوز در حافظه پنهان مرورگر ذخیره نشده باشد.
نتیجهگیری
تیم کروم علاقهمند است تجربیات شما را در مورد پیشبارگذاری فونتهای اختیاری با این بهینهسازیهای جدید بشنود! در صورت بروز هرگونه مشکل یا تمایل به حذف هرگونه پیشنهاد ویژگی، مشکل خود را ثبت کنید .