Kartinka.net - реклама поверху картинок для интернет-магазинов и веб-изданий.
Ускоряем загрузку картинок вебсокетами
Transcript of Ускоряем загрузку картинок вебсокетами
![Page 1: Ускоряем загрузку картинок вебсокетами](https://reader033.fdocuments.us/reader033/viewer/2022052906/558c93cdd8b42adb098b4634/html5/thumbnails/1.jpg)
Faster images through the WebSockets?Yarik Ponomarenko
![Page 2: Ускоряем загрузку картинок вебсокетами](https://reader033.fdocuments.us/reader033/viewer/2022052906/558c93cdd8b42adb098b4634/html5/thumbnails/2.jpg)
problem
Too many images at the webpage are downloaded slowly
![Page 3: Ускоряем загрузку картинок вебсокетами](https://reader033.fdocuments.us/reader033/viewer/2022052906/558c93cdd8b42adb098b4634/html5/thumbnails/3.jpg)
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
![Page 4: Ускоряем загрузку картинок вебсокетами](https://reader033.fdocuments.us/reader033/viewer/2022052906/558c93cdd8b42adb098b4634/html5/thumbnails/4.jpg)
Next is always waiting until previous is finished
Image 1
Server
Image 2
![Page 5: Ускоряем загрузку картинок вебсокетами](https://reader033.fdocuments.us/reader033/viewer/2022052906/558c93cdd8b42adb098b4634/html5/thumbnails/5.jpg)
Browser use several connectionsQueue 1
Queue 2
Queue ...
Queue 6
![Page 6: Ускоряем загрузку картинок вебсокетами](https://reader033.fdocuments.us/reader033/viewer/2022052906/558c93cdd8b42adb098b4634/html5/thumbnails/6.jpg)
"keep alive" connectionswithout
keep alive
![Page 7: Ускоряем загрузку картинок вебсокетами](https://reader033.fdocuments.us/reader033/viewer/2022052906/558c93cdd8b42adb098b4634/html5/thumbnails/7.jpg)
Current tricks to load images faster
● CDN
● combine several images into the sprites
● some few different (fake) domains
![Page 8: Ускоряем загрузку картинок вебсокетами](https://reader033.fdocuments.us/reader033/viewer/2022052906/558c93cdd8b42adb098b4634/html5/thumbnails/8.jpg)
What bad in HTTP Get?
● one shot - one hit
● one image - one request
● requests are performed in sync queues
![Page 9: Ускоряем загрузку картинок вебсокетами](https://reader033.fdocuments.us/reader033/viewer/2022052906/558c93cdd8b42adb098b4634/html5/thumbnails/9.jpg)
the silver bullet trick is:
using websocket connection to retrieve images
in async way
![Page 10: Ускоряем загрузку картинок вебсокетами](https://reader033.fdocuments.us/reader033/viewer/2022052906/558c93cdd8b42adb098b4634/html5/thumbnails/10.jpg)
WebSocket (WS://)
● persistent
● duplex
● async
![Page 11: Ускоряем загрузку картинок вебсокетами](https://reader033.fdocuments.us/reader033/viewer/2022052906/558c93cdd8b42adb098b4634/html5/thumbnails/11.jpg)
why that faster?HTTP GET
WebSocket
![Page 12: Ускоряем загрузку картинок вебсокетами](https://reader033.fdocuments.us/reader033/viewer/2022052906/558c93cdd8b42adb098b4634/html5/thumbnails/12.jpg)
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
![Page 13: Ускоряем загрузку картинок вебсокетами](https://reader033.fdocuments.us/reader033/viewer/2022052906/558c93cdd8b42adb098b4634/html5/thumbnails/13.jpg)
client
![Page 14: Ускоряем загрузку картинок вебсокетами](https://reader033.fdocuments.us/reader033/viewer/2022052906/558c93cdd8b42adb098b4634/html5/thumbnails/14.jpg)
backend
![Page 15: Ускоряем загрузку картинок вебсокетами](https://reader033.fdocuments.us/reader033/viewer/2022052906/558c93cdd8b42adb098b4634/html5/thumbnails/15.jpg)
base64 has 30% lower density
![Page 16: Ускоряем загрузку картинок вебсокетами](https://reader033.fdocuments.us/reader033/viewer/2022052906/558c93cdd8b42adb098b4634/html5/thumbnails/16.jpg)
how to read the binary WS frame?
![Page 17: Ускоряем загрузку картинок вебсокетами](https://reader033.fdocuments.us/reader033/viewer/2022052906/558c93cdd8b42adb098b4634/html5/thumbnails/17.jpg)
another way to read blob
![Page 18: Ускоряем загрузку картинок вебсокетами](https://reader033.fdocuments.us/reader033/viewer/2022052906/558c93cdd8b42adb098b4634/html5/thumbnails/18.jpg)
many requests in one connection:send the message id
![Page 19: Ускоряем загрузку картинок вебсокетами](https://reader033.fdocuments.us/reader033/viewer/2022052906/558c93cdd8b42adb098b4634/html5/thumbnails/19.jpg)
many requests in one connection:return the message id
![Page 20: Ускоряем загрузку картинок вебсокетами](https://reader033.fdocuments.us/reader033/viewer/2022052906/558c93cdd8b42adb098b4634/html5/thumbnails/20.jpg)
many requests in one connection:parse the message id in response
![Page 21: Ускоряем загрузку картинок вебсокетами](https://reader033.fdocuments.us/reader033/viewer/2022052906/558c93cdd8b42adb098b4634/html5/thumbnails/21.jpg)
Disadvantages
● browser doesn't cache websockets
● we still need several connections to increase
the network utilization
![Page 22: Ускоряем загрузку картинок вебсокетами](https://reader033.fdocuments.us/reader033/viewer/2022052906/558c93cdd8b42adb098b4634/html5/thumbnails/22.jpg)
ITW client
● several streams
● binary data transferring
● local storage using for cache
github.com/yarikos/itw
![Page 23: Ускоряем загрузку картинок вебсокетами](https://reader033.fdocuments.us/reader033/viewer/2022052906/558c93cdd8b42adb098b4634/html5/thumbnails/23.jpg)
example: ITW client
github.com/yarikos/itw
![Page 24: Ускоряем загрузку картинок вебсокетами](https://reader033.fdocuments.us/reader033/viewer/2022052906/558c93cdd8b42adb098b4634/html5/thumbnails/24.jpg)
ITW backend
● proxy between ws and http
● static file server with ws-interface
● with cache
![Page 25: Ускоряем загрузку картинок вебсокетами](https://reader033.fdocuments.us/reader033/viewer/2022052906/558c93cdd8b42adb098b4634/html5/thumbnails/25.jpg)
ITW backend - client interface
ITW Server
outencoder
ITW client
![Page 26: Ускоряем загрузку картинок вебсокетами](https://reader033.fdocuments.us/reader033/viewer/2022052906/558c93cdd8b42adb098b4634/html5/thumbnails/26.jpg)
ITW backend - image sources
ITW Server
inputSTATIC
inputHTTP
WEB
HDD
![Page 27: Ускоряем загрузку картинок вебсокетами](https://reader033.fdocuments.us/reader033/viewer/2022052906/558c93cdd8b42adb098b4634/html5/thumbnails/27.jpg)
example: ITW server
![Page 28: Ускоряем загрузку картинок вебсокетами](https://reader033.fdocuments.us/reader033/viewer/2022052906/558c93cdd8b42adb098b4634/html5/thumbnails/28.jpg)
benchmark, Kiev - Novosibirsk
● 1.3kB +300% .. +400%
● 14.3kB +20% .. +50%
● 46kB -20% .. +20%
![Page 29: Ускоряем загрузку картинок вебсокетами](https://reader033.fdocuments.us/reader033/viewer/2022052906/558c93cdd8b42adb098b4634/html5/thumbnails/29.jpg)
benchmark, Kiev - Kiev
● 1.3kB +200% .. +300%
● 14.3kB +10% .. +30%
● 46kB 0 .. +20%
![Page 30: Ускоряем загрузку картинок вебсокетами](https://reader033.fdocuments.us/reader033/viewer/2022052906/558c93cdd8b42adb098b4634/html5/thumbnails/30.jpg)
leaflet.js + itw
● Kiev - Kiev +20% .. +30%
● Kiev - Novosibirsk 1.5x .. 2x slower
![Page 31: Ускоряем загрузку картинок вебсокетами](https://reader033.fdocuments.us/reader033/viewer/2022052906/558c93cdd8b42adb098b4634/html5/thumbnails/31.jpg)
async is betterHTTP GET
WebSocket
![Page 32: Ускоряем загрузку картинок вебсокетами](https://reader033.fdocuments.us/reader033/viewer/2022052906/558c93cdd8b42adb098b4634/html5/thumbnails/32.jpg)
questions?
http://github.com/yarikos/itwhttp://twitter.com/yarik_is