Great insightful post by Addy Osmani on how the inclusion of a tad of JavaScript affects a website. When compared an equally sized JPG, a tad of JS has a higher impact on it due to the fact that JS needs to be parsed/compiled and executed: The Cost Of JavaScript →
Tag Archives: performance
XCode 9.0: Fixing a Slow/Unresponsive iOS Simulator
Whilst initially implementing react-native-maps into a project I noticed that the iOS Simulator didn’t quite like it. Whenever the Mapview was visible on the screen, the Simulator was maxing out on something. Turns out the OpenGLES.framework that comes with XCode 9.0 – and not react-native-maps itself – is the culprit. That version is buggy and …
Continue reading “XCode 9.0: Fixing a Slow/Unresponsive iOS Simulator”
Optimize React Performance
Good advice every React dev should be aware of: React is known to be blazingly fast with its Virtual DOM implementation. However, even with React’s built-in performance, there are instances when the UI can begin to feel sluggish. The primary culprit for poor performance is generating too many renders and reconciliations. We’ll cover 4 techniques …
Essential Image Optimization
Essential Image Optimization is an free and online eBook by Addy Osmani: Images take up massive amounts of internet bandwidth because they often have large file sizes. According to the HTTP Archive, 60% of the data transferred to fetch a web page is images composed of JPEGs, PNGs and GIFs. As of July 2017, images …
gpu.js – GPU Accelerated JavaScript
Amazing: gpu.js is a JavaScript library for GPGPU (General purpose computing on GPUs) in the browser. gpu.js will automatically compile specially written JavaScript functions into shader language and run them on the GPU using the WebGL API. In case WebGL is not available, the functions will still run in regular JavaScript. Only a subset of …
Detect unnecessary renders in React with why-did-you-update
why-did-you-update is a library that hooks into React and detects potentially unnecessary component renders. It detects when a component’s render method is called despite its props their values are the same. Installation per npm, of course: npm install –save-dev why-did-you-update No need to adjust all your components either, why-did-you-update works by patching React itself: import …
Continue reading “Detect unnecessary renders in React with why-did-you-update“
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 these components? Instead of mounting them as components, let’s just call them as what they …
Continue reading “45% Faster React Stateless (Functional) Components”
Efficiently render large lists and tabular data with react-virtualized
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 paint of the page is called the “Critical Rendering Path”. Good and short writeup on …
Continue reading “Understanding the Critical Rendering Path”
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 to parse, interpret & run them. In this post, we’ll dive into this phase for …