http2 explained
  • English
    • Background
    • HTTP Today
    • Things done to overcome latency pains
    • Updating HTTP
    • http2 concepts
    • The http2 protocol
    • Extensions
    • An http2 world
    • http2 in Firefox
    • http2 in Chromium
    • http2 in curl
    • After http2
    • Further reading
    • Thanks
  • Español
    • Antecedentes
    • HTTP hoy
    • Estrategias para evitar los dolores de latencia
    • Actualizando HTTP
    • Conceptos de http2
    • El protocolo http2
    • Extensiones
    • Un mundo http2
    • http2 en Firefox
    • http2 en Chromium
    • http2 en curl
    • Después de http2
    • Otras lecturas
    • Agradecimientos
  • فارسی
    • مقدمه و معرفی
    • پیش‌زمینه
    • HTTP امروز
    • کارهایی که برای غلبه بر تأخیرها انجام شده
    • آپدیت‌کردن HTTP
    • مفاهیم http2
    • پرتکل http2
    • افزونه‌ها
    • دنیایی با http2
    • http2 در فایرفاکس
    • http2 در کرومیوم
    • http2 در curl
    • بعد از http2
    • خواندن بیشتر
    • تقدیر و تشکر
    • واژه‌نامه
  • Français
    • Avant-propos
    • HTTP aujourd'hui
    • Rustines pour s'accommoder de la latence
    • Mettre à jour HTTP
    • Concepts http2
    • Le protocole http2
    • Extensions
    • Le monde http2
    • http2 et Firefox
    • http2 et Chromium
    • http2 et curl
    • Après http2
    • Lecture complémentaire
    • Remerciements
  • Italiano
    • Background
    • HTTP oggi
    • Tecniche applicate al contrasto della latenza
    • Aggiornare HTTP
    • http2 a grandi linee
    • Il protocollo http2
    • Estensioni
    • Un mondo di http2
    • http2 in Firefox
    • http2 in Chromium
    • http2 in curl
    • Dopo http2
    • Altre letture
    • Riconoscimenti, Ringraziamenti
  • 日本語
    • 背景
    • HTTPの現状確認
    • レイテンシーの闇を克服せよ
    • もうやめて、HTTP 1.1のライフはゼロよ
    • http2のコンセプト
    • http2プロトコル
    • http2は拡張の夢を見る
    • http2化される世界
    • Firefoxにおけるhttp2
    • Chromiumにおけるhttp2
    • curlにおけるhttp2
    • http2の次にくるもの
    • 参考文献
    • 謝辞
  • 한국어
    • 배경
    • HTTP 현재
    • 대기시간의 고통을 극복하기 위해 한일
    • HTTP 업데이팅
    • http2 컨셉
    • http2 프로토콜 (번역되지 않은)
    • 연장선 (번역되지 않은)
    • http2 세계 (번역되지 않은)
    • Firefox에서의 http2
    • Chromium에서의 http2
    • curl에서의 http2
    • HTTP2 다음에 오는 것
    • 참조
    • 감사의 말
  • Português
    • Antecedentes
    • HTTP Hoje
    • Estratégias para evitar as dores da latência
    • Atualizando HTTP
    • Conceitos de http2
    • O protocolo http2
    • Extensões
    • Um mundo http2
    • http2 e Firefox
    • http2 e Chromium
    • http2 e curl
    • Após o http2
    • Outras leituras
    • Agradecimentos
  • русском
    • История
    • HTTP сегодня
    • Шаги, предпринятые для преодоления задержки
    • Обновление HTTP
    • Концепция http2
    • Протокол http2
    • Расширения
    • Мир http2
    • http2 в Firefox
    • http2 в Chromium
    • http2 в curl
    • После http2
    • Дальнейшее чтение
    • Благодарности
  • Svenska
    • Bakgrund
    • HTTP idag
    • Tricks för att komma över fördröjningssmärtor
    • Uppdatera HTTP
    • http2-koncept
    • http2-protokollet
    • Utökningar
    • En http2-värld
    • http2 i Firefox
    • http2 i Chromium
    • http2 i curl
    • Efter http2
    • Fortsatt läsning
    • Tack
  • Türkçe
    • Arkaplan
    • HTTP'nin Bugünü
    • Gecikmelerin üstesinden gelmek için yapılanlar
    • HTTP'nin güncellenmesi
    • http2 konseptleri
    • http2 protokolü
    • Uzantılar
    • http2 dünyası
    • Firefox'da http2
    • Chromium'da http2
    • curl'de http2
    • http2 sonrası
    • Daha fazla bilgi için
    • Teşekkürler
  • 中文
    • 背景
    • HTTP的现状
    • 那些年,克服延迟之道
    • 升级HTTP
    • http2的观念
    • http2协议
    • 扩展
    • http2的世界
    • Firefox里的http2
    • Chromium里的http2
    • Curl里的http2
    • 后http2时代
    • 扩展阅读
    • 致谢
Powered by GitBook
On this page
  • ۳.۱. Spriting
  • ۳.۲. Inlining
  • ۳.۳. ادغام‌کردن
  • ۳.۴. توزیع‌کردن

Was this helpful?

Export as PDF
  1. فارسی

کارهایی که برای غلبه بر تأخیرها انجام شده

PreviousHTTP امروزNextآپدیت‌کردن HTTP

Last updated 5 years ago

Was this helpful?

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

۳.۱. Spriting

Spriting روشی است که چندین عکس کوچک‌تر را در قالب یک عکس بزرگ جا می‌دهند. سپس، با جاوا اسکریپت یا CSS، می‌توانید عکس‌های کوچک‌تر را از این عکس بزرگ ببرید و آن‌ها را نمایش دهید.

وب‌سایت‌ها از این روش برای افزایش سرعت استفاده می‌کنند. دانلود یک عکس بزرگ از طریق HTTP 1.1، بسیار سریع‌تر از دریافت ۱۰۰ عکس کوچک‌تر است.

البته، این روش معایبی هم برای صفحاتی که صرفا می‌خواهند ۲ یا ۳تا از این عکس‌ها را نشان دهند هم دارد. هم‌چنین Spriting باعث می‌شود که هنگام پاک‌کردن حافظه‌ی Cache، همه‌ی عکس‌ها با هم پاک شوند، به جای این‌که عکس‌های پراستفاده‌تر بمانند.

۳.۲. Inlining

Inlining هم یک ترفند دیگر برای جلوگیری از فرستادن عکس‌های تکی است که با جاسازی داده‌های عکس در قالب URL کار می‌کند. مزایا و معایب این روش، مشابه Spriting است.

.icon1 {
    background: url(data:image/png;base64,<data>) no-repeat;
}

.icon2 {
    background: url(data:image/png;base64,<data>) no-repeat;
}

۳.۳. ادغام‌کردن

یک وب‌سایت بزرگ، چندین فایل جاوا‌اسکریپت متفاوت دارد. توسعه‌دهندگان از ابزار‌های Front-End تا این فایل‌ها را ادغام یا ترکیب کنند تا مرورگر به جای دریافت چندین فایل کوچک، یک فایل بزرگ را دریافت کند. ولی، در این روش تنها وقتی داده‌های بسیار کمتری نیاز است، داده‌های بسیاری فرستاده می‌شود و هم‌چنین داده‌های بسیاری باید بارگذاری شوند تا تغییرات اعمال شوند.

البته این روش، صرفا برای توسعه‌دهندگان درگیر در پروژه، مشکل ایجاد می‌کند.

۳.۴. توزیع‌کردن

آخرین ترفندی که برای افزایش کارایی ذکر می‌کنم، معمولا با نام توزیع‌کردن (Sharding) شناخته می‌شود. اساسا، به این معنی است که جنبه‌ها و بخش‌های مختلف سرویس را روی چندین میزبان (Host) مختلف بارگذاری کنند. در نگاه اول، ممکن است که این کار عجیب به نظر برسد، ولی دلیل پشت آن، قانع‌کننده است.

در ابتدا، استاندارد HTTP 1.1 مشخص کرده بود که کلاینت‌ها فقط می‌توانند از ۲ کانکشن TCP برای هر Host استفاده کنند. پس برای زیر‌پا‌گذاشتن این قانون، سایت‌های باهوش‌تر از host nameهای جدید استفاده کردند و بنابراین، تعداد کانکشن‌ها و در نتیجه سرعت بارگذاری صفحات بیشتر می‌شد.

به مرور زمان، این محدودیت نیز حذف شد. و امروز کلاینت‌ها می‌توانند به راحتی ۶ تا ۸ کانکشن به هر host name ایجاد کنند. ولی آن‌ها همچنان محدودیت دارند، پس سایت‌ها از این تکنیک برای افزایش تعداد کانکشن‌ها استفاده می‌کنند. از آن‌جایی که تعداد فایل‌ها به ازای هر درخواست افزایش می‌باشد، و همان‌طور که قبلا نشان داده‌ام، کانکشن‌های بیشتر باعث می‌شود که مطمئن شویم که HTTP به خوبی کار می‌کند و صفحات سریع لود می‌شوند. این عجیب نیست که سایت‌ها از بیش از ۵۰ یا حتی ۱۰۰ کانکشن با این تکنیک استفاده کنند. آمارهای اخیر از httparchive.org نشان می‌دهد که ۳۰۰ هزار URL پربازدید جهان به طور متوسط به ۴۰ کانکشن TCP نیاز دارند! و آمار می‌گوید که این تعداد کانکشن‌ها به مرور زمان در حال افزایش است.

علت دیگر برای استفاده از تکنیک توزیع، قراردادن عکس‌ها و منابع مشابه در یک host name جداگانه‌ای که از Cookies استفاده نمی‌کنند است، چرا که امروزه حجم Cookies افزایش چشم‌گیری داشته است. با استفاده از میزبان‌هایی که کوکی ندارند، می‌توانید کارایی را با کاهش حجم درخواست‌های HTTP بالا ببرید!

عکس زیر، یکی از سایت‌های پرطرفدار سوئد را نشان می‌دهد که چگونه منابع مختلف خود را در چندین host name توزیع کرده است.

توزیع عکس‌ها در سایت expressen.se