タグ

ブックマーク / 1000ch.net (2)

  • 要素のサイズ変化を監視するResizeObserver

    要素のサイズ変化を監視するResizeObserver 便利な Observer シリーズのひとつ ResizeObserver が Chrome 64 に ship された。Chrome 55 からフラグ付きで入っていたが、フラグなしで動作するようになっている。 旧来のやり方と問題 これまでの方法としては resize という DOM イベントを監視することで、要素の変更を検知できた。しかしサイズや位置といった変更の多寡を知るには、Element#getBoundingClientRect() や window.getComputerStyle(Element) といった関数を呼び出す必要があり、これによって強制的にレイアウト処理が実行される。そのため、対象要素の量や処理の重さによってはレンダリングパフォーマンスを大きく損なってしまう。 document.querySelector('d

    要素のサイズ変化を監視するResizeObserver
  • Gruntの概要と導入手順とメリット | 1000ch.net

    2012/12/08 Gruntとは grunt: a task-based command line build tool for JavaScript projects もはや説明不要の可能性もありますが、 gruntがgrunt-cliへの移行(?)をしたこともあり、まとめてみました。 コマンドラインで使用するビルドタスクのツールです。 js(ほぼjson)の設定ファイル上に、concatやminifyといったようなタスクを定義し、 コマンドラインから実行します。言葉だけだとイメージ湧きにくいと思いますので、 使ってもらうのが一番と言い張って導入手順の説明に入ります。 npmからgrunt-cliをインストールする (nodeとnpmはインストール済み・・・よね?) npm install -g grunt-cli これで核となるCLIのインストールは完了です。 ターミ

  • 1