نحوه اجرای جاوااسکریپت در مرورگر
اهداف یادگیری
- آشنایی با روش‌های مختلف قرار دادن جاوااسکریپت در صفحه
- درک تفاوت بین اسکریپت درون‌خطی، داخلی و خارجی
- فهم مفهوم attribute های
deferوasync - دانستن محل مناسب قرار دادن تگ
scriptدر سند HTML
مقدمه
برای اینکه مرورگر بتواند کد جاوااسکریپت را اجرا کند، باید آن کد را از طریق تگ script به سند HTML معرفی کنیم. این تگ می‌تواند به چند روش مختلف استفاده شود که هرکدام کاربرد و پیامدهای خاص خود را دارند.
روش‌های قرار دادن جاوااسکریپت در صفحه
۱. جاوااسکریپت درون‌خطی (Inline)
کد جاوااسکریپت مستقیماً داخل یک attribute رویداد HTML نوشته می‌شود:
<button onclick="console.log('کلیک شد')">کلیک کن</button>این روش امروزه توصیه نمی‌شود، چون کد جاوااسکریپت با ساختار HTML قاطی می‌شود و نگهداری آن دشوار خواهد شد. در فصل‌های مربوط به Events روش‌های استاندارد و درست مدیریت رویدادها را یاد خواهید گرفت.
۲. جاوااسکریپت داخلی (Internal)
کد جاوااسکریپت داخل تگ script و در همان فایل HTML نوشته می‌شود:
<script>
console.log("این کد داخلی است");
</script>این روش برای مثال‌های کوچک یا آزمایش سریع مناسب است، اما در پروژه‌های واقعی معمولاً از روش خارجی استفاده می‌شود.
۳. جاوااسکریپت خارجی (External)
کد جاوااسکریپت در یک فایل جداگانه با پسوند .js نوشته و با استفاده از attribute مربوطه به HTML متصل می‌شود:
<script src="main.js"></script>این روش استاندارد و رایج در پروژه‌های حرفه‌ای است، زیرا:
- کد جاوااسکریپت از ساختار HTML جدا می‌ماند (Separation of Concerns)
- فایل جاوااسکریپت می‌تواند در چند صفحه استفاده شود
- مرورگر می‌تواند فایل را Cache کند و در بازدیدهای بعدی سریع‌تر بارگذاری شود
محل قرار گرفتن تگ script
مرورگر سند HTML را از بالا به پایین می‌خواند. اگر تگ script در وسط سند و بدون تنظیمات خاص قرار بگیرد، مرورگر پردازش HTML را متوقف می‌کند تا اسکریپت دانلود و اجرا شود؛ سپس ادامه‌ی صفحه را پردازش می‌کند. به همین دلیل، عادت رایج در گذشته این بود که تگ script را درست قبل از بسته شدن تگ body قرار دهند:
<body>
...
<script src="main.js"></script>
</body>به این ترتیب، مرورگر ابتدا کل محتوای صفحه را نمایش می‌دهد و سپس اسکریپت را اجرا می‌کند.
attribute های defer و async
راه‌حل مدرن‌تر برای این مسئله، استفاده از دو attribute در تگ script داخل head است:
| attribute | رفتار |
|---|---|
defer |
فایل به‌صورت موازی با پردازش HTML دانلود می‌شود، اما اجرای آن تا پایان پردازش کامل HTML به تأخیر می‌افتد. ترتیب اجرای چند اسکریپت defer حفظ می‌شود. |
async |
فایل به‌صورت موازی دانلود می‌شود و به‌محض آماده شدن، بلافاصله اجرا می‌شود؛ حتی اگر HTML هنوز کامل پردازش نشده باشد. ترتیب اجرا بین چند اسکریپت async تضمین‌شده نیست. |
<head>
<script src="main.js" defer></script>
</head>تحلیل کد
در مثال بالا، با اینکه تگ script در head قرار دارد (یعنی قبل از محتوای body خوانده می‌شود)، به دلیل وجود defer مرورگر منتظر می‌ماند تا کل HTML پردازش شود و سپس فایل جاوااسکریپت را اجرا می‌کند. این یعنی هم می‌توان اسکریپت را در head نگه داشت و هم مطمئن بود که DOM قبل از اجرای اسکریپت کامل است.
Best Practices
- برای پروژه‌های واقعی همیشه از فایل جاوااسکریپت خارجی استفاده کنید.
- در اکثر موارد، استفاده از
deferدرheadبهترین انتخاب است. - از
asyncمعمولاً برای اسکریپت‌های مستقل که به DOM یا سایر اسکریپت‌ها وابسته نیستند (مثل ابزارهای تحلیلی) استفاده می‌شود. - از جاوااسکریپت درون‌خطی (Inline) برای مدیریت رویدادها خودداری کنید.
جمع‌بندی
جاوااسکریپت را می‌توان به سه روش درون‌خطی، داخلی و خارجی به صفحه اضافه کرد که روش خارجی استاندارد و توصیه‌شده است. attribute های defer و async کنترل می‌کنند که فایل جاوااسکریپت چه زمانی نسبت به پردازش HTML دانلود و اجرا شود؛ defer معمولاً انتخاب مناسب‌تری برای اکثر پروژه‌هاست.