Performance Optimization

1. HTTP request ... 2. JS loading(React)

PreviousPerformance Optimization NextHTTP/2 & SPDY

Last updated 2 years ago

Was this helpful?

Performance Optimization

1. HTTP request ... 2. JS loading(React)

1 Use CDN.

Like third party library, react, google earth.

Async loading

DNS prefetch

2 Picture:

Use google WebP, SVG, or jpg/png. Indexed Color. Direct Color. Bitmap

HTTP2 next chapter

Use cache

IconFont

3. Compression

4: (Loading) Split Bundles

Split third party dependencies and your code.

third party library: try to use CDN for not updated code.

Code: split by : first screen / calls times / service and public module

Asynchronous loading

First loading the core page.

Preload

Prerender

link rel="prerender" href="http://example.com"

File is pre render in the backend.

Avoid inline CSS

import CSS

React Memoization

Use React.Memo:

export default React.memo((props) => { return ( {props.value} ) });

React useMemo

only {props.item} changes then someProp will recalculate.

function Component(props) { const someProp = useMemo(() => heavyCalculation(props.item), [props.item]); return }

React.PureComponent , shouldComponentUpdate

PureComponent implemements shouldComponentUpdate() with a shallow prop and state comparison

const styles = { margin: 0 }; function Component(props) { const aProp = { someProp: 'someValue' } return }

React lazy loading

use suspense and lazy

Use React Fragments

React Avoid Async in componentWillMount()

React constructor bind()

this.functions() = this.functions().bind(this)

Bind the function in the constructor. Not in line binding.

Use conditional rendering

Avoid output data/ setState in render();

Create ErrorBoundaries

import React from 'react';

export class ErrorBoundaries extends React.Component { constructor(props) { super(props); this.state = { hasErrors: false } }

componentDidCatch(error, info) {
    console.dir("Component Did Catch Error");
}

static getDerivedStateFromError(error) {
    console.dir("Get Derived State From Error");
    return {
        hasErrors: true
    }
}

render() {

    if(this.state.hasErrors === true) {
        return <div>This is a Error</div>
    }

    return <div><ShowData name="Mayank" /></div>
}


export class ShowData extends React.Component {
    constructor() {    
        super();
        this.state = {
            name: "Mayank"
        }
    }
    
    changeData = () => {
       this.setState({
           name: "Anshul"
       })
    }
    render() {
    
        if(this.state.name === "Anshul") {
            throw new Error("Sample Error")
        }
    
        return (
            <div>
                <b>This is the Child Component {this.state.name}</b>
                <input type="button" onClick={this.changeData} value="Click To Throw Error" />
            </div>
        )
    }
}

Throttling and debouncing

CSS animation instead of javascript animation

use gzip compress

use web workers