shift

جاوا اسکریپت ناهمزمان در مقابل جاوا اسکریپت به تاخیر افتاده (Asynchronous vs Deferred)

جاوا اسکریپت ناهمزمان در مقابل جاوا اسکریپت به تاخیر افتاده (Asynchronous vs Deferred)

عاطفه
دسته: طراحی  تگ ها: تفاوت async و defer در اسکریپت چیست , استفاده از defer بهتر است یا async , ویژگی defer در جاوااسکریپت چیست , ویژگی async در جاوااسکریپت چیست

 

 جاوا اسکریپت به‌عنوان یک "منبع مسدودکننده پارسر" در نظر گرفته‌شده است. به این معنی که مرورگر از عملیات تجزیه‌وتحلیل HTML به‌وسیله جاوا اسکریپت منع شده و برای مدت‌زمانی متوقف می‌شود. هنگامی‌که پارسر به تگ <Script> می‌رسد، چه به‌صورت Internal و یا External باشد، تجزیه‌وتحلیل مرورگر متوقف می‌شود تا عمل بارگزاری فایل‌های جاوا اسکریپت انجام شود.
این رفتار می‌تواند مشکل‌ساز باشد اگر ما چندین فایل جاوا اسکریپت را بر روی یک صفحه بارگیری کنیم، زیرا در این صورت در بارگیری اولیه صفحات اختلال ایجاد می‌شود و به طول می‌انجامد، حتی اگر آن سند واقعاً به آن فایل‌ها وابستگی نداشته باشد.
خوشبختانه عنصر <script> دو ویژگی async و defer دارد، که این ویژگی‌ها می‌تواند به ما کنترل بیشتری در مورد اینکه فایل‌های خارجی در چه زمانی و چگونه برگزاری و اجرا می‌شوند، بدهد.


اجرای نرمال

قبل از پرداختن به تأثیر این دو ویژگی، ابتدا باید به آنچه در فقدان آن‌ها اتفاق می‌افتد توجه کرد. به‌طور پیش‌فرض، طبق آنچه در بالا ذکرشده اسکریپت عملیات تجزیه‌وتحلیل HTML را به‌منظور بارگزاری فایل‌های جاوا اسکریپت و اجرای آن‌ها (درصورتی‌که داخلی نباشند) متوقف می‌کند.
برای مثال، این عنصر اسکریپت جایی در وسط این صفحه قرار دارد.
 

<html>  
<head> ... </head>  
<body>  
    ...
    <script src="script.js">
    ....
</body>  
</html>  


مادامی‌که بررسی‌کننده سند صفحه را تجزیه‌وتحلیل می‌کند این اتفاق می‌افتد:


تجزیه‌وتحلیل HTML برای رسیدگی به اسکریپت (جهت انجام بارگزاری و اجرا) متوقف می‌شود؛ بنابراین مدت‌زمان برگشت به پارس صفحه طولانی می‌شود.

 

ویژگی async

ویژگی async به مرورگر می‌گوید که فایل اسکریپت می‌تواند به‌صورت ناهمگام اجرا شود. تجزیه‌وتحلیل HTML زمانی که به تگ اسکریپت می‌رسد برای انجام بارگزاری و اجرا به توقف نیاز ندارد. اجرا می‌تواند هرزمانی که اسکریپت پس از بارگزاری به‌صورت موازی با تجزیه سند انجام شود، اتفاق بیفتد.
 

<script async src="script.js">  

 

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


ویژگی Defer

ویژگی Defer به مرورگر می‌گوید که تنها زمانی فایل اسکریپت اجرا می‌شود که عملیات تجزیه‌وتحلیل HTML به‌طور کامل انجام‌شده باشد.
 

<script defer src="script.js">  


شبیه بارگزاری اسکریپت ناهمگام (غیر هم‌زمان)، فایل می‌تواند زمانی که سند HTML هنوز در حال پارس شدن است دانلود شود. بااین‌حال، حتی اگر فایل خیلی قبل‌تر از اینکه پارس سند پایان پذیرد، به‌طور کامل دانلود شده باشد، اسکریپت اجرا نمی‌شود تا زمانی که عملیات تجزیه‌وتحلیل HTML کامل شود.


اجرای ناهمگام، یا اجرای با تأخیر یا اجرای نرمال؟

چه زمانی ما باید از جاوا اسکریپت ناهمگام، اجرای با تأخیر یا اجرای نرمال استفاده کنیم؟ همیشه این موضوع بستگی به وضعیت دارد و سوالاتی برای بررسی وجود دارد.


محل عنصر <Script> کجاست؟

 اجرای ناهمگام و با تأخیر اسکریپت وقتی بااهمیت‌تر است که عنصر <Script> در انتهای سند قرار نگیرد.
سندهای HTML به ترتیب پارس می‌شوند. از اولین تگ <Html> باز تا بسته شدن آن. اگر یک منبع فایل جاوا اسکریپت خارجی درست قبل از بسته شدن تگ </body> قرار داشته باشد استفاده از ویژگی async یا defer بسیار کم‌اهمیت می‌شود؛ زیرا پارسر قسمت زیادی (عمده‌ای) از پارس صفحه را انجام داده است و فایل‌های جاوا اسکریپت قسمت زیادی از انجام پارس را بلاک نمی‌کنند (قسمت کمی را بلاک می‌کنند).


آیا اسکریپت‌ها خودمختار هستند؟

برای فایل‌های اسکریپت که به فایل‌های دیگر وابسته نیستند و یا هیچ وابستگی به خودشان ندارند، ویژگی async مفیدتر است. ازآنجاکه ما دقیقاً نمی‌دانیم که کدام نقطه فایل اجرا می‌شود، بارگیری ناهمگام مناسب‌ترین گزینه است.


آیا اسکریپت به یک تجزیه کامل DOM اتکا می‌کند؟

در بسیاری از موارد فایل اسکریپت شامل توابعی است که نیاز به تعامل با DOM دارد. یا ممکن است به فایل‌های دیگر آن صفحه وابسته باشد. در این موارد، قبل از اجرای اسکریپت، DOM باید کاملاً پارس شود. به‌طورمعمول، این فایل در پایین صفحه قرار خواهد گرفت تا مطمئن شود همه‌چیز قبل از آن پارس شده است. بااین‌حال اگر به هر دلیلی، اگر این فایل نیاز است در جای دیگر قرار گیرد، ویژگی Defer می‌تواند مورداستفاده قرار گیرد.


آیا اسکریپت یک وابستگی (dependency) است؟

درنهایت، اگر اسکریپت وابستگی (dependency) کوچکی دارد و یا با سایر فایل‌ها وابستگی دارد، ممکن است مفیدتر باشد که آن را به‌صورت inline تعریف کنیم. اگرچه داشتن اسکریپت داخلی عملیات تجزیه‌وتحلیل HTML را مسدود می‌کند، اما اگر اندازه اسکریپت کوچک باشد، نباید دخالت قابل‌توجهی داشته باشد. علاوه بر این، اگر آن به فایل‌های دیگر وابسته باشد، ممکن است مسدود کردن پارس جزئی ضروری باشد.


پشتیبانی و موتور مرورگرهای مدرن

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

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