こんにちは、19のSysAd班の翠(sappi_red)です。普段はtraQのフロントエンドの保守を行ったりしています。 こんばんは、19のSysAd班のtemmaです。普段は普段どおりのことをしています。この記事の面白い部分はすべて僕が書いています。面白くないところは翠君が書いています。 この記事では、日々パフォーマンスに頭を悩ませる開発者の方のために、ワンタッチで劇遅SQLを200倍高速でキュートなSQLに劇的ビフォーアフターする方法を紹介します。 「おいおいおい、遅くしたくて記事を読み始めたのに話が違うじゃないか💢」と思ってるそこのあなた👈 早くできるということは遅くもできるんですね。 TL;DR ここにテーブルがあります。 CREATE TABLE messages ( id CHAR(36) NOT NULL　PRIMARY KEY, text TEXT COLLATE ut

クイックサマリー ‐ Webフォントは往々にしてWebのパフォーマンスをひどく低下させており、この問題に対して特に効果的なフォント読み込みの戦略は存在しません。しかし、今後公表されるフォントのオプションによって、フォールバックフォントを最終的なフォントに合わせやすくなるかもしれません。 フォントの読み込みはWebのパフォーマンスにとって長年にわたる悩みの種であり、これを解決する良い方法はありません。Webフォントを使用する場合は基本的に、フォントをダウンロードするまでテキストが表示されないFOIT（Flash of Invisible Text）か、最初はフォールバック用のシステムフォントを使用し、ダウンロードが済んだらWebフォントに更新するFOUT（Flash of Unstyled Text）のどちらかを選ぶ必要があります。正直に言って、どちらの選択肢もあまり満足の行くものではなく、

Preload web fonts 前回、といっても2年前だが、display=swapとはなにかで、Google Fontsを読み込むときはURLパラメータに display=swap をつけるといいよと言った。というわけで、それ以降、『目標をセンターに入れて、display=swap…』と盲目的に考えるようになってた。 おさらいとして display=swap では、まず代替フォントを表示し、Webフォントをダウンロードしたら、随時スワップするという挙動になる。この場合、代替フォントからWebフォントへ切り替わる FOUT (flash of unstyled text) が起こってしまう。こんな感じ↓ 出典：font-face descriptor playground まぁ何も表示されないよりかは良いかと思うわけだが、時は流れ、最近ではWebの指標として、Web Vitalsという

こんにちは、スマートニュース株式会社の紀平です。 SmartNews のアプリ内では、最近 WebView を使った機能を多数公開しております。そのうちの一つにショッピングチャンネルという機能があるのですが、今日はそのショッピングチャンネルのタイムセール枠で以前発生した、謎のプチフリーズ問題の調査手法をご紹介します。 tl;dr 特定の Android 端末でプチフリーズが発生した 再描画領域を減らすことで現象は改善した Chrome の Tracing 機能を利用し、ブラウザのソースコードまで参照して、ついに根本原因まで突き止めた タイムセールで起こった問題 タイムセールは、SmartNews のショッピングチャンネル内において WebView で提供されている、期間限定のお得な商品をアグリゲーションした機能です。EC サイト各社のご協力の上にご提供しております。内部は HTML5 で開

ブラウザで長いループや、重い処理をともなうループを回したいとき、同期的にJavaScriptを実行するとメインスレッドがブロックしてしまうので、ちょっとずつ細切れに分割して実行したい、ということがある。 昨日久しぶりに書いたら新たなパターンと出会ったので、これまでにどう書いてて今回どうなったかメモ。 setTimeoutする 以前(10年前とか)はこんなのをよく書いていた。 itemsがでかいArrayで、console.logがすごく重い処理だとして読んでください。 function iterateHeavyTask(items) { const startAt = new Date(); while (items.length > 0 && new Date().getTime() - startAt < 10) { console.log(items.shift()); } if (

さくらインターネットのアドベントカレンダー25日目が空いてしまったので、ウェブサーバのチューンナップについて書くことにしました。 私は今日からお休みですが、さくらインターネットは年末年始も休まずに働いていますので、ご安心ください。 年末年始のシフトに入ってくれた社員の皆さんに感謝です。 ということで、責任を持って空いたカレンダーの埋め合わせをさせて頂きますｗ サーバのレスポンスが遅いとは？ なんだかサーバのレスポンスが悪いなぁってことは皆さんも体験されたことあると思います。 原因としては大きく分けて2種類あり、ひとつはApacheやnginxなどのウェブサーバソフトウェアの設定において同時に処理できる上限に達しているケースと、サーバ自体の負荷が高まっているケースです。 前者はApacheでいうとMaxClientsを調整することで対応できますが、そもそもサーバの性能以上にMaxClient

Fastify 速いですね Express が hapi より遅いのは意外でした Koa は本体だけだと Express 以上に何もしないので その分速めです よくみると驚きなのが http.Server より Fastify が速いというところ http.Server はフレームワークを使わない Node.js 自体の API です Koa や hapi はこれを中で使っています これより速いということは Fastify は http.Server は使わずに net などを使って ソケット通信部分を直接操作しているのでしょうか？ http.Server を使ってない？Fastify のソースコードを見た限りでは 特に設定をしなければ http.createServer でサーバを作成しています つまり http.Server を使っています https://github.com/fas

Webアプリ負荷試験ガイド 目次 Webアプリ負荷試験ガイド 目次 前置き 時間がない人向け要約 about me 何故負荷試験を行うのか 負荷試験ツール 負荷掛けるツール 負荷計測 負荷の可視化 負荷試験の流れ 負荷試験スケジュールについて 注目すべきポイント シナリオ作成 アカウント情報は自動生成出来るようにする DB分割を行ってる場合はDB分割を意識したシナリオを用意する。 負荷試験元 http or https サーバ1台 サーバ単体での負荷 アプリの正常性の確認 サーバ複数台 KVS Memcached Redis RDB 問題になりやすいDB キャッシュの話 大前提 注意すべき点 CDNやProxyレベル local cache or remote cache local cache or memory cache(in app cache) references 更新情報 前

自分が所属している会社のメンバーの教育用資料として、それなりの規模のデータを扱う時に前提として意識しておかなければいけないことをざっくりまとめたので、弊社特有の話は除外して公開用に整理してみました。 大規模データ処理、分散処理に慣れている人にとっては今更改めて言うことじゃないだろ、みたいな話ばかりだと思いますが、急激にデータスケールが増大してしまったりすると環境に開発者の意識が追い付かないこともあるかと思います。 そういったケースで参考にできるかもしれません。 弊社は基本的にAWSによって運用されているので、AWSを前提にした様なキーワードやサービス名が出てきます。後、句読点があったり無かったりしますが、ご容赦ください。 追記: 社内用の資料の編集なのでかなりハイコンテキストな内容だから誤解するかもしれませんが、これらはそもそもRDBの話ではありません。(関係無くは無いけど) 1000万オ

Webシステムの負荷テストツール選定にお悩みではないでしょうか。私は悩んでいました。 今回はサーバーレスで負荷テストを実施するServerless-artilleryを紹介します。 こんにちは。 ご機嫌いかがでしょうか。 "No human labor is no human error" が大好きなネクストモード株式会社 の吉井です。 今回はサーバーレスで負荷テストを実施できる Serverless-artillery を紹介します。 Lambda 関数からテスト対象 URL に対して事前に定義した回数、期間、パターンで負荷をかけます。 テストサーバーを EC2 で起動し管理することは、それなりに手間ですし、テストが長期間になればコストも無視ができなくなります。 その点 Lambda なら実行回数分のコストなので安心感はあります。 負荷テストの実施 Serverless-artiller

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? TL;DR この記事に書いた事 二分探索木のお話(前提知識) MySQLのInnoDBで利用されているB+木インデックスの構造と特性 (前提知識) MySQLのClusteredIndex,SecondaryIndexについて(前提知識) カーディナリティについて(前提知識) 実際の負荷対策 検出編 スロークエリ 検出編 その他のクエリ割り出しいろいろ クエリ・インデックスの最適化 explainの使い方と詳細 ケース別実践 単純にインデックスがあたっていないケース カーディナリティが低いインデックスが使われているケース 部分的にしかイ

はじめに JavaScriptで配列やオブジェクトをループする時どのように書きますか？ シンプルにfor文？ Array.forEachを使う方法もありますね。 あるいはES6から取り入れられたfor-of文でしょうか？ ただこうしたいくつかの方法がある中、僕が以前思ったのは 「で、結局何が良いんだってばよ？？(￣へ￣|||)」ということです 単なる文法の違いでどれでも良いのか？それともリスクやパフォーマンスがそれぞれ違ったりするだろうか・・？ その疑問の答えを出すために、ループの各手法を主にリスク・パフォーマンスの面で比較・調査して「配列やオブジェクトをループする良い方法」の結論を出してみました。 もし良ければ参考にしてみてください。 どんなループ方法があるか まず配列とオブジェクトそれぞれでどんなループ方法があるかを挙げます。 ※jQueryやUnderscore.jsでのループ方法は

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 概要 CSS で実装する要素の移動（アニメーション）に関しての簡単な説明から、パフォーマンスに関連する事象を深掘って説明していきます。この辺りの話はややこしいので、自身でも整理をつけるためにまとめました。 長い記事になりますが、CSS のアニメーション（パフォーマンス関連）を深く理解するための手助けになれば幸いです。 既にご存知の方はどこか間違っている点などあればご指摘宜しくお願いいたします。 要素の移動について 要素を縦横にアニメーションを伴って動かしたい場合 transition を適応させた要素に対して right, left,

回答 (3件中の1件目) Rubyの実行速度に興味があって、15年くらいMRIの開発をしています。興味があるので長い記事になっちゃったことをお詫びします。 遅いと言ったとき、多分「実行速度」の話をしているんだと思いますが、それ以外にも結構いろんな「はやさ」があります。思いつくところで少しご紹介します。 (1) プログラムを作るはやさ Ruby は生産性が高い言語と言われることが多いので、プログラムを作る早さは早い、という評価が一般的です。 Cで書くと2日かかる。実行時間は0.1秒 Rubyで書くと1日かかる。実行時間は10秒（Cの100倍） と、すこし極端な仮定を置いてみると...

設計Night2018の資料です https://connpass.com/event/104821/

パフォーマンス改善ハンドブック ウェブページにおけるパフォーマンスに関する問題の見つけ方や考え方の事例をまとめた Webフロントエンド パフォーマンス改善ハンドブックを公開しました。 URL: https://dwango-js.github.io/performance-handbook/ このハンドブックでは過去に行ったWebフロントエンドのパフォーマンス改善の事例を中心に紹介しています。 注意点としてWebフロントエンドは常に変化しているため、現在の最適な解決方法を提案するものではありません。 また、アプリケーションによっても最適な解決方法は異なります。 今回の事例ではViewライブラリにReactを用い、映像再生プレイヤーなどある程度複雑な機能を持ったウェブアプリケーションのWebフロントエンドを扱います。 具体的にはニコニコ生放送（以下「生放送」）で行った事例を中心に書かれていま

HTML5 APP CONFERENCE 2018での発表資料です。