『メルカリ』 アプリの画面描画を高速化する技術、バックエンド・iOS・Androidの基本設計 - エンジニアHub｜若手Webエンジニアのキャリアを考える！
『メルカリ』 アプリの画面描画を高速化する技術、バックエンド・iOS・Androidの基本設計 多くのユーザーに愛されるフリマアプリ『メルカリ』ですが、そのスムーズな画面描画はどのような技術で生み出されているのでしょうか。同アプリの高速表示の秘密を、バックエンド、iOS、Androidの3方向からメルカリ社のエンジニア4人に聞きました。 バックエンドの高速化を支える技術 【Tips1】 画像のファイルサイズを最適化し、アプリ全体の通信量を抑える 【Tips2】データセンター間通信のレイテンシを抑える 【Tips3】アプリのありとあらゆる挙動を常にモニタリングする iOSアプリの高速化を支える技術 【Tips4】Objective-CからSwiftへの移行 ＆ アーキテクチャの刷新 【Tips5】『UIStackView』を活用し、UIの描画をより滑らかにする Androidアプリの高速化を
Webパフォーマンスにおけるイニシャライズとランタイム
Webフロントエンド・パフォーマンス 思考整理系。 Webフロントエンドにおける3要素として、過去のセッションでは下記の3つを中心に紹介していました。 通信コスト - Networking 描画コスト - Rendering 計算コスト - Computing これらの問題は複雑に絡み合い、時として相反する関係をとります。例えば、通信コストを減らすために、視覚表現を画像からCSS3に置き換えたら、描画コストが高くなってしまいスクロールが重くなった、なんてケースは頻繁にあるでしょう。 理解の問題 この3つのコストは確かにパフォーマンスに影響を与える要因であります。しかし、その要因がWebフロントエンドのページライフサイクルにおいて、どこで影響を与えているかは表してくれません。 要因がどのような影響を及ぼしうるかという基礎的な理解と、パフォーマンスの問題に取り組むための切り口としての理解は、そ
blog from cdbk » Blog Archive » AndroidアプリでWebViewが異様に重いときの解決Tips
仕事でアプリのWebViewを使ってサイト内コンテンツを表示したところ、動作もたついてしまった事例がありました。 そのときの解決法が思いのほか簡単だったのでメモがてら記載。 動作がもたついてしまう主な原因は 1.アニメーションのコンテンツがある。 2.CSSの設定が複雑。 3.CSSのエフェクトを使っている。 といったところが主な原因。 自分が仕事でぶちあたったのは３つ目で角丸にするborder-radiusと影をつけるbox-shadow,text-shadowを取るとかなり動作が解消されました。 その他JavaScriptで0.何秒毎に、、、といった処理を加えている場合も一度最適な数値をいろいろ試して導いてみると効果が出る場合があります。 今後、OSやブラウザーのアップデートと合わせ、WebViewの高速かも進むと思いますが、Webブラウザーで100％信頼できる動作もWebViewでは
JavaScriptのパフォーマンスを上げる13のテクニック(Google I/O 2012) - ITコンサルタント成長録
JavaScriptのパフォーマンスを上げる13のテクニック 一部意訳あり。(特に関数についての11と13)。深く理解したい方はスライドや動画を観ることをオススメ。 (元記事） http://www.jonefox.com/blog/2012/07/10/13-javascript-performance-tips/ - 先日、Googleのダニエル・クリフォードは"Google I/O 2012"にて「V8で打ち破るJavaScriptのスピードリミット」と題した素晴らしい講演を行った。その中で彼は、JavaScriptコードで実践できる13のシンプルな最適化手法を紹介している。それらはChromeのV8 JavaScriptエンジンのコンパイルや実行速度を上げ、コードを速くするものだ。彼はそれらについての多くの説明を行なっているが、もしただシンプルTips一覧が欲しいというなら、以下を
GWT Project
GWT is used by many products at Google, including Google AdWords and Google Wallet. It's open source, completely free, and used by thousands of enthusiastic developers around the world. GWT is the official open source project for GWT releases 2.5 and onwards. This site houses links to the documentation, source code repository, issues list and information related to GWT roadmap and release. It is i
Google I/O 2012 - Breaking the JavaScript Speed Limit with V8
Daniel Clifford Are you are interested in making JavaScript run blazingly fast in Chrome? This talk takes a look under the hood in V8 to help you identify how to optimize your JavaScript code. We'll show you how to leverage V8's sampling profiler to eliminate performance bottlenecks and optimize JavaScript programs, and we'll expose how V8 uses hidden classes and runtime type feedback to generat
Chrome Dev Tools: JavaScript and Performance | Envato Tuts+
In this third part of our Chrome Developer Tools series, we'll review how to modify and debug JavaScript. Optimization is an important part of the development process, especially for performance-critical applications. We'll also discuss techniques for identifying potential bottlenecks in our code. As in the previous two articles, I'll be focusing on the features found in the Chrome Canary build (v
Chrome Developer Toolsを使いこなそう！
4/2のGoogle Developers Live Japan #3の資料です。Read less
Profiling long paint times with DevTools' continuous painting mode | Blog | Chrome for Developers
Continuous painting mode for paint profiling is now available in Chrome Canary. This article explains how you identify a problem in page painting time and how you can use this new tool to detect bottlenecks in painting performance. Investigating painting time on your page So you noticed that your page doesn't scroll smoothly. This is how you would start tackling the problem. For our example, we'll
スムーズなアニメーションを実装するコツと仕組みを説明するよ。CPUとGPUを理解しハードウェアアクセラレーションを駆使するのだ！（Frontrend Advent Calendar 2013 – 06日目） | Ginpen.com
（追記: 2018年10月）何年か経ってから見ても内容大丈夫そうでした。 この記事はFrontrend Advent Calendar 2013の6日目の記事です。昨日は谷さんでWeb Components/Polymerを軽く触ってみるでした。（これ今後数年で大流行りしそうに思うので、未読なら是非！） さて、最近はHTML5だCSS 3だFlashやめてJS制御でアニメーションだーってんで盛り上がってるわけですが（周回遅れ）、いざアニメーションを実装してみても、なかなかスムーズに動いてくれなかったりしますね。 どうやったらスムーズに動くかってのを解説したいと思います。 なおこの辺りの情報は、概ね斎藤さんを中心としたFrontrend絡みの方々に教えて頂きました。感謝感謝。 先に結論 概念的なの GPU合成レイヤーを適切に使うと早い いわゆるハードウェアアクセラレーション 何がCPUで、何
最新バージョンのChrome 31とOpera 18、asm.jsとWebGLで高速実行を実現。Unreal Engine 3対応に
最新バージョンのChrome 31とOpera 18、asm.jsとWebGLで高速実行を実現。Unreal Engine 3対応に Mozillaが開発したasm.jsは、JavaScriptを事前最適化コンパイラで徹底的に最適化するとともに、実行時チェックやガベージコレクションなどの実行速度の足を引っ張る処理を止めてしまうなどの手法で、JavaScriptを高速で実行できるようにする仕組みです。 asm.js:コンパイラのための低レベルかつ高度に最適化可能なJavaScriptのサブセット MozillaはFirefoxでasm.jsに対応していますが、GoogleもJavaScriptエンジンの最適化の一環としてasm.jsも高速に実行できるようにすると、5月に行われたイベント「Google I/O」で表明していました。 MozillaのGame Platform Strategis
iOSのUIWebViewでアニメーションを滑らかにする(アクセラレータで)
JavaScriptでタイマーを張ってのアニメーション それだと、iOS(特にiPod touch)ではマシンパワーが足りないのでカクカクしてしまいます。 でもハードウェアアクセラレータを有効にすると、滑らかになります。 このエントリの目次 アクセラレータが効いているかを確認する アクセラレータを効かせる方法 検証用ページを作ってみた 検証用ページをシミュレータで確認してみる さいごに 1.アクセラレータが効いているかを確認する iOSシミュレータで確認できます。 下記のようにiOSシミュレータを起動した状態で、ブレンドレイヤー（カラー）を有効にすると確認できるようになります。 有効にすると、画面が赤と緑で塗りつぶされるようになります。 赤い部分がアクセラレータが効いている領域で、緑の部分が効いていない領域です。 (下の図でいうと、シミュレータ画面 下部の「戻る」、「進む」「更新」ボタンな
SimpleBoxes | Fastbook は UIWebView でも軽快に動作する件
iOS 版 Facebook の実装が HTML5 アプリケーションからネイティブアプリケーション (CocoaTouch フレームワークを使ったアプリケーション) に変更されたのは記憶に新しいところ。 それに対して「Facebookのモバイルアプリが失敗した理由は HTML5 のせいじゃない。HTML5 でサクサク動く Facebook アプリを作って見せた Sencha Touch 開発チーム」という記事がありました。 元ネタは The Making of Fastbook: An HTML5 Love Story (以下、元記事) です。 簡単に言うと、「HTML5 だから遅いんじゃないよ、デモアプリケーション Fastbook のようにネイティブアプリケーション同等な (むしろそれを上回る) パフォーマンスでるよ」ということになるでしょうか。 動画も挙がっていて、自信の程が伺えます
Webフロントエンドパフォーマンスチューニング
Webフロントエンドのパフォーマンスチューニングについて全体的な話。javascript、Chrome DevToolsの紹介、ボトルネック、ポイントなど。
フロントエンドチューニングの箇条殴り書き
普段気をつけてるよリスト "モバイルで、WebViewとブラウザのコンパチで、特にセオリー化されていないデザインモジュールのなか、装飾画像もふんだんに使うぞ系サービス開発" の文脈における、パフォーマンス確保のため気をつけてるよリスト。 よく、パフォーマンス「向上」とか「確保」とか申しますが、メンテナンスコストなどと天秤にかけて、「必要十分」のラインを狙うのが重要だと思う次第。 画像リソース 画像リソースを揃えるときのセオリ。圧縮率とか最適化とか細かいチューニングはあれど、大雑把に下記を守る。そしてImage Optim（or 相当の処理）。 JPEGはプログレッシブで画質60くらい（オレ目安） PNGは差し支えない範囲で色数をきちんと削る 50px未満のサムネイルは@2.0xなリソースにしない 案外、Androidあわせの@1.5xや@1.0xでも大丈夫なことすらある GIFアニメを入れ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Chrome開発ツールよる描画パフォーマンスの調査 - Qiita
JavaScript debugging for beginners
– Tech Pro Shopping
Apple News, Reviews and Buying Guides | iMore
iOS CSS animations performance | Alberto Gasparin