سلام به همراهان عزیز. طبق برنامه هفتگی با قسمت دیگری از سری پست‌های بهبود کارایی در فرانت‌اند خدمت شما هستیم. پیش از اینکه به سراغ مطلب این هفته بریم، مایلم یادآوری کنم که اگر تا اینجای کار هیچکدوم از پست‌های بهبود کارایی فرانت‌اند رو دنبال نکردید، از پست اول شروع کنید. همچنین اگر فقط قسمت قبل این سری از پست‌ها رو از دست دادین، از این لینک برای مشاهده پست مربوطه استفاده کنید.
با استفاده از قابلیت HTTP Caching، تعداد و زمان ارسال درخواست/دریافت منابع به/از سرور را کاهش دهید. این کار بارگزاری صفحات شما را برای کاربرانی که در آینده دوباره به وبسایتتان باز می‌گردند و یا در حال گشت و گذار هستند، بسیار سریع‌تر می‌کند.
پیش از آنکه به سراغ چرایی استفاده از این قابلیت برویم، بهتر از ابتدا با آن آشنا شویم:
حافظه نهان وب یا میانگیر وب یک مکانیسم برای ذخیره‌سازی موقت (حافظه نهان) از اسناد وب مانند صفحات HTML و تصاویر، به منظور کاهش استفاده از پهنای باند، کاهش بار سرور و کم شدن تاخیر در بارگذاری است. حافظه نهان وب یک کپی از اسنادی که از آن عبور می‌کنند را در خود ذخیره می‌کند. به این ترتیب درخواست‌های بعدی ممکن است از حافظه نهان پاسخ داده شوند. [منبع]
مرورگرهای وب از قابلیتی پشتیبانی می‌کنند که به توسعه دهندگان این اجازه را می‌دهد تا برخی از فایل‌های مورد نظر خود را بر روی دستگاه کاربر ذخیره کنند. بدین صورت کاربر در مراجعه بعدی خود منتظر دریافت این منابع از طریق شبکه اینترنت نخواهد بود بلکه مرورگر از منابع موجود روی دستگاه کاربر (که در مراجعه قبلی ذخیره سازی شده‌اند) ا ستفاده خواهد کرد و به همین دلیل صفحه وبسایت سریع‌تر به کاربر نمایش داده می‌شود.
سرعت، سرعت، سرعت
قطعا مهمترین دلیل استفاده از این قابلیت افزایش سرعت در بارگزاری صفحات می‌باشد. قطعا وبسایت شما حاوی فایل‌هایی است که در سرتاسر وبسایت شما استفاده شده‌اند و مختص به یک صفحه خاص نمی‌باشند؛ مثل فایل سی‌اس‌اس فریم‌ورک بوت استرپ یا فایل‌های جاوا اسکریپت فریم‌ورکت React.js یا Vue.js و یا حتی تصاویر موجود در قالب وبسایت شما که در صفحات مختلف تکرار شده‌اند.
با استفاده از این قابلیت کاربر با مراجعه به هر صفحه نیازی به دریافت دوباره این فایل‌ها نداشته و در نتیجه نمایش و اجرای محتوای داخل صفحه بسیار سریع‌تر اتفاق می‌افتد.
کاهش پهنای باند و منابع سخت‌افزاری مورد استفاده سرور و کاربر
اگر صفحات وبسایت شما روزانه بازدید بالایی دریافت می‌کنند و یا به گونه‌ای است که کاربران زیادی در مدت زمان محدودی (مثلا هر ماه) بیش از دوبار از صفحات شما بازدید می‌کنند، استفاده از این قابلیت به طور قابل ملاحظه‌ای باعث کاهش پهنای باند و استفاده از منابع سخت افزاری سرور شما می‌شود. همچنین کاربران وفادار شما برای بازدید از صفحات هزینه پهنای باند کمتری را پرداخت می‌کنند.
تجربه کاربری
یکی از موارد جذاب در خصوص این قابلیت، ایجاد وب اپلیکیشن‌هایی است که حس اپ‌های نیتیو (Native Applications) را به کاربر می‌دهد. شما به راحتی با استفاده از این قابلیت و ترکیب آن با سرویس ورکر می‌توانید فایل‌های مورد نیاز برای اجرای آفلاین وبسایت خود را بر روی دستگاه کاربر ذخیره سازی کرده تا کاربر بتواند مانند اپلیکیشن‌ها به صورت آفلاین از وبسایت شما استفاده کند.
شما می‌توانید از راه‌های مختلف این قابلیت را پیاده سازی کنید. ساده‌ترین روش برای استفاده از این قابلیت، تنظیم وب سرور می‌باشد.
برای مثال با قرار دادن قطعه کد زیر در فایل htaccess. می‌توانید فایل‌های تصویری موجود در وبسایتتان را به مدت یک ماه بر روی دستگاه کاربر به طور موقت ذخیره کنید. مرورگر بعد از گذشت یک ماه به طور خودکار این تصاویر را از روی دستگاه کاربر پاک می‌کند.
<filesMatch ".(ico|jpg|jpeg|png|gif)$"> Header set Cache-Control "max-age=2592000, public" </filesMatch>
لطفا در پیاده سازی این قابلیت احتیاط کنید
با اینکه استفاده از این قابلیت مزایای مخصوص به خود را دارد اما می‌توانید باعث بروز مشکلاتی شود. به صورت کلی از کش برای محتوایی که به طور مکرر در حال تغییر است استفاده نکنید. البته برای پیاده سازی کش در مرورگر، انواع و اقسام استراتژی‌ها وجود دارد که می‌توانید از آن‌ها استفاده کنید. اما یادتان باشد استفاده نادرست از این قابلیت می‌تواند باعث شود تا کاربر با صفحه‌ای خراب از وبسایت شما مواجه شود.
یکی از بهترین منابع برای آشنایی بیشتر با قابلیت‌ها و استراتژی‌های مختلف موجود در این حوزه، این صفحه از MDN Web Docs می‌باشد. همچنین در این مطلب می‌توانید چندین نمونه از بهترین و بدترین روش‌های پیاده سازی کش را مشاهده کنید.
در این پست تلاش کردیم تا به طور خلاصه و کلی در مورد مزایا و نحوه پیاده سازی ساده سیستم caching در مرورگر صحبت کنیم. این مبحث در وب بسیار گسترده می‌باشد و قابلیت‌ها، استراتژی‌ها، مراحل و امکانات گوناگونی را در بر می‌گیرد. تمام تلاش ما در این سری از پست‌ها نه توضیح و بررسی عمیق موارد موجود بلکه آشنایی و راهنمایی در حوزه کارایی فرانت‌اند است و قطعا شما برای بررسی عمیق و دقیق این موارد نیاز به تحقیق بیشتر (مخصوصا در منابع به روز و به زبان انگلیسی) دارید.
در پست بعدی به سراغ HTTP/2 رفتیم که می‌توانید از طریق لینک زیر به آن دسترسی پیدا کنید:
اگر نظر، پیشنهاد، انتقاد و یا سوالی دارید از بخش نظرات با من در ارتباط باشید.
