🚀 ترفند کوچک برای لود سریع‌تر JS با defer

خیلی وقت‌ها اسکریپت‌های سنگین باعث می‌شوند لود اولیه صفحه کند شود و First Paint دیر اتفاق بیفته. یک راه ساده و امن برای بهتر شدن تجربه کاربر، استفاده از attribute به‌دردبخور defer در اسکریپت‌های خارجی است. 😎

وقتی روی <script> از defer استفاده می‌شود:
- HTML بدون توقف پارس می‌شود ✅
- فایل JS در پس‌زمینه دانلود می‌شود ✅
- اجرای JS بعد از کامل شدن HTML و قبل از DOMContentLoaded انجام می‌شود ✅

<!-- خوب برای اسکریپت‌های غیرضروری در لحظه اول -->
<script src="/static/js/app.js" defer></script>

<!-- اگر به ترتیب اجرا نیاز داری، همین ترتیب tagها رعایت می‌شود -->
<script src="/static/js/vendor.js" defer></script>
<script src="/static/js/main.js" defer></script>

برخلاف async، ترتیب اجرای اسکریپت‌ها با defer حفظ می‌شود، که برای بیشتر پروژه‌های Web امن‌تر و قابل‌پیش‌بینی‌تر است. 🌱

مرجع بیشتر: MDN – <script> element

یک بار روی اسکریپت‌های عمومی و analytics امتحان شود، تاثیرش روی سرعت حس می‌شود. ⚡️

🔖 #Web #وب #Frontend #Backend #HTML #script #defer #Performance #Frontend #Web

👤 Developix

💎 Channel: @DevelopixWeb