1. HTTP Streaming
Monster on Rails Nov. 2011
Rails 3.1 - Techniken für bessere Ladezeiten
Christian Peters

2. 02.11.201
Zweitag // Gründungsstory
1
The Big Picture
Herkömmlicher Rendering-Prozess
Assets können erst angefragt werden, wenn das angefragte Dokument vollständig vorliegt.
Client Server
09.11.201
Monster on Rails // HTTP Streaming 2
1

3. 02.11.201
Zweitag // Gründungsstory
1
The Big Picture
Herkömmlicher Rendering-Prozess
Assets können erst angefragt werden, wenn das angefragte Dokument vollständig vorliegt.
Client Server
Dokument anfragen
Angefragtes
Dokument
generieren
09.11.201
Monster on Rails // HTTP Streaming 2
1

4. 02.11.201
Zweitag // Gründungsstory
1
The Big Picture
Herkömmlicher Rendering-Prozess
Assets können erst angefragt werden, wenn das angefragte Dokument vollständig vorliegt.
Client Server
Dokument anfragen
Angefragtes
Dokument
Fertiges Dokument ausliefern generieren
Head auswerten
09.11.201
Monster on Rails // HTTP Streaming 2
1

5. 02.11.201
Zweitag // Gründungsstory
1
The Big Picture
Herkömmlicher Rendering-Prozess
Assets können erst angefragt werden, wenn das angefragte Dokument vollständig vorliegt.
Client Server
Dokument anfragen
Angefragtes
Dokument
Fertiges Dokument ausliefern generieren
Head auswerten Angefragte Assets
09.11.201
Monster on Rails // HTTP Streaming 2
1

6. 02.11.201
Zweitag // Gründungsstory
1
The Big Picture
Herkömmlicher Rendering-Prozess
Assets können erst angefragt werden, wenn das angefragte Dokument vollständig vorliegt.
Client Server
Dokument anfragen
Angefragtes
Dokument
Fertiges Dokument ausliefern generieren
Head auswerten Angefragte Assets
DOM
aufbauen
09.11.201
Monster on Rails // HTTP Streaming 2
1

7. 02.11.201
Zweitag // Gründungsstory
1
The Big Picture
Herkömmlicher Rendering-Prozess
Assets können erst angefragt werden, wenn das angefragte Dokument vollständig vorliegt.
Client Server
Dokument anfragen
Angefragtes
Dokument
Fertiges Dokument ausliefern generieren
Head auswerten Angefragte Assets
DOM
aufbauen
09.11.201
Monster on Rails // HTTP Streaming 2
1

8. 02.11.201
Zweitag // Gründungsstory
1
The Big Picture
Herkömmlicher Rendering-Prozess
Assets können erst angefragt werden, wenn das angefragte Dokument vollständig vorliegt.
Client Server
Dokument anfragen
Angefragtes
Dokument
Fertiges Dokument ausliefern generieren
Head auswerten Angefragte Assets
DOM
aufbauen
09.11.201
Monster on Rails // HTTP Streaming 2
1

9. 02.11.201
Zweitag // Gründungsstory
1
The Big Picture
Rendering-Prozess mit Streaming
Assets können schon geladen werden, während der Server noch das Dokument zusammenstellt.
Client Server
09.11.201
Monster on Rails // HTTP Streaming 3
1

10. 02.11.201
Zweitag // Gründungsstory
1
The Big Picture
Rendering-Prozess mit Streaming
Assets können schon geladen werden, während der Server noch das Dokument zusammenstellt.
Client Server
Dokument anfragen
09.11.201
Monster on Rails // HTTP Streaming 3
1

11. 02.11.201
Zweitag // Gründungsstory
1
The Big Picture
Rendering-Prozess mit Streaming
Assets können schon geladen werden, während der Server noch das Dokument zusammenstellt.
Client Server
Dokument anfragen
Head ausliefern Angefragtes
Head auswerten
Dokument
generieren
09.11.201
Monster on Rails // HTTP Streaming 3
1

12. 02.11.201
Zweitag // Gründungsstory
1
The Big Picture
Rendering-Prozess mit Streaming
Assets können schon geladen werden, während der Server noch das Dokument zusammenstellt.
Client Server
Dokument anfragen
Head ausliefern Angefragtes
Head auswerten
Dokument
generieren
Assets
09.11.201
Monster on Rails // HTTP Streaming 3
1

13. 02.11.201
Zweitag // Gründungsstory
1
The Big Picture
Rendering-Prozess mit Streaming
Assets können schon geladen werden, während der Server noch das Dokument zusammenstellt.
Client Server
Dokument anfragen
Head ausliefern Angefragtes
Head auswerten
Dokument
generieren
Assets
efern
kum ent ausli
Fer tiges Do
DOM aufbauen
09.11.201
Monster on Rails // HTTP Streaming 3
1

14. 02.11.201
Zweitag // Gründungsstory
1
HTTP Streaming Basics
Chunked Transfer Encoding
Mit Transfer-Encoding: chunked können Dokumente in Teilstücken ausgeliefert werden.
❖ Kein Content-Length Header
❖ (setzt komplett generiertes HTTP/1.1 200 OK
Content-Type: text/plain
Dokument voraus) Content-Length: 870
09.11.201
Monster on Rails // HTTP Streaming 4
1

15. 02.11.201
Zweitag // Gründungsstory
1
HTTP Streaming Basics
Chunked Transfer Encoding
Mit Transfer-Encoding: chunked können Dokumente in Teilstücken ausgeliefert werden.
❖ Kein Content-Length Header
❖ (setzt komplett generiertes HTTP/1.1 200 OK
Content-Type: text/plain
Dokument voraus) Content-Length: 870
❖ Stattdessen: Transfer-Encoding: chunked
❖ HTTP 1.1 Feature HTTP/1.1 200 OK
Content-Type: text/plain
Chunk Größe vor jedem Chunk
Transfer-Encoding: chunked
❖
25
❖ Transfer mit 0 terminiert This is the data in the first chunk
1C
and this is the second one
19
and this is another one
0
09.11.201
Monster on Rails // HTTP Streaming 4
1

16. 02.11.201
Zweitag // Gründungsstory
1
Cool. Und wann schicken
wir jetzt was für Chunks
raus?
09.11.201
Monster on Rails // HTTP Streaming 5
1

17. 02.11.201
Zweitag // Gründungsstory
1
Cool. Und wann schicken
wir jetzt was für Chunks
raus?
❖ Primäres Ziel:
❖ Der Client soll Javascript- & CSS-Assets früher laden
❖ Kostspielige Datenbankabfragen zurückstellen
09.11.201
Monster on Rails // HTTP Streaming 5
1

18. 02.11.201
Zweitag // Gründungsstory
1
Cool. Und wann schicken
wir jetzt was für Chunks
raus?
❖ Primäres Ziel:
❖ Der Client soll Javascript- & CSS-Assets früher laden
❖ Kostspielige Datenbankabfragen zurückstellen
❖ Also: Layout
❖ Flush nach <head> ... </head> yield
Eigentliches
❖ ➔ Rendern des Layouts bis zum yield? Template
09.11.201
Monster on Rails // HTTP Streaming 5
1

19. 02.11.201
Zweitag // Gründungsstory
1
Das Problem mit content_for...
Layout und Template sind per content_for miteinander verwoben.
<html> Layout
<head>
<title><%= yield :title %></title>
<%= javascript_include_tag :defaults %>
<%= yield :extra_javascripts %>
<%= stylesheet_link_tag :defaults %>
<%= yield :canonical_link %>
</head>
<body>
<aside>
<%= yield :sidebar %>
</aside>
<div class='content'>
<%= yield %>
</div> <% content_for :title, "#{@product.title} im Monster Online-Shop" %>
</body> <% content_for :canonical_link, canonical_product_path(@product) %>
</html>
<% content_for :sidebar do %>
<h1>Dazu passt</h1>
<ul>
<%= render partial: 'cross_selling', collection: @product.cross_sellings %>
</ul>
<% end %>
<h1><%= @product.title %></h1>
<div class='description'>
...
Template </div>
09.11.201
Monster on Rails // HTTP Streaming 6
1

20. 02.11.201
Zweitag // Gründungsstory
1
Die realisierte Lösung
Es wird wechselseitig Layout/Template gerendert und geflusht.
Ordinary Template Rendering in Rails
09.11.201
Monster on Rails // HTTP Streaming 7
1

21. 02.11.201
Zweitag // Gründungsstory
1
Die realisierte Lösung
Es wird wechselseitig Layout/Template gerendert und geflusht.
Ordinary Template Rendering in Rails
Template Rendering with Streaming using Ruby Fibers
09.11.201
Monster on Rails // HTTP Streaming 7
1

22. 02.11.201
Zweitag // Gründungsstory
1
Die realisierte Lösung
Es wird wechselseitig Layout/Template gerendert und geflusht.
Ordinary Template Rendering in Rails
http://yehudakatz.com/2010/09/07/
automatic-flushing-the-rails-3-1-plan/
http://pragdave.blogs.pragprog.com/pragdave/
2007/12/pipelines-using.html Template Rendering with Streaming using Ruby Fibers
09.11.201
Monster on Rails // HTTP Streaming 7
1

23. 02.11.201
Zweitag // Gründungsstory
1
Hands on!
http://railscasts.com/episodes/266-http-streaming
http://apidock.com/rails/ActionController/Streaming
09.11.201
Monster on Rails // HTTP Streaming 8
1

24. 02.11.201
Zweitag // Gründungsstory
1
Kontext
Caveats
Mechanismen, die die Response nach Rendering-Start manipulieren, greifen nicht.
09.11.201
Monster on Rails // HTTP Streaming 9
1

25. 02.11.201
Zweitag // Gründungsstory
1
Kontext
Caveats
Mechanismen, die die Response nach Rendering-Start manipulieren, greifen nicht.
❖ Fehlermeldungen & Stacktraces nur im Log
09.11.201
Monster on Rails // HTTP Streaming 9
1

26. 02.11.201
Zweitag // Gründungsstory
1
Kontext
Caveats
Mechanismen, die die Response nach Rendering-Start manipulieren, greifen nicht.
❖ Fehlermeldungen & Stacktraces nur im Log
❖ Keine Manipulation von Header, Cookies, Session
❖ HTTP Header werden vor dem Rendering gesendet
❖ Bei Modifikationsversuch: ActionDispatch::ClosedError
09.11.201
Monster on Rails // HTTP Streaming 9
1

27. 02.11.201
Zweitag // Gründungsstory
1
Kontext
Caveats
Mechanismen, die die Response nach Rendering-Start manipulieren, greifen nicht.
❖ Fehlermeldungen & Stacktraces nur im Log
❖ Keine Manipulation von Header, Cookies, Session
❖ HTTP Header werden vor dem Rendering gesendet
❖ Bei Modifikationsversuch: ActionDispatch::ClosedError
❖ Keine Middlewares, die den Body manipulieren
❖ Aktuell kein Rack::Cache
❖ Cache-Control: „no-cache“
09.11.201
Monster on Rails // HTTP Streaming 9
1

28. 02.11.201
Zweitag // Gründungsstory
1
Kontext
Caveats
Mechanismen, die die Response nach Rendering-Start manipulieren, greifen nicht.
❖ Fehlermeldungen & Stacktraces nur im Log
❖ Keine Manipulation von Header, Cookies, Session
❖ HTTP Header werden vor dem Rendering gesendet
❖ Bei Modifikationsversuch: ActionDispatch::ClosedError
❖ Keine Middlewares, die den Body manipulieren
❖ Aktuell kein Rack::Cache
❖ Cache-Control: „no-cache“
❖ Kein Haml
09.11.201
Monster on Rails // HTTP Streaming 9
1