Qiitaに書いておきました。
よくjQuery animateかなにかでopacityをいじってアニメーションが終わったらdisplay:noneとかやってるサイトとか見かけるので、そういうのが主流なのかこういう簡単な実装が主流なのかどうなんでしょうね。
IE10, 11, Edgeではinput:[type="text"]等の要素に文字を入力していると右端に勝手に☓ボタンが表示されてしまうようだ。
input::-ms-clear { display: none; }
で消せた。
うまく撮れなかったけど、食いっぷりがよくてよかったです。
画像のロードが既に終わっていて、再度同じ画像を含むDOMをappendしてloadイベントやerrorイベントハンドラを貼りたい場合、ブラウザでキャッシュされた画像が返されるとloadイベントが発火されない。
// 何度も下記処理が走る場合 const url = httpRequestHoge() // 何度も同じ画像が返ってくる可能性あり imgTag = $(`<img src="#{url}">`) $('body').append(imgTag) imgTag .on('load', function () { $(this).css('height', 0) })
だとloadイベントが発火されない場合がある。
const url = httpRequestHoge() imgTag = $('<img>') // ここではsrcに入れない $('body').append(imgTag) imgTag .on('load', function () { $(this).css('height', 0) }) .attr('src', url) // イベントハンドラを貼ってからsrc指定
loadはdocumentに存在しないDOMにはハンドラが貼れないらしいのでめんどい。
実は5月中旬から人生初のアクアリウムを始めていました。
さっき模様替えとかが終わったので写真に収めておきましたぞ。
初めてだったのでいろいろ手間取りましたが、なんとか水槽台と水槽を立ち上げ。
以下スペック。
ソイルこぼれてたりウィローモストリミングできてなかったりでよくないですねー。
生体は
来週辺りコリドラス パンダも入れようかと。
赤虫あげてコリドラス軍団のモフモフを堪能したいですなあ。
最近の業務ではフロントエンドの最適化もやっているのですが、そこで奇妙な現象に遭遇しました。
jQueryに.find
という、DOMツリーからセレクタに該当するDOM群のjQueryオブジェクト取得関数があるのですが、これでなぜか実行するたびにreflowが発生していました。
$('.hoge').find('.fuga:not(.piyo)')
このような状況です。jQuery 1.11でも3.0でも起きていました。これがscrollのたびに走っていると、インスペクタの.hoge
が点滅し続けます。
いくつかのケースでreflowが発生するかどうか試してみましたが、どうやら.find
で:not
を使用した時のみ発生するようです。
$('.hoge')
$('.hoge').find('.fuga')
$('.hoge').find('.fuga:not(.piyo)')
$('.hoge').find(':not(.piyo)')
$(':not(.piyo)')
実装を読んでないので.find
でreflowが発生するのが腑に落ちないのですが、このようなケースでは.filter
もしくは.not
でさらに絞り込めばreflowが起きないので書き換えると良さそうです。
先週の1/25,26の2日間にかけて、社内ISUCONが開催されていたので参加してきました。
1,2人のチームで2日間のうちどちらかの日に参加し、4時間かけて本家ISUCONのような課題WEBサービスのチューニングを競う、という内容です。
出題者は弊社エバンジェリストの@takashabeです。
出題サービスのソースコードとベンチマーカを載せておきます。
作業内容はGitHubにpushしておきました。
参加者は合計15人。1日目に影響され、2日目にエントリーした方が何名かいました。
僕はスケジュール上2日目に1人で参加しました。と言っても実は全員ぼっちチームでした。チーム名は「https://goo.gl/6YBEht」です。短縮URLをチーム名にしました。
チューニングのお題としてはISUCON5と同じような構成で、Twitterを模したサービスでした。指定されたEC2に入るだけだったので、そのへんは本家よりカジュアルに参加できる感じでよかったです。
とりあえずサービスに紐付いている動作中のプロセスを確認し、Gitなどの環境を構築しました。言語は初期がRubyになっていたのでsystemdでPHPに切り替えました。言語を切り替えただけでスコアが500→1000に。
テーブルを確認し、必要そうな箇所にインデックスを貼って見たらなんとスコアが1000→2000に。
続けてフォロー一覧やフォロワー一覧ページの無駄に叩かれるクエリを最適化していきました。foreachで何度も叩いているクエリを結合して1回のクエリで済ませるようにしたり、count文にしたり。
このへんで約2時間。スコアは3000まであがりました。なんとこの時点でのトップを独走しており、2位以下は1000点に達していないような状況でした。
ここで余裕が出てきたので、Redisに載せ変えようと考えpeclをyum installしました。
するとなんとスコアが2500に!使用中のモジュールまで更新されたかなにかで以降スコアが下がったままになってしまいました。しかもうまくPHPにてRedisを導入できず、結局諦めミドルウェアまわりのチューニングにとりかかりました。
nginx, mysql, カーネルまわりのチューニングをしましたが、スコアは伸びず。今回のサービスは通信量が少ないため、ボトルネックはネットワークではなくクエリにあったためです。
と、ここでスコア4000を叩き出すエンジニアが登場。
結局最終的にはスコア2500でフィニッシュ。
1位は@pe10:3000点くらい
2位はなんと、僕でした!
4000スコア出していた人は再起動後にFAILになり失格だったそうです。
惜しくも2位でしたが、2日目1位となり、amazonギフト券をいただきました!!!!
ISUCON5に参加した方々が総じてスコアが高く、やはりアドバンテージがあったのだと思います。
言語切り換えやベンチマークの動かし方、チューニング対象の絞り方などは、ISUCONならではな感じがします。
スコアが高かったのもありますが、こういうイベントを楽しんで参加することができたことが嬉しかったです。
今後も本家ISUCONや何か面白そうなイベントには参加していきたいと思います。
エバンジェリスト、お疲れ様でした。