Ускоряем загрузку картинок вебсокетами
TRANSCRIPT
Faster images through the WebSockets?Yarik Ponomarenko
problem
Too many images at the webpage are downloaded slowly
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
Next is always waiting until previous is finished
Image 1
Server
Image 2
Browser use several connectionsQueue 1
Queue 2
Queue ...
Queue 6
"keep alive" connectionswithout
keep alive
Current tricks to load images faster
● CDN
● combine several images into the sprites
● some few different (fake) domains
What bad in HTTP Get?
● one shot - one hit
● one image - one request
● requests are performed in sync queues
the silver bullet trick is:
using websocket connection to retrieve images
in async way
WebSocket (WS://)
● persistent
● duplex
● async
why that faster?HTTP GET
WebSocket
plan
1. establish WS connection
2. find all image's "src" at page
3. send the pack of requests to server
4. retrieve the images
5. draw them
6. ???
7. profit
client
backend
base64 has 30% lower density
how to read the binary WS frame?
another way to read blob
many requests in one connection:send the message id
many requests in one connection:return the message id
many requests in one connection:parse the message id in response
Disadvantages
● browser doesn't cache websockets
● we still need several connections to increase
the network utilization
ITW client
● several streams
● binary data transferring
● local storage using for cache
github.com/yarikos/itw
example: ITW client
github.com/yarikos/itw
ITW backend
● proxy between ws and http
● static file server with ws-interface
● with cache
ITW backend - client interface
ITW Server
outencoder
ITW client
ITW backend - image sources
ITW Server
inputSTATIC
inputHTTP
WEB
HDD
example: ITW server
benchmark, Kiev - Novosibirsk
● 1.3kB +300% .. +400%
● 14.3kB +20% .. +50%
● 46kB -20% .. +20%
benchmark, Kiev - Kiev
● 1.3kB +200% .. +300%
● 14.3kB +10% .. +30%
● 46kB 0 .. +20%
leaflet.js + itw
● Kiev - Kiev +20% .. +30%
● Kiev - Novosibirsk 1.5x .. 2x slower
async is betterHTTP GET
WebSocket
questions?
http://github.com/yarikos/itwhttp://twitter.com/yarik_is