elijahmanor

import React, { Component } from "react";
import { render } from "react-dom";
import "./index.css";

class Widget extends Component {
  state = { text: "" };
  handleChange = (e) => {
    this.setState({ text: e.target.value });
  };
  render() {

kkas

Website Performance Optimization

Why should I profile the site on my phone?

• Mobile phones on the other hand are much more resource constrained: slower CPUs, less RAM and GPU memory, higher connection latencies, and so on. As a result, you should always try to profile and debug your site on mobile hardware to get a better and closer picture of how your users will experience your site on their handset.

Critical Rendering Path

https://developers.google.com/web/fundamentals/performance/critical-rendering-path/?hl=en

• is the sequence of steps that the browsers go through to convert the HTML, CSS, and JavaScript into actual pixels on the screen.
• if we can optimize this, then we can make our pages render fast, which makes for happier users.

acdlite

Demo: Coordinating async React with non-React views

tl;dr I built a demo illustrating what it might look like to add async rendering to Facebook's commenting interface, while ensuring it appears on the screen simultaneous to the server-rendered story.

A key benefit of async rendering is that large updates don't block the main thread; instead, the work is spread out and performed during idle periods using cooperative scheduling.

But once you make something async, you introduce the possibility that things may appear on the screen at separate times. Especially when you're dealing with multiple UI frameworks, as is often the case at Facebook.

How do we solve this with React?

sz332

// index.js
const path = require('path');
const Queue = require('bull');

let queue = new Queue('test queue', 'redis://192.168.99.100:6379');

queue.process(1, path.join(__dirname, './processor.js'))

queue.on('completed', function(job, result) {
    console.log("Completed: " + job.id + ", result = " + JSON.stringify(result));