以下の公開計測会でやったものを個別に解説してみる。 細かいテクニックが多いのだが、それを可能な限りテキストとスクショで解説したい。使い方の解説が中心で、どういう意味があるかは解説しない。 Chrome131時点のスクリーンショットで、後で読む場合は頻繁にUIが変わっている点に注意。大事なのは意図。 宣伝: これを御社のサイトで解説する仕事をやっています。 デモのURL これに意味はなく、今日偶然見ていただけで意図はない。関係ないがエッジランナーズは最高のアニメ。 DevTools を開く F12 or 右クリックから「検証」 DevTools > Lighthouse この状態で計測 このとき、新しいプロファイルを作ったりして、可能な限り Chrome拡張が入ってない状態にすること。Chrome拡張による処理も計測に含まれてしまう。 Lighthouse レポートの読み方 点数部分にマウス
10月24日、React Nativeチームは、バージョン0.76をリリースした。 本バージョンではアーキテクチャが刷新されており、React Nativeの今後にとって重要なアップデートとなっている。 新しいアーキテクチャの主な改善点 今回のアップデートでは、以下の4つの重要な要素が導入されている。 新しいネイティブモジュールシステム JavaScriptとネイティブ層が直接通信できる「JSI（JavaScript Interface）」を利用することで、ブリッジを介さずに同期的な関数呼び出しが可能となった。この変更により、ネイティブモジュールとのやり取りがより効率的かつ高速になった。 const value = nativeModule.getValue(); nativeModule.doSomething(value); 旧アーキテクチャでは、ネイティブ関数の呼び出しに非同期のコー
導入 実行環境 テーブル定義 レコード作成 テーブルサイズ 検索速度 結論 We are hiring! 導入 みなさん、RDBのテーブル設計はしていますでしょうか。 テーブル設計時の大きな関心事の1つとして、主キー設計があります。 主キー設計では、「自然キー vs サロゲートキー」や「連番 vs 乱数」が主題になることが多いですが、今回はカラムサイズに注目して、主キーのサイズが検索性能に与える影響について調査してみたいと思います。 インデックスを使った検索が高速であることはRDBの常識中の常識ですが、その時もディスクやメモリからインデックスの値を読み取ってCPUを使って比較を行う操作が発生するわけで、値のサイズが小さいことは理屈上ではCPUキャッシュの利用やその他IO処理などにおいて有利に働くはずです。 今回は主キーを指定した単体取得のクエリにおいて、その影響がどの程度なのかを実際に計測
こんにちは。 id:Pocke です。マネーフォワードでは Rails を用いた Web アプリケーションの開発と、RBS という Ruby の静的型システムの開発を行っています。 最近 RBS の開発をする中で、「不要な処理を削除すると実行速度が遅くなる」という不思議な現象に遭遇しました。この記事ではその現象を解説しようと思います。 なおこの記事は Ruby の知識を前提としないように執筆されており、Ruby の知識が必要となるところには注釈を加えて補足しています。 普段 Ruby を書かない方にも読んでいただければ幸いです。 問題を引き起こした変更 今回の問題は、RBS のメモリ使用量の削減を行っている中で遭遇しました。まずはどんな変更を行おうとしていたかを解説します。 変更の動機 最近私は RBS のメモリ使用量の削減に取り組んでいます。1 その取り組みの中で、RBS のパーサーが作
Offers を運営している株式会社 overflow の あほむ でございます。 本記事は Chrome Platform Status からなんとなく Proposed/In Development etc なステータスのフィーチャーを取り上げて、そのプロポーザルを眺めてみるシリーズです。前回は form-sizing field-sizing CSS property でした。 SPA 的な画面遷移を性能計測したい 今回は Soft Navigations Performance Entry を眺めてみます。本当に眺めるだけで深入りしないので概要のみのライトな記事とご認識ください。 SPA 的な画面遷移とはつまり History.pushState や History.replaceState を用いた JavaScript 駆動なナビゲーションを指します。このような遷移を指してここ
Node.jsのメモリ制限については以下の記事に記述があります。 しかし、現在の挙動はやや異なるようです。 結論から言うと デフォルトでは、システム (cgroup等) から取得した制限があればそれがそのまま設定、そうでなければ32bit環境では700MiB, 64bit環境では1400MiBの制限が設定されます。 V8のメモリ制限 Node.jsはJavaScriptエンジンとしてV8を利用しています。 V8のGCは世代別GCになっています。ほとんどのオブジェクトは生成されてすぐに不要となるため、メモリ使用量にはそれほど貢献しません。メモリ使用量に貢献するような長命なオブジェクトは、数回のGCを生き抜いた後old generation領域に移されます。したがって、V8のメモリ使用量の制限は実質的にこのold generation領域のサイズ制限によって決まると考えてよいでしょう。 このo
どうもみゅーとんです. 小ネタです. hacomonoは GitHub の hacomono-lib という organization にて, OSS を公開しているのですが, なんとなく作っているロジックが多重ループになっていて計算量が多そうだ, と思い, そのパフォーマンス計測を行うことにしました. 概要 3 行でまとめ Vitest には標準でベンチマークテストを行う仕組みがある ただし experimental (v1.2.x 時点) ベンチマークテストには tinybench を利用している ここで話題にしないこと 計算量の概念 パフォーマンス改善のためのコーディング 背景 インシデント未遂を引き起こしてしまいました. hacomono-lib で公開している OSS の json-origami にて, パッチバージョンアップとして, たった１行変更するだけのバグ修正を行いまし
RelayHub合同会社の久保田光則です。 Reactでフォームを効率よく実装するためのライブラリとして、React Hook FormやReact Final Form、TanStack Formなどがあります。これらのライブラリは、フォームを効率よく実装できる枠組みを提供してくれるだけではなく、高速なフォームを実装するための方法も提供してくれます。 で、この記事ではReact Hook Formとかそういうライブラリの使い方というよりかは、そもそもなぜReactで実装したフォームのパフォーマンスが問題になりやすいのか、その辺りの事情について解説します。 Reactのレンダリングの仕組み Reactでは皆さんご存知のとおり、仮想DOMと呼ばれるDOMに似た構造のオブジェクトを生成してレンダリングを行います。Reactのコンポーネントはレンダリングするたびにそのコンポーネントに対応する仮想
KARTE 管理画面のパフォーマンスの監視をするにあたって考えたことや Datadog の活用のポイント、改善で取り組んだことについて紹介します。
https://drecom.connpass.com/event/300236/presentation/
Single file components consist of three distinct entities: template, script and styles. All of them are important but the latter is often being neglected even though it can become complex and often cause frustration and bugs. A better understanding can improve code reviews and decrease debugging time. Here are 7 tips to help you with that: Styling Scoped And Slotted ContentScoped Selector Performa
こんにちは、Web チームの井手です。今日は私たち Web チームが作っている SSR フレームワーク(以下 FW)にについて紹介します。 記事を書くモチベーション 私たちのメインプロダクトである日経電子版においては k2 という自作 SSR 基盤を 2020 年から運用しています。SSR FW といえば多くの方が Next.js を想起すると思いますが、私たちは自作しています。一方で最近は Next.js の進化が凄まじく、自作 SSR 勢としても意識せざるを得なくなっています。もしかしたら「あぁ Next.js で作っておけばよかった」と思う時が来るかもしれません。特に k2 を保守する際には Next.js では実現できない機能を実現するために様々な手法や工夫を編み出していましたが、Next.js の進化に伴ってその必要性はだんだん減ってきているのを実感しています。そのためいつか N
Back/forward cache (or bfcache) is a browser optimization that enables instant back and forward navigation. It significantly improves the browsing experience for users, especially for websites that involve many back and forth navigations. web.dev article on bfcache Yahoo! JAPAN News, one of the most popular news platforms in Japan, drove a concerted effort to improve their bfcache hit rate and saw
What’s new with scroll-driven animations? Scroll-driven animations are a way to add interactivity and visual interest to your website or web application, triggered by the user's scroll position. This can be a great way to keep users engaged and make your website more visually appealing. In the past, the only way to create scroll-driven animations was to respond to the scroll event on the main thre
タイムライン的なものをSELECTだけで実装しようと思った時に、Nested LoopなクエリでUsing temporary; Using filesortが出るようなそこそこ遅いクエリになる。その時にMySQLがインデックスをどう辿っているかを知りたかったので調べてみた。MySQLバージョンは8.0.33。 あまり自信はないので、もし間違った話をしていたら教えて欲しい。 どのようなクエリを検証するか タイムラインの取得ができるような、ユーザー・フォロー関係・投稿の3つのテーブルを作る。スキーマは次の通り。 CREATE TABLE users ( id INTEGER PRIMARY KEY AUTO_INCREMENT, name VARCHAR(100) NOT NULL ); CREATE TABLE follows ( id INTEGER PRIMARY KEY AUTO_I
こんにちは。4月にヘンリーに入社したSWE / アーキテクト / SETのsumirenです。 弊社ではレセコン一体型クラウド電子カルテの Henry を開発・提供しています。 今回、HenryのフロントエンドをReact + ViteからNext.jsに書き換えました。 この記事では、最初にNext.jsへの切り替えによってもたらされたユーザー体験の向上について説明します。次に、このユーザー体験の向上がどうして生じたのか、その背後にある技術的な要素をエンジニア向けに詳細に解説します。最後に、フロントエンドアーキテクチャに対する我々の長期的なビジョンについて述べます。 対象読者 Next.js導入によるユーザー体験向上 デモ 定量的なパフォーマンス比較 ユーザー体験がどう向上したか FCP高速化の技術的な仕組み Next.jsとViteの基本的なアーキテクチャの違い 補足：工夫しているポイ
はじめに Windows管理ツールであるパフォーマンスモニターの使用方法について纏めました。 環境 Windows 10 起動方法 パフォーマンスモニターは以下の方法で、起動することが出来ます。 ・%windir%\system32\perfmon.msc を実行して起動 ・Windows管理ツールから、パフォーマンスモニターのショートカットから起動 利用方法 ＋ボタンを押下し、カウンターの追加画面を開きます。 収集したいカウンターを選択し、追加ボタンを押下して、完了です。 「説明を表示する」にチェックを入れるとそれぞれのカウンターがどのような情報を取得するためのカウンターかを確認出来ます。 選択したカウンターの状況をモニタリングすることが出来ます。 ログファイルに出力する方法 パフォーマンスモニターに追加出来るカウンターの変化を、データコレクターを作成することで、ログファイルに出力するこ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
