kitak blog

Kみたいなエンジニアになりたいブログ

browser

高頻度で発生するブラウザイベントのイベントリスナー呼び出し最適化

ページのスクロールやウィンドウのリサイズによって、JavaScriptで表示を変える、という話はちょくちょくある。例えば、パララックスみたいなやつをイメージしてもらえばいいだろう。 ウェブフロントエンドエンジニアが「ううっ...」となる瞬間だ。スクロー…

Chrome DevTools でコストの高い描画処理を探す流れ

先日、Chrome DevTools の「Enable paint flashing」を使う - kitak.blog で、Chrome DevTools の「Enable paint flashing」を使って不要な描画処理を検知する方法を紹介しました。 不要な描画処理は行わないほうがいいに決まっていますが、必要と思われる描…

Chrome DevTools の「Enable paint flashing」を使う

Chrome DevToolsに「Enable paint flashing」という機能があって、画面で描画が行われた箇所をハイライト表示してくれます。 DevTools を立ち上げて、下のペインの「Rendering」タブを選択するとあります。下にペインがない場合、右上の「︙」から「Show con…

クリティカルCSS 雑感

t32kさんの Smashing Magazineのパフォーマンス改善ケースが凄まじい件 - MOL の記事を読んで、クリティカルCSSが気になったので少し調べてみました。それの雑感。 クリティカルCSSとは 一言でいうと、ページのATF(Adove The Fold)の表示に必要なスタイルシ…

script要素のdefer属性周辺のBlink(Chromium)の実装の調査

script要素にdefer属性を設定すると、ドキュメントのパース完了後にスクリプトが実行される。スクリプトの実行によってパーサがブロックされないので最初の表示が早くなるという利点がある(いまだったら、パース完了後ではなく、その都度非同期で実行するasy…

img要素のsrcset属性周辺のBlink(Chromium)の実装の調査

仕事で、高解像度デバイス対応、いわゆるRetina対応のためにimg要素のsrcset属性をつかおうとして、細かい仕様が気になって調査しました。 例えば、以下のように記述した場合、デバイスピクセル比が1のときはbnr_1x.png, 2のときはbnr_2x.pngが取得・表示さ…

MobileSafariでテキストボックスを全選択させる

小さいんですが、1年に1回くらい同じことでハマっている気がするのでメモ。 よくテキストボックスを全選択させるためにJSでこんなコードを書いたりする。 var content = document.getElementById('content'); content.focus(); content.selectionStart = 0; …

ProtractorでE2Eテストを実行するときのクリーンな状態の準備と後始末について

E2Eのテストを走らせて手元だと通るけど、CIだと通らない、みたいなことがあって、原因を調べたら、cookieまわりが原因だった。 cookie や LocalStorage を利用しているアプリで、事前に「ページのcookieが発行されているか」「LocalStorageにデータが書き込…

OSS版Drone.io, SauceLabs, Protractor を連携させて、E2Eテストを走らせる

柿の種を食べています。きたけーです。 社内で OSS版Drone.io が使われており(refs: OSS版 Drone.io を社内で使い始めてる話 - Qiita )、SauceLabs 、Protractorと連携させてE2Eテストを走らせてみました。 これによりPullReqがでたタイミングで、各種OS、ブ…

chrome-remote-interface を試してみた

こんにちは。昨日はボウモアを呑みました。きたけーです。 node-webkitで作ったアプリのデバッグのためにchrome-remote-interfaceを試してみたのでメモ。 chrome-remote-interface cyrus-and/chrome-remote-interface · GitHub は、Remote Debugging Protoco…