特定の端末のみで起こる WebView プチフリーズを Tracing を利用して追った話 - SmartNews Engineering Blog
こんにちは、スマートニュース株式会社の紀平です。 SmartNews のアプリ内では、最近 WebView を使った機能を多数公開しております。そのうちの一つにショッピングチャンネルという機能があるのですが、今日はそのショッピングチャンネルのタイムセール枠で以前発生した、謎のプチフリーズ問題の調査手法をご紹介します。 tl;dr 特定の Android 端末でプチフリーズが発生した 再描画領域を減らすことで現象は改善した Chrome の Tracing 機能を利用し、ブラウザのソースコードまで参照して、ついに根本原因まで突き止めた タイムセールで起こった問題 タイムセールは、SmartNews のショッピングチャンネル内において WebView で提供されている、期間限定のお得な商品をアグリゲーションした機能です。EC サイト各社のご協力の上にご提供しております。内部は HTML5 で開
Optimising the front end for the browser | HackerNoon
Too Long; Didn't ReadIf you looked up optimisation (or optimization for our American readers) in the dictionary it would say something along the lines of <em>Making the most of what we’ve got</em>. If you looked up optimisation (or optimization for our American readers) in the dictionary it would say something along the lines of Making the most of what we’ve got. A worthy endeavour and challenge a
SVG Quirk Test
* = Safari does not support SVG Stacks ** = 15 sprite requests with fragment identifier + 1 request for sprite without fragment identifier Test method The tests were run with a simple Python server based on the script below. The amount of requests are counted according to the log in the command line. The files tested are exactly the same as the linked pages in the comparison table. The Cold cache
Better than Gzip Compression with Brotli – Mozilla Hacks - the Web developer blog
HTTP Compression Brotli is an open source data compression library formally specified by IETF draft. It can be used to compress HTTPS responses sent to a browser, in place of gzip or deflate. Support for Brotli content encoding has recently landed and is now testable in Firefox Developer Edition (Firefox 44). In this post, we’ll show you an example of how to set up a simple HTTPS server that takes
そのコード、本当にjQueryが必要ですか？ネイティブ関数の代替Tips集 | ゆっくりと…
sitepoint から「本当にjQueryが必要ですか？」とタイトルのついた3本の記事を紹介します。 Do You Really Need jQuery? Native JavaScript Equivalents of jQuery Methods: the DOM and Forms Native JavaScript Equivalents of jQuery Methods: Events, Ajax and Utilities 言うまでもなく著者の Craig Buckler さん の趣旨は、「jQueryを使うのは止めよう」ではありません。ネイティブ関数で代替えできるのは、古い IE のサポートが必要なく、ごく簡単なケースに限られます。その代わりに得るものは「速さ」です。そこで、どの程度「速い」のかを所々 jsperf の結果で補ってみたいと思います。 また JavaScri
アニメーションGIFの再生にGPUは使われるのか
動画ファイルの再生は今時のデバイスだとGPU的な何かにより再生支援が行われ、CPUへの負担は少なくなる。「じゃあそれアニメーションGIFにも効いたりするの？」と某所でピンク色の髪の毛の女の子が襲ってくるアニメーションGIFを見た時に疑問を持ったので、雑に調べた。 雑な検証にはRRRRRRRROLL_GIFのArchiveページを利用した。 Chrome 29: ひたすらCPUを消費し、まったくGPUを使わない Firefox 23: CPUとGPUをモリモリ使う Internet Explorer 10: 数個のアニメーションGIFだとほとんどCPUを消費しない IE10ではGPU使って再生しているような挙動だが、20程表示させるとCPUの負荷がどんどん上がる。負荷を減らす工夫がありそうではあるが過信はできなさそう。いずれにせよアニメーションGIFはモリモリCPUを使う可能性が高く、環境に
High Performance Web Frontend
★追記： https://speakerdeck.com/ahomu/high-performance-web-frontend-2013-qiu のほうがブラッシュアップ版です WCAN 2013 Summer (7/6) で行われた、"High Performance Web Frontend…
ドット絵におけるsvgのパフォーマンス検証
ここ数日ドット絵からsvgを生成するスクリプトを書いていたのですが，一点気になることがありました．生成するsvgの内容によって描画パフォーマンスに驚くほどの差が出たのです．となればその差はどこから生まれているのかに興味が湧いてきます．そこで今回はsvgの描画パフォーマンスについて検証してみましょう． ※検証コードへのリンクを追加しました． ドット絵をsvgに変換する意義 ドット絵と言えば，かつてファミリーコンピュータを代表とした家庭用ゲーム機におけるグラフィック表現として標準的なものでした．昨今では3dを主体としたグラフィックが主流となってしまいましたが，ドット絵のもつ独特な味わい深さから，今日でも一表現手法として様々な場面で利用されています． さて，本来ドット絵はラスタ画像として扱われることが多いのですが，これをsvgとする意味はあるのでしょうか？実は有るのです． ドット絵の特徴として，
svgを使って図案とレイアウトとを分離する
svgは画像の表現形式であると同時にグラフィックを描くためのプログラム言語とも言えます．そのために，svgを手書きする場合に便利な機能が沢山定義されており，上手く組み合わせることで煩雑な作業を大幅に簡略化すると言ったことも可能です．ここではuse要素とスタイルシートとを組み合わせて基本となる図案とレイアウトとを分離し冗長なコードを省く方法について紹介します． 例えばトランプを思い浮かべて下さい．トランプのカードには4種のスート（マーク）と13種の位が存在しており，全部で13×4の52種類のカードが存在します．ここで同じ位のカードはマークが異なるだけで同じレイアウトとなっている点に着目します． 素朴に考えると，全部で52種類のカードをデザインすれば良いのですが，同じレイアウトなのだから何らかの方法で作業を簡略化したいところです．そこでsvgの機能を使ってスートの部分とレイアウトの部分を分離し
FOUT
Flash of Unstyled Textの頭文字をとってFOUTと呼ばれる現象がある。FirefoxでWebフォントの読み込みが完了するまで別のフォントが使われる現象のことで、後にSafariやChrome、Internet Explorerで起こるようになった読み込みの完了まで空白になる現象のことも含めてFOUTと呼ぶことが多い(気がする)。このWebサイトでも起こっていて、それについて聞かれたのでさらっと書いてみる。 この現象の原因はCSSの処理やWebページのレンダリングと並行してWebフォントのHTTPリクエストが行われることにあるので、仕様と言って良い。起こらないようにするにはWebフォントの読み込みが終わるまで他の処理をブロックするとかしないといけないため、改善される可能性はあるけどまず直ることはない。日本のWebサイトではあまり起こらないように感じるのは、Webフォント自
ローカルストレージに簡単な解決策はない
原文：“There is no simple solution for local storage” (on March 5, 2012 by Chris Heilmann) 要約：私たちは良いデータストアとして localStorage を推奨するのをやめなければならない。パフォーマンスがひどく損なわれるからだ。しかし残念なことに、代わりとなるものはまだ完全にサポートされておらず、また簡単に実装できるものでもない。 Web 開発において、うますぎる話に出くわすことは常々だ。そういったもののいくつかは良いもので、だからこそそれが「すべて」として目立ってしまい、開発者を使うように仕向けてしまう。しかし、多くの場合、良いと思われていたものはそこまで良いものではない。また、しばらく使ってみてはじめて「間違っていた」と気づかされるものなのだ。 そんなもののひとつに、localStorage がある
文字コードを意識すべし
Life with Web Browser Engine (Gecko, WebKit and etc), Mobile and etc. 現在のWebブラウザというのは、いろんな外部コンポーネントも使って作ってるわけなんだけど、例えば、HTMLを解析しながら文字コードを変換なんてしてたら複雑になりすぎてバグを増やすきっかけになってしまう。HTMLパーサーに渡される時点で特定の文字コードで渡すようになってる。そのため、文字コード変換はオープンソースだったらlibicuのようなものを利用したりする (WebKitは現にlibicu使ってる) し、プロプラであっても、Internet ExplorerのようにブラウザじゃなくてOSのコンポーネント(MLANG.DLL)を使ってたりする。ちなみにMozillaではuconvと呼ばれるライブラリを自分たちでメンテナンスしてる。 また、現在のWebブ
Big Sky :: IEとFirefoxとChromeをたった10分でチョッパヤにする方法
追記 anekosさんから、Chromeは「--disk-cache-dir=r:/ram みたいにオプションつけて起動すれば、キャッシュディレクトリ指定できる」と教えて貰いました。毎度指定してないとダメらしいですが、ショートカット等で運用すればjunction要らない子ですね。 IEとFirefoxに関しては難しい事はしないし誰でも出来る。この記事読む時間も合わせて10分程度あればIE、Firefoxを高速化出来る。Chromeは少し敷居が高いけど中級者レベルなら出来るはず。 以下、Windows初心者は最後まで読んでからやるべし。あと動作がおかしくなったとしても自力で直せる片が対象です。 まず、これを入れる。 ドライバーダウンロード RAMDISK ユーティリティー | BUFFALO バッファロー お客様が以下のダウンロードソフトウェア使用許諾契約に同意する場合にのみ、お客様はダウン
Cacoo - Web上で図の作成とリアルタイムコラボレーション
Online diagramming tool for collaborating on wireframes, flowcharts, and more
ブラウザ動作の理解－レンダリングの負荷を測る | ゆっくりと…
転勤・単身赴任というライフ・イベントがあり、すっかり更新が止まっていましたが、前回 に続き、「Rendering: repaint, reflow/relayout, restyle」から後半のレンダリング負荷を測るツールの使い方をお届けします。記事中の リフロー や リペイント といった用語は、前回記事「用語の定義」 を参照してください。 元記事は初稿が2009年12月でツールのバージョンも古いため、現時点の最新バージョンで記事を再構成しています。また実行環境によって観測結果が異なるため （非力なマシンの方がレンダリング負荷の割合が高いけど、サンプルとしては分かりやすい）、以下に本記事で試した環境を記しておきます。 dynaTrace AJAX Edition バージョン：Version: 2.1.0.603, built on 2010-12-15 ブラウザ、PC：IE8 / Wind
JavaScriptからメモリ情報を取得する方法
JavaScriptにおいてメモリ管理は基本的にエンジン任せなのであまり意識することは無いかもしれませんが、メモリリークの調査やパフォーマンスの実験のためにメモリ情報をJavaScriptから扱いたいときがあると思います。 メモリリーク調査は専用のソフトウェアなどがあるので、 JavaScript Memory Leak Detector (v2) – GPDE Team Blog – Site Home – MSDN Blogs IE Overview – JavaScript Memory Validator Firefox Debugging memory leaks – MDC Doc Center そちらを使うのでもいいかもしれませんが、new Dateを使った実行時間の記録みたいにJavaScript内からメモリ情報を取得して計測できるとおもしろいと思うので、ブラウザ毎にやる方
CSSセレクタの高速化の話を検証 - os0x.blog
CSSセレクタの高速化の話し - Webtech Walkerの件。元ネタは続・ハイパフォーマンスWebサイト ―ウェブ高速化のベストプラクティスで、元ネタの元ネタはWriting Efficient CSS for use in the Mozilla UI - MDC。 先に書いておくと、この元ネタのMozillaの記事には、in the Mozilla UIとある通り、FirefoxなどのUIレベルの話です。Mozillaの場合、ウィンドウとかタブとか、とにかくなんでもCSSでスタイルを指定できる(している)のでCSSのパフォーマンスについて考慮する点が他のブラウザとはズレています。 とはいえ、実際にどうなのか検証したことなかったので、少し試してみました。 今回の検証方法は、dl>dt+ddを5重に入れ子にした300KB強の大きめなHTMLを用意して、CSSを動的に適用したときの時間
理由がない限り、Array.join("") による文字列連結は使わないほうがいいみたい - latest log
JavaScript の勉強を開始したときに「文字列の連結には Array.join() を使え」といった記事を見た覚えがあります(ソース失念したけど、 Operaの技術文書だった気がする ⇒ IE の技術文書だったかも)。 一年ほど信じてて、念のためベンチとってみたら「うそやーん」でした。ってお話。 ベンチの条件は、 3種類の文字列連結方法を試す 1. + Operator 2. String.concat() 3. Array.join("") 文字列の要素数を 11個 と 55個で試す <!doctype html><html><head><title></title> </head><body> <script> window.onload = function() { var now = +new Date, lp = 100; while (lp--) { job(); } d
JavaScript の不思議な面白さ - 第四回
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog 前回の「第三回」ではよくある手法でプログラムの分離を試してみました。 そろそろこの連載も折り返し地点となります。 実はこの記事は、最初、小さな課題を与えられたプログラマが正攻法で突撃するもうまくいかず、策をろうしてやっと勝利、その知識を広めようとライブラリ化を行ったところで難題にぶち当たり、裏街道に突入。状況を打開する為にプログラム技術を駆使し、最終的にフレームワークとして完成させる、というストーリーになっています。 ＊ さて、さっそく前回の答えですが「A」です。 まずは下のグラフをごらんください。 上記は、各実装でどれぐらい表示に時間が掛かるかを測定したものです。 単位は ms (ミリ秒＝1000分の1秒)です。 重要なのは プ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Re-evaluating Front-end Performance Best Practices
