Browser Visualization using PNGs Generated by HTML5 Workers on Multicore

Problem Statement• old/traditional visualization technology

• example of data center traffic visualization• problems: centralized, too heavy, impractical, inflexible

WebWorkerWeb

WorkerCPU

Core(s)

….

PM

PM

PM

PM

Switch To Cloud

Split Merge

TrafficMirroring

InteractiveDisplay

M.Zhanikeev -- [email protected] -- Browser Visualization using PNGs Generated by HTML5 Workers on Multicore -- http://bit.do/151112 --- 2/182/18

Objectives

• browser aggregates performance data from multiple sources◦ dynamic, flexible, async, interactive

• graphics are generated inside browser based on raw data

• browser exploits the full potential of multicore hardware◦ in modern browsers, Workers are mapped to multiple cores, and run async


Visualization Basics


The Best Kind of Visual

• the best thing to do is to find the best metaphor for your data


The Waterpipe Visualization

• a model based on the concept ofplumbing

• several kinds of plumbing

• not only traffic but anything --memory, CPU, etc.


The Weather Visualization• the big picture in cloud performance resembles weather• typhoons, pressure fronts, etc. are easily translated from performance data

• the ugly thing on the right side: experimental visualizations

(high/low) Pressure front

Typhoon

Drought

Good weather

Bad weather

FRAME:8

userland

cloudland

otherland

47k45k

41k

40k

37k

37k31k

26k

25k

25k

24k24k

24k23k 23k

22k

21k 21k

18k

16k

15k

15k14k

11k

8k

0k

0k

0k

0k

0k0k

0k

0k0k

0k


System Design


Key Elements

• HTML5 native binary : can create PNGs and convert them in to base64URLs

• base64 URLs are generated by Workers on multicore -- the inteded offloadfeature

• each Worker is in charge of a section of the screen


System Design and Bottlenecks


Design GoalsGc < Ge (1)

k∑i=0

Gb,i > Ga > Gc. (2)• Network Goodput Ga

• Worker Goodput Gb

• Network Goodput Gc

• Main Webapp GoodputGd

• Screen UpdateGoodput Ge


Analysis


Experimental Setup

• a dripping water model• no network traffic, just random local generation• try out various configurations to feel performance margins


Simple Tests

• one thing to notice: sluggingwith many workers

• CPU is not affected muchregardless of the setup

• let's see a demo!


Performance Analysis (1)

0 0.2 0.4 0.6 0.8 1Decreasing order of values

050

100150200250300350

Even

t int

erva

l (m

s)

Size# 200 x 200 with 5 workers

-100 -80 -60 -40 -20 0Time relative to the end of each 60s session

15.8

16

16.2

16.4

16.6

16.8

CPU

usa

ge (e

ach

core

)

• small PNGs, 5 workers• per-Worker rate is about 100ms perframe

• screen update rate is below 50ms(per section)


Performance Analysis (2)

0 0.2 0.4 0.6 0.8 1Decreasing order of values

0100020003000400050006000

Even

t int

erva

l (m

s)

Size# 1000 x 1000 with 10 workers

-100 -80 -60 -40 -20 0Time relative to the end of each 60s session

14.6

14.8

15

15.2

15.4

15.6

CPU

usa

ge (e

ach

core

)

• large PNGs, 10 workers• Workers can output an image onlyonce every 3s

• screen update interval is also around500ms -- noticably sluggish


Overall Performance

0 50 100 150 200 250 300Global event interval (ms)

0

1000

2000

3000

4000

5000

Per-w

orke

r eve

nt in

terv

al (m

s)

1000/3500/15

500/3

800/20

1000/15

500/20

800/3

200/5500/5

800/10

200/10200/3

1000/20

200/20

1000/5

800/15

1000/10

500/10 800/5

200/15

• width of each virtual column isthe effect of multicoreoffload on screenupdate -- minor effect

• column height is theoverhead frommulticore messaging --

very bad for large images

• the best group:500x500 PNGs with anynumber of workers --recommended setup


That’s all, thank you ...


Technology

Browser Visualization using PNGs Generated by HTML5 Workers on Multicore