> For the complete documentation index, see [llms.txt](https://gzqsjtu.gitbook.io/workspace/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://gzqsjtu.gitbook.io/workspace/web-network-http/performance-improvement.md).

# Performance Optimization

## 1 Use CDN.&#x20;

Like third party library, react, google earth.&#x20;

Async loading

DNS prefetch

## 2 Picture:

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

#### &#x20;HTTP2 next chapter

![](/files/-MJzsPMXvLhNz1NwylxN)

#### Use cache

#### IconFont

## 3. Compression

gzip: The gzip format is used in [HTTP compression](https://en.wikipedia.org/wiki/HTTP_compression), a technique used to speed up the sending of [HTML](https://en.wikipedia.org/wiki/HTML) and other content on the [World Wide Web](https://en.wikipedia.org/wiki/World_Wide_Web). It is one of the three standard formats for HTTP compression as specified in [RFC 2616](https://tools.ietf.org/html/rfc2616)

## 4: (Loading) Split Bundles

Use webpack **DllPlugin** to split big js file. <https://webpack.js.org/plugins/dll-plugin/>

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

\<link rel="preload">  <https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content>

The `preload` value of the [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) element's [`rel`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#attr-rel) attribute lets you declare fetch requests in the HTML's [`<head>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head), specifying resources that your page will need very soon, which you want to start loading early in the page lifecycle, before browsers' main rendering machinery kicks in.

## 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

![](/files/-MIH6MyBJxbHJOTNlBOE)

## React Avoid Async in componentWillMount()&#x20;

## 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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://gzqsjtu.gitbook.io/workspace/web-network-http/performance-improvement.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.