Fujisakiブログのタイトルに合わせて、月と夕焼けをイメージしたテーマを自作してブログの模様替えをしてみました。アーカイブ(月別、カテゴリ別)の表示さらに、これらから参照されるサブテンプレート用のphpファイルと、CSSを用意すれば完成です。公式のWikiにあるドキュメントもよくまとまってます。詳細は公式をチェックだ(書くのがめんどくさくなった)。SVGの背景が遅い、どうしようもなく遅い問題はここからです。今回のテーマ作成のサブテーマとして「ラスター画像(SVG)しかテーマには使わない」という縛りをなんとなく課してみまして、背景もSVGで用意しました。左に見える月の画像もSVGです。Firefoxから見ると何の問題もないのですが、Chromeから表示するとどうしようもなく遅い事に気が付きました。GPUを使っても、フレームレートが落ちてるのが目で分かるぐらいに遅い。計測してみると、1フレームを描画するのに100ms弱掛かっってました。これはいけない...。iPhoneでは背景が表示されすらしない。OSのSafariだと見えるんですけどね、中身違うのかなCSSで同じことをするとなぜか爆速になるうーんどうしたもんか、と思って。CSSのlinear-gradientで書き換えてみました。グラデーションと同じ規則に従います。MDNだそうなので、SVGと一緒ならやっぱ遅いんじゃないかなぁ、と思いながらダメ元で。...どういう事でしょう、Paintingに掛かる時間が70倍近く速くなり、ほぼ60FPSを達成できるようになったのです...(!?)iPhoneからも背景がきちんと見れるようになりました:スマホ、画面ちいさくね?マジでみんなこれ毎日使ってんの?SVGにはまだChrome/WebKitには早すぎるのかもしれないたぶんですけど、SVGを背景に設定すると毎フレームSVGからbitmapにラスタライズするんでしょうね。他にもWebKitはSVGは遅いと6年前に言ってる人はいて、とくに改善されないまま現在に至ってるようです。EdgeもChromiumに乗り換えてしまったし、ラスター画像大好きおじさんには苦しい時代が続くかもしれません。コメントをキャンセルメールアドレスが公開されることはありません。※サイトコメントに返信があったらメールで通知する。コメントデータの処理方法の詳細はこちらをご覧ください。