shift

تاخیر در بارگذاری جاوا اسکریپت (Defer parsing of JavaScript)

تاخیر در بارگذاری جاوا اسکریپت (Defer parsing of JavaScript)

عاطفه
دسته: ابزارها  تگ ها: تاخیر در بارگذاری جاوا اسکریپت , تاخیر جاوا اسکریپت بر سرعت صفحات , حل مشکل تاخیر در بارگذاری جاوا اسکریپت

 

تأخیر در بارگذاری جاوا اسکریپت چیست و چگونه انجام می‌شود؟

تأخیر در بارگذاری جاوا اسکریپت به معنی بارگذاری یا تجزیه جاوا اسکریپت بعد از بارگذاری محتوای صفحه است. به‌طور خلاصه:

  1. با استفاده از رویداد "on load" جاوا اسکریپت خارجی را صدا می‌زنیم.
  2.  جاوا اسکریپت خارجی قبل از محتوای صفحات بارگذاری شده بارگذاری نمی‌شود.
  3. جاوا اسکریپت خارجی پس از محتوا اجرا می‌شود و بر روی صفحه تأثیر می‌گذارد.

توضیحات

تأخیر در لود شدن جاوا اسکریپت یکی از آن مسائل در وب است که برای پیدا کردن راه‌حل نهایی و مناسب برای آن ممکن است به دردسر زیادی بیافتید. بسیاری از افراد راه‌حل آن را فقط استفاده از به تعویق انداختن "یا defer" یا بعضی فقط استفاده از"async" می‌دانند و بعضی دیگر گذاشتن جاوا اسکریپت در انتهای صفحه را پیشنهاد می‌کنند؛ اما هیچ‌کدام از این روش‌ها مشکل شمارا حل نمی‌کند و شما دوباره باید دنبال راه‌حل باشید.

 

فایل اسکریپت برای صدازدن جاوا اسکریپت

این کد در HTML شما قبل از تگ </body> قرار می‌گیرد. در اینجا فایل defer.js فایل خارجی است.


<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "defer.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>

این کد چه‌کاری را انجام می‌دهد؟

این کد به مرورگر می‌گوید که باید ابتدا صبر کند تا تمام صفحه لود شود. سپس شروع به بارگذاری فایل جاوا اسکریپت کند.

دستورالعمل خاص

  1.  کپی کد بالا
  2.  انتقال کد در HTML قبل از تگ </body>
  3.  تغییر نام defer.js به نام فایل JS خارجی خودتان
  4.  از درست بودن مسیر فایل اطمینان پیدا کنید. به‌عنوان‌مثال: اگر شما فقط "defer.js" را می‌گذارید. defer.js باید در پوشه‌ای که فایل HTML قرار دارد واقع باشد.

 

چگونه شما این کد را می‌توانید استفاده کنید؟

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


چرا روش‌های دیگر کار نمی‌کند؟

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


چرا این موضوع مهم است؟

این موضوع مهم است؛ زیرا گوگل سرعت بارگذاری صفحه را به‌عنوان فاکتوری مهم در رتبه‌بندی قضاوت می‌کند و کاربران می‌خواهند که صفحات سریع‌تر بارگذاری شوند. گوگل سرعت صفحات شمارا از زمانی که آن صدا زده می‌شود تا وقتی‌که صفحه در ابتدای رود است را اندازه‌گیری می‌کند. این به این معنی است که شما می‌خواهید صفحاتتان با بیشترین سرعت ممکن بارگذاری شود. زمان لود صفحات چیزی است که گوگل با آن در مورد صفحات شما قضاوت می‌کند.


فایل‌های نمونه برای آزمودن شما

چند مثال برای توضیح به شما آورده شده است. چند فایل را برای نمونه که شامل یک صفحه HTML و یک اسکریپت که بعد از دو ثانیه انتظار Hello World را می‌گوید. شما می‌توانید تست کنید و ببینید که فقط دریکی از روش‌های زیر نیاز نیست 2 ثانیه صبر کنید.

  • صفحه با اسکریپت خطی (Inline)
  • صفحه با اسکریپت خارجی و استفاده از defer
  • صفحه با استفاده از کدهای بالا


نقطه کلیدی

ارائه محتوا به کاربر در اسرع وقت باید در اولویت باشد. ما نمی‌دانیم که چطور با جاوا اسکریپت باید رفتار کنیم. یک کاربر برای دیدن محتوا به دلیل وجود اسکریپت‌ها نباید منتظر بماند. مهم نیست که فوتر به دلیل وجود جاوا اسکریپت‌ها آهسته لود شود چراکه شاید اصلاً کاربر به‌طرف پایین حرکت نکند.
 

موفق باشید.

نظر خود را بنویسید...
ارسال نظر
لغو