سلام به همه دوستان. طبق برنامه هفتگی که برای موضوع بهبود کارایی در فرانت‌اند در نظر گرفتم، این هفته به قابلیت پیش واکشی پیوند (link prefetching) خواهیم پرداخت. البته اگر پست اول از سری پست‌های بهبود کارایی در فرانت‌اند رو ندیدید بهتون پیشنهاد میکنم اون مطلب رو از دست ندید و اول از اونجا شروع کنین تا بتونید طبق یک مسیر مشخص پیش برید.
اگر بعد از بارگذاری صفحه و برای انجام یک عملیات خاص نیاز به منابع و فایل‌های خاصی دارید، از تکنیک پیش واکشی پیوند (link prefetching) استفاده کنید!
پیش از آنکه وارد جزئیات مسئله شویم لازم است تا با قابلیت prefetch بیشتر آشنایی پیدا کنیم:
پیش واکشی پیوند (به انگلیسی: link prefetching) به مرورگرها اجازه می‌دهد تا منابع مشخصی را پیش از اجرا بارگذاری کنند. این عمل باعث افزایش سرعت و رندر صفحه وبسایت شما (در مقایسه با استراتژی‌های عادی) می‌شود.
پیش واکشی پیوند به مرورگر این اجازه را می‌دهد تا مخفیانه منابع ضروری را که در آینده (بعد از اتمام بارگذاری صفحه) مورد نیاز است را دریافت کند. مرورگر قادر است این منابع را در حافظه نهان (cache) خود ذخیره کند و هر زمان که به این منابع نیاز بود، سریع محتوای ذخیره شده را استفاده کند. زمانی که بارگذاری صفحه جاری به پایان رسید و پردازنده بیکار (idle) شد، مرورگر شروع به دانلود این منابع می‌کند؛ و در زمان پاسخ به یک عملیات خاص (در حالی که منابع مورد نیاز برای این عملیات از قبل توسط مرورگر دریافت شده است)، عملیات سریعا اجرا خواهد شد.
داستان چیست؟
شاید بهتر است برای آن دسته از دوستانی که ممکن است با این مکانیزم آشنایی نداشته باشند کمی این موضوع را شرح دهیم.
تصور کنید که وبسایت شما یک اسلایدر در میانه صفحه دارد. این اسلایدر از یک کتابخانه نسبتا سنگین مانند swiper استفاده می‌کند. مطابق معمول شما منابع مربوط به این کتابخانه را (در بدترین حالت) در بخش head وبسایت خود قرار می‌دهید. البته اگر بخواهید وبسایتتان کمی سریع‌تر به نمایش در بیاید ترجیح می‌دهید که منابع این کتابخانه را (در حالت معمول) در انتهای بخش body خود قرار دهید تا منابع مربوط به این اسلایدر بعد از نمایش صفحه بارگذاری و پردازش شوند. در هر دو این حالت‌ها منابع مربوط به اسلایدر توسط مرورگر کاربر دانلود خواهد شد. اما این تمام ماجرا نیست. چرا که مرورگر پس از دانلود ، مدت زمانی را صرف تجزیه (parse)، کامپایل (compile) و اجرای (execute) این منابع (برای مثال اگر جاوا اسکریپت باشد) می‌کند. در نتیجه حتی اگر کاربر به میانه صفحه برای مشاهده این اسلایدر نرسد، هزینه‌های مربوط به دانلود و مصرف رم و پردازنده برای پردازش این کتابخانه را همین الان هم پرداخت کرده است. به زبان ساده‌تر شما بیهوده منابع کاربر را برای چیزی که به آن نیازی ندارد مصرف کرده‌اید.
حال تصور کنید قابلیت این را داشتید تا هر زمان که کاربر به میانه صفحه و درست پیش از مشاهده اسلایدر رسید، کدهای مربوط به اجرای این اسلایدر را فراخوانی شوند. در این صورت هر زمان که کاربر به قسمتی از صفحه رسید که اسلایدر در آن قرار دارد تمام عملیات مورد نیاز برای نمایش و اجرای این اسلایدر انجام می‌شد و کاربری که گذر آن نیز به این اسلایدر نمی‌افتاد نیازی به عملیات نداشت.
حال اگر این قابلیت را پیاده سازی کنید، متوجه خواهید شد این نوع بارگذاری ممکن است عملیات مربوط به اسلایدر را مختل کند. چرا که این اسلایدر اصطلاحا به صورت تنبل بارگذاری شده است (lazy loading) و زمانی که کاربر روی دکمه‌های اسلایدر کلیک می‌کند اتفاقی نمی‌افتد. دلیل هم واضح است؛ مرورگر در حال دانلود و بارگذاری منابع مربوط به این اسلایدر است و در واقع اسلایدر هنوز راه‌اندازی نشده است تا بخواهد عملیاتی انجام دهد. در نهایت این استراتژی که باعث افزایش سرعت و کارایی وبسایت شما می‌شود در کاهش تجربه کاربری (UX) شما تاثیر می‌گذارد.
اینجا دقیقا جایی است که پیش واکشی پیوند (link prefetching) وارد عمل می‌شود. شما منابع مربوط به اسلایدر را از طریق این قابلیت به مرورگر معرفی می‌کنید. مرورگر نیز هر زمان که بارگذاری منابع مهم و ضروری وبسایتتان را تکمیل کرد و اصطلاحا به حالت بیکار درآمد، این منابع را پیش از آنکه کاربر به محدوده مورد نظر برسد دانلود می‌کند. زمانی که کاربر به محدوده نمایش اسلایدر رسید، چون منابع مورد نیاز از قبل دریافت شده و در حافظه نهان مرورگر موجود است در نتیجه فقط مسائل مربوط به راه اندازی و اجرای کدهای اسلایدر باقی می‌ماند و می‌توان گفت اجرای این عملیات آنقدر سریع است که در اکثر مواقع کاربر هیچ تفاوتی را با حالت اول احساس نخواهد کرد. در صورتی که شما به واسطه این قابلیت کارایی وبسایت خود را افزایش داده‌اید و با بارگذاری تنبل منابع غیر ضروری، محتوای اولیه وبسایت خود را سریع‌تر به کار نشان داده‌اید.
افزایش سرعت بارگذاری اولیه وبسایت
معمولا برای نمایش محتوای اولیه وبسایت نیاز به اسکریپت‌های زیادی نیست. در این حالت فقط لازم است تا منابعی را که برای نمایش و عملکرد صحیح محتوای اولیه صفحه (قسمت بالایی صفحه که کاربر در زمان بارگذاری می‌بیند) نیاز است را بارگذاری کنید و بارگذاری باقی منابع را به بعد از اتمام عملکرد اصلی مرورگر موکول کنید. یعنی عملا منابع مورد نیاز شما به دو بخش تقسیم می‌شوند:
مطابق این دسته بندی، می‌توان بخش عمده‌ای (و نه همه) از منابع غیر ضروری را از طریق قابلیت پیش واکشی پیوند بارگذاری کرد. یعنی زمانی که مرورگر بعد از پردازش‌های مهم، ضروری و اصلی به حالت بیکار در آمده است. به همین دلیل صفحه مورد نظر (که شامل تعداد محدودی منابع ضروری برای نمایش است) سریع‌تر بارگذاری می‌شود.
کاهش زمان مسدود شدن رشته اصلی پردازنده
متاسفانه موضوع کارایی فقط به دانلود و سرعت و حجم کم و موضوعات این چنینی خلاصه نمی‌شود. به علاوه این مسائل، مسئله مهم دیگر تجزیه، کامپایل و اجرای کدهای جاوا اسکریپت است که شما در صفحه خود استفاده می‌کنید. هر چقدر حجم کدهای مورد استفاده بیشتر باشد، علاوه بر اینکه نمایش صفحه مدت زمان بیشتری طول می‌کشد، زمان بیشتری برای تجزیه، کامپایل و اجرای کد‌ها نیز مورد نیاز است. اگر شما بخواهید همه کدهای جاوا اسکرپیت مورد استفاده خود را در ابتدای بارگذاری صفحه اجرا کنید باعث مسدود شدن رشته اصلی پردازنده می‌شوید. در این مدت زمان صفحه شما هیچ واکنشی به کنش کاربر نشان نمی‌دهد و هر عمل توسط کاربر با تاخیر در اجرا مواجه می‌شود. پس اگر شما بتوانید دریافت، پردازش و اجرای منابع غیر ضروری صفحه را به بعد از زمان بیکار شدن مرورگر موکول کنید، رشته اصلی پردازنده شما مدت زمان کمتری مسدود شده و واکنش به کنش کاربر سریع‌تر اتفاق می‌افتد.
قبل از اینکه به نحوه پیاده سازی این قابلیت بپردازیم، بهتر است بدانید که میزان پشتیبانی مرورگرها از این ویژگی چقدر است؟ در حال حاضر 95 درصد ایرانیان از مرورگرهای استفاده می‌کنند که از این قابلیت به خوبی پشتیبانی می‌کنند. متاسفانه از بین مرورگرهای پر استفاده فقط مرورگرهای سافاری اپل از این قابلیت (حتی در آخرین نسخه!!!) پشتیبانی نمی‌کنند.
برای استفاده از این قابلیت کافی است منابع مورد نیاز خود را با استفاده از تگ لینک (link) و به صورت زیر تعریف کنید و آن را در بخش head کدهای HTML صفحه وبسایت خود قرار دهید. برای استفاده از این قابلیت نیازی به تعیین نوع فایل ندارید:
<link rel="prefetch" href="/assets/js/swiper.js">
همچنین شما می‌توانید در HTTP Header پاسخ صفحه HTML مورد نظر نیز این‌کار را انجام دهید:
Link: </assets/js/swiper.js>; rel=prefetch
همچنین پلاگین‌هایی وجود دارند که به در خودکار سازی این فرایند در ابزارهای ساخت کمک می‌کنند. برخی از ابزارهای ساخت مانند Webpack نیز به صورت ذاتی و بدون نیاز به پلاگین (با استفاده از قابلیت کامنت جادویی) این قابلیت را در اختیار شما قرار می‌دهند.
در این پست تلاش کردیم تا به زبان ساده با استفاده از قابلیت پیش واکشی پیوند (link prefetching)، به شما در بالا بردن کارایی و سرعت بارگذاری صفحه وبسایتتان کمک کرده باشیم. استفاده از این قابلیت می‌تواند تا حد زیادی به بهبود کارایی وبسایت شما کمک کرده و کلید افزایش سرعت و کارایی وبسایتتان باشد.
در پست بعدی به یکی دیگر از روش‌های بهبود کارایی در فرانت‌اند می‌پردازیم. اگر علاقه‌مند به این سری از پست‌ها هستید لطفا پست بعدی ما را نیز بخوانید.
اگر در مورد این مطلب سوال، نظر یا پیشنهادی دارید لطفا با ما به اشتراک بگذارید. همچنین منتظر پست‌های آتی ما در زمینه بهبود کارایی در فرانت‌اند باشید.
