検索
リンク
タグ
ASP.NET
.NET
ASP.NET MVC
F#
Azure
Visual Studio
ASP.NET Core
ライトニングトーク
Plone
Selenium
AJAX
C#
jQuery
ADO.NET Entity Framework
JavaScript
SQL Server
EFCore
LINQ
WebMatrix
Fizz-Buzz
カテゴリ
最新の記事
最新のコメント
記事ランキング
最新のトラックバック
以前の記事
2024年 02月 2024年 01月 2023年 12月 2023年 11月 2023年 10月 2023年 09月 2023年 08月 2023年 07月 2023年 06月 2023年 05月 2023年 04月 2023年 03月 2023年 02月 2023年 01月 2022年 12月 2022年 11月 2022年 10月 2022年 09月 2022年 08月 2022年 07月 2022年 06月 2022年 05月 2022年 04月 2022年 03月 2022年 02月 2022年 01月 2021年 12月 2021年 11月 2021年 10月 2021年 09月 2021年 08月 2021年 07月 2021年 06月 2021年 05月 2021年 04月 2021年 03月 2021年 02月 2021年 01月 2020年 12月 2020年 11月 2020年 10月 2020年 09月 2020年 08月 2020年 07月 2020年 06月 2020年 05月 2020年 04月 2020年 03月 2020年 02月 2020年 01月 2019年 12月 2019年 11月 2019年 10月 2019年 09月 2019年 08月 2019年 07月 2019年 06月 2019年 05月 2019年 04月 2019年 03月 2019年 02月 2019年 01月 2018年 12月 2018年 11月 2018年 10月 2018年 09月 2018年 08月 2018年 07月 2018年 06月 2018年 05月 2018年 04月 2018年 03月 2018年 02月 2018年 01月 2017年 12月 2017年 11月 2017年 10月 2017年 09月 2017年 08月 2017年 07月 2017年 06月 2017年 05月 2017年 04月 2017年 02月 2017年 01月 2016年 12月 2016年 11月 2016年 10月 2016年 09月 2016年 08月 2016年 07月 2016年 06月 2016年 05月 2016年 04月 2016年 03月 2016年 02月 2016年 01月 2015年 12月 2015年 11月 2015年 10月 2015年 09月 2015年 08月 2015年 07月 2015年 05月 2015年 04月 2015年 03月 2015年 02月 2015年 01月 2014年 12月 2014年 11月 2014年 10月 2014年 09月 2014年 08月 2014年 06月 2014年 04月 2014年 03月 2014年 02月 2014年 01月 2013年 12月 2013年 10月 2013年 09月 2013年 08月 2013年 07月 2013年 06月 2013年 05月 2013年 04月 2013年 03月 2013年 02月 2013年 01月 2012年 12月 2012年 11月 2012年 10月 2012年 09月 2012年 08月 2012年 07月 2012年 06月 2012年 05月 2012年 04月 2012年 03月 2012年 02月 2012年 01月 2011年 12月 2011年 11月 2011年 10月 2011年 09月 2011年 08月 2011年 07月 2011年 06月 2011年 05月 2011年 04月 2011年 03月 2011年 02月 2011年 01月 2010年 12月 2010年 11月 2010年 10月 2010年 09月 2010年 08月 2010年 07月 2010年 06月 2010年 05月 2010年 04月 2010年 03月 2010年 02月 2010年 01月 2009年 12月 2009年 10月 2009年 09月 2009年 07月 2009年 06月 2009年 05月 2009年 04月 2009年 03月 2009年 02月 2009年 01月 2008年 12月 2008年 11月 2008年 10月 2008年 09月 2008年 08月 2008年 07月 2008年 06月 2008年 05月 2008年 04月 2008年 03月 2008年 02月 2008年 01月 2007年 12月 2007年 11月 2007年 04月 2007年 03月 2007年 02月 2007年 01月 2006年 11月 2006年 10月 2006年 09月 2006年 08月 2006年 07月 |
2015年 09月 24日
とある要件で、JavaScript コードによって動的に SVG 要素への "描画" するプログラムを実装した。
canvas 要素ではなく SVG 要素が相手なので、"描画" というよりは、SVG 要素を組み立てていくコードになる。 以下のような感じだ。 HTML 側はこんな感じで、 <svg xmlns="http://www.w3.org/2000/svg" id="svg1"></svg>JavaScript コードはこんな感じである。 var svg = document.getElementById('svg1'); 処理速度が惜しい...ところで、実際に実装して仮運用してみると、処理性能上の不安が発覚してきた。要素数にして 400 を超える規模の描画を行うときに、 1回の描画に 230~270msec、概ね 0.3 秒近く かかるようになってきたのである (Intel Core i5-4590/3.3GHz, Intel HD Graphics 4600 な Windows PC 上での IE11の場合)。 アニメーションを作っているわけではないので、致命的な遅さとも言い難いのだが、200msec を超える反応速度の遅さだと、体感的に引っかかりを感じるようになる。 一例を挙げると、このプログラムではズーム機能を搭載しているのだが、倍率変更のたびに描画し直しているので (※詳細割愛するが、css で zoom 指定すれば済む要件ではない)、そのズーム操作が目に見えてカクカクするのだ。 また描画規模も、400要素前後程度で収まるのではなく、さらなる描画要素数の増加も予見されるため、無視しがたい問題として浮上してきた。 DOM操作なので遅い?SVG への "描画" が遅いのは、まぁ、まんざらわからないでもない。なにせ、SVG へのJavaScript コードからの描画とは、ある種の DOM 操作である。 SVG ではなく HTML の DOM 操作は処理速度上のボトルネックになるというのはよく聞く話であり、もちろん、SVG と HTML は別物とは言えど、似たような振る舞いを示したとしても驚きはしない。 さておき、とにかく、この JavaScript から SVG への描画処理を高速化したい要件に迫られた。 文字列で構築しよう!そこで試したのが、SVG を DOM 操作で "描画" するのではなく、文字列操作によって SVG コンテンツ文字列を構築し、それを最後に DOM 操作で差し込む という方法だ。 まず、HTML 側は、SVG 要素を差し込む先のプレースホルダを用意するだけにする。 div 要素で表現するとしてこんな感じ。 <div id='place-holder'></div>そして JavaScript コード側は、まずは SVG インライン要素を表す文字列を構築する。 function drawLine(x1, y1, x2, y2) {あとは、構築した文字列を、プレースホルダである div 要素の innerHTML プロパティに注ぎ込む。 var placeHolder = document.getElementById('place-holder'); 結果こうして、SVG インライン要素を文字列で記述して最後に innerHTML に設置する方法を試したところ、同じ描画内容について、230~270msec 台だったものが 60msec 台で済む ようになった。 これでどうにか案件は安泰である。
by developer-adjust
| 2015-09-24 18:52
| Web系一般
|
Comments(0)
|
ファン申請 |
||