scrollイベントが呼ばれすぎることへの対処 - 素人がプログラミングを勉強していたブログ
onscrollを監視していると大量にeventが来てパフォーマンスが劣化するというのはよく聞く話で、 underscore.jsなどでイベントをthrottleやdebounceさせて対処していることが多い。 ただ、scrollに応じてスタイルを変更させたりする場合は、0.1秒くらい遅れがあると視覚的にカクカクしがちで、仕方なくsetTimeout(fn, 0)でthrottleさせることも多いと思う。 scrollイベントは画面のフラッシュレートと同期していないので、マウスやトラックパッドの動きに応じて大量に呼ばれていて、setTimeoutも画面のフレッシュレートとは関係なく内部の実行タイマーに応じて動いている。よって、setTimeout(fn, 0)でthrottleしてもまだ無駄が多い。実験してみたところ、requestAnimationFrameを使うと少しだけマシになること
array.indexOf(value) >= 0で要素が含まれてるか検索すると失敗する場合がある - 素人がプログラミングを勉強していたブログ
indexOf(val) >= 0の話 配列に要素が含まれているかのチェックに [1, 2, 3].indexOf(2) >= 0; // true のようなコードを使っている場面を極めて頻繁に（それ以外を使っているのを見ることは稀なくらい）見るが、 function contains(a, v) { return a.indexOf(v) >= 0; } は厳密にはJavaScriptでは正しく動くとは限らない。上記コードのどこが間違っているのか、下記の解説を見る前に考えてみてほしい。こんなシンプルなコードにも、バグがある。 解説 containsがどのように動くべきなど明白だというのは間違いである。実は微妙な問題がたくさんある。 まず、致命的な部分をあげると、最初のナイーブな実装だと contains([NaN], NaN) // false となってしまう。明らかに意図した動作と異な
FacebookのReactで綺麗で高速なDOMのView操作 - 素人がプログラミングを勉強していたブログ
それほど新しい話題でもないが、FacebookがReact | A JavaScript library for building user interfacesというDOMを抽象化したようなView操作のライブラリをリリースした。 Githubが出してるエディタのAtomが実験的にReactを採用したり、Instagramが採用していたり、エディタでReactのシンタックスがサポートされ始めたり、海外では実際に使われはじめていて、実際に使ってみたら思いのほか使いやすかったので、簡単に使い方を書いていこうと思う。 まず、ReactにはJSXという、htmlをJS内で書ける言語がある。オプショナルなものだが、使ったほうがコードが綺麗になるので、この記事では使っていく。下記コードはEdit fiddle - JSFiddleなどでコンパイルなしにそのままテストできるので、適当にコピーしながら確
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
