未ログインのQiitaトップページはCPU使用率が高い

はじめに

　未ログインでQiitaトップページのトレンドを見たあとブラウザ（Chrome）を開きっぱなしにして別のことをしていたところ、ノートPCのCPUファンの音がうるさく（＝CPU使用率が高く）なったので調べてみました。

原因

　長く引っ張れる話ではないのでさっさと原因を書くと、未ログイン時に表示されているユーザー登録フォームを含む領域でCSSによりグラデーションアニメが指定されてるせいでした（2018/11/30時点）。

詳細

　トップページのHTMLソースから試しにいろいろ要素を削りながら調べたところ <div class="nl-Hero"> が原因のようだったのでCSSを確認。

style-[中略].min.css(抜粋＆整形)

.nl-Hero{
  width:100%;
  padding:72px 32px 32px;
  background-position:left top,left top;
  background-size:400px,400% 400%;
  background-repeat:repeat,no-repeat;
  background-image:url(/assets/public/hero-background-1e127e93e528b4cc9413fb67a2d3fb74.png),linear-gradient(-45deg,#32deaf,#55c500);
  animation:nl-Hero_Gradient 15s ease infinite;
  height:500px;
  display:flex;
  align-items:center
}
@keyframes nl-Hero_Gradient{
   0%{background-position:left top,0 50%}
  50%{background-position:left top,100% 50%}
 100%{background-position:left top,0 50%}
}
@media(max-width:770px){
  .nl-Hero{padding:104px 24px 64px}
}

背景画像に対して線形グラデーションが指定されていました。

改めてトップページを見ると

　確かに色合いが時間とともに変わってます。じっくり見ないから気付きませんでした。

結論

　とりあえずログインしましょう。