AbemaTV の番組表リニューアルに伴うパフォーマンス改善 - Qiita
以前の番組表 ↓↓↓ AbemaTV 新番組表 大きく変わったところ チャンネルが横スクロールですべて見れるようになった サイドバーにチャンネル一覧ができた 日付切り替えがセレクトボックスからカレンダー表示になった etc. 今まではチャンネルが 5ch 毎に区切られていたので、わざわざページを切り替えて見ないといけなかったのを、横スクロールですべてのチャンネルが一覧で見られるようになりました。 さらにチャンネル毎の番組表にもアクセスしやすくなり、日付の切り替えもしやすくなったかと思います。 このリリースによって、ユーザービリティが少しでも向上していれば幸いです。 しかし、便利になった反面、このリリースに至るまでに、パフォーマンス面で様々なところで問題になりました。 今回は実際にリニューアル中に課題となった箇所と解決方法の一部を紹介します。 AbemaTV 以外であまり参考にならないかもし
60fpsのサイトパフォーマンスを目指す - ワザノバ | wazanova
http://calendar.perfplanet.com/2013/the-runtime-performance-checklist/1 comment | 0 pointsGoogle ChromeチームのPaul Lewisが、ページ読み込み後、つまりユーザが閲覧する際の、UIレスポンス、スクロール、アニメーションなどサイトパフォーマンスについてまとめています。 まずは60fpsのパフォーマンスを達成する。よって、16ms以上かかるフレームは全て問題とみなす。 1. Large invalidations of layout and styles エレメントでのクラスの変更やJavaScript/CSS transition/CSS animationで直接エレメントのスタイルを変更すると、ブラウザはレンダリングツリーの一部もしくは全部を無効にしてしまう。最悪のケースでは、ドキュ
フロントエンドチューニングの箇条殴り書き
普段気をつけてるよリスト "モバイルで、WebViewとブラウザのコンパチで、特にセオリー化されていないデザインモジュールのなか、装飾画像もふんだんに使うぞ系サービス開発" の文脈における、パフォーマンス確保のため気をつけてるよリスト。 よく、パフォーマンス「向上」とか「確保」とか申しますが、メンテナンスコストなどと天秤にかけて、「必要十分」のラインを狙うのが重要だと思う次第。 画像リソース 画像リソースを揃えるときのセオリ。圧縮率とか最適化とか細かいチューニングはあれど、大雑把に下記を守る。そしてImage Optim（or 相当の処理）。 JPEGはプログレッシブで画質60くらい（オレ目安） PNGは差し支えない範囲で色数をきちんと削る 50px未満のサムネイルは@2.0xなリソースにしない 案外、Androidあわせの@1.5xや@1.0xでも大丈夫なことすらある GIFアニメを入れ
Performance Tips for JavaScript in V8 - HTML5 Rocks
Performance tips for JavaScript in V8 Stay organized with collections Save and categorize content based on your preferences. Introduction Daniel Clifford gave an excellent talk at Google I/O on tips and tricks to improve JavaScript performance in V8. Daniel encouraged us to "demand faster" - to carefully analyze performance differences between C++ and JavaScript, and write code mindfully of how Ja
Nicole Sullivan「再フロー＆再描画：Javascriptを重くするCSS」 - 以下斜め読んだ内容
Yahoo!のNicole Sullivanの2009.3.27のブログエントリ Reflows & Repaints: CSS Performance making your JavaScript slow? ウェブページのパフォーマンスを遅くさせるCSSの使い方。およびその回避策がテーマ 再フロー＆再描画をどうやって減らすか。 TIPSは6つ紹介されてる。が、javascriptを書かないCSS書きに関係するのは、5〜6番目の table要素は特殊。固定レイアウトアルゴリズムでレンダリングされるようにしろ。 MS独自仕様のcss expression使うな。 のみ。 以下斜め読んだまとめ。 Operaの記事「Efficient JavaScript」によると再描画と再フローがjsが重くなるのに影響してる 同僚のStoyan Stefanovと一緒にこの問題の定量化に取組中 再描画と再フ
bestiejs/xstats.js - GitHub
xStats.js Cross-browser JavaScript Performance Monitor xStats provides simple charts to help monitor your code performance. FPS Frames rendered per second. The higher the number the better. MS Milliseconds needed to render a frame. The lower the number the better. MEM Megabytes of memory used. Make sure it doesn't keep incrementing. (WebKit-based browsers only) Screenshots Documentation The docume
『JavaScriptの最適化について、code.google.comの記事の適当訳 - それ図解で。・・・tohokuaikiのチラシの裏』へのコメント
暮らし JavaScriptの最適化について、code.google.comの記事の適当訳 - それ図解で。・・・tohokuaikiのチラシの裏
Let's make the web faster - Google Code
Optimizing JavaScript code Authors: Gregory Baker, Software Engineer on GMail & Erik Arvidsson, Software Engineer on Google Chrome Recommended experience: Working knowledge of JavaScript Client-side scripting can make your application dynamic and active, but the browser's interpretation of this code can itself introduce inefficiencies, and the performance of different constructs varies from client
JavaScriptの最適化について、code.google.comの記事の適当訳 - それ図解で。・・・tohokuaikiのチラシの裏
GoogleがWeb全体のスピードアップにいよいよ本格的に着手, 一社だけではできないと強調 からリンクのあった、 http://code.google.com/intl/ja/speed/articles/optimizing-javascript.html が日本語かと思ったら日本語じゃなかった・・・・。 いやー、意外とというか文字列については、全然知らんかった。 Closureって便利だし、「おぉ〜俺って使ってるジャン」みたいな気になれるからついつい使っちゃうんだけど、高コストなのね・・・・。反省。 ということで、超適当翻訳。どっかの誰かが書いてるかも。 前おき 著者: Google Chromeのエンジニア Gregory Baker, Software Engineer on GMail & Erik Arvidsson 推奨される経験：JavaScriptの実践的な知識 クライ
YUI Theater ― Douglas Crockford: "Ajax Performance" » Yahoo! User Interface Blog
YUI Blog Development YUI Theater — Douglas Crockford: "Ajax Performance" YUI Theater — Douglas Crockford: "Ajax Performance" Douglas Crockford returns to YUI Theater with another chapter in his evolving lecture series. This session, "Ajax Performance," debunks common misconceptions about the relationship between JavaScript and performance and gives engineers a core focus for improving the performa
DocumentFragmentの考察 - Personnel
DOMユーザーの方は、このようなことが出来たら良いと思ったことはありませんか? NodeListのクローンを作成する NodeListをそのままappendChildのパラメータにする もちろんこのようなことは出来ません。NodeListのitem一つ一つのクローンを作成し、一つ一つをappendChildしなければならないのです。しかし、DocumentFragmentを利用することによって、このような感覚の操作をすることが可能になります。 Foot note この記事のURI参照 http://members.jcom.home.ne.jp/jintrick/Personal/documentFragment.html#seeds ここに、文書A、文書B、文書C があったとします。 文書A <rootA> <item /> <item /> <item /> <
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Dromaeo - MozillaWiki