‏بلاک کردن عمدی رندر با blocking="render"

مقاله از یه مشکل آشنای فرانت‌اند شروع می‌کنه: یه کامپوننت داری که برای رندر کردن چیدمان یا مارک‌آپ «درست»ش به JavaScript سمت کلاینت وابسته‌ست. توی این حالت فقط سه انتخاب داری: یا یه «فلش» از کامپوننت بدون استایل رو قبول کنی، یا تا وقتی اسکریپت کامپوننت رو آماده کنه پنهانش کنی (که خودش می‌تونه پرش چیدمان بسازه)، یا با بلاک کردن رندر سعی کنی قبل از این‌که کاربر چیزی ببینه همه‌چی سر جاش باشه.

نویسنده توضیح می‌ده که اسکریپت‌های inline سنتی (و اسکریپت‌های خارجی بدون async یا defer) پارسر-بلاک‌کننده هستن؛ یعنی پارسر HTML از خوندن هر چیزی پایین‌تر از اسکریپت متوقف می‌شه. ولی همین هم تضمین نمی‌ده که فلش رخ نده، چون مرورگر ممکنه همون تیکه‌هایی که تا اون لحظه دریافت کرده رو رنگ کنه. اگه اسکریپت بلاک‌کننده رو بالای کامپوننت ببری هم فرزندهاش هنوز پارس نشدن و نمی‌تونی بخونیشون؛ حتی توی connectedCallback هم زوده، چون عنصر قبل از این‌که فرزندهاش به DOM وصل بشن متصل می‌شه.