ویرگول
ورودثبت نام
محمد صالح فدایی
محمد صالح فدایی
خواندن ۴ دقیقه·۳ سال پیش

بهبود کارایی در فرانت‌اند: استفاده از HTTP/2

با عرض سلام به همه دوستان و همراهان گرامی؛ طبق روال هفتگی امروز با قسمت پنجم از سری پست‌های بهبود کارایی در فرانت‌اند در خدمت شما هستم. قبل از ورود به جزئیات این بخش، پیشنهاد می‌کنم اگر تا الان هیچکدوم از پست‌های این سری رو نخوندین از قسمت اول شروع کنین. اگر هم قسمت هفته گذشته رو از دست دادین کافیه که از طریق لینک زیر قسمت قبل رو هم بخونین:

https://virgool.io/@ms.fadaei/%D8%A8%D9%87%D8%A8%D9%88%D8%AF-%DA%A9%D8%A7%D8%B1%D8%A7%DB%8C%DB%8C-%D8%AF%D8%B1-%D9%81%D8%B1%D8%A7%D9%86%D8%AA-%D8%A7%D9%86%D8%AF-%D8%A8%D8%AE%D8%B4-4-nokahsavfrbs

استفاده از HTTP/2

با استفاده از این قابلیت، وبسایت شما سریع‌تر بارگزاری خواهد شد. این تکنولوژی در واقع با پشتیبانی از چند ویژگی کلیدی باعث می‌شود تا منابع و فایل‌های موجود بر روی سرور شما به طور موازی و خیلی سریع‌تر از تکنولوژی HTTP/1.1 در سمت کاربر دریافت شود.

اگر هنوز نمی‌دانید HTTP/2 چیست:

تکنولوژی HTTP/2 (در اصل به نام HTTP/2.0) یک بازنگری عمده بر روی پروتکل شبکه ای HTTP می‌باشد که در وب جهان گستر (world wide web) استفاده می‌گردد. HTTP/2 اولین نسخه جدید HTTP از HTTP 1.1 بود که در سال ۱۹۹۷ در RFC 2068 به صورت یک استاندارد درآمده است. کار گروه، HTTP/2 را در دسامبر ۲۰۱۴ جهت در نظر گرفته شدن به صورت یک استاندارد پیشنهادی به گروه راهبری مهندسی اینترنت ارائه کردند و این نهاد در هفده فوریه ۲۰۱۵ اجازه انتشار آن را به عنوان یک استاندارد پیشنهادی صادر نمود. از پایان سال ۲۰۱۵، اکثر مرورگرهای اصلی پشتیبانی از HTTP/2 را به قابلیت‌هایشان افزوده‌اند. [منبع]

چرا؟

در دنیای امروز که همه چیز (مخصوصا در حوزه محصولات نرم‌افزاری) به سرعت در حال پیشرفت است، استفاده از یک تکنولوزی مربوط به 7 سال! قبل دیگر یک توصیه نیست و واقعا هیچ دلیلی برای عدم استفاده از آن وجود ندارد. بسیاری از ابزارهای موجود (و مرتبط) منطبق با تکنولوژی HTTP/2 طراحی و یا بروزرسانی شده‌اند. به زبان ساده اگر می‌خواهید وبسایت بهینه داشته باشید، بهتر است این قابلیت را در سرور خود فعال کنید.

تکنولوژی HTTP/2 باینری است!

برعکس HTTP/1.1 که فرمت آن بر مبنای محتوای متنی بود، HTTP/2.0 داده‌ها را به صورت باینری ارسال و دریافت می‌کند. این امر باعث می‌شود تا پردازش‌های مرتبط با این تکنولوژی نزدیکی بیشتری به زبان ماشین داشته باشد و به همین دلیل نسبت به HTTP/1.1 قدرت انطباق و سرعت بیشتری دارد.

پشتیبانی از قابلیت مولتی پلکسینگ (multiplexing)

در تکنولوژی HTTP/1 مرورگر فقط قادر بود یک ارتباط فعال با سرور داشته باشد و امکان دریافت فایل و رد و بدل کردن اطلاعات به صورت موازی فراهم نبود. به همین دلیل طراحان وب منابع مورد نیاز صفحه را (مانند فایل های css و js) با هم دیگر ترکیب می‌کردند (و به همین دلیل فایل‌های بسیار بزرگی به وجود می‌آمدند) تا مرورگر بتواند طی یک درخواست فایل مورد نیاز صفحه را دریافت کند. چیزی که در HTTP/2 یک عادت و عملیات بد به حساب می‌آید. این مورد در HTTP/2 به طور کامل رفع شده است و مرورگر به راحتی می‌تواند به طور موازی چندین فایل را دریافت و یا ارسال کند.

استفاده از قابلیت فشرده سازی هدر (header compression)

تکنولوژی HTTP/2 از قابلیتی استفاده می‌کند که به آن امکان فشرده سازی هدر را می‌دهد و به همین دلیل تعدادی از سربارهایی که مرتبط به استفاده از HTTP/1.1 بود از بین رفت. از طریق این قابلیت HTTP/2، مرورگر خیلی سریع‌تر داده‌های مهم موجود در هدر را دریافت می‌کند.

پشتیبانی از قابلیت جدید Server Push

از طریق این قابلیت شما می‌توانید منابع ضروری مورد استفاده در صفحات خود را از طریق HTTP Header به مرورگر بفرستید. به همین دلیل مرورگر پیش از آنکه شروع به parse محتوای HTML کند از منابع ضروری مورد نیاز مطلع می‌شود و می‌تواند جلوتر این منابع را به طور موازی با محتوای اصلی دریافت کند.

استفاده تنها از یک اتصال (connection)

در تکنولوژی قدیمی‌تر، مرورگر برای دریافت هر فایل و یا رد و بدل اطلاعات مجبور بود یک اتصال جدید بسازد؛ کاری که به عنوان یک عملیات سنگین و زمان‌بر از آن یاد می‌شود. در حالی که HTTP/2 به راحتی می‌تواند از اتصال موجود (اولین اتصال) برای دریافت‌فایل‌های مختلف استفاده کند و نیازی به ایجاد یک اتصال جدید ندارد!

چگونه؟

استفاده از تکنولوژی HTTP/2 در سرورهایی که از وب سرور Nginx استفاده می‌کنند بسیار راحت است. برای این‌کار کافی است در فایل کانفیگ مربوط به Nginx قسمت مربوط به تنظیمات پورت را پیدا کرده و http2 را آن اضافه کنید:

... listen [::]:443 ssl http2 ipv6only=on; listen 443 ssl http2; ...

البته توصیه می‌شود برای پیاده سازی،از دستورالعمل کامل آن استفاده کنید چرا که همیشه اتفاقاتی برای رخ دادن وجود دارد. همچنین برای وب سرورهای Apache می‌توانید از مستندات رسمی آن استفاده کنید.


در این قسمت تلاش ما بر این بود که شما را قانع کنیم تا وبسایت خود را روی نسخه HTTP/2.0 اجرا کنید. این کار به راحتی و بدون هیچ دردسری به افزایش سرعت، بهینگی در بارگزاری و کارایی وبسایت شما تاثیر می‌گذارد. البته در لحظه نگارش این مقاله نسخه سوم از این پروتکل منتشر شده است که در حال حاضر پشتیبانی 66 درصدی را در بین مرورگرهای مورد استفاده کاربران دارد.

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

https://virgool.io/@ms.fadaei/%D8%A8%D9%87%D8%A8%D9%88%D8%AF-%DA%A9%D8%A7%D8%B1%D8%A7%DB%8C%DB%8C-%D8%AF%D8%B1-%D9%81%D8%B1%D8%A7%D9%86%D8%AA-%D8%A7%D9%86%D8%AF-%D8%A8%D8%AE%D8%B4-6-x1zsp1rfu3u4
فرانت اندپرفورمنسperformanceکاراییfront end
توسعه دهنده و علاقه مند به مباحث Performance و UX در Front-End
شاید از این پست‌ها خوشتان بیاید