業務内容が書いてあったのを省いたのでわかりにくくなっているとは思いますがアップロードしておきました。Read less

2015年にもなるのにJavaScriptでのDOM操作のパフォーマンスについて書く。ウェブページにインタラクションを持たせたい時に、JavaScriptでDOM操作を行うことがよくある。このDOM操作のパフォーマンスについて、よく聞く意見を大別すると次の2つがある。 JavaScriptによるDOM操作は重たい レンダリングが重いだけで、DOM操作そのものはそれほど重たくない JavaScriptでオブジェクトのプロパティを操作したりする単体の処理は通常1ミリ秒もかからないが、DOM操作をするとレンダリングが完了するまでに数十ミリ秒程度かかったりする場合がある。1番目のDOM操作が重たいと言っている人は経験則的にそう言っていることが多い。 レンダリングの仕組みを知っている人は2番目の意見を言うが、重箱の隅をつつくような話をするとこれも必ずしも正しいわけではない。DOM操作するコードによっ

2015-03-03 の一連のツイートがこちら performance.now() iOS 8.0 で追加されて、iOS 8.1 で削除されてた— コラーゲンたっぷりさん (@uupaa) 2015, 3月 3 正しくは、「iOS 8.1.1 で」ですね performance.now() 削除されてたのソース。 WebKit のとこ https://t.co/gvpnz9Wwk2— コラーゲンたっぷりさん (@uupaa) 2015, 3月 3 performance.now()の無効化が何故痛いかというと、Date.nowは相当重い部類のAPIという認識なのでアニメーション中には一回も呼びたくないしTimer系を呼ばないように組み上げると速くなる。 その辺の事情を知らない人はバンバン呼んでるけど、あれはよろしくないです— コラーゲンたっぷりさん (@uupaa) 2015, 3月 3

とても基本的かつ必要な技だと思うにの、意外にあんまり情報がなかったので、メモ的に作ってみた。実際問題として、動くものが少ないときはダブルバッファリングしなくてもそこそこ綺麗に動くんだけど、動かすものが増えてくるとちらちらしてきてダブルバッファリングしたくなる。まあ、多いといっても 5000 個くらい動かす程度なら全然平気ぽい。サンプルでは 10000 個にしてあるけど、環境によってはこれでも全然平気かも。 ↑矩形をランダムな方向に10000個ほど動かしまくるサンプルのキャプチャ画像。静止画で見るとただのノイズ画面にしか見えないね・・・。 ふたつの canvas をフリップする このへんに書いてあった方法そのまま。canvas を二つ作っておいて、片方を hidden、片方を visible に設定する、というのを繰り返す方法。 HTML ファイルは、以下のような感じで作っておく。位置とサイ

最近Androidとの抗争が激化しているago（@kyo_ago）です。 jQueryはCSSセレクタを多用する特徴がありますが、jQuery内では実行ブラウザやCSSセレクタの記述によって呼び出されるブラウザAPIが変わり、それによって実行速度にも影響が出ます。 この記事では「セレクタAPIとはなにか」、「CSSセレクタの記述によって呼び出されるセレクタAPIの種類」、「高速なセレクタAPIを使用するための方法」、「高速なセレクタAPIが使われるかどうか確認する方法」などを紹介したいと思います。 （※この記事はJavaScript Advent Calendar 2011 (フレームワークコース) : ATNDの1日目の記事です） セレクタAPIとはなにか セレクタAPIとは「#hoge .huga」のようなCSSセレクタから、DOM上に存在する要素を取得するためのAPIです。 jQue

インタラクティブコンテンツ制作に役立つHTML5向けのフレームワークCreateJS (使い方は入門サイトを参照ください)。2014年1月に公式ブログでWebGLサポートが発表されました（参照記事「WebGL Support in EaselJS」)。公式ブログによるとパフォーマンスが従来比の6〜50倍にも達するとのことです。 果たしてどのぐらいの性能があるのか気になりましたので、以前の検証記事「HTML5開発者必見、最速のJavaScriptライブラリはどれだ!? パフォーマンスの徹底検証」を元に、WebGL対応版のCreateJS(描画を扱うJSライブラリ「EaselJS」)のパフォーマンスを比較検証してみました。検証に用いたデモは次のリンクをクリックすることで再生できます。 CreateJS (EaselJS 0.7.1) : 従来版。CanvasのContext2Dが利用されている

gist.github.com

Stay organized with collections Save and categorize content based on your preferences. Explore our growing collection of courses on key web design and development subjects. An industry expert has written each course, helped by members of the Chrome team. Follow the modules sequentially, or dip into the topics you most want to learn about.

Use web workers to run JavaScript off the browser's main thread Stay organized with collections Save and categorize content based on your preferences. An off-main-thread architecture can significantly improve your app's reliability and user experience. In the past 20 years, the web has evolved dramatically from static documents with a few styles and images to complex, dynamic applications. However

Transcript Leading  Edge  Development  勉強会 フロントエンドパフォーマンス向上ルール はじめに ▪Webサイト⾼高速化  /  パフォーマンス改善の重要性 【Aberdeen  Group  Report】 ・Amazonはページの反応が0.1秒遅くなると、売り上げが1%ダウンする。 ・Googleのページ反応が0.5秒遅くなると、アクセス数が20%ダウンする。 ・⼀一般的に表⽰示スピードが1秒遅くなると、 PVは11%、コンバージョンは7%、顧客満⾜足度度は16%ダウンする。 【Jakob  Nielsen】  　３つの重要限界  　・⼼心理理的・感情的な違和感を感じないのは0.1秒まで  　・思考の流流れが妨げられないのは1秒まで  　・注意⼒力力を維持する限界の時間は10秒まで はじめに ▪パフォーマンス改善の⼿手段 【改善箇所】 ・パフォーマ

Before visitors click on a link, they hover over that link. Between these two events, 200 ms to 300 ms usually pass by (test yourself here). 引用：InstantClick — JS library to make your website instant リンクにマウスオーバーしてからクリックするまでには200msから300msほど時間がかかるそうです。実際このテストページでクリックしてみるとMacのトラックパッドだとさらに遅く500msくらいかかってました。 InstantClick.ioはその間に裏でリンク先ページをロードして勝手にリンクをpjax化してしまうという高速化ライブラリです。 やってることはRails4のturbolinksと似てます