How we made JSON.stringify more than twice as fast · V8
JSON.stringify is a core JavaScript function for serializing data. Its performance directly affects common operations across the web, from serializing data for a network request to saving data to localStorage. A faster JSON.stringify translates to quicker page interactions and more responsive applications. That’s why we’re excited to share that a recent engineering effort has made JSON.stringify i
How We Reduced CKEditor’s Bundle Size by 40% | CKEditor
In this article, we’ll show how we cut CKEditor 5’s bundle size by 40% through tree-shaking and bundle size optimization techniques and share tricks you can use to slim down your own JavaScript libraries. We’ll also walk through the tools and processes we used to achieve this, measure improvements, and catch regressions. As any software library author will tell you, building and maintaining is har
Giving V8 a Heads-Up: Faster JavaScript Startup with Explicit Compile Hints · V8
Getting JavaScript running fast is key for a responsive web app. Even with V8's advanced optimizations, parsing and compiling critical JavaScript during startup can still create performance bottlenecks. Knowing which JavaScript functions to compile during the initial script compilation can speed up web page loading. When processing a script loaded from the network, V8 has to choose for each functi
Turbocharging V8 with mutable heap numbers · V8
At V8, we're constantly striving to improve JavaScript performance. As part of this effort, we recently revisited the JetStream2 benchmark suite to eliminate performance cliffs. This post details a specific optimization we made that yielded a significant 2.5x improvement in the async-fs benchmark, contributing to a noticeable boost in the overall score. The optimization was inspired by the benchma
How To Improve INP: Yield Patterns
In the following, we’ll go over different patterns we can use to yield to the main thread to improve the Interaction-to-Next-Paint (INP). Knowing how to improve INP is more important than ever, as it’s a metric reflecting User Experience (UX) and has recently been added to the Core Web Vitals (CWVs) – which are used by Google’s search ranking. We’ll take a look at which part of INP we’re targettin
How fast is javascript? Simulating 20,000,000 particles
How fast is javascript? Simulating 20,000,000 particles The challenge, simulate 1,000,000 particles in plain javascript at 60 fps on a phone using only the cpu. Let's go. Ok, this is not a particularly difficult challenge if you did all the work on a gpu but the rule of the challenge is to use the CPU only or as much as possible and to stay in js land so no wasm. I know what you are thinking. This
Comprehensive guide to JavaScript performance analysis using Chrome DevTools
Comprehensive guide to JavaScript performance analysis using Chrome DevTools Let's see how to navigate the Chrome Devtools Performance tab to effectively analyse and improve the performance of your JavaScript while avoiding common errors. Our use case will be improving the rendering FPS of a real-world canvas library. A few weeks ago a colleague of mine and I were looking at the canvas engine comp
Object Structure in JavaScript Engines
Object Structure in JavaScript EnginesFrom a developer's perspective, objects in JavaScript are quite flexible and understandable. We can add, remove, and modify object properties on our own. However, few people think about how objects are stored in memory and processed by JS engines. Can a developer's actions, directly or indirectly, impact performance and memory consumption? Let's try to delve i
JavaScript engine fundamentals: Shapes and Inline Caches · Mathias Bynens
This article describes some key fundamentals that are common to all JavaScript engines — and not just V8, the engine the authors (Benedikt and Mathias) work on. As a JavaScript developer, having a deeper understanding of how JavaScript engines work helps you reason about the performance characteristics of your code. Note: If you prefer watching a presentation over reading articles, then enjoy the
WebPerf Snippets – Nextra
WebPerf Snippets A curated list of snippets to get Web Performance metrics to use in the browser console or as snippets on Chrome DevTools (opens in a new tab). How to use Requirements All the snippets are tested in Google Chrome (opens in a new tab) browser, so use this browser to garantize the correct funcionality. Run in the browser console You can copy any snippet and then paste in the browser
Speeding up the JavaScript ecosystem - The barrel file debacle
Let's imagine you are working on a big project with many files. You add a new file to work on a new feature and import a function from another directory into your code. import { foo } from "./some/other-file"; export function myCoolCode() { // Pretend that this is super smart code :) const result = foo(); return result; } Excited about finishing your feature, you run the code and realize that it t
Introducing Deopt Explorer - TypeScript
Over the past few months, during the lead-up to the TypeScript 5.0 beta, our team spent a good portion of our time looking for ways to improve the performance of our compiler so that your projects build faster. One of the ways we improved was by looking into an oft overlooked aspect of many JavaScript VMs: inline caching. A Brief Primer on Inline Caching Inline caching is an optimization often use
Using inline JavaScript modules to prevent CSS blockage
Stoyan (@stoyanstefanov) is a former Facebook and Yahoo! engineer, writer ("JavaScript Patterns", "React: Up and Running"), speaker (JSConf, Velocity, Fronteers), toolmaker (Smush.it, YSlow 2.0) and a guitar hero wannabe. Problem As the previous post puts it: A slow CSS prevents the JavaScript following it from executing. And in addition, when the JS following the CSS is inline, it’s naturally syn
Optimize long tasks | Articles | web.dev
Published: September 30, 2022, Last updated: December 19, 2024 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, but what work does it involve? Shipping less JavaScript is good, but does that automatically equate to more responsive user interfaces? Maybe, but maybe not. To unde
Zhenghao's site
When You Should Prefer Map Over Object In JavaScript#javascript See discussions on reddit In JavaScript, objects are handy. They allow us to easily group multiple pieces of data together. After ES6, we got a new addition to the language - Map. In a lot of aspects, it seems like a more capable Object with a somewhat clumsy interface. However, most people still reach for objects when they need a has
Don't attach tooltips to document.body
TL;DR Instead of attaching tooltips directly to document.body, attach them to a predefined div in document.body. BAD <body> <!-- temporary div, vanishes when tooltips vanishes --> <div>my tooltip</div> <body> GOOD <body> <!-- this div stays forever, just for attaching tooltips --> <div id="tooltips-container"> <!-- temporary div, vanishes when tooltips vanishes --> <div>my tooltip</div> </div> <bo
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
How we made our rich text editor load faster - Part 1 | CKEditor
How we tamed Node.js event loop lag: a deepdive | Trigger.dev
Style scoping versus shadow DOM: which is fastest?
Understanding why our build got 15x slower with Webpack 5 | Tines
