Optimize long tasks | Articles | web.dev
Optimize long tasks Stay organized with collections Save and categorize content based on your preferences. You've been told "don't block the main thread" and "break up your long tasks", but what does it mean to do those things? Common advice for keeping JavaScript apps fast tends to boil down to the following advice: "Don't block the main thread." "Break up your long tasks." This is great advice,
Announcing Parcel CSS: A new CSS parser, compiler, and minifier written in Rust!
I'm very excited to announce @parcel/css, a new CSS parser, compiler, and minifier written in Rust! Check it out on GitHub, or try a live demo right in your browser. Parcel CSS has significantly better performance than existing tools, while also improving minification quality. In addition to minification, Parcel CSS handles compiling CSS modules, tree shaking, automatically adding and removing ven
JS Self-Profiling API In Practice
Nic Jansma (@nicj) is a software developer at Akamai building high-performance websites, apps and open-source tools. Table of Contents The JS Self-Profiling API What is Sampled Profiling? Downsides to Sampled Profiling API Document Policy API Shape Sample Interval Buffer Who to Profile When to Profile Specific Operations User Interactions Page Load Overhead Anatomy of a Profile Beaconing Size Comp
Chrome Devtools による フロントエンドパフォーマンスの計測
こんにちは。株式会社スタメンでFANTSのフロントエンドを担当している@0906kokiです。 今回の記事では、皆さんおなじみの Chrome Devtools にある Performance タブで、フロントエンドのパフォーマンスを計測する方法について書きたいと思います。 はじめに フロントエンドのパフォーマンス・チューニングと言うとバックエンドと比べて後回しになりがちですが、フロントエンドにアプリケーションの複雑性が寄ってきている現在、フロントエンドがボトルネックでレスポンスのレイテンシーが発生することは往々にしてあると思います。 バックエンドではユーザー数の増加や大量の同時接続に耐えられる負荷対策やパフォーマンス・チューニングが中心となりますが、フロントエンドではプロジェクトサイズの増加による JavaScript ファイルのダウンロードやスクリプティング、レンダリング速度の低下等が
Resource inlining in JavaScript frameworks | Aurora | Chrome for Developers
As part of project Aurora, Google has been working with popular web frameworks to ensure they perform well according to Core Web Vitals. Angular and Next.js have already landed font inlining, which is explained in the first part of this article. The second optimization we will cover is critical CSS inlining which is now enabled by default in Angular CLI and has a work in progress implementation in
WinBox - HTML5 window manager
WinBox is a modern HTML5 window manager for the web. Lightweight, outstanding performance, no dependencies, fully customizable, free and open source! Please feel free to support me by making a personal donation which helps me a lot to keep this project alive and also to providing all the contribution to keep WinBox.js on a professional top-end level. Thanks a lot, Thomas (ts-thomas) Load Library (
フロントエンドのパフォーマンスチューニングを俯瞰する - 30歳からのプログラミング
去年からフロントエンドのパフォーマンスについて断続的に学んでいるが、自分の頭のなかにある知識はどれも断片的で、まとまりを欠いているような感覚があった。 知識と知識がつながっておらず、各施策が何のために行われるのかも、必ずしも自明ではなかった。何となく「パフォーマンスに効果がある」と言ってしまうが、それが何を指しているのかは実は曖昧だった。 このような状態では新しい知識を得ていくのが難しいというか、効率的に行えないように思えた。議論の背景が分からないし、文脈や問題意識を上手く掴めないから。何の話をしているのかよく分からない、という状態になりがち。書かれてあることの意味は分かっても論旨を掴めているわけではないから、自分のなかに定着しない。 そこで、現時点で自分が知っていることを整理して、自分なりに分類しておくことにした。 当たり前だが、どのテクニックがどの程度有効なのかは、状況によって違う。
Real-world CSS vs. CSS-in-JS performance comparison
CSS-in-JS has taken a solid place in front-end tooling, and it seems this trend will continue in the near future. Especially in the React world. For example, out of 11492 people who participate in State of CSS survey in 2020 only 14.3% didn’t hear of Styled Components (a dominant CSS-in-JS library). And more than 40% of participants have used the library. I wanted to see an in-depth performance co
Cloudflare Pages is now Generally Available
In December, we announced the beta of Cloudflare Pages: a fast, secure, and free way for frontend developers to build, host, and collaborate on Jamstack sites. It’s been incredible to see what happens when you put a powerful tool in developers’ hands. In just a few months of beta, thousands of developers have deployed over ten thousand projects, reaching millions of people around the world. Today,
Deno Deploy | Deno
Develop locally in JavaScript or TypeScript, deploy in seconds globally and scale to billions of requests.
Supabseチームはどのようにフロントエンドの高速化に成功したのか - バンクーバーで考え中
この記事は、Supabaseチームによる記事「Making the Supabase Dashboard Supa-fast」の和訳記事です。 Supabaseのダッシュボードは、この1ヶ月でより機能が充実しました。Monacoによる強力なSQLエディタを用意しました。私たちは、データベースのAirtableのようなビューを構築し、編集が簡単になりました。 機能・性能・DX-3つの選択 特にシングルページアプリケーションでは、新しい機能を追加すると、パフォーマンスがすぐに低下することがあります。ここでは、開発者の体験(DX)を損なうことなく、アプリケーション内で良好なベースラインパフォーマンスを保証するために行ったステップを紹介します。 ベースラインを確立し、目標を設定する。 測定できないものは直せない パフォーマンスを向上させるために、容易に解決できる問題がいくつかありましたが、その前に
JavaScript performance beyond bundle size
23 Feb JavaScript performance beyond bundle size Posted February 23, 2021 by Nolan Lawson in performance, Web. 8 Comments There’s an old story about a drunk trying to find his keys in the streetlight. Why? Well, because that’s where it’s the brightest. It’s a funny story, but also relatable, because as humans we all tend to take the path of least resistance. I think we have the same problem in the
JavaScript で遅延評価を導入して起動を高速化した話
この記事は、JavaScript で Flash Player の実現を頑張った（もしくは現在進行系で頑張っている）人たちの集う Flash Advent Calendar 2020 に参加しております。 Flash Player を JavaScript で実装していた際に、現場から「起動の高速化」という難しい要求をもらった際、「遅延評価」を導入したところ大変効果がありました。今回、その遅延評価について簡単なご紹介をしたいと思います。 Flash Player 起動までのステップ 当時 Flash Player を JavaScript で提供していた際、当時のスマートフォン端末においてロード完了から最初の画面が出るまで大体 150ms くらいかかっていました。普通の Web ページであれば 150ms はロード時間の中に吸収され許容範囲になる可能性が高いのですが、当時 Flash Pl
ArmにあるというJavaScript専用命令とは何か、あるいは浮動小数点数を整数に変換する方法について - Qiita
// gcc-10 -march=armv8.3-a arm-jcvt.c という風にコンパイル #include <stdio.h> #include <math.h> #include <inttypes.h> #include <arm_acle.h> // Prototype: // int32_t __jcvt(double); #if defined(__GNUC__) __attribute__((noinline)) #endif int32_t cast_double_to_i32(double x) { return (int32_t)x; } int main(void) { printf("(int32_t)(-2.8) = %" PRId32 "\n", cast_double_to_i32(-2.8)); printf("(int32_t)1.99 = %" P
JavaScript's Memory Management Explained | Felix Gerschau
javascriptJavaScript's Memory Management ExplainedEven though the JavaScript engine manages memory for us, it's good to know what happens under the hood. Read in Chinese or Korean Most of the time, you can probably get by fine not knowing anything about memory management as a JavaScript developer. Afterall, the JavaScript engine handles this for you. At one point or another, though, you'll encount
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - grafana/k6: A modern load testing tool, using Go and JavaScript - https://k6.io
Benchmarking JavaScript Memory Usage
GitHub - privatenumber/minification-benchmarks: 🏃♂️🏃♀️🏃 JS minification benchmarks: babel-minify, esbuild, terser, uglify-js, swc, google closure compiler, tdewolff/minify
GitHub - natemoo-re/microsite: Do more with less JavaScript. Microsite is a smarter, performance-obsessed static site generator powered by Preact and Snowpack.
GitHub - jlfwong/speedscope: 🔬 A fast, interactive web-based viewer for performance profiles.
