1 of 32

Faster images through the WebSockets?

Yarik Ponomarenko

kyivJs '12

2 of 32

problem

Too many images at the webpage are downloaded slowly

3 of 32

How does browser load a image?

  • find <img>
  • connect to server
  • send the request
  • wait for response
  • receive the response
  • draw received image

Browser

Server

4 of 32

Next is always waiting until previous is finished

Image 1

Server

Image 2

5 of 32

Browser use several connections

Queue 1

Queue 2

Queue ...

Queue 6

6 of 32

"keep alive" connections

without

keep alive

7 of 32

Current tricks to load images faster

  • CDN
  • combine several images into the sprites
  • some few different (fake) domains

​

8 of 32

What bad in HTTP Get?

  • one shot - one hit
  • one image - one request
  • requests are performed in sync queues

​

​

​

9 of 32

the silver bullet trick is:

using websocket connection to retrieve images in async way

10 of 32

WebSocket (WS://)

  • persistent
  • duplex
  • async

​

​

11 of 32

why that faster?

HTTP GET

WebSocket

12 of 32

plan

  1. establish WS connection
  2. find all images that should be loaded
  3. send the pack of requests to server
  4. retrieve the images
  5. draw them
  6. ???
  7. profit

​

​

13 of 32

client

14 of 32

backend

15 of 32

base64 has 30% lower density

16 of 32

how to read the binary WS frame?

17 of 32

another way to read blob

18 of 32

many requests in one connection:�send the message id

19 of 32

many requests in one connection:�return the message id

20 of 32

many requests in one connection:�parse the message id in response

21 of 32

Disadvantages

  • browser doesn't cache websockets
  • we still need several connections to increase the network utilization

​

22 of 32

ITW client

  • several streams
  • binary data transferring
  • local storage using for cache

​

github.com/yarikos/itw

23 of 32

example: ITW client

github.com/yarikos/itw

24 of 32

ITW backend

  • proxy between ws and http
  • static file server with ws-interface
  • with cache

​

25 of 32

ITW backend - client interface

ITW Server

out

encoder

ITW client

26 of 32

ITW backend - image sources

ITW Server

input

STATIC

input

HTTP

WEB

HDD

27 of 32

example: ITW server

28 of 32

benchmark, Kiev - Novosibirsk

  • 1.3kB +300% .. +400%
  • 14.3kB +20% .. +50%
  • 46kB -20% .. +20%

29 of 32

benchmark, Kiev - Kiev

  • 1.3kB +200% .. +300%
  • 14.3kB +10% .. +30%
  • 46kB 0 .. +20%

30 of 32

leaflet.js + itw

  • Kiev - Kiev +20% .. +30%
  • Kiev - Novosibirsk 1.5x .. 2x slower

​

31 of 32

async is better

HTTP GET

WebSocket

32 of 32

questions?

http://github.com/yarikos/itw

http://twitter.com/yarik_is

​

​