React Query のレンダリング最適化を目指した話 - Techtouch Developers Blog
エンジニアの macchii です。この記事はテックタッチアドベントカレンダー 14 日目の記事です。 テックタッチでは React を利用して WEB フロントエンドを開発しています。あわせて、リモートデータの取得、更新、キャッシングには React Query を導入しています。本記事では、簡単なタスク管理アプリを題材に、「React Query の再レンダリングを最適化するテクニック」紹介します。 ja.reactjs.org react-query.tanstack.com TL;DR はじめに React Query は取得データを厳密に比較（deep compare）する 参照していないプロパティの変更でも再レンダリングが発生する notifyOnChangeProps オプション select オプション まとめ TL;DR React Query は取得データを厳密に比較（
Record, replay, and measure user flows | DevTools | Chrome for Developers
Take a glance at the new Recorder panel (preview feature) with the video below. Complete this tutorial to learn how to use the Recorder panel to record, replay, and measure user flows. For more information on how to share the recorded user flows, edit them and their steps, see the Recorder features reference. Open the Recorder panel Open DevTools. Click on More options > More tools > Recorder.
Next.js 11
As we announced at Next.js Conf, our mission to create the best developer experience continues with Next.js 11, featuring: Conformance: A system that provides carefully crafted solutions to support optimal UX. Improved Performance: Further optimizations to improve cold startup time so you can start coding faster. next/script: Automatically prioritize loading of third-party scripts to improve perfo
SQL レベルのメトリクス をサポートしたパフォーマンスインサイトで高負荷状態のDB稼働を確認してみた | DevelopersIO
AWSチームのすずきです。 SQL レベルのメトリクス をサポートを開始したパフォーマンスインサイト(Performance Insights)を利用して、 高負荷状態に陥った Amazon Aurora Provisioned (MySQL5.6互換) の稼働状況を確認する機会がありましたので紹介させていただきます。 環境 過負荷が発生した環境は、 CMS(WordPress)の 記事データベースとして利用している Aurora でした。 Performance Insights SQL情報 SQLの情報として、下記項目が表示されるようになりました。 calls/sec : 毎秒ごとの呼び出し avg latency (ms)/call : 平均レイテンシー rows examined/call : 一度の呼び出しで返される行数 一回の処理時間は短いが実行回数が多く、チリも積もって高い負
GitHub - coord-e/magicpak: :hammer: Build minimal docker images without static linking
magicpak is a command-line utility that analyzes and bundles runtime dependencies of the executable. magicpak basically collects all shared object dependencies that are required by a dynamic linker at runtime. Additionally, magicpak's contributions are summarized as follows: Simple. You can build a minimal image just by adding a few lines to your Dockerfile. Full-featured. You can bundle, test, an
TensorFlow 2.0 is now available!
Posted by the TensorFlow Team Earlier this year, we announced TensorFlow 2.0 in alpha at the TensorFlow Dev Summit. Today, we’re delighted to announce that the final release of TensorFlow 2.0 is now available! Learn how to install it here. TensorFlow 2.0 is driven by the community telling us they want an easy-to-use platform that is both flexible and powerful, and which supports deployment to any
Real-world data in PageSpeed Insights
Share Facebook Twitter LinkedIn Mail Posted by Mushan Yang and Xiangyu Luo, Software Engineers PageSpeed Insights provides information about how well a page adheres to a set of best practices. In the past, these recommendations were presented without the context of how fast the page performed in the real world, which made it hard to understand when it was appropriate to apply these optimizations.
Webフロントエンド表示速度、最速化手法まとめ - Qiita
やりすぎても無駄になることがあるので、必要十分なバランスを見極めて実施する。主に社内のプログラマ向けのまとめ資料。他にもあれば追記していく予定。 ページの状態を調べる まず対象のページが、どういった状態なのかを調べる。 Google PageSpeed Insights これを100点満点にする必要はないが、赤くなっている項目に関しては、なるべく対応したほうが良い。モバイルサイトにも対応しているので便利。 https://developers.google.com/speed/pagespeed/insights/?hl=ja pingdom 実際にページにアクセスしてスピードを計測できる。海外サーバなので、けっこう遅い…。最適化前と最適化後で比較するのに使うといい。 http://tools.pingdom.com/fpt/ Chromeデベロッパーツール コンテンツの読み込み順序／速度
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
