単体のアニメーションだとそれほど気にならない場合でも、表示範囲の中で複数のアニメーションが同時に走ったりする場合、負荷が増大して処理落ちなどを起こすことがあります。 最近レンダリング負荷を軽減するため試行錯誤をしたので、備忘録もかねて実施した内容をまとめました。
performanceに関するastk_fのブックマーク (452)
-
astk_f 2022/12/06
-
サイバーエージェントが公開した“300ページ級のUnity技術書”がスゴい！しかも誰でも無料で読める｜Unity Japan（ユニティ・テクノロジーズ・ジャパン）
快適に動作するアプリケーションを提供するために、パフォーマンス・チューニングについてもっと深く学びたい。そんなUnityエンジニアのみなさまにぜひ読んでいただきたい電子書籍が登場しました。 その名もずばり『Unity パフォーマンスチューニング バイブル』。 執筆を手がけたのはサイバーエージェントグループ各社の精鋭エンジニアの方々。元々はサイバーエージェントグループ内の共有資料として制作されたそうですが、その内容とボリュームは「社内向け」の範疇に収まらないほどの商業技術書レベルです。そしてこの度、本書が誰でも無料で読める電子書籍として、社外にも公開されることが決まりました。 一般公開に先駆けて本書を拝読したユニティ・テクノロジーズ・ジャパンのエンジニアからも、絶賛の声が相次いでいます。 本書はこれからパフォーマンス・チューニングを学ぶ人にとって、最適な一冊です。すでに実務経験のある人にとっ
-
-
爆速のアイコン検索サイトを作った
爆速のアイコン検索サイトを作ったので、遊んでみてください。 (1) まずは自分が使いやすいアイコン検索サイトを作りたかったので作りました。(2) 様々なアイコンを爆速で横断検索し、サクッとアイコンをコピーできるようにしました。単純ながら意外とその部分が面倒なサイトは多い気がします。(3) また応用とメンテがしやすい実装にして、非常にサポート範囲の広い DB を GitHub Pages 上で構築しました。公開時点では 120+ のアイコンセットと、130,000+ のアイコンをサポートしており、サポート数も観測範囲では No.1 です。 開発動機 アプリ/サイト開発ではまずお世話になるであろうアイコン。私はこれまで Material Icons と Bootstrap Icons ばかり使っていました。これは検索が面倒だったからです。検索が面倒だと知名度の高いものだけに閉じてしまうので、良
-
ぐるなびのレストラン検索でフロントエンドのパフォーマンスを150%UPさせるために実施した５つのこと - ぐるなびをちょっと良くするエンジニアブログ
こんにちは、フロントエンドエンジニアの秋山です。 主にレストラン検索サービスのフロントエンドのテックリードをしています。 ぐるなびのレストラン検索は2021年10月にフルリニューアルしました。 レスポンシブウェブ対応、地図検索機能の拡充、絞り込みの改善、検索の高速化と盛り沢山のプロジェクトとなりました。これからも随時アップデートをかけて、より早くより使いやすい検索を提供していきますので、これからもよろしくお願いします。 さて、今回はリニューアルに当たってフロントエンドのパフォーマンスを上げるために試行錯誤して、比較的効果の大きかった施策をいくつかピックアップしてお伝えしていきます。 目次 レストラン検索のフロントエンド構成 パフォーマンスの改善 インラインSVGをやめる ファーストビューから非同期コンポーネントをなくす re-export をやめる クライアント JavaScript のロ
-
Webフロントエンドパフォーマンスチューニング80選 - Qiita
こんにちは、ぬこすけです。 近年、Webフロントエンドではサイトのパフォーマンスの重要性が高まっています。 例えば、GoogleはCore Web Vitalというパフォーマンスに指標を検索結果のランキング要因に組み込みました。 また、近年の某企業が「パフォーマンスの改善に取り組んだ結果、セッション数〇％アップ、CVR〇％アップ...」などの事例は枚挙にいとまがないでしょう。 パフォーマンスチューニングするためには、定量的に計測してボトルネックを探すようなトップダウンなアプローチもあります。 しかしながら、時には千本ノック的にハウツーを片っ端から試していくボトムアップなアプローチも有効になることもあったり、日々のコーディングでパフォーマンスを意識したコードを書くことは大切でしょう。 この記事ではパフォーマンス最適化のハウツーを紹介します。 パフォーマンス改善の施策が思い浮かばない時やフロン
-
Vueの再描画されたコンポーネントをハイライトするChrome拡張を作った
作ったもの 記事タイトルの通り、Vue.jsで再描画が走ったコンポーネントの輪郭をフラッシュしてハイライトしてくれるChrome拡張 + npmパッケージを作りました。 GitHub: yuichkun/vue-devtool-flash-updates 背景 Vueの開発をする上で、Vue.js devtools を使っている人は多いと思います。 React Developer Tools では以前から再描画されたコンポーネントを光らせてくれる機能があり、パフォーマンス問題の解消などに役立っていたのですが、どうやらVue devtoolsにはそれがないらしいことをissueなどから察しました。 今回作ったプラグインの導入方法のイメージはRedux Devtoolsと似たような感じで、 専用Chrome拡張のインストール 有効にしたいプロジェクトでnpmパッケージの追加・プラグインの導入設
-
今日からできるC#のパフォーマンス改善小ネタ11選 - Qiita
はじめに C#を使う際に、今日から使えそうなパフォーマンス改善につながる小ネタを10個まとめてみました。 BenchmarkDotnetを使ってベンチマーク測定したコードは下記においてあります。 ※他にもこんなのあるぜっていうのは是非教えて頂けると幸いです🙇♂️ 1. Capacityを設定する System.Collections.Generic に定義されているListなどのクラスはコンストラクタを呼び出す際にCapacityを設定することで無駄なアロケーションを削減できる可能性があります。 Listなどは内部に配列を持っており、Addなどの操作によってその配列サイズに収まらない要素数になった際に新しく配列を確保します。（現状の配列サイズ x 2サイズの配列を確保） 必要な要素数が明確な場合はCapacityを設定して無駄なアロケーションを避けるようにすることでパフォーマンス改善が
-
JestでTypeScriptを高速化する | miyauci.me
JestでTypeScriptを高速化するJestでテストの高速化させる方法を紹介します。トランスフォーマーとしてesbuildやswcを紹介し、TypeScriptで遅くなりがちなトランスパイルを高速化させることで、テストを自体を高速化します。 はじめにesbuild の登場により、フロントエンドの世界は、開発環境により速度を求めるようになりました。vite の隆盛はその最たるものといってもいいでしょう。 esbuild や swc は高速な Go や Rust によって書かれ、更に多くの場合、Typescript の型チェックを省略しています。 tsc の型チェックは、大抵 IDE やワークフローで行われているので、これらを削ぎ落とすことで、純粋なコンパイラとして JavaScript への変換に特化しているということですね。 さて、Typescript コードをテストする際、多くの場
-
モバイルゲームのパフォーマンスを最適化しよう：Unity のトップエンジニアが語るプロファイリング、メモリ、コードアーキテクチャのヒント | Unity Blog
Unity のエンジニアたちがモバイルゲームの最適化に関する知見のシェアを始めるとすぐに、元々予定していた 1 本のブログ記事に収まりきらないほどの素晴らしい情報があることに気づきました。そこで私たちは、彼らの膨大な知識を e ブックとしてまとめ（ダウンロードはこちら）、そこに収録されている 75 以上の実用的なヒントの一部を紹介する一連のブログ記事を作成することにしました。 このシリーズの最初の記事では、プロファイリング、メモリ、コードアーキテクチャの観点から、ゲームのパフォーマンスを向上させる方法をご紹介します。今後 2、3 週間の間に、さらに 2 本の記事を公開します。1 本目の記事では UI の物理を、2 本目ではオーディオとアセット、プロジェクトの構成、グラフィックスについて説明します。 今すぐすべての内容に目を通したいという方は、e ブックを無料でダウンロードして内容をご覧くだ
-
-
Chrome DevToolsのRenderingタブを活用しよう | フロントエンドBlog | ミツエーリンクス
Chrome DevToolsにはさまざまな機能が搭載されています。そのうちの1つ「Rendering」には、ページのレンダリングパフォーマンスを視覚化する機能や、さまざまな見え方を疑似的に再現する機能が含まれています。 サイトのレンダリングパフォーマンス改善の取り組みに活用できる、こちらのRenderingタブ内の各機能についてご紹介します。 利用方法と各機能について Renderingタブはデフォルトだと非表示になっており、利用するにはまず次のいずれかの方法で表示する必要があります。 Chrome DevToolsを開いた状態でWindowsではCtrl+Shift+P、MacではCommand+Shift+Pを押して表示されるコマンドメニューに「Rendering」と入力し、「Show Rendering」を選択 Chrome DevTools内の三点ドットから「More tools
-
MySQL実行計画の簡易検査ツールの開発とCIへの組み込み - ZOZO TECH BLOG
こんにちは、ECプラットフォーム部の権守です。普段はID基盤やAPI Gatewayの開発を行い、ZOZOTOWNのリプレイスに携わっています。 本記事では、ID基盤で開発・導入したMySQL実行計画の簡易検査を行うツールを紹介します。 ツール開発の経緯 RDBにおけるテーブル設計は利用するクエリに応じて適切なインデックスを設定するなど専門的な知識を必要とし、設計できる人が限られてきます。しかし、アプリケーション上で利用されるクエリは機能の追加・改修に伴って日々変化していくため、それら全てに目を通し、漏れなく適切な設計することは困難です。そこで、専門的な知識がなくても設計に問題がないかの簡易的な検査を行えるツールを開発し、CIに組み込むことで自動的に問題を検出できるようにしました。 ツール開発のアプローチ ID基盤ではDBMSとしてAmazon Aurora MySQLを使用しています。そ
-
SQLが重いときに見るお気軽チューニング方法
SQLのチューニング方法 昔Qiitaで書いたものをzennにうつして、若干の修正、追加をしてみました。 ORACLEでの経験を元に書いていますがコストベースのリレーショナルデータべースなら大体共通の考え方だと思うので他にも使えると思います。 SQLのチューニングといえば比較的容易に済むインデックスをとりあえず作成する。といった対応を取られがちですが、数万レコード程度でのデータ量ではあまり効き目がなく（自分の経験則）、どちらかといえば、結合順が大幅に狂ってたりすることが原因のことが多かったりします。よって本当にインデックスがないことが原因なのか？を熟考する必要があります。（例えばID以外のフラグとかコードに単項目indexを貼ってるのもみたことがあります。怖いけど実話） また、インデックスを作りすぎるとオプティマイザが狂いやすくなって他のSQLにも悪影響を及ぼしたりするので結構熟慮して追加
-
特定の端末のみで起こる WebView プチフリーズを Tracing を利用して追った話 - SmartNews Engineering Blog
こんにちは、スマートニュース株式会社の紀平です。 SmartNews のアプリ内では、最近 WebView を使った機能を多数公開しております。そのうちの一つにショッピングチャンネルという機能があるのですが、今日はそのショッピングチャンネルのタイムセール枠で以前発生した、謎のプチフリーズ問題の調査手法をご紹介します。 tl;dr 特定の Android 端末でプチフリーズが発生した 再描画領域を減らすことで現象は改善した Chrome の Tracing 機能を利用し、ブラウザのソースコードまで参照して、ついに根本原因まで突き止めた タイムセールで起こった問題 タイムセールは、SmartNews のショッピングチャンネル内において WebView で提供されている、期間限定のお得な商品をアグリゲーションした機能です。EC サイト各社のご協力の上にご提供しております。内部は HTML5 で開
-
Maximally optimizing image loading for the web
In this post I'll outline 8 image loading optimization techniques to minimize both the bandwidth used for loading images on the web and the CPU usage for image display. I'll present them in the form of an annotated HTML example to make it easy for folks to reproduce the results. Some of these techniques are more established, while others are somewhat novel. Ideally, your favorite mechanism for pub
-
データベースを遅くするための８つの方法
はじめに Twitterのタイムラインを見ていたらバッチ系のプログラムで逐次コミットをやめて一括コミットにしたら爆速になったというのを見ました。当たり前でしょ、と思ったけど確かに知らなければ分からないよね、と思って主に初心者向けにRDBを扱うときの注意点をまとめてみました。 プログラミングテクニック的なところからテーブル設計くらいの範疇でDBチューニングとかは入ってないです。 自分の経験的にOracleをベースに書いていますが、他のRDBでも特に変わらないレベルの粒度だと思います。 大量の逐次コミットをする バッチアプリケーションでDBにデータをインサートすると言うのはかなり一般的な処理です。しかしデータ量が少ない時はともかく大量のインサートを逐次コミットで処理するとめちゃくちゃ遅くなります。数倍から十数倍遅くなることもあるので、10分程度のバッチが１時間越えに化けることもザラにあるので原
-
1000万件オーバーのレコードのデータをカジュアルに扱うための心構え - joker1007’s diary
自分が所属している会社のメンバーの教育用資料として、それなりの規模のデータを扱う時に前提として意識しておかなければいけないことをざっくりまとめたので、弊社特有の話は除外して公開用に整理してみました。 大規模データ処理、分散処理に慣れている人にとっては今更改めて言うことじゃないだろ、みたいな話ばかりだと思いますが、急激にデータスケールが増大してしまったりすると環境に開発者の意識が追い付かないこともあるかと思います。 そういったケースで参考にできるかもしれません。 弊社は基本的にAWSによって運用されているので、AWSを前提にした様なキーワードやサービス名が出てきます。後、句読点があったり無かったりしますが、ご容赦ください。 追記: 社内用の資料の編集なのでかなりハイコンテキストな内容だから誤解するかもしれませんが、これらはそもそもRDBの話ではありません。(関係無くは無いけど) 1000万オ
-
SUUMOにおける継続的なパフォーマンス改善の取り組み | Recruit Tech Blog
web vitailsはchrome extentionを使って簡単に計測できます。 広告への影響 ・リスティング広告の表示順位、ROIに影響する(出典) －Googleのメディアには、「広告と速度は密接に関連しており、ランディングページが高速であるほど、ROIが向上します」と記載がある ・chrome83から重たいディスプレイ広告をブロックする(出典) －デバイスのリソースを過度に消費する広告は、バッテリーの消耗や帯域幅の許容量の消費など、UXに悪影響を及ぼします。そのため、いずれかを満たす広告はブロックされます。 －メインスレッドを合計60秒以上使用する －メインスレッドを30秒のウィンドウで15秒以上使用する －4メガバイト以上のネットワーク帯域幅を使用 このように、パフォーマンスが重要視される中で、SUUMOがどのように継続的なパフォーマンス維持・改善活動を行なっているのか紹介して
-
SVGOMG - SVGO's Missing GUI
Global settings Show original Compare gzipped Prettify markup Multipass Number precision Transform precision Features Remove doctype Remove XML instructions Remove comments Remove <metadata> Remove xmlns Remove editor data Clean up attribute whitespace Merge styles Inline styles Minify styles Style to attributes Clean up IDs Remove raster images Remove unused defs Round/rewrite numbers Round/rewri
公式Twitter
- @HatenaBookmark
リリース、障害情報などのサービスのお知らせ
- @hatebu
最新の人気エントリーの配信
キーボードショートカット一覧
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Copyright © 2005-2025 Hatena. All Rights Reserved.
設定を変更しました