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
  • 3.1 Spriting
  • 3.2 Inlining
  • 3.3 Concatenation
  • 3.4 Sharding

Was this helpful?

Export as PDF
  1. Svenska

Tricks för att komma över fördröjningssmärtor

PreviousHTTP idagNextUppdatera HTTP

Last updated 5 years ago

Was this helpful?

Som alltid när problem dyker upp så har folk samlats och uppfunnit tricks för att komma runt dem. Några tricks är smarta och användbara, några av dem bara hemska fulhack.

3.1 Spriting

Spriting är termen för att beskriva vad man gör när man stoppar massor av små bilder ihop till en enda stor bild. Sen använder man javascript och CSS för att "skära ut" bitar ur den stora bilden för att visa de små individuella bilderna.

En sajt använder det här tricker för hastighet. Att hämta en enda stor bild är mycket snabbare i HTTP 1.1 än att hämta 100 små bilder.

Självklart har det sina nackdelar för de sidor sidor på sajten som bara vill visa en eller två små bilder och liknande. Det gör också att alla bilder rensas från cachen på samma gång istället för låta de mest använda ligga kvar där.

3.2 Inlining

Inlining är ett annat trick där man underviker att skicka enskilda bilder, och det gör man genom att använda data: URLer inbäddade i CSS-filen. Det har liknande nackdelar som i spriting-fallet ovan.

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

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

3.3 Concatenation

En stor sajt kan lätt hamna i en situation med väldigt många olika javascriptfiler. Frontendverktyg kan hjälpa utvecklarna att slå ihop varenda en av dem till en enda stor klump så att webbläsaren hämtar en enda stor fil istället för dussintals mindre filer. För mycket data skickas därmed när enbart lite behövs. För mycket data laddas om när en enda ändring behövs.

Den här övningen är förstås mest besvärlig för de involverade utvecklarna.

3.4 Sharding

Det sista prestandatricket jag ska nämna kallas ofta för "sharding". Det är principen att hosta olika delar av din sajt från så många olika hostar som möjligt. Det kan förfalla konstigt vid en första anblick men det finns ett logiskt resonemang bakom.

Från början sade HTTP 1.1-specifikationen att en klient endast var tillåten att använda maximalt två TCP-koppel till varje host. Så, för att inte bryta mot specen uppfann smarta sajter nya host namn och - voilá - så kunde du få många fler koppel till din sajt och minska sidladdningstider.

Över tid har den gränsen tagits bort och dagens klienter använder lätt 6-8 koppel per hostnamn, men de behöver fortfarande ha någon gräns så sajter fortsätter att använda den här tekniken för att öka antalet koppel. Med ett ständigt ökande antal objekt (som jag visade tidigare) så måste ett än större antal koppel användas för att få HTTP att prestera bra och göra din sajt snabb. Det är inte ovanligt att enskilda sajter använder långt över 50 eller upp och förbi 100 koppel tack vare den här tekniken. Färsk statistik från httparchive.org visar att av de 300 000 mest populära URLerna i världen så behövs i genomsnitt 40(!) TCP-koppel för att visa sajten, och trendkurvan säger att det fortsätter växa.

En annan anledning att också lägga bilder och liknande resurser på ett separat hostnamn som inte använder cookies, är att storleken på cookies idag kan bli betydande. Genom att använda cookie-lösa bild-värdar så kan du ibland öka prestandan enbart genom att HTTP-förfrågningarna blir så mycket mindre!

Bilden nedan visar paket-spårning och hur det ser ut när en webbläsare besöker en av Sveriges toppsajter, och hur förfrågningarna är distribuerade över flera olika hostnamn.

image sharding at expressen.se