You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
FRESH! でサーバサイドエンジニアをしています @hori_ryota です。 今回は FRESH! における Web パフォーマンス改善の一環として、静的アセット配信の効率化に取り組みました。 実装工数が少なくそれなりに高い効果を上げられたので、参考になれば幸いです。 概要(やったこと) 今回は CI を含めた開発フロー、インフラ整備の領域で Web のパフォーマンス改善に貢献できればいいなと思い、以下の改善を行いました。割りと新しい(前例が少ない)技術を上手いこと取り入れられたかなーと思っています。 Cache-Control の Immutable Extension の適用 Cache-Control: Immutable は、 Conditional GET (リロード時に有効なキャシュを持っていてもサーバに更新確認をするリクエスト。 304 のステータスコードが返る)を防ぐ
マップ閲覧・編集システムで画面上に DIV で描いていた図形を SVG に移行した。内部に数百のオブジェクトを含む要素の動作が重く、ドラッグしたときにカクカクになる問題を解決したかった。ちなみに Virtual DOM は使っているがすでに最適化は済んでおり、毎回描画されるような事態はあらかじめ避けている。代替案として Canvas と迷ったが CreateJS のようなライブラリを使わないとイベントハンドリングがきついので、 SVG で行けるならそれが一番。以下、移行した結果と移行中に気付いたことのまとめ。 描画パフォーマンスが上がった(Firefox: 20fps ⇒ 60fps、Chrome: 50fps ⇒ 60fps)。 Chrome の DevTools で見ると、DIV 版は UpdateLayout と Paint に時間がかかっているが、 SVG は Layout に時間
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く