TanStack Query (react query) でパフォーマンス問題に遭遇したので解決してみた - Techtouch Developers Blog
テックタッチアドベントカレンダー 12 日目を担当する、フロントエンドエンジニアの taka です。 今回は TanStack Query を利用する上でパフォーマンスの問題に遭遇してしまったので、その内容について共有したいと思います。 tl;dr TanStack Query (react query) とは 遭遇したパフォーマンス問題 react query で再描画を抑制するためのポイント object rest destructuring を利用してはいけない プロパティ参照は描画中に行う selector を使って必要なデータのみを参照する おわりに tl;dr useQueryの返り値を非同期処理内で参照してしまっていたのが原因だった react query でパフォーマンス問題に陥らないために、useQuery を利用する際は以下のポイントを抑えておきましょう 返り値のobj
超手軽に構築する！サーバレスなWEBパフォーマンス定点観測基盤 - dely engineering blog
はじめに 本記事はdely Advent Calendar 2018の4日目の記事です。 dely Advent Calendar 2018 - Adventar dely Advent Calendar 2018 - Qiita 昨日は弊社の機械学習エンジニアの辻がNixOSについての記事を書きましたので興味のある方は是非読んでみてください。 tech.dely.jp こんにちは！delyでSREをやっている井上です。 本記事では、WEBパフォーマンスの定点観測の仕組みを手軽に構築出来るようにしたのでその紹介をしたいと思います。 本記事では下記のサービスやツールを利用しています。 AWS Terraform sitespeed.io 前置きはいいから構築方法だけ知りたいという方は こちら！ 目次 はじめに 目次 WEBパフォーマンスについて sitespeed.ioについて 主な機能 各
PageSpeed Insightsのスコアを上げるために具体的にやったこと - astamuse Lab
こんにちは。デザイン部でフロントエンドエンジニアをしているkitoです。今回は、Webサイトの高速化を行う際にひとつの基準になりえるPageSpeed Insights について、主にフロントエンドで行える具体的な施策とともにご紹介したいと思います。 PageSpeed Insightsとは？ PageSpeed Insightsは、Googleが提供しているWebサイトのパフォーマンスをスコア化して具体的な改善案を提案してくれるサービスです。スコアの範囲は0～100ポイントで、85ポイント以上が良好とされています。85ポイント以上のスコアであったとしてもPageSpeed Insightsは継続的に改良されているので、定期的にチェックすることをお勧めします。試しにhttps://developers.google.com/speed/pagespeed/insights/に行き、任意のサ
A Pinterest Progressive Web App Performance Case Study
Pinterest’s new mobile web experience is a Progressive Web App. In this post we’ll cover some of their work to load fast on mobile hardware by keeping JavaScript bundles lean and adopting Service Workers for network resilience. Why a Progressive Web App (PWA)? Some history.The Pinterest PWA started because they were focused on international growth, which led them to the mobile web. After analyzing
Node.js Performance 改善ガイド - from scratch
Node.js Performance 改善ガイド Memory の場合 メモリリークかどうかを特定する メモリリークではない場合 CPU の場合 どこの処理に時間がかかっているのかを確認する v8 simple profiler flame graph を取得する File の場合 大きなサイズのファイルをどうしても扱う時 Network の場合 keepalive を on にする その他: 全体的にパフォーマンスを改善するためにやること JIT が効いているかを確認する clusterが使えないか検討する C++ addons vs JavaScript libraries まとめ 参考資料 Node.js Performance 改善ガイド この記事は Node.js 2 Advent Calender の 5日目の記事です。 qiita.com Node.js のパフォーマンスに
Front-End Performance Checklist 2021 (PDF, Apple Pages, MS Word) — Smashing Magazine
Let’s make 2021… fast! An annual front-end performance checklist (available as PDF, Apple Pages, MS Word), with everything you need to know to create fast experiences on the web today, from metrics to tooling and front-end techniques. Updated since 2016. Ah, you can also get useful front-end tips in our email newsletter. This guide has been kindly supported by our friends at LogRocket, a service t
performance.markでパフォーマンス計測する
JavaScriptである区間にかかった時間を計測する時に、次のようなコードを書いたことがあると思います。 const start = performance.now(); // 処理 // 色々な処理がすべて終わった doSome(() => { console.log(performance.now() - start); }) Performance Timelineのperformance.markとperformance.measureなどを使うと、ある区間の処理時間をもっと簡単に取ることができます。 APIについて詳しくは以下の記事を見るといいと思います。 User Timing API: あなたの Web アプリをもっと理解するために - HTML5 Rocks Performance.mark() - Web API インターフェイス | MDN 簡単に解説すると perf
Medium
You can find (just about) anything on Medium — apparently even a page that doesn’t exist. Maybe these stories will take you somewhere new?
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
最近の Web パフォーマンス改善について知っておきたいコト
Webアプリケーションで 60fpsを(極力)目指す
http://incaseofstairs.com/six-speed/
8-10x slower than React at 10k item list reversal · Issue #484 · riot/riot