Download as PDF, PPTX
![悪い例
42
var div = document.getElementsByTagName("div");
for (var i = 0; i < div.length; i++) {
for (var e = 0; e < elems.length; e++) {
div[i].appendChild(elems[e].cloneNode(true));
}
}
繰り返しDOMツリーに挿入
http://ejohn.org/blog/dom-documentfragments/ より引用](https://image.slidesharecdn.com/hybridapp-tips-140424035548-phpapp01/85/HTML5-42-320.jpg)
![DocumentFragmentsの例
43
var div = document.getElementsByTagName("div");
var fragment = document.createDocumentFragment();
for (var e = 0; e < elems.length; e++) {
fragment.appendChild(elems[e]);
}
for (var i = 0; i < div.length; i++) {
div[i].appendChild(fragment.cloneNode(true));
}
最後に一度だけDOMツリーに挿入
http://ejohn.org/blog/dom-documentfragments/ より引用](https://image.slidesharecdn.com/hybridapp-tips-140424035548-phpapp01/85/HTML5-43-320.jpg)
More Related Content
Similar to HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜
HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜
- 1.
- 2. 久保田光則 ‣ アシアル株式会社所属 ‣ UI/UXデザイナー兼エンジニア ‣ハイブリッドアプリ開発や monaca開発に携わる 2
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17. PhoneGap(Cordova) 17 ‣ ハイブリッドアプリのためのフレームワーク ‣ monaca内部でも利用 ‣他にはTriaina、Trigger.ioなど
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25. CSSアニメーションを使う 25 ‣ アニメーションにCSS Transitionを使う ‣JavaScriptで直接やるよりはるかに速い ‣ setIntervalでアニメーションするのを置き換える
- 26. すぐわかるCSS Transition 26 .foobar { background-color:white; } .foobar:hover { -webkit-transition: background-color 1s linear; background-color: red; } .foobarクラスの要素 .foobarクラスの要素
- 27.
- 28. 動作確認は遅い方に合わせる 28 ‣ WebViewはAndroidよりもiOSの方がはるかに速い ‣ 動作確認は遅い方のプラットフォームに合わせる ‣後からチューニングして修正するのは大変 1. 2. iOS
- 29.
- 30. レンダリングの仕組み 30 ‣ DOMツリーとCSSをパース ‣ レイアウトを計算した後レンダリング ‣リフローとは、レイアウトの再計算処理 CSSルール DOMツリー レイアウト 計算 描画
- 31. 何がリフローを引き起こす? 31 ‣ 内部テキストの変更、input要素への入力 ‣ DOMツリーの操作 ‣width, height, margin, padding, border等の変更 ‣ クラス属性やスタイルシートの変更も含む ?
- 32.
- 33.
- 34. 要素の縦横を固定する 34 ‣ リフロー時のコンテナの計算を抑制 100% 30px .foobar { width:100%; height: 30px; }
- 35. position: absoluteを多用する 35 ‣ フローベースのレイアウトを使わない ‣absoluteでレイアウトの計算を抑制 40px 30px .foobar { position: absolute; left: 40px; top: 30px; }
- 36. transformを使う 36 ‣ marginやpaddingや要素サイズ変更 =>リフローを引き起こす ‣ その代わりにtransformを使う => リフローを引き起こさない .foobar { -webkit-transform: translate(20px, 10px); }
- 37. transformを使う 37 ‣ marginやpaddingなどを変えるとリフローを引き起こす ‣ その代わりにtransformを使う=> リフローを引き起こさない .foobar { -webkit-transform: translate(20px, 10px); }
- 38.
- 39. リフローを伴う アニメーションをさせない 39 ‣ CSSアニメーションでもリフローを起こすと遅くなる ‣ リフローを起こすアニメーションを避ける ‣-webkit-transformを使う
- 40. GPUを活用する 40 .foobar { -webkit-transform: traslate3D(0px,0px, 0px); } ‣ 特定の要素をGPUで描画する ‣ transitionアニメーションに効果大
- 41. DOMDocumentFragments を使う 41 ‣ DOM要素をくりかえしDOMツリーに挿入しない var fragment= document.createDocumentFragment();
- 42. 悪い例 42 var div =document.getElementsByTagName("div"); for (var i = 0; i < div.length; i++) { for (var e = 0; e < elems.length; e++) { div[i].appendChild(elems[e].cloneNode(true)); } } 繰り返しDOMツリーに挿入 http://ejohn.org/blog/dom-documentfragments/ より引用
- 43. DocumentFragmentsの例 43 var div =document.getElementsByTagName("div"); var fragment = document.createDocumentFragment(); for (var e = 0; e < elems.length; e++) { fragment.appendChild(elems[e]); } for (var i = 0; i < div.length; i++) { div[i].appendChild(fragment.cloneNode(true)); } 最後に一度だけDOMツリーに挿入 http://ejohn.org/blog/dom-documentfragments/ より引用
- 44.
- 45.
- 46.
- 47. Onsen UI ‣ ハイブリッドアプリ用UIフレームワーク ‣Angular.jsベース ‣ 画面遷移の管理やUIコンポーネントを提供 ‣ http://onsenui.io 47
- 48.
- 49. その他UIフレームワーク ‣ jQuery Mobile ‣Sencha Touch ‣ Ionic ‣ Kendo UI 49
- 50.
- 51.