TL;DR
(おそらく)Firefoxのバグ起因でfont-awesome.min.cssがめっちゃ重くなるので読み込まないようにすればOK。雑には、/etc/hostsに127.0.0.1 maxcdn.bootstrapcdn.com
重いフォイ…
最近(Firefox 38.0.1)「Qiita見てるとやたらMacが熱くなるな・・・」と感じていました。調べてみたところ、きれいに原因が絞り込めたので経緯など含めて書いてみます。
新MacBookでの気付きとして一番大きかったのは、Qiitaのサイトには魔物が潜んでいて1タブでごっそりCPU持っていくということ。スクロールせず適当に http://t.co/CMCYrr7jVR を開いてる状態で80%かかる(twitterで対照すると15%ぐらい)
— Kei Nakazawa (@muo_jp) 2015, 5月 30
CPU使用率でいうと、Firefoxが常時80-100%(1コア専有)というところです(図1)。
これは、Qiitaのタブを閉じると速やかに低下します。
図1 Qiitaのページを開いた状態のCPU使用率グラフ
数ページ見て回った結果、トップページ以外は大体どこも重いようでした。
以下では、たまたま開いていたhttp://qiita.com/ruiu/items/dba58f7b03a9a2ffad65を例として進めていきます。
プロファイルを取る
なんかJSでミスってるのかなーと考えて、まずはFirefoxに搭載されているプロファイラで調べてみました。結果は図2の通りです。
図2 Qiitaの某ページを表示したままFirefoxをバックグラウンドへ送った状態のプロファイル
ちなみに、GitHubの適当なページを開きっぱなしにした際のプロファイル結果は図3の通りです。
図3 GitHubの某ページを表示したままFirefoxをバックグラウンドへ送った状態のプロファイル
1時間ほどJSを調べ回る
どうも画面描画への影響は皆無ながらDOMが頻繁に更新されてるのかな、と考え、ありがちなjQuery.fxの発火頻度が異常に高いとかそういう事象を探し回りました。これまたFirefox標準の開発ツール内に含まれるソースコード表示で、コード整形機能をぽちぽち有効化しながらintervalとかtimeoutとかを探して行った感じです。
特にめぼしい成果はありませんでした。
諦めかけてFirefoxの設定へ手を入れようとする
もう60fpsでWebブラウザをレンダリングするの自体がMacBookには合わないのでは、と考えて描画インターバルを広げる策を考え始めました。
@muo_jp jQuery.fxが泣けるほど重い事案かと思ったけどintervalを雑にいじって改善しなかったので投げた。非アクティブでもUIイベントが秒間60回発火してるぽいのがそもそもイマイチ感するのでそのへんいじれるFirefox拡張無いか探したほうがマシそう
— Kei Nakazawa (@muo_jp) 2015, 5月 30
まあしかしなかなか見つかりません。about:configからfps、interval、rateあたりで関係ありそうな設定を探してみて、そこを足がかりにして見つけたcontent.notify.ontimerとかcontent.notify.intervalとかを調べて設定するも無駄でした。
FirefoxのBugzillaを探す
ブラウザ自体のフレームレートへ手を入れる方法は無いのかなーと思ってfirefox rendering 60fps -youtubeで検索してみた*1ところ、Bug 1104726 - Offscreen Async animated Element causes 60fps rendering on main threadへ行き当たりました。結論としてはこのバグのマージ先であるBug 1105509 - OMTA-able animations not throttled for offscreen elementsと、Bug 1166500 - [Power] Invisible CSS animations can still sometimes keep the refresh driver activeが大当たりでした。
後者のバグに添付されているサンプルを実行してみると、fps傾向は違えど処理時間の内訳が同傾向でした(図4)。
図4 bug 1166500に添付されているアニメーションを再生した状態のプロファイル
[*1] youtubeを抜かないと、「FirefoxでYouTubeの60fps動画をきちんと再生する方法」的なのばかりが見つかったため
ゴリゴリ削って場所特定
あとはQiitaへ戻り、要素を絞り込んでいくだけです。例によってFirefoxの開発ツール内にあるインスペクタで要素をセンターに入れて削除、を何度かおこないました。
途中で面倒になってきてbodyを全部削除してもCPU使用率が下がらず、headを消すと下がったので、ヘッダ内で読みだしている外部のCSS起因らしいとわかりました。
あとはひとつずつ怪しいものを削除していくこと数回、href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"で呼んでいるfont-awesome.min.cssが原因とわかりました。
対策
あんまり真面目な対策をする気はないので、/etc/hostsに127.0.0.1 maxcdn.bootstrapcdn.com
結果は図5の通りです。ご確認ください。
図5 font-awesome.min.cssをゴリ押しで外したきれいなQiitaのプロファイル
0 件のコメント:
コメントを投稿