Reactで大量描画しても60fps出すためのパフォーマンスチューニング術 - SmartHR Tech Blog
こんにちは、SmartHRでプロダクトエンジニアをやっている @Tokky0425 です。 みなさんは普段組織で働いていますか？僕は組織で働いています。 組織で働くにあたって便利なもの、ありますよね。そう、組織図です。 SmartHR にも組織図の機能があるのですが、部署数や従業員数が多いとブラウザ上での操作が重くなってしまうという問題がありました。 最近「数万人規模の組織図での 60fps」を目指してこの組織図機能の描画パフォーマンス改善を行ったので、その中で実践したフロントエンド開発における大量描画処理の Tips を共有します。(React を前提としています) そもそも問題はどこにあるのか 最近まで、SmartHRの組織図機能は数万人規模の企業で十分に使えるような作りになっていませんでした。というのも、対象従業員数が数万人を超えてくると、いろんな操作が著しく重くなり、実用に耐える操
Speculation Rules API - Web APIs | MDN
The Speculation Rules API is designed to improve performance for future navigations. It targets document URLs rather than specific resource files, and so makes sense for multi-page applications (MPAs) rather than single-page applications (SPAs). The Speculation Rules API provides an alternative to the widely-available <link rel="prefetch"> feature and is designed to supersede the Chrome-only depre
ECUに記述されたプログラムだけではない
ECUのプログラム容量は、日を増すごとに巨大化している。 昔は１面だけだった部分のマップも複数面用意されて、状況によって切り替えが行われる。 たとえばDITの場合、アイドルマップだけでも８面。これに間違った数値を入れると車が動かなくなる。それだけ各マップ・各コンピュータ間の協調制御が緻密に行われていると言える。 昔は512Mだったロムも、1Mになり、1.5M、今は2Mが主流で、４Mになるのも時間の問題だろう。 しかしよく考えていただきたい。 可変バルブやタンブル流制御など、あれだけの複雑で緻密な制御の根幹が、たったの2Mである。 「実際はこの2Mの指令だけで動いてるはずがない!」というのが、普通の感想ではないだろうか。 ECUは学習し、都度補正値を生成して実行させる。 人の脳と同じだ。 経験したことは覚える。 ああ、こういう時はこうすれば効率がいいな、と。 学習領域を狭めて、つねに同じ数値
PostgreSQLのトラブルシュートとチューニング | Let's POSTGRES
NTT オープンソースソフトウェアセンタ 笠原 辰仁 この記事は、gihyo.jp & Let's Postgres 連動企画「今こそ！PostgreSQL」の第6回記事です。第6回目は、PostgreSQLのエラーメッセージや内部情報を見て、発生している問題の特定とその対策となるチューニングを紹介します。なお、トラブルの発生・予兆を適切に捕捉するためにも、ログの設定や稼動統計情報の監視をしておきましょう。 エラーメッセージについて トラブルと対策の前にエラーメッセージのレベルについて説明しておきます。PostgreSQLは複数のエラーレベルを影響範囲や深刻度によって使い分けています。エラーレベルそれぞれの解釈の仕方を下記の表にまとめてみました。 データベース管理者は、深刻な状況である PANIC と、性能情報を含む LOG レベルのメッセージに注意しましょう。一方、アプリケーション開発者
Pgpool-IIの接続性能の改善 | Let's POSTGRES
SRA OSS, Inc. 日本支社 石井 達夫 はじめに 本記事は2013年のPostgreSQL Advent Calendar の 12/17 の記事です。pgpool-IIに多数のクライアント同時に接続すると、極端にレスポンスが落ちることがあります。ここではその原因と改善方法について考えます。 pgpool-IIはpre-fork型のアーキテクチャ pgpool-IIは、複数のPostgreSQLを使ったクラスタシステムを構築できるミドルウェアです。pgpool-IIでは、num_init_childrenというパラメータの数だけあらかじめプロセスを起動(pre-fork)しておきます。クライアントからの接続要求があると、そのプロセスの一つがカーネルから選択され、クライアントからの接続を受付けて、処理を開始します。これはApacheなどと同じ方式で、あらかじめプロセスをフォークして
Profiling React.js Performance
April 8, 2020 Today, we’ll look at measuring React component render performance with the React Profiler API, measuring interactions with React’s new experimental Interaction Tracing API and measuring custom metrics using the User Timing API. For demonstration purposes, we’ll be using a Movie queueing app. The React Profiler API The React Profiler API measures renders and the cost of rendering to h
React製のSPAのパフォーマンスチューニング実例
定量と定性で見る！デザイナーが実践するユーザー理解へのアプローチ【プロデザ！BYリクルート第26回】 2025.09.03 デザイン デザインディレクター プロダクトデザイン
JVMアプリケーションを運用する際のメジャーどころチューニングポイントメモ - yoskhdia’s diary
JVMにチューニング項目は多々あれど、プロダクションで運用する際に予めおさえておきたい項目をまとめてみるエントリです。*1 勿論、OSもJVMもデフォルトである程度のパフォーマンスは発揮でき、計測を伴わないチューニングは悪手であることはよく知られています。 しかし、設定しておかないとパフォーマンスにそのまま影響すると分かるものを調べないのは裸で戦場に赴くようなものです。*2 どんな項目をどう変更すれば良いのか知っていることは重要な武器なのです。 なぜ調べるのか 今回、チューニングポイントを調べるにあたって、私のモチベーションはどこにあるのかを考えると、以下の要件を満たしたいということがあげられます。 アプリケーションとして求められる品質水準として動作する → 性能目標 異常時に事象を追うことができる ここでいう品質水準・異常とは、パフォーマンスが明らかに低い、アプリケーションがクラッシュす
Optimizing the Performance of Your React Application
TL;DR Profiling your React code is simple using the tools providing by the react-addons-perf package. Once you know where React is wasting time, you can improve the performance by using the correct keys, implementing shouldComponentUpdate in your components, and extending from PureComponent instead of regular Component. React is fast. Like, hella fast. The core team spends lots of time and money m
Fast as C: How to Write Really Terrible Java
Fast as C: How to Write Really Terrible JavaAI-enhanced description The document discusses Java features, their compilation to bytecode, and the JVM's optimizations. It emphasizes the importance of profiling and understanding how the JVM handles different Java constructs to improve performance. It includes examples of bytecode and native code output, as well as insights into just-in-time compilati
Linuxでロードバランサやキャッシュサーバをマルチコアスケールさせるためのカーネルチューニング - ゆううきブログ
本記事の公開後の2016年7月にはてなにおけるチューニング事例を紹介した。 はてなにおけるLinuxネットワークスタックパフォーマンス改善 / Linux network performance improvement at hatena - Speaker Deck HAProxy や nginx などのソフトウェアロードバランサやリバースプロキシ、memcached などの KVS のような高パケットレートになりやすいネットワークアプリケーションにおいて、単一の CPU コアに負荷が偏り、マルチコアスケールしないことがあります。 今回は、このようなネットワークアプリケーションにおいて CPU 負荷がマルチコアスケールしない理由と、マルチコアスケールさせるための Linux カーネルのネットワークスタックのチューニング手法として RFS (Receive Flow Steering) を
ISUCON4 予選でアプリケーションを変更せずに予選通過ラインを突破するの術 - Hateburo: kazeburo hatenablog
AMIが公開されたのでもう一度やってみた。 AMIについてはこちらのエントリに書かれています ISUCON4 予選問題の解説と講評 ＆ AMIの公開 : ISUCON公式Blog まず ami-e3577fe2 を m3.xlargeで起動します。 CPUは model name : Intel(R) Xeon(R) CPU E5-2670 v2 @ 2.50GHz でした。 とりあえず、MySQLのindexを追加する。init.shに追加 $ cat init.sh cat <<'EOF' | mysql -h ${myhost} -P ${myport} -u ${myuser} ${mydb} alter table login_log add index ip (ip), add index user_id (user_id); EOF ベンチマークツールのhttp keepal
Best Practices for Speeding Up Your Web Site - Yahoo Developer Network
Best Practices for Speeding Up Your Web Site The Exceptional Performance team has identified a number of best practices for making web pages fast. The list includes 35 best practices divided into 7 categories. Minimize HTTP Requests tag: content 80% of the end-user response time is spent on the front-end. Most of this time is tied up in downloading all the components in the page: images, styleshee
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - hyperopt/hyperopt: Distributed Asynchronous Hyperparameter Optimization in Python
GitHub - LinkedInAttic/JTune: A high precision Java CMS optimizer
HP Blogs - ジェットエンジンで知恵熱をブッ飛ばす ～HPサーバーに初めて恋した - The HP Blog Hub
プログラムを高速化する話
Effective web performance tuning for smartphone
GitHub - dalibo/pgbadger: pgbadger.github.io
Java Platform, Standard Edition HotSpot Virtual Machine Garbage Collection Tuning Guide