[B! performance] wyumikokhのブックマーク

Cloud Firestore のクエリが遅くなる理由

.app 1 .dev 1 #11WeeksOfAndroid 13 #11WeeksOfAndroid Android TV 1 #Android11 3 #DevFest16 1 #DevFest17 1 #DevFest18 1 #DevFest19 1 #DevFest20 1 #DevFest21 1 #DevFest22 1 #hack4jp 3 11 weeks of Android 2 A MESSAGE FROM OUR CEO 1 A/B Testing 1 A4A 4 Accelerator 6 Accessibility 1 accuracy 1 Actions on Google 16 Activation Atlas 1 address validation API 1 Addy Osmani 1 ADK 2 AdMob 32 Ads 71 Ads API 10

wyumikokh 2022/05/11

リンク

CSS Triggers List - What Kind of Changes You Can Make

• Layout • Paint • Composite align-content Changing align-content alters the geometry of the element. That means that it may affect the position or size of other elements on the page, both of which require the browser to perform layout operations. Once those layout operations have completed any damaged pixels will need to be painted and the page must then be composited together. align-it ems Changi

wyumikokh 2021/04/14

リンク

WebWorkerをproductionで使ってる話 - 橋本商会

[ {title: "タイトル1", links: ["リンク先1", "リンク先2", "リンク先3"] }, {title, links}, {title, links} ]

wyumikokh 2020/08/06

リンク

サイトのパフォーマンス改善で重要なクリティカルレンダリングパスについて | コリス

ブラウザがページを表示する際にサーバーからHTMLのレスポンスを受け取ると、スクリーンにピクセルが描画されるまでに多くのステップが必要になります。ブラウザがページの最初のペイントを実行するために必要とするこのシーケンスは「クリティカルレンダリングパス(Critical Rendering Path)」と呼ばれます。クリティカルレンダリングパスを理解することで、サイトのパフォーマンスを改善するのに役立ちます。 Understanding the Critical Rendering Path 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。クリティカルレンダリングパス(Critical Rendering Path)には、6つの段階があります。クリティカルレンダリングパスの6つの段階 01. DOMツリーの構築

wyumikokh 2019/11/23

リンク

安定しないフレームレートに効果的！ WebGLのカクつき対策まとめ（Three.js編） - ICS MEDIA

ウェブコンテンツで3Dを扱える技術としてWebGLがあります。WebGLを利用すればブラウザ上で華やかな表現を実現できます。しかし、コンテンツの内容によっては処理負荷が高くなり、カクつきが生じる場合があります。カクつきはコンテンツの見栄えを損なわせ、作り手の想定とは異なる体験を与えてしまう可能性があります。そのような場合の対策として、本記事ではWebGLのカクつき解消方法をいくつか紹介します。解説用にカクつきの起こりやすい高負荷なデモを用意しました。本記事で紹介するカクつき解消方法はこのデモで実際に体験できるので、読み進めながら同時に触れておくとイメージがしやすいと思います。デモを別ウインドウで再生するソースコードを確認する ※このデモはThree.js(r141)とTypeScript 4.7とwebpack 5で作成しました。開発環境の構築は記事「最新版TypeScript+We

wyumikokh 2019/02/13

リンク

https://developers.google.com/web/tools/setup/workspace/setup-devtools

Chrome DevToolsChrome DevTools is a set of web developer tools built directly into the Google Chrome browser.

wyumikokh 2018/02/26

performance

リンク

ブラウザ動作の理解－リフローとリペイント及びその最適化 | ゆっくりと…

ブラウザ動作の理解の2回目です。今回はレンダリング・ツリーの更新に絡む、リフロー（要素の大きさ、位置などの再計算）とリペイント（描画）に関する解説を、「High Performance Web Pages – 20 new best practices」の著者 Stoyan Stefanov のブログエントリーから「Rendering: repaint, reflow/relayout, restyle」を翻訳してお届けします。同記事は、前半がリフローとリペイントに関する解説と、表示レスポンスを向上させるためのスタイル変更に関する Tips、後半は dynaTrace AJAX Edition と SpeedTracer を使った IE および Chrome の描画パフォーマンスの計測の解説で構成されてる、長い記事となっています。今回はその前半部分をご紹介します。レンダ

wyumikokh 2018/02/26

performance

リンク

Learn web development | web.dev

Stay organized with collections Save and categorize content based on your preferences. Explore our growing collection of courses on key web design and development subjects. An industry expert has written each course, helped by members of the Chrome team. Follow the modules sequentially, or dip into the topics you most want to learn about.