Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Высокопроизводительные визуализации данных в бр...
Search
Vladimir Agafonkin
March 29, 2013
Programming
2
480
Высокопроизводительные визуализации данных в браузере (CodeFest)
Vladimir Agafonkin
March 29, 2013
Tweet
Share
More Decks by Vladimir Agafonkin
See All by Vladimir Agafonkin
Fast by Default: Algorithmic Optimization in Practice (dotJS 2019)
mourner
0
2.1k
Fast by Default: Algorithmic Optimization in Practice (JSCamp 2019)
mourner
0
530
How Vector Maps Work (2019)
mourner
1
460
Fast by default: everyday algorithmic thinking for developers [RU]
mourner
1
450
Fast by default: everyday algorithmic thinking for developers
mourner
1
480
Mapbox GL: How vector maps work
mourner
0
400
Random cool stuff I've been hacking on (mostly spatial indices)
mourner
0
580
Как работают современные интерактивные карты на WebGL
mourner
1
520
Leaflet, WebGL & the Future of Web Mapping
mourner
5
3.3k
Other Decks in Programming
See All in Programming
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
740
CSC305 Lecture 03
javiergs
PRO
0
240
エンジニアとして高みを目指す、 利益を生み出す設計の考え方 / design-for-profit
minodriven
23
12k
フロントエンド開発に役立つクライアントプログラム共通のノウハウ / Universal client-side programming best practices for frontend development
nrslib
7
3.9k
CSC305 Lecture 01
javiergs
PRO
1
400
CSC509 Lecture 05
javiergs
PRO
0
300
Your Perfect Project Setup for Angular @BASTA! 2025 in Mainz
manfredsteyer
PRO
0
140
iOSアプリの信頼性を向上させる取り組み/ios-app-improve-reliability
shino8rayu9
0
160
CSC509 Lecture 01
javiergs
PRO
1
430
Local Peer-to-Peer APIはどのように使われていくのか?
hal_spidernight
2
460
私はどうやって技術力を上げたのか
yusukebe
43
17k
非同期jobをtransaction内で 呼ぶなよ!絶対に呼ぶなよ!
alstrocrack
0
560
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
Building an army of robots
kneath
306
46k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Being A Developer After 40
akosma
91
590k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Speed Design
sergeychernyshev
32
1.1k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.1k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Transcript
Владимир Агафонкин высокопроизводительные визуализации данных в браузере март 2013
agafonkin.com /mourner
rain.in.ua
визуализации данных
None
None
None
None
None
None
интерактивность
•реагирование на действия пользователя интерактивность
•реагирование на действия пользователя •навигация по данным интерактивность
•реагирование на действия пользователя •навигация по данным •фильтрация данных интерактивность
None
None
None
None
None
потребность в интерактивности увеличивается
ответственность за обработку данных всё больше смещается от сервера к
клиенту
чистый JS — быстро рендеринг, DOM — медленно
правило №1 чем меньше всего отображаем, тем быстрее
обработка данных рендеринг
обработка данных рендеринг
•фильтрация объектов уменьшение данных
•фильтрация объектов •геометрическое отсечение уменьшение данных
•фильтрация объектов •геометрическое отсечение •геометрическое упрощение уменьшение данных
•фильтрация объектов •геометрическое отсечение •геометрическое упрощение •кластеризация (группировка) уменьшение данных
фильтрация
поиск 2D-объектов •поиск объектов в текущей прямоугольной видимой области
поиск 2D-объектов •поиск объектов в текущей прямоугольной видимой области •поиск
объектов в точке (под курсором)
загрузка данных — 1 раз поиск/фильтрация — много раз
сетка
None
древовидные структуры данных •binary heap •binary search tree •range tree
•k-d tree •quadtree •R-tree
точки в quadtree
прямоугольники в R-tree
var tree = new RTree(); tree.insert( {x: 5, y: 10,
w: 10, h: 15}, obj); ... tree.search( {x: 7, y: 7, w: 5, h: 5}); github.com/imbcmdth/RTree
kothic.org/js
определение коллизий
Crossfilter (для многих измерений)
отсечение ломаных линий алгоритм Коэна-Сазерленда
отсечение полигонов алгоритм Сазерленда-Ходжмана
упрощение ломаных линий
упрощение по расстоянию
алгоритм Дугласа-Пекера
mourner.github.com/simplify-js
кластеризация группировка похожих объектов
None
None
иерархическая кластеризация 1 раз для всех масштабов
загрузка и обработка данных
UI JS UI
UI JS браузер залипает на объемных вычислениях UI
Web Workers
<script src='data.js'></script> <script> ... worker.postMessage(HUGE_DATA_ARRAY); ... </script> загрузка и пересылка
в Worker
UI Worker JS загрузка данных UI
UI Worker JS браузер залипает на загрузке и пересылке данных
загрузка данных UI
importScripts('data.js'); ... onmessage = function (e) { var result =
searchData(e.data.query); postMessage(result); } загрузка в Worker
UI Worker JS загрузка данных UI UI
UI Worker JS браузер залипает на получении данных загрузка данных
UI UI
var array = new Float16Array(len); ... var buffer = array.buffer;
postMessage(buffer, [buffer]); // с этого момента buffer недоступен transferable objects (Chrome, Firefox)
UI Worker JS загрузка данных UI UI
UI Worker JS браузер не залипает, данные пересылаются как ArrayBuffer
загрузка данных UI UI
function addNumbers(a, b) { 'use asm'; a = a |
0; // int b = +b; // double return +(a + b); // double } светлое будущее — asm.js
светлое будущее — asm.js •оптимизация узких мест вычислений
светлое будущее — asm.js •оптимизация узких мест вычислений •пока только
в FF Nightly
светлое будущее — asm.js •оптимизация узких мест вычислений •пока только
в FF Nightly •обратная совместимость!
технологии рендеринга SVG, Canvas, HTML, WebGL
SVG •быстрые нативные события для интерактивности
SVG •быстрые нативные события для интерактивности •легко обновлять отдельные объекты
SVG •быстрые нативные события для интерактивности •легко обновлять отдельные объекты
•тормозит страницу (при большом кол-ве объектов)
Canvas •после отрисовки не влияет на отзывчивость страницы
Canvas •после отрисовки не влияет на отзывчивость страницы •повторяющиеся части
можно отрисовать один раз и раскопировать
Canvas •после отрисовки не влияет на отзывчивость страницы •повторяющиеся части
можно отрисовать один раз и раскопировать •можно попиксельно рисовать/ обрабатывать в Worker
Canvas •дорого перерисовывать при каждом обновлении
Canvas •дорого перерисовывать при каждом обновлении •очень сложно с реализацией
интерактивности
WebGL •основной способ для 3D- визуализаций
WebGL •основной способ для 3D- визуализаций •очень быстро в 2D,
если нужно отрисовать много спрайтов
WebGL •основной способ для 3D- визуализаций •очень быстро в 2D,
если нужно отрисовать много спрайтов •в остальных случаях преимущество в скорости перед Canvas-2D спорно
WebGL •основной способ для 3D- визуализаций •очень быстро в 2D,
если нужно отрисовать много спрайтов •в остальных случаях преимущество в скорости перед Canvas-2D спорно •API намного сложнее и неудобнее
WebGL •основной способ для 3D- визуализаций •очень быстро в 2D,
если нужно отрисовать много спрайтов •в остальных случаях преимущество в скорости перед Canvas-2D спорно •API намного сложнее и неудобнее •поддержки в IE и iOS не ожидается
HTML •удобно использовать для текста и элементов интерфейса
HTML •удобно использовать для текста и элементов интерфейса •очень удобно
анимировать с помощью CSS Transitions
HTML •удобно использовать для текста и элементов интерфейса •очень удобно
анимировать с помощью CSS Transitions •тормозит страницу при большом кол-ве объектов
производительность Canvas
частичная перерисовка
частичная перерисовка
частичная перерисовка
function drawStar(x, y) { ... // нарисовать звезду в x,
y } drawStar(10, 20); drawStar(50, 70); ...
function drawStar() { var canvas = document.createElement('canvas'); ... // нарисовать
звезду return canvas; } var star = drawStar(); ctx.drawImage(star, 10, 20); ctx.drawImage(star, 50, 70); ... копирование
группируйте отрисовку по стилям, минимизируйте stroke/fill
function drawLine(x1, x2, y1, y2) { ctx.strokeStyle = 'red'; ctx.beginPath();
ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.stroke(); } drawLine(10, 20, 30, 40); drawLine(200, 10, 0, 50); drawLine(30, 40, 70, 0);
function drawLine(x1, x2, y1, y2) { ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2,
y2); } ctx.strokeStyle = 'red'; drawLine(10, 20, 30, 40); drawLine(200, 10, 0, 50); drawLine(30, 40, 70, 0); ctx.stroke();
var data = ctx.getImageData(0, 0, width, height).data; worker.postMessage(data, [data]); ...
worker.onmessage = function (e) { var imageData = ctx.createImageData(width, height); imageData.data.set(e.data); ctx.putImageData(imageData, 0, 0); } Canvas + Worker
var pixels = new Uint8ClampedArray( width * height); function drawPixel(x,
y, r, g, b, a) { var i = 4 * (256 * y + x); pixels[i] = r; pixels[i + 1] = g; pixels[i + 2] = b; pixels[i + 3] = a; } ... postMessage(pixels.buffer, [pixels.buffer]); рисование пикселей в Worker
var pixels = new Uint8ClampedArray(data); for (var x = 0;
x < width; x++) { for (var y = 0; y < height; y++) { var i = 4 * (256 * y + x); pixels[i] = 2 * pixels[i]; pixels[i + 1] = 2 * pixels[i + 1]; pixels[i + 2] = 2 * pixels[i + 2]; } } ... postMessage(pixels.buffer, [pixels.buffer]); обработка пикселей в Worker
UTFGrid
UTFGrid •65535 разных символов
UTFGrid •65535 разных символов •каждый символ — 4х4 пикселя
UTFGrid •65535 разных символов •каждый символ — 4х4 пикселя •сетка
+ маппинг
UTFGrid •65535 разных символов •каждый символ — 4х4 пикселя •сетка
+ маппинг •в среднем 1-3 КБ на тайл 256х256
Спасибо! Вопросы? Владимир Агафонкин
[email protected]