React製のSPAのパフォーマンスチューニング実例SIerでの経験が活きた！『SUUMO』『ゼクシィ』担当PdMの企画プロセスを紐解く【プロデザ！Vol.21】 2025.04.01 プロダクトデザイン プロダクトマネージャー リクルート 転職体験記 事業課題を捉えた業務理解とITサポートで事業活動の生産性向上を力強く下支え！ 2025.03.28 BPR クラウドPBX コーポレート 社内ICT
同じイベントのaddEventListenerを1つにまとめるライブラリを書いた
1つにまとめる? Reactなどのコンポーネント志向のライブラリを使っていると、各コンポーネントで同じ要素へ同じイベントを貼っていることがあります。 // Component A const handlerA = (event) => {}; window.addEventListener('scroll', handlerA); // Component B const handlerB = (event) => {}; window.addEventListener('scroll', handlerB); // singleton const eventObserver = require("ui-event-observer"); // シングルトンじゃない方法 // require("ui-event-observer").UIEventObserver // Component
Reactを使ったプロダクトのパフォーマンスを改善した話 | GMOメディア エンジニアブログ
技術推進室の色川です。 ここ一年くらいランキングシェアというキュレーションメディアのフロントエンドを担当しています。その記事作成画面をReactで実装しており、先日アイテムの移動をDrag&Dropで行えるようにしたのですが、動きはガクガク、ブラウザは途中で固まる、という有様で、パフォーマンスチューニングを余儀なくされたのでその内容を紹介します。 ［ランキングシェアの記事作成画面］ ※画面は開発中のものです。（動画にしたら？との意見があったのですが、Windowsで画面を録画する方法が分からず…） Reactのパフォーマンス改善の基本Reactはコンポーネントをツリーとして管理していて、あるコンポーネントの更新が必要になるとそのコンポーネントをルートとするサブツリー全体を更新します。 引用元：Reactive, Component-based UIs with React | Consta
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - kpdecker/six-speed: ES6 polyfill vs. feature performance tests
