افزایش  سرعت وبسایت

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

اسکریپت به طور معمول به صورت زیر نوشته می شد.

<script src=”script.js”></script>

هر زمان که تجزیه کننده HTML این خط را پیدا می کند ، یک درخواست برای واکشی اسکریپت ساخته خواهد شد و اسکریپت اجرا می شود

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

همانطور که می توانید تصور کنید ، این عملیات می تواند تاثیر بسیار زیادی در زمان بارگذاری صفحه داشته باشد.

اگر اسکریپت کمی طولانی تر از حد انتظار طول می کشد ، برای مثال اگر شبکه کمی کند است و یا اگر شما بر روی یک دستگاه تلفن همراه هستید و اتصال کمی درهم و برهم است.

بازدید کننده به احتمال زیاد یک صفحه خالی را ببینید تا اسکریپت لود شده و اجرا شود.

وقتی برای اولین بار HTML را یاد می گیرید ، به شما گفته می شود که برچسب های اسکریپت در <head> tag قرار دارند:

<html>

<head>

   <title>Title</title>

   <script src=”script.js”></script>

</head>

<body>

   …

</body>

</html>

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

سپس ، پس از انجام کامل این کار، به سراغ تجزیه body می رود.

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

یک راه حل بسیار معمول برای این موضوع این است که تگ اسکریپت را پایین صفحه قرار دهید ، درست قبل از بسته شدن برچسب </body>.

با انجام این کار ، اسکریپت بعد از اینکه تمام پیج ها لود و اجرا شد، اجرا می شود .

که به نسبت بهبود زیادی خواهد داشت.

این بهترین راهکاریست که می توانید برای مرور گر های قدیمی تر که defer و async را ساپورت نمی کنند بکار بگیرید .

Defer و Async

هر دو آن ها صفت های Boolean هستند و مثل هم استفاده می شوند.

<script async src=”script.js”></script>

<script defer src=”script.js”></script>

async در مرورگرهای جدید قابل بکارگیریست ، در حالی که مرورگرهای قدیمی تر  از defer پشتیبانی می کنند.

این ویژگی ها تنها در هنگام استفاده از اسکریپت در قسمت head صفحه قرار می گیرند

و اگر شما اسکریپت را در body بگذارید بی فایده هستند.

مقایسه کارایی

بدون استفاده از defer  async در head

در اینجا می بینید که چگونه یک صفحه یک اسکریپت را بدون defer یا async لود می کند:

بدون استفاده از defer یا async در head

بدون استفاده از defer یا async در head

تجزیه تا زمانی که اسکریپت برداشته شده متوقف شده است ، بعد از انجام کامل تجزیه و تحلیل ادامه می یابد.

بدون استفاده از defer  async در body

در اینجا چگونگی لود اسکریپت را با قرار دادن آن در انتهای body می بینید :

افزایش سرعت وبسایت

بدن استفاده از defer و async

تجزیه بدون هیچ گونه مکث انجام می شود ، و زمانی که تمام شد ، اسکریپت آورده شده سپس اجرا می شود .

تجزیه قبل ازاینکه اسکریپت حتی دانلود شود انجام شده است بنابراین  با افزایش سرعت وبسایت به کاربر نمایش داده می شود.

Async در head

در اینجا چگونگی لود یک اسکریپت با async ، قرار داده در برچسب head را می بینید :

async در head و افزایش سرعت وبسایت

async در head

اسکریپت به صورت موازی برداشته شده است ، و هنگامی که آن را آماده شد تجزیه HTML متوقف می شود برای اجرا اسکریپت سپس ادامه میابد.

Defer در  head

در اینجا چگونگی لود یک اسکریپت با defer، قرار داده در برچسب head را می بینید :

Defer در Head و افزایش سرعت وبسایت

Defer در Head

اسکریپت به صورت موازی برداشته شده است ، پس از تجزیه HTML ، اجرا می شود .

تجزیه دقیق مثل زمانی که اسکریپت را در body می گذاریم تمام می شود با این تفات که این بار دانلود شده است از قبل و سریع اجرا می شود .

 

مقایسه defer و async

Async تجزیه تحلیل را بلوک می کند در حالی که defer نمی کند .

هیچ کدام بلوکه شدن رندر را گارانتی نمی کنند.

بهتربن راه کدام است

بهترین کاری که باید انجام دهید برای سرعت بخشیدن به بارگذاری صفحه خود در هنگام استفاده از اسکریپت ها این است که آنها را در head قرار دهید و صفت defer را به آن اضافه کنید.

<script defer src=”script.js”></script>

این سناریو باعث افزایش سرعت رویداد domInteractive است.

با توجه به جوانب مثبت defer ، به نظر می رسد انتخاب بهتری از async است

مگردر مواردی که به تاخیر افتادن رندر اول از نظر شما مسئله ای نباشد.

منبع:flaviocopes

مطلب در تاریخ 23 دی 1398 به روز شده است

0 پاسخ

دیدگاه خود را ثبت کنید

تمایل دارید در گفتگوها شرکت کنید ؟
در گفتگو ها شرکت کنید!

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.