خطای Forced Reflow (Layout Thrashing)

یکی از خطاهای رایجی که در گزارش ابزارهای تحلیل عملکرد وب‌سایت مشاهده می‌شود، خطای Forced Reflow یا همان Layout Thrashing است. این خطا زمانی ظاهر می‌شود که مرورگر برای نمایش صفحه، مجبور شود چندین بار به‌طور غیرضروری محاسبات مربوط به چیدمان عناصر (Layout) را انجام دهد. نتیجه چنین رفتاری، کندی عملکرد سایت، افزایش زمان بارگذاری و ایجاد تجربه کاربری ضعیف خواهد بود.

زمانی که مرورگر صفحه‌ای را بارگذاری می‌کند، ابتدا باید ساختار DOM و CSSOM را ایجاد کند و سپس آن‌ها را ترکیب کرده تا صفحه به‌صورت کامل رندر شود. در این فرآیند، مرورگر موقعیت، اندازه و ظاهر تمام عناصر صفحه را محاسبه می‌کند.

مقالات مرتبط:

خطای Font Display

خطای Document Request Latency

خطای Render-Blocking Resources

به بیان ساده، این خطا زمانی اتفاق می‌افتد که کدهای سایت شما مرورگر را وادار می‌کنند به‌جای یک‌بار محاسبه، چندین بار چیدمان صفحه را از ابتدا انجام دهد.

این خطا اغلب به دلیل دستکاری‌های غیر بهینه در DOM یا CSS به وجود می‌آید. برخی از رایج‌ترین دلایل:

• تغییرات مکرر در استایل‌ها یا کلاس‌ها
  وقتی بارها یک ویژگی CSS مانند width، height یا position تغییر داده می‌شود.
• خواندن و نوشتن همزمان روی DOM
  مثلا وقتی بعد از تغییر یک ویژگی، بلافاصله مقدار آن ویژگی را دوباره از مرورگر می‌خوانیم.
• انیمیشن‌ها و ترنزیشن‌های غیر بهینه
  انیمیشن‌هایی که روی ویژگی‌های حساس به layout مانند top یا left اعمال می‌شوند، به‌جای استفاده از transform یا opacity.
• جدول‌ها و لیست‌های طولانی
  تغییر در یک سلول یا المان باعث می‌شود مرورگر کل جدول یا لیست را دوباره محاسبه کند.

رفع خطای Forced Reflow

1. بهینه‌سازی دستکاری DOM

تغییرات در DOM را به‌صورت گروهی انجام دهید، نه خط به خط. مثلا به‌جای تغییر چندباره استایل یک المان، همه تغییرات را در یک کلاس CSS قرار داده و فقط یک‌بار کلاس را اضافه کنید.

2. استفاده از ویژگی‌های بهینه برای انیمیشن‌ها

برای انیمیشن‌ها به‌جای ویژگی‌هایی مانند top یا left از transform و opacity استفاده کنید. این دو ویژگی باعث Reflow نمی‌شوند و تنها روی GPU پردازش می‌شوند.

3. استفاده از requestAnimationFrame

برای اجرای انیمیشن‌های پیچیده، به‌جای setTimeout یا setInterval از requestAnimationFrame استفاده کنید تا مرورگر هماهنگ با نرخ رفرش صفحه انیمیشن را اجرا کند.

4. Cache کردن مقادیر DOM

اگر نیاز دارید ویژگی‌هایی مثل offsetWidth یا scrollHeight را چند بار استفاده کنید، آن‌ها را یک‌بار بخوانید و در متغیر ذخیره کنید، نه اینکه در هر بار خواندن مرورگر را مجبور به محاسبه مجدد کنید.

5. مجزا کردن لایه‌ها

می‌توانید با استفاده از transform: translateZ(0) یا will-change: transform برخی المان‌ها را در لایه‌های جداگانه GPU قرار دهید تا تغییراتشان باعث Reflow کل صفحه نشود.

جهت مطالعه بیشتر

تأثیر Google PageSpeed بر سئو

معرفی جامع ابزار Google Page Speed

تأثیر Forced Reflow بر سئو و تجربه کاربری

خطای Forced Reflow تأثیر مستقیمی بر سرعت و عملکرد سایت دارد.

کاهش امتیاز Core Web Vitals: معیارهایی مانند INP و CLS بیشتر تحت تأثیر این خطا قرار می‌گیرند.

افزایش مصرف CPU و باتری در موبایل: چون مرورگر باید چندین بار محاسبات سنگین انجام دهد.

تجربه کاربری ضعیف: صفحه هنگام اسکرول یا تعامل کاربر دچار لگ، پرش یا تاخیر می‌شود.

افت رتبه در نتایج گوگل: سرعت پایین یکی از سیگنال‌های منفی برای رتبه‌بندی است.

جمع‌بندی

خطای Forced Reflow (Layout Thrashing) یکی از مهم‌ترین مشکلات عملکردی در سایت‌هاست که باعث کاهش سرعت، افزایش مصرف منابع و افت تجربه کاربری می‌شود. این خطا زمانی رخ می‌دهد که مرورگر مجبور شود بارها محاسبات مربوط به چیدمان را تکرار کند، به‌دلیل تغییرات مکرر یا غیر بهینه در DOM و CSS.

با تکنیک‌هایی مانند بهینه‌سازی تغییرات DOM، استفاده از ویژگی‌های درست در انیمیشن‌ها، بهره‌گیری از requestAnimationFrame و کش کردن مقادیر محاسباتی، می‌توان این خطا را به حداقل رساند.

در نهایت، رفع خطای Forced Reflow نه‌تنها سرعت سایت را افزایش می‌دهد بلکه امتیاز PageSpeed، معیارهای Core Web Vitals و رتبه سئو را نیز بهبود می‌بخشد.