Webview Optimization Techniques
•Download as PPTX, PDF•
0 likes•615 views
2013年のスライド。 Androidでの処理落ち対策で行った施策などなど
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Webview Optimization Techniques
Similar to Webview Optimization Techniques (20)
More from Shota Suzuki
More from Shota Suzuki (7)
Webview Optimization Techniques
- 2. Work
- 3. But, isn’t webview slow?
- 4. Android behavior is particularly problematic.
- 5. Optimization of animation. Optimization of transmission rate. Optimization of CreateJS. Pokelabo’s fixes
- 6. Copyright © POKELABO.inc All Rights Reserved.Confidential Optimization of animation ・We don't use the canvas for everything. Parts with little movement, including backgrounds and the status bar are done by html and css animation. ・We avoid resizing images as much as possible. ・We don’t use Hardware Acceleration in Android ver.3+. ・We don’t start Garbage collector (gc) in an animation. ・We call the native garbage collector when the animation stops. ・We put the header and footer in different webviews. ・We don’t use iScroll. ・jQuery is heavy. So we use light libraries including zepto.
- 7. Copyright © POKELABO.inc All Rights Reserved.Confidential Optimization of transmission rate ・Processing that takes time shouldn’t happen in the UI thread. ・Caching and sharding. ・Image file packaging. ・Cache of Animation resource. (Changing parts are excluded dynamically) ・Use of concat, minify, gzip of js, css.
- 8. Copyright © POKELABO.inc All Rights Reserved.Confidential Optimization of CreateJS ・We always round decimal places. ・We don’t use many tweens. ・Set the frame rate to 12. ・We reduce the number of layers. ・We don’t use layer hierarchies deeper than about three layers. ・We lower the quality of images used in canvas.
- 9. Copyright © POKELABO.inc All Rights Reserved.Confidential But, isn’t webview slow?
- 11. Copyright © POKELABO.inc All Rights Reserved.Confidential
- 12. Copyright © POKELABO.inc All Rights Reserved.Confidential Mission To fulfill it, we must perform four missions 1. Surprise our coworkers. 2. Surprise our rival businesses. 3. Surprise the user. 4. Surprise the people all over the world.
- 13. Copyright © POKELABO.inc All Rights Reserved.Confidential Copyright © 2004-2007 GREE,Inc. All Rights Reserved.Copyright © POKELABO.inc All Rights Reserved.Confidential Thank You!
Editor's Notes
- But, isn’t webview slow?
- Yes, that is also a challenge for us. It’s no problem for iPhone, But Android behavior is particularly problematic.
- We fix this problem as follows. //Optimization of animation. //Optimization of transmission rate. //Optimization of CreateJS.
- First, Optimization of animation Optimization measures in pokelabo are as follows. We have a lot of plans for improvement. So I printed a separate document with the details. You can look at it at your convenience. If you have any other ideas for improvement, please tell me. ◇アニメーションの最適化 ・全てcanvasにはせず、背景やステータスバーなど 動きの少ない部分はhtmlとcss animation 使う ・リサイズはできる限りしない ・3系以上でハードウェアアクセレーションを切る ・アニメーション中にガベージコレクタ(gc)が起動しないよう、 アニメーションが停止するタイミングでネイティブのgcをコールする ・ヘッダーフッターを別のwebviewにする ・iScrollを使用しない。 ・jQueryは重いのでzeptoなど軽いライブラリーを使う
- Second, Optimization of transmission rate We have to be careful about making our animations too complicated, because they become heavy. One of the biggest reasons that a user will stop playing a game is because loading is slow. So It is a very important thing to pokelabo. 演出を派手にすればするほど処理が重くなるので気を付けないといけません。 ユーザーがゲームをやめてしまうポイントの一つにローディングが遅いというものがあります。 ここに載っていることはポケラボではとても重要です ◇通信速度の最適化 全ての画像のダウンロードを一回だけにする。 ・時間のかかる処理はUIスレッドではやらない ・シャーディングとキャッシュ化 ・画像をネイティブに組み込んで置く ・演出とリソースのキャッシュ化（動的に変化するもの以外） ・js,cssのconcat,minify,gzipを使う
- And finaly, Optimization of CreateJS It is improved little by little, by steady correction. Our problem is that animations made for Android look weak on iPhone. 地道な修正で少しずつ改善されます。 私達の悩みとしては、Androidに合わせてアニメーションを作ると、iPhoneでロークオリティになる ◇createjs ・小数点を消す ・トゥイーンを多用しない ・フレームレート12 ・レイヤーの数を減らす ・レイヤー階層を深くしない。(2階層くらいに) ・canvasに使用している画質を落とす
- But, isn’t webview slow?