Tag Archives: performance

45% Faster React Stateless (Functional) Components

When using Stateless Components throughout your React app, the lifecycle events (componentWillMount, componentDidMount, etc.) are still executed. Developer Philippe Lehoux found a way to bypass these, resulting in a 45% speed improvement: What if we could skip React internals for … Continue reading

Elsewhere , , , Leave a comment

Efficiently render large lists and tabular data with react-virtualized

Just like Infinity.js, but then for React. The list is windowed (or “virtualized”) meaning that only the visible rows are rendered. Less DOM nodes = better performance 🙂 Also works with rows that have different heights, something not quite common … Continue reading

Elsewhere , , Leave a comment

Understanding the Critical Rendering Path

When a browser receives the HTML response for a page from the server, there are a lot of steps to be taken before pixels are drawn on the screen. This sequence the browsers needs to run through for the initial … Continue reading

Elsewhere , , , Leave a comment

JavaScript Start-up Performance

As web developers, we know how easy it is to end up with web page bloat. But loading a webpage is much more than shipping bytes down the wire. Once the browser has downloaded our page’s scripts it then has … Continue reading

Elsewhere , , Leave a comment

Marky, a high-resolution JavaScript timer

Marky, by Nolan Lawson: JavaScript timer based on performance.mark() and performance.measure(), providing high-resolution timings as well as nice Dev Tools visualizations. For browsers that don’t support performance.mark(), it falls back to performance.now() or Date.now(). In Node, it uses process.hrtime(). The … Continue reading

Elsewhere , , , , Leave a comment

10 things I learned making the fastest site in the world

Great writeup by David Gilbertson on creating this super fast loading website. Try not to make a slow site Do mobile first. Like, really do it. Be a benchmark hussy Client Side Rendering is expensive Don’t server-render HTML Inline stuff, … Continue reading

Elsewhere , , Leave a comment

DevTools Timeline Viewer

DevTools Timeline Viewer lets you share and view DevTools Timeline traces online, in the browser. Handy if you want to share a Timeline trace with someone to help you debugging. DevTools Timeline Viewer → DevTools Timeline Viewer Example →

Elsewhere , , , Leave a comment

Real–world HTTP/2: 400gb of images per day

Michael Mifsud of 99designs: We began a small-scale rollout for static assets earlier this year. After building confidence in our new infrastructure, we began transitioning our static assets to HTTP/2. Surprisingly, some sections of our platform felt noticeably slower. This … Continue reading

Elsewhere , , Leave a comment

CSS Containment

The new CSS Containment property lets developers limit the scope of the browser’s styles, layout and paint work. Yes, you – as a developer – gain control over (parts of) the pixel pipeline. Available in Chrome 52+ and Opera 40+ … Continue reading

Elsewhere , , , Leave a comment

How to animate “box-shadow” with silky smooth performance

How do you animate the box-shadow property in CSS without causing re-paints on every frame, and heavily impacting the performance of your page? Short answer: you don’t. Animating a change of box-shadow will hurt performance. There’s an easy way of … Continue reading

Elsewhere , , Leave a comment